P.S. What about Accessibility?

With the rush to deliver digital products in a competitive environment, many companies overlook accessibility, seeing it as a ‘nice to have’ rather than a ‘must have’. This type of short-term thinking leads to greater costs trying to retrofit accessibility further down the line when all it requires is for each team to do its part in including accessibility in their work from the start.

In this article, I’ve put together a checklist of items for designers, developers, QA, and content writers to consider when building digital websites and products. I’ve attempted to make these points simpler and more understandable as the guidelines can be cumbersome and hard to follow. See the detailed web accessibility guidelines on the?W3 website.?

Why Bother with Accessibility?

In the same way that restaurants and public services must be mindful of providing wheelchair access in the physical world, digital products also need to consider accessibility by people with a variety of disabilities such as auditory, cognitive, neurological, physical, speech, and visual. There are other considerations such as slow internet connections, very small or very large screen sizes, and different devices, operating systems, and browsers.

There are clear advantages to designing for accessibility – expanding your market reach and increasing brand loyalty – but there are other, more pressing reasons to prioritise accessibility:

• Avoid discrimination and any future litigation. In the US, the?Americans with Disabilities (ADA)?requires that web content from businesses that are open to the public be accessible –?there were?171 lawsuits filed?in October 2022 alone.
• In 2019, the European Commission introduced the?European Accessibility Act?which comes into effect in 2025. The act will make life easier for at least 87 million people – almost one in five Europeans – who have disabilities, including many older people, and for those who have a temporary impairment
• Avoid maintenance costs by producing better-quality designs and cleaner code
• Accessible sites perform better in Search Engine results (SEO) by virtue of being easy to read by indexing robots. In other words, they can match the content of a search quicker on an accessibly compliant site (because of alt tags and semantic code) to return it in the results
• It is morally the right thing to do.

Accessibility Guidelines

Guidelines are set by the (Web Content Accessibility Guidelines) WCAG at w3.org.?

Level A?– This level is the most basic, if your website doesn’t meet this basic standard you are more than likely to exclude a lot of people.

Level AA?– This is the most achievable and therefore most common compliance level. It is the level set as the standard by the ADA (mentioned above).

Level AAA?– This level is the most comprehensive. Full compliance would usually only be necessary for websites that are intended for use by elderly people or those with specific disabilities.

You can test the accessibility of your website on?Web Accessibility Evaluation Tools (Wave).

Checklist for Designers, Developers, and QA

1. Devices, Screen Sizes, and Browser Support

• Responsive Design: Ensure that you design for standard breakpoints and are clear about how your design should appear based on device and screen size. Unless you have specific requirements for custom screen sizes, the current standard is to design for at least four: Mobile, Tablet, Desktop, and Large Desktop. But this can change as devices and screen sizes evolve, so always research the current standard before starting a new design. Be conscious of how and when elements of your design might break when viewed on slightly different sizes for each device. For information about current browsers, see the?current browser market share report
• Adaptable Content: Be aware that your content will be presented in different ways on different devices. For example, the presentation format changes when the content is read by a screen reader, so you need to be conscious of how the content will be perceived by screen readers, or by readers who are using simpler devices.
• Meaningful Sequence: When the sequence in which content is presented affects its meaning, the correct sequence should also be understandable by screen readers. Sighted readers perceive structure and relationships through various visual cues, like heading sizes, bullet points, and paragraph breaks.?Ensuring that the?correct semantics?are used in your code will enable screen readers to understand the structure and layout of your content.
• Sensory Characteristics: Avoid using sensory language (shape, location, colour) to describe controls. For example, “click on the arrow to continue”. Some users with disabilities are not able to perceive shape or position due to the nature of the assistive technologies they use. Therefore you should include textual information (can be alt or title text) to describe the action instead of just relying on the shape or position.
• Orientation: Ensure content does not restrict its view and operation to a single display orientation, such as portrait or landscape unless a specific display orientation is essential.
• Identify Input Purpose: Include appropriate visible labels and instructions on form fields to ensure the purpose of each field is clear to the user. Use the ‘type’ attribute (e.g. type=”email”)?so that assistive technologies can extract and present this purpose to users. The ability to programmatically declare the specific kind of data expected in a particular field makes filling out forms easier, especially for people with cognitive disabilities.

2. Alternative Text

When adding images or any non-textual content,?including an?alt attribute?(tag) makes the content accessible.

• The alt tag is used by screen readers to describe the content to blind users
• If the image doesn’t load, the alternative description is displayed in its place
• When a user hovers their mouse over an element, the alt?(or?title attribute?– depending on the browser) description is displayed on the screen.

3. Audio and Video

When delivering audio or video content, be conscious that people may not have access to audio or video on their devices. Ensure that your content reaches everyone by:

• Including a text transcript alongside audio clips and captions on videos.
• Providing audio descriptions to augment the audio portion of videos. For example, when there are actions or pauses in dialogue on video content, the audio should describe the actions in case the video is unavailable.
• If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
• Provide controls for auto-playing content like video, audio and carousels as well as moving, blinking or scrolling information.

4. Colour Contrast

The foreground/background contrast for normal text should be at least 4.5:1. Larger text (font size 18+ or bold and 14+) and images of large-scale text have a contrast ratio of at least 3:1.?Exceptions are if the text or images of text are purely for decoration purposes or part of a logo or brand name.

Most design tools have optional plugins to run a quick check while designing. For quick reference, try this online Color-pair Contrast Testing tool at?color.a11y.com/ContrastPair.

5. Scrolling Content

Content should be presented without loss of information or functionality, and without requiring scrolling in two dimensions for vertical scrolling content at a width equivalent to 320 CSS pixels and horizontal scrolling content at a height equivalent to 256 CSS pixels. Except for parts of the content that require a two-dimensional layout for usage or meaning.

6. Text Readability

Allow text to be resized without assistive technology up to 200 percent without loss of content or functionality (except for captions and images of text).

Use text instead of images to represent textual content except where the image is essential, for example, logos.

Text Spacing

• Set line height (line spacing) to at least 1.5 times the font size;
• Set spacing following paragraphs to at least 2 times the font size;
• Set letter-spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

7. Show / Hide Content

When using Hover or Focus to show and hide content, ensure that the user can move to the additional content without it disappearing – for example, a dropdown menu that allows the user to easily move to the submenu – and that it remains visible until the user decides to dismiss it or the information is no longer valid – for example, a notification or validation message.

8. Keyboard Shortcuts

Make all functionality available from a keyboard. Modern systems have?keyboard shortcuts?built in, but you may need to add custom shortcuts for specific functionality. For example,?applying focus?to a button or input on page load. (Side note:?I can think of at least one online banking website that needs to do this ??). Just avoid doing anything that conflicts with existing common keyboard shortcuts so as not to confuse users.

9. Time Limits

Allow enough time for people to read and use your content. If your content has a time limit, provide a way for them to turn off, adjust or extend the time limit before using it unless the time limit is required part of an event – for example, an auction – or the time limit is essential and extending it would invalidate the activity, or the time limit is longer than 20 hours.

10. Flashing Content

Do not design content in a way that is known to cause seizures or physical reactions. Web pages should not contain anything that flashes more than three times in any one-second period, or the flash is below the general flash and red flash thresholds.

11. Navigation

?User interface components and navigation must be operable.?

• Bypass blocks:?Use anchor links to bypass blocks of content when using?in-page navigation
• Page titles:?Include clear page titles that describe the topic or purpose
• Focus order: Use auto-focus to specify when an element should automatically get focus when the page loads, and ensure that sequential navigation is possible by applying focus in the correct order. In other words, make sure the user’s cursor is active on the first link of navigation or first input of a form, and when they use their keyboard to move through the form or menu, it does so in the correct navigational order.
• Link purpose:?Provide link text that describes the purpose of the link
• Multiple ways:?Provide multiple ways to navigate to a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process.
• Headings and labels?use headings and labels to describe the topic or purpose of elements.
• Focus Visible?Make it clear to the user which element is?currently active.

12. Inputs

• Pointer gestures:?Ensure that content can be controlled with a range of pointing devices, abilities, and assistive technologies?
• Pointer cancellation:?Make it easier for users to prevent accidental or erroneous pointer input.
• Label in name:?For components with labels that include text or images of text, ensure the name attribute contains the text that is presented visually.
• Motion actuation:?Any functionality that requires the user to interact with a device in a non-standard gesture (e.g. shaking or tilting), should also be available through more conventional interface components to include people who may be unable to activate the gesture due to their disability.

13. Predictable

Content should appear and operate in predictable ways:

• On Focus:?When any user interface component receives focus, it should not initiate a change of context. For example, when a user has their cursor focused on an element, this shouldn’t trigger any unexpected new action such as opening a new window or auto-submitting a form.
• On Input:?Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.
• Consistent Navigation:?If your navigation menu appears in multiple places it should always show in the same order unless a change is initiated by the user.
• Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently.

15. Input Assistance

Help Users avoid and correct mistakes:

• Error Identification:?If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
• Labels or instructions: Labels or instructions are provided when content requires user input.
• Error Suggestion:?If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user unless it would jeopardize the security or purpose of the content.
• Checked (aka validation):?Data entered by the user is checked for input errors and the user is provided an opportunity to correct them.
• Error Prevention:?If your website allows the user to interact with legal commitments or financial transactions in a way that modifies or deletes information, you should provide a way for accidentally submitted changes to be reversed, or include a confirmation stage that allows the user to review and confirm their actions before submitting.

15. Robust Content

Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies:

• In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.
• For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
• Always provide information on the results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors even if it seems really obvious that an action has been completed successfully and updates have been saved.
• Status Messages: make users aware of important changes in content that are not given focus, and do so in a way that doesn’t unnecessarily interrupt their work – for example after the user has added an item to a shopping cart or filtered a search. Screen readers need to understand the role of the status in order to include it. For instance, the role of the result count on a filtered search is the text or number by which the system can identify the function of a component. Read more about Accessibility Roles on W3Schools.

Checklist for Content Writers

• Text:?Use plain language and avoid jargon. Break up content using formatting such as headings, subheadings, and lists to convey hierarchy and meaning so that it is easier for users and screen readers to understand.
• Images:?Ensure that images are sized and optimised for the web before uploading.?Name images and other uploads appropriately and add ‘alt’ information via your CMS.
• Audio / Video:?Include a text transcript alongside audio clips and captions on videos for users who may not be able to access audio or video content on their devices.?Here’s a video tutorial on?how to add captions to youtube videos.
• Links:?Use descriptive language on links and buttons, as this is what screen readers will read to visually impaired users.?Text like ‘click here’ doesn’t provide context as to where the link will take the user. Test links to third-party websites to ensure these are working and open them in a new window/tab.
• PDF documents?should be optimised for the web and accessibility so that these can also be read by screen readers.?See this section on Adobe about PDF accessibility.

The Power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

Tim Berners-Lee - W3C Director and inventor of the World Wide Web.

The WCAG guidelines provide in-depth recommendations for making Web content more accessible to a wider range of people including those with disabilities such as blindness, deafness, and those with limited movement, learning disabilities etc. As it is intended to cover a vast array of disabilities in order to meet the needs of all people, it is quite vast and can therefore be an intimidating document to follow, which ironically makes the document itself somewhat difficult to follow.

I initially put this checklist together as an easier reference for myself. I hope you also find it helpful. Let me know your thoughts in the comments.

If you would like an accessibility evaluation of your digital product, book a free consultation or email?[email protected]