How Can You Design an Accessible Web Site?
Every Web site has distinct components that are responsible for factors such as approachability, appearance, and most importantly, usability. There are two aspects to designing an accessible Web site:
- Appearance—How the Web site looks and how users with disabilities can perceive and read it properly.
- Usability—How the Web site has been developed, enabling any user with disabilities to use it.
Let’s consider seven accessibility best practices that cover both of these aspects of designing an accessible Web site.
1. Color Contrast and Font Size
Some elderly users and users with low vision or cognitive and learning disabilities are more dependent on your site having a clear layout and design. It can be difficult for them to visualize and perceive a Web site’s design elements and fonts. According to the WebAIM accessibility evaluation in February 2022, this is the most common error that developers of Web sites make. In evaluating Web site’s home pages, they discovered that 83.9% made this error.
To improve the accessibility of your Web site and make it convenient for disabled users, without compromising your site’s design, ensure that you observe the following guidelines.
Provide sufficient contrast between foreground and background.
Ideally, you should maintain a contrast ratio of at least 4.5:1 to ensure the clear visual representation of text and images, as demonstrated in Figure 2.
Use solid backgrounds.
It is difficult to read text that has a busy background, as shown in Figure 3, especially when it does not have sufficient contrast. Selecting a solid background color can make reading more convenient.
Use text or other visual cues as well as colors.
Ensure that the information you convey through the use of color is also communicated through text. Users who are unable to visualize colors can look, listen, or even touch text cues, as Figure 4 demonstrates.
Avoid using font styles to convey meaning.
Some particular styles are considered inaccessible. Here are some important issues to remember when choosing typefaces:
- character ambiguity—Avoid typefaces whose characters are too similar to one another. This can cause ambiguity in character recognition, decreasing the understandability of your text, as Figure 5 shows.
- too many text styles—Limit the number of typefaces, fonts, and font variations that you use in your text. Too many changes in font styles require cognitive effort to process. Figure 6 shows an extreme example.
- inconsistent character spacing and font weight—Characters that are very close to one another and, thus, too dense can negatively affect their perceivability and readability, which can confuse users.
Image source: WebAIM
Image source: WebAIM
Image source: WebAIM
2. Implementing Alt Tags for Images
An alt tag explains what an image is about. Without an alt tag, many screen readers just read the image’s file name. For example, if your media file’s name were AB654321.jpg, the screen reader would just read “A B 6 5 4 3 2 1 dot j p g.” This text does not provide any useful information about the image to users who are accessing it through a screen reader. When adding an image to an HTML file, you could easily specify alt text for the image by adding [ALT=”value goes here”]
within the tag. Figure 8 and the subsequent sample code provide an appetizing example.
An okay example:
A better example:
alt=”Chocolate brownie with strawberries on the side”/>
Modern content-management systems (CMSs) such as WordPress and others let you define alt text using their visual tools, so do not require you to add any HTML code. Figure 9 shows an example of such as CMS.
3. Designing Focus States
Focus states let disabled people who can use a keyboard navigate a Web site using the Tab key. The appearance of a link selected by using the Tab key lets the user know exactly where he is on the Web site.
Sometimes designers neglect to specify the focus state when designing a site because people who use a mouse or touch pad for navigation rarely use focus. However, it is important to implement focus to make a Web site accessible to keyboard-only users.
Using CSS, HTML, and XHTML, you can easily change the presentation of links and other interactive elements by using focus to highlight them. For example, you might use the CSS shown in the following sample code to implement focus, as shown in Figure 10.
4. Labeling Fields
There is a huge difference between a label and placeholder text. Some UX designers use placeholder text inside form fields to make the design of a form more minimalistic. But people who use screen readers to read Web sites won’t know the purpose of such a form field because screen readers don’t read placeholder text.
Because Web site readers can read only the form labels, they are very important for people who can’t otherwise see or hear what field they are on. To add a label instead, replace this code:
With the following code, which displays the focus state shown in Figure 11.
5. Providing Explicit Navigation
Web-site navigation is an important aspect of Web development because the navigation system portrays the overall user experience of the Web site. A Web-site developer should be sure to develop a Web site using correct markup that determines how the Web site can guide the user to a better user experience. This requires that repeated navigation components be in the same relative order each time they appear on a Web site to prevent users from becoming distracted by inconsistencies in the appearance and behavior of the site, as on the site shown in Figure 12.
6. Creating Landmarks
Some elements or distinct groupings of information function as hotspots, or landmarks, on Web pages. Anyone using a screen reader can jump to these elements to navigate a Web page. Such landmarks make it easier to scan and understand the structure of a page through the styling of headings. Reducing clutter and using whitespace and proximity can make the relationships between blocks of content more apparent. Some important landmarks include the following HTML elements:
As Figure 13 shows, the use of landmarks is beneficial when a Web page is full of links and anchors. Otherwise, moving around on a page requires tabbing. A Web page should instead use these key elements to facilitate navigation because it is convenient for screen readers to locate them. Therefore, it is important to consider the role of every header between
Image source: 12:54, 12:59
7. Using ARIA
Sometimes Web developers face a situation in which there is no existing element for what they are trying to build—such as a tab element or an expandable tree widget in HTML. This requires that they build custom controls. This is the sort of scenario in which ARIA (Accessible Rich Internet Applications) comes into play.
ARIA allows you to add semantics to a control, actually changing what a screen reader announces to users. Understand that ARIA does not add completely new behavior, but it does let you fill in the missing pieces to build an accessibility tree. Let’s look at an example in which ARIA makes a difference to Web site accessibility:
The following HTML code implements a check-box behavior that a screen reader can read as “group”.
Adding this attribute enables the screen reader to read “checked checkbox”. This makes a huge difference for users who are relying on the use of a screen reader.
All of these modifications lead to one key outcome: Web-site accessibility.
Tools for Checking Your Site’s Accessibility
Since Web-site accessibility is a subset of Web-site usability, it is important to check whether your Web site meets all of these standards. Let’s look at some tools that you can use to check the accessibility of your Web site thoroughly and make sure that everyone can enjoy your content.
WAVE: Web Accessibility Evaluation Tool
WAVE, which originally launched in 2001, is a free community service from WebAIM that is shown in Figure 14. It strictly follows Web Content Accessibility Guidelines (WCAG) to check Web accessibility and identify any errors that are hindering a site’s accessibility for disabled users.
If you are looking for a tool that is handy for checking password-protected, locally hosted, or highly dynamic page testing, you can directly check your Web site in your Web browser—Chrome, Firefox, or Edge.
Pa11y is a developer-focused accessibility-testing resource and is shown in Figure 15. It provides several tools that handle accessibility testing for your Web site, including a command-line user interface, a test for multiple URLs, and a smart dashboard. This tool requires a developer to set it up, but even if you are not a developer, it provides a useful alternative. Koa11y is a desktop app that runs the pa11y command-line interface under the hood. It is available for macOS, Windows, and Linux.
Axe is a developer-focused tool that is shown in Figure 16, with an extension that you can add to the developer tools in your browser. Being an integral part of Deque Systems Inc., axe Devtools is one of the most powerful, accurate accessibility toolkits and claims to let you achieve at least 80% coverage of issues during Web development.
Other Accessibility Tools
Additional tools that facilitate Web-site accessibility for particular disabilities include the following:
- Funkify—Addresses vision impairments, trembling, dyslexia, hyperactivity, and keyboard-only control.
- Color Safe—Tests for color-deficient vision.
- Harding FPA—Handles accessibility testing for seizure disorders and migraine affected or light-sensitive users.
- PEAT—For light-sensitive and epileptic users.
To make your Web site accessible for all of your users, it is critical that you be aware that some users operate a variety of supplementary devices or tools such as screen magnifiers or screen readers to access your Web site. Understanding how these tools work makes accessible Web-site development much easier.
From choosing accessible font styles to making navigation easy for everyone, there is a lot to consider in building a Web site that is accessible to all. Get started now to ensure that your Web site is accessibility compliant and mitigate your organization’s risk of being hit with a lawsuit.