Free Accessibility testing tool

Use semantic elements

This is one of the best ways to make a website accessible and user-friendly, but also one that’s often ignored. Semantic HTML elements (such as <header>, <footer>, <main>) clearly communicate their purpose and the type of content within them. Using semantic elements enables users of screen readers to more easily navigate through your content.

Enable content to be accessed through the keyboard alone

In some cases, users may be unable to use a mouse or trackpad. Instead, they may only be able to access content through the use of a keyboard or alternative input device (such as a head stick). These users rely on the “tab” and “arrow” keys to navigate through the webpage.

• Ensure all content can be accessed with the keyboard alone, in a logical way that matches the visual structure
• Provide keyboard shortcuts wherever possible
• Break up large portions of text
• Avoid using elements that only activate on mouse hover.

Provide “alt” text for non-decorative images

For users who are unable to see images, it’s important to provide an alternative way for them to understand the information in the visuals. To aid these users:

• Add alt text (alternative text) to images so screen reader users can perceive the information relayed by the image
• Make sure the alt text is detailed and descriptive
• If possible try to avoid using images that contain text. If an image does contain text, include it in the alt text.
• If the image conveys complex information such as graphs or charts, include a link to a separate page with a text description of the same.

Include descriptive link names

Screen reader users can sometimes skip over content and scan for links. In these cases, phrases like “learn more” or “click here” do not provide any context or information about what the link relates to or provides. To aid these users, give them more context by using descriptive link text, like “learn more about how to make web pages accessible” or “click here to register for XYZ”. In places where this is not possible, the aria-label attribute can be used to aid screen reader users by adding context. And image links need alt text that describes the link, otherwise, screen readers read the link’s file name.

Use color inclusively

Avoid solely using colors to deliver information. The most common color deficiency is the inability to distinguish between red and green. For example, using only red and green to indicate errors or correctness in a form field would be unhelpful. However, the use of color is useful to people with learning disabilities, therefore ensure you use both color and other visual cues, to benefit both sets of users. Additionally, use optimal color contrast between the background and text colors, to help low vision users.

There are plenty of tools around that can help you analyze the contrast between your foreground and background colors.

Design inclusive forms

Online forms can be daunting for all of us, even with full use of vision and motor abilities. Designing accessible forms can significantly improve a user’s experience. Some points to remember when implementing forms are:

• Clearly indicate the field with focus and make it stand out from the background.
• Tabbing using the keyboard should allow for logical navigation through all the form fields as well as the “Submit” button at the end.
• Provide a clear relationship between labels and their corresponding fields, because screen readers sometimes guess labels if they aren’t properly associated with fields, and this can produce undesirable results.
• Avoid using only placeholders as labels, especially in autocomplete forms.
• Placeholders are hidden from screen readers and are also not good for color contrast.
• Make sure aria-labels match the visual labels on buttons.
• Avoid using captcha, but if needed, use text-based captcha.
• Provide the ability to extend the time limits to complete forms. Include a confirmation page that allows users to go back and edit the form if required.

Make text accessible

Tables should only be used to provide tabular content, because using tables to structure a page can be confusing for screen reader users. Instead, consider using CSS flex or grid for page layout. Elderly and low vision users also often zoom-in on content for reading, therefore, it’s essential to allow for readable content when zoomed up to 200%.

Here are some additional ideas to make the text on your web pages more readable:

• Use text instead of symbols – symbols can have ambiguous meanings
• Make link text look significantly different from plain text
• Expand abbreviations
• Avoid justified text
• Use the “lang” attribute to define the language of the elements in the webpage

Use ARIA roles and attributes where necessary

The Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA), published by the World Wide Web Consortium (W3C), is a comprehensive set of technical specifications for adding accessibility information to HTML elements. These can be incredibly powerful when used to add details to help screen reader users interact with elements, or to hide information that doesn’t provide value to them.

For instance, ARIA “roles” define what an element is or does, “properties” are used to give them extra meaning or semantics, and “states” are special properties that define the current conditions of elements, such as aria-disabled=”true”, which specifies to a screen reader that a form input is currently disabled. However, it’s important to note that ARIA roles should only be used to make native elements accessible, not to replace them. For example, it is better to use the <nav> element that already indicates that the content within it is for navigation purposes than to use the ARIA navigation role.

Make dynamic content accessible

Modern websites often include content that changes dynamically, for example, task percentages, status updates, and personalized content. Dynamic content also includes audiovisual elements, such as sound, video, animation, and graphical images. Screen readers usually ignore dynamic content, but it is vital that these elements are inclusive, and that all users’ needs are considered when used.

ARIA attributes are particularly useful to make these elements accessible. Here are some additional ideas to increase accessibility:

• Include closed or open captions on video content, and text transcripts for audio content
• Add accessible controls to videos and avoid auto-playing content
• Provide text descriptions and a way to control image sliders or carousels
• Add a method to stop moving text
• Avoid auto-submitting forms or making significant changes to context within the page
• Minimize content that changes on focus or hover
• Alert users to any changes in the webpage content
• Allow status messages to stay open until dismissed
• Avoid adding a script that moves focus to itself

Don’t use CSS to present critical information

Screen readers do not read any CSS, and CSS-only images are hidden in high contrast mode. So, it’s best not to provide essential information through CSS.

Reduce flickering

Screen readers do not read any CSS, and CSS-only images are hidden in high contrast mode. So, it’s best not to provide essential information through CSS.

Test for accessibility using the right tools

Make screen reader testing a priority and a natural part of the web and app testing ecosystem. This helps to identify inaccessible elements early in the process. Additionally, it helps to have a WCAG specification or inclusive design checklist to refer to during development. If you’re using a CMS (Content Management System), choose accessible themes, and check that the CMS and its text editor have been designed with accessibility in mind.