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 suffers from a disability, websites that aren’t accessible could exclude millions of people from getting the information they need.
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. But in addition to being inclusive and good practice, there are also legal reasons why it is essential to design a website with accessibility in mind. 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.
Designing accessible websites – guidelines
A good place for designers to start in 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 – which means clear.
- Robust – which means 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 colour for meaning, and considering colour 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.
If you’re worried about your existing website, going through the guidelines above should give you an idea whether your site is compliant or not. 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.
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 for 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.
