Designing for Accessibility

Note: the content below has been gathered from several websites and has been edited for clarity.

The Importance of Accessible Websites

Accessible websites are no longer optional; they’re a must-have. You probably take being able to surf the web and easily browse content for granted. Most people do. But people with disabilities don’t have that luxury. If you have a visual, hearing, motor or cognitive impairment, navigating the web can be at best difficult, and at worst impossible. And since, according to Web AIM, some 20% of the world’s population has a disability, websites that aren’t accessible could exclude millions of people from getting the information they need.

The mission of W3C is to “make the web available to all people, whatever their hardware, software, network infrastructure, native language, culture, geographical location, or physical or mental ability.”

By ensuring all websites are accessible to all, the internet becomes fair and inclusive, allowing everyone access to the content, information, and opportunities that the web provides. As Web accessibility experts, Level argues that “Everyone benefits from improved web accessibility”.

Why you need to design accessible websites

Imagine what would happen if you:

• Couldn’t use a mouse?
• Couldn’t hear a video?
• Couldn’t see text and graphics?
• Couldn’t focus on what’s on the page?

That’s just a snapshot of the issues that disabled web users face, and they are one reason why it is essential to make your website accessible. Disabled users who find it difficult to access a site’s content may shift allegiance to a more accessible site.

Ethical

The first, and key argument for accessibility, takes an ethical standpoint.

The World Wide Web Consortium (W3C) is an international community – it’s guiding vision is to ‘lead the Web to its full potential’. As in the physical world, the W3C is working towards a fair and inclusive web for all, whatever your individual situation or needs.

When the web is fully accessible, barriers that prevent people with disabilities from contributing to, or joining in with, the physical world are removed. Full web accessibility also ensures that everyone has the same opportunities and are treated equally online – something that we should all be striving toward!

Business

Many countries have strengthened their disability laws, and that means failure to comply could be expensive. For example, recent changes to laws in Canada mean that a corporation without an accessible website could face daily fines of $100,000, with company directors also being fined to the tune of $50,000 per day. Since no one wants to take that kind of financial hit, designing accessible websites makes sound business sense. And since greater accessibility can benefit all users – not just those with impairments – designers need to consider how to include this in their web designs.

On average, 20% of all people who visit your website will have issues accessing your content—if your site is inaccessible. That means you have missed out on a lot of potential customers.

Accessible websites also perform better across the board. By using universal design strategies (which ensure everyone can have access), your site becomes more user friendly to all, not just those with disabilities.

This will ultimately improve your site’s performance, whether this is communicating messages and information more clearly, streamlining site navigation, collecting leads, or generating revenue.

Legal

Lastly, there is a very strong legal argument for accessibility. If your website isn’t fully accessible, then it could be considered discriminatory towards those with disabilities. Depending on your country and state, and where your audience is located, this could leave you open to lawsuits.

You will find that laws on accessible websites differ greatly. For example, Government and public sector websites have to adhere to much stricter accessibility laws than some other industries. However, it is crucial that you research accessibility laws and guidelines in your country and for your business sector to ensure that your site is complying with regulations, and make the necessary changes if not.

Designing accessible websites – guidelines

A good place for designers to start when thinking about designing for accessibility is with the World Wide Web Consortium (W3C). In order to minimize the effects of disability, the W3C has produced guidelines on web accessibility, known as the Web Content Accessibility Guidelines (WCAG) 2.0. These guidelines also form the basis of most countries’ own laws on web accessibility. They cover four areas, which designers must consider as they attempt to make websites accessible. According to WCAG, web content must be:

• Perceivable – This relates to helping people to see and hear web content, whether in the browser or using screen readers and other assistive technologies.
• Operable – Giving disabled web users the ability to interact with website content using a keyboard, mouse, or other helping device.
• Understandable – Clear
• Robust – Web content can be accessed by a wide range of technologies.

Addressing accessibility in web design

The WCAG document outlines several areas that web designers can address in order to meet levels of compliance from A (the lowest) to AAA (the highest). Here are some of them:

• Including alternative (alt) text to describe non-textual content, such as images, which is useful for screen readers.
• Structuring documents so they can be easily navigated both by keyboard and mouse.
• Using the proper markup for tables so that screen readers can understand them.
• Making it easy for people to fill out forms and understand them by including the correct labels for all form elements. It’s also good practice to avoid putting time limits on form filling.
• Using links that make sense and are descriptive (in other words, avoiding “click here”).
• Structuring pages so disabled users can easily move around the screen and avoid certain elements as needed.
• Making sure that the page design does not rely on color for meaning and considering color contrasts for visually impaired web users.
• Keeping content clear and easy to understand and displayed using easily readable fonts and appropriate heading styles.
• Using semantic markup to identify different content elements.

Designers can also use CSS to separate content from presentation, make text resizing easy, avoid blinking images and CAPTCHAs (or at least provide audio versions or alternatives), and provide HTML versions of PDF documents, which can be hard to read and navigate.

• Use Tables for Tabular Data, Not for Layout—Tables used for layout purposes can cause confusion for visitors using screen readers. Limit table use to data only and follow these W3C Table Guidelines.
• Use an Accessible Form Builder—It is essential that the forms on your website are accessible to all your visitors, enabling users to get in contact, sign up for a service, purchase products, and any other action that includes entering their data and submitting a form. Using a form builder that has the functionality to allow you to create accessible forms is a must for all websites.

If you’re worried about your existing website, going through the guidelines above should give you an idea of whether or not your site is compliant. You can also try the web accessibility evaluation tool from WebAIM, or try another free web-based accessibility checker. These tools will guide you to the areas you need to address. You can also try using an online text-only browser to see how your website would appear to a screen reader. It also may be prudent to hire a firm that caters to helping companies make their website accessible to people with disabilities. One such company is Weco. They employ people with disabilities who are experts on WCAG guidelines and various laws on accessibility world-wide. Weco will examine the code of your website and provide ways to resolve accessibility issues at the code level.

The role of responsive and mobile design

One piece of good news for web designers thinking about creating accessible websites is that responsive web design can help. This type of design is recommended as a device-agnostic way to cater to users, whether using desktop PCs or mobile devices, and it can work well for web users with disabilities, too. An article from SSB Bart Group points out that the use of media queries, flexible layouts and media, and the establishment of the viewport, can help web designers meet the needs of all web users. For example,

the use of a grid-based layout, which is common in responsive web design, means that web users can easily read and navigate web content on everything from large desktop monitors to small cell phone screens without spending too much time on scrolling or resizing. This can be very helpful for visually impaired users.

Many disabled users have issues with fixed width content and the need to resize tables. Again, a grid layout backed by CSS can help address this issue.

Techniques commonly used for mobile device users can also benefit disabled users. For example, those using assistive technology can benefit from progressive enhancement, while progressive disclosure works for those with cognitive disabilities.

Of course, not every responsive website is accessible, but combining responsive and mobile-first design with an awareness of accessibility guidelines can help your business provide a more inclusive web experience that works for all users.

A Note on Accessibility Overlays

While I don’t have time to go into this topic at length, I would like to warn against using so-called accessibility overlays. These promise accessibility through AI, but instead make it difficult for people with disabilities to actually use the website as intended. This is because the overlay creates an interface that then needs to be learned enough to use. So, the user not only needs to learn your website, but the overlay interface as well. The overlay still doesn’t deliver the promise of accessibility once learned. Below are a few links to explore this topic in case you have questions.

Should I Use An Accessibility Overlay?

Overlay Fact Sheet

The Dangerous Path of the Accessibility Overlay – Joe … (joedolson.com)

AccessiByeBye

Accessibility Feedback

It might be helpful to ask for feedback from your customers with disabilities regarding the accessibility and usability of your website. If you receive feedback that your website is not accessible, further investigation would be in order. It could be that your site is lacking in accessibility. However, it could also be that an individual would benefit from further technology training. There are a number of resources that would be helpful in such situations, such as the APH Directory of Services, which would connect an individual with rehabilitation services in their area. Companies that provide access technology training, such as Web Friendly Help, are another option.

See below for further web accessibility resources, and thank you for taking this issue seriously. Your customers with disabilities truly thank you!

Resources

WCAG 2.0

WebAIM

Google – Accessibility Resources for Developers and Publishers

Accessibility Guidelines for the Web Designer – Lighthouse

Weco: We’re accessibility experts who live with the disabilities you’re trying to accommodate. Let us help you bring real-life accessibility, and legal compliance, to your projects.

Qapla