Equal opportunities for everyone offline and online are the 21st-century must. Web accessibility refers to a set of inclusive practices and guidelines to make interaction with any website possible and convenient for all people, including those with disabilities. In our previous article, we defined key principles and best practices for making a website accessible. Here are a few practical tips to achieve this.
Though web accessibility is not a new milestone, 2018 saw an increased number of accessibility lawsuits.
This indicates the need for companies to
- be consistent implementing accessibility guidelines on existing web pages
- create new functionality with accessibility in mind, especially as a company grows in size.
If this is your first encounter with accessibility standards, then a nice idea is scanning your website with an online evaluation tool (here’s a list of web accessibility evaluation tools). But mind that no single tool can 100% accurately determine the degree of website accessibility, so human evaluation is absolutely obligatory. Before the actual development starts, all stakeholders should familiarize themselves with accessibility guidelines.
Any website should be accessible in terms of its content, UI/UX design, and layout.
Team members responsible for these components have to keep accessibility in mind. In this article, we’ll give a few practical accessibility tips to the rescue of website editors and UI/UX designers.
Web Accessibility Tips for Content Editors
As a gesture of courtesy, consider adding an Accessibility Statement on your Home page, usually in its footer.
— It clearly shows the company’s commitment and continuous efforts to make the website accessible as much as possible
— It contains contact information (phone, email) of a person in charge and response time, so a disabled person could reach out with any questions
— It gives users a way to leave feedback to reveal any areas for accessibility improvement.
To make website content accessible to everyone, try to stick to the following guidelines:
- Use simple language, do not overcomplicate. Write in short, clear sentences. Divide long text into paragraphs.
- Make your content specific and laconic. This will aid all users, and especially people with mental disabilities (e.g. autism). These people navigate the website quite slowly and have a hard time concentrating on, understanding, or interacting with the the content.
- Provide informative, unique page titles. At the top of each web page, give a short description with most relevant information. For pages that are part of a multi-step process, include the current step in the page title. Slugs also matter for assistive devices, so make them meaningful (in case your content management system does not take care of this).
- Make it easy to distinguish between most and less important content by using clear formatting and page structure. Add headings, subheadings, lists.
- Consider providing a glossary for terms readers may not know. Expand acronyms on their first use, e.g. Web Content Accessibility Guidelines (WCAG).
- Make the links in the text meaningful — not simply “click here.” The link “name” should relevantly describe the content it leads to. If the link leads to a document, indicate its type and size, e.g. Americans with Disabilities Act of 1990 (PDF, 109 KB).
- Use images, graphs, video, audio, and symbols to help clarify your words. But! Do not rely solely on visual content as blind people or people with visual impairments will not be able to interpret it. For them, create audio-transcripts for multimedia.
- At the same time, do not rely on audio-only content, such a podcasts, as people with hearing disabilities will not access it. Add captions and transcripts for audio and video materials.
Web Accessibility Tips for UI/UX Designers
Website design is yet another important component to be developed with accessibility in mind. Here are a few tips and guidelines for UI and UX designers.
To make the web content “friendly” for people with sight dysfunctions and other disorders:
- Minimize the amount of small elements on a page, like tiny forms and buttons. Use font that is large enough to read.
- Use simple color and at least 4.5:1 ratio for contrast colors of the text letters and background. To test the color contrast or find a fitting color palette, you can use one of numerous desktop and online tools or browser extensions.
- Do not rely on color alone to convey important information. Add captions and textures for color-blind people.
Look up to Trello’s version for color-blind people introduced in 2014. It uses textures (patterns) to distinguish labels and is extremely friendly for color-blind people, i.e.1 out of 12 men and 1 out of 200 women:
- Mind accurate scalability on all pages of the website, which is necessary for visually impaired people who use screen magnifiers.
- Care about creating separate designs for different viewport sizes. Mobile version of the website may (and should) have responsive design, more distinct navigation, slightly different position and presentation of main elements and page info, larger buttons and fonts to make the best use of space.
- Avoid rapidly moving, blinking or flashing content as it is not epileptics-friendly and not good for people with visual processing or attention deficit disorders. These are banners, image sliders, carousels, ads, etc. If this content flashes more than three times a second, covers a large area of the screen, and is bright enough, it could even provoke a seizure among people with photosensitive epilepsy.
- Always give users visible controls for your moving / switching content — a button to stop and resume an auto-playing animation or sound. Here are examples of button labels and functions:
While animation is running (code snippet):
<button data-action="stop"><span class="visuallyhidden">Stop Animation </span>￭</button>
While animation is stopped (code snippet):
<button data-action="start"><span class="visuallyhidden">Start Animation </span>▶</button>
- In a similar manner, looking at GIFs (automatic looped animations) on a webpage is undesirable for people with vestibular disorders who may get dizzy, nauseous, or distracted by their movement. Either avoid using GIFs altogether, or at least give users a way to turn them off — a good practice is converting GIFs into MP4 format.
To make interaction with the website easier for people with mental impairments, including autism:
- Support at least one alternative method for website navigation, e.g. site search + site map. Give orientation cues as breadcrumbs or page headings.
- Add names to buttons. Make sure users are always explained what to input in a form.
Add description and instructions to input box/fields. But not in them! Say “no” to disappearing placeholder text. Such assistive devices as screen readers usually read the<label>elements for form fields and skip the descriptive notes inside these fields.
For even greater UX, add auto-correction and/or text prediction for some form fields. Autocompletion is, for the most part, supported by most popular browsers.
- The forms themselves should be easily distinguishable from the rest of the page elements: have clear boundaries and input limits.
To aid people with motor impairments, who have hard time coordinating their move or use keyboard for navigation:
- Make the buttons large enough to comfortably click on them, even using a mouse stick and other assistive technologies.
- As you create website mockups, mind that any website should support Tab navigation.
- Add focus indicators — caret in a text field or a visual change to a button — to easily distinguish focused vs. not focused elements on a page. The elements that must have a visible focus are links, input form fields, widgets, buttons, menu items.
In the following example, the menu on BBC.com could be navigated with Tab and has a color bar that indicates the section in focus:
Focus indicators aid both people with attention and memory limitation as well as those using assistive technologies for navigation.
Web accessibility is not merely about following a set of guidelines. Rather, it is about caring about your users and keeping accessibility in mind on every development stage. Maintain the culture of accessibility in your organization and encourage your colleagues to do the same.
We all age. Don’t just develop a website for a short-term gain, build it for future, your future self included.
Helpful Resources on Accessibility
Accessibility.voxmedia.com — a detailed check-list with website accessibility guidelines for Designers, Engineers, Project Managers, QA engineers, and Editors
Inclusive-components.design — a rich library of patterns for inclusive design that pretends to be a blog
You might be interested in our previous articles about web accessibility:
Accessibility in Web Development: How eCommerce and Business Websites Benefit from It
Accessibility in Web Development: Practical Tips for HTML/CSS Developers
Accessibility in Web Development: Overview of Assistive Technologies and Practical Tips for QA
Originally published at www.logicify.com/en/blog on February 15, 2019.
