Programming Universal Accessibility into Your New Website
When designing a user interface, the first choice that comes to mind is building an interface with fictional assumptions that all users have strong literacy, perfect vision, and hearing. This person can quickly and intuitively utilize a touch device or use a mouse. Few actual users are like this, and even fewer that do not use adaptive technologies. Instead of building poorly thought-out interfaces and controls that frustrate and exclude, it’s always better to design solutions for all.
Web development accessibility design used to be considered a niche field that was thought to be excessively cumbersome and stodgy. In the last few years, inclusive design has come a long way. Among web developers, it was a niche discipline focused on solutions for people with disabilities. With the inclusion of accessibility as a standardized element in the W3C recommendations of the web design, inclusive design and the commitment to have websites and apps work for everyone has brought it to the fore.
Typically, when the conversation comes around to good website design, we repeatedly hear about things like structuring HTML properly. A list of regurgitated prompts like:
- Make proper use of semantic HTML.
- Ensure there are fully descriptive text alternatives (alt-text) for images.
- Correctly use header tags and use them as clues about the importance of information.
- Make use of descriptive and appropriately positioned labels for each input field along with a descriptive label tag.
- Limit the use of tables in your design because screen readers cannot distinguish between a table used to contain content and a table used for layout purposes.
This is all well and good. However, when you consult with actual users with the accessibility issues, or God forbid, get hit with a website accessibility lawsuit, you realize that many nuances impact usability. You need to either have users impacted by the design test these improvements or consult an experienced ADA compliance consultant.
In case you do not know what is an ADA, it stands for the Americans with Disabilities Act that was passed in 1990 and later updated in 2009.
Here are a few fundamental changes you can make to your design per the feedback we have received to make it universally accessible:
Only Add Alt Text When the Image Adds Value to the Page
It may sound counterintuitive for most people reading this for the first time but, UX designers in real-life practice have experienced that including alt text for every single image file on the website can make a page harder and not easier to use. When dealing with a decorative image, it is better to use an empty alt attribute (alt=“ ”). A decorative image is not meant to convey extra information or meaning to the user. Add to that for a visually impaired user, and it can add to, not reduce, the cognitive load in deciphering what the screen reader is conveying.
Users utilizing a screen reader are entitled to have an equitable experience of all the content on your website. It is agreed that providing a brief description provides those users with meaning that would otherwise be unavailable to them. In addition, screen readers have come a long way in assisting readers, and they let the user know when they’ve encountered an image. Therefore, it is unnecessary to use descriptions like “picture of…” or “image of…” in your alt text.
Making UI Elements and Other Graphical Objects More Accessible
Providing alt-text descriptions is just the beginning. Besides images, it is also critical to make other design changes to make all graphical elements accessible. The color scheme becomes very important here. Websites using icons, graphs, charts, or infographics with low contrast will have a number of people with visual impairments struggling to consume it. It is fundamental to understand that impairments aren’t binary, where you have an impairment in full or none at all. Impairments are like a color gradient, and each level of impairment needs to be included.
Per the WCAG’s recent guidance, the contrast level must be at a certain ratio depending on whether you’re checking the requirements for the background or other page’s elements, so visual elements such as the border on input forms, or the menu icons without the text, should be thoroughly tested and compared to the background color.
Using Intuitive Naming Scheme for Page Elements
A designer needs to understand how assistive technologies work for people with impairments. Things like screen readers always work out of the box, and like any software, read the content as presented on the page. However, it is essential to ask yourself, as a designer, “Do the users have to listen to all of a page to find the information they need.” It is essential to know that screen readers offer users shortcuts, letting users browse by types of content, on a specific web page things like forms, tables, headings, and links. It is essential to have an intuitive naming scheme to let a user request to hear all headings on the page to navigate to one of them.
A developer’s ability dramatically impacts the user experience by ensuring everything on the page has a unique sensible name that makes sense out of context. Many accessible labeling elements like <legend> (forms), <label> (form fields), and <caption> (tables) are designed to enable developers to make the navigation easier and utilize them for the proper case they are intended to be utilized.
Your Site Should Also Be Accessible to the Deaf and Hard of Hearing
Thus far, everything discussed has been focused on providing access to the visually impaired, but that does not cover the entire spectrum of users that lack accessibility. Again, putting yourself in the user’s shoes can help provide context and an invaluable insight into the user experience for those who are impaired. For example, most contact and order forms stop short of considering collecting information critical to how a user communicates. As a hearing-impaired tester recently opined to me, “Does a designer consider adding a comment field to let them know that I’m Deaf and calling me won’t work. How about doing away with using a telephone number as the only contact option. Why not provide email, WhatsApp, or chat.”
In conclusion, having a sharp and consistent vision of all the users utilizing your website will go a long way towards creating a universal design accessible to all.
ABOUT THE AUTHOR
