The importance of accessible web design and how to achieve it
Be inclusive by default!
There are no two users that are exactly the same. Physical and cognitive disabilities can inhibit people from fully engaging with technology: hardware, software, and beyond.
Living in an increasingly globalized society means that there’s an opportunity to proactively create ethical and meaningful products that are inclusive of all people worldwide. Let’s start that journey by learning more about designing for global web accessibility.
Why making your website accessible should be a priority
“An accessible website is a website that anyone can use however they need to.”
According to WHO, about 15% of the world’s population lives with some form of disability, of whom 2–4% experience significant difficulties in functioning.
Not all disabilities keep people from reading screens and using the internet. For example, these figures include individuals who rely on walkers and wheelchairs. But other conditions, like visual impairment, difficulty grasping objects, autism, and deafness, just to name a few, can severely limit an individual’s ability to use a computer or smartphone without accommodations.
The Web must be accessible to provide equal access and equal opportunity to people with diverse abilities. Indeed, the UN Convention on the Rights of Persons with Disabilities recognizes access to information and communications technologies, including the Web, as a basic human right.
Accessibility also benefits people without disabilities, for example, people using mobile phones, smartwatches, and other devices with small screens; older people with changing abilities due to aging; people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio; people using a slow Internet connection, or who have limited or expensive bandwidth.
Accessible design improves overall user experience and satisfaction, especially in a variety of situations, across different devices, and for older users. Accessibility can enhance your brand, inspire innovation, and extend your market reach.
How: Guide To Accessible Web Design
Include text alternatives for visual content (a.k.a alt tags)
Alt tags are brief descriptions of the images you use that get buried in the site’s HTML. Most users never see these descriptions, but site visitors using screen readers rely on them to know what’s in the images on your website. A good alt tag is a short, creative description that accurately describes the image it’s attached to.
Alt tags aren’t just or visually impaired users’ benefit; they’re for your benefit, too. Well-crafted alt tags improve your site’s SEO, which means more relevant site traffic and ultimately, more conversions. Work together with your marketing team to achieve a mutual goal.
For the video content on your website, incorporate subtitles into the video for users who are deaf or hard of hearing (or, for instance, are watching the video on mute in a public space). In cases where the video is mostly visual and has no dialogue or narration, make sure to add a video caption briefly describing its content for those with visual impairment.
Retain text hierarchy
The visual hierarchy you craft so masterfully with your design skills should be just as easily interpreted by assistive technology. One of the first things to consider is how many levels of hierarchy a design should have. As a general rule, every design should include three levels of hierarchy: heading, subheading, and body text. From there, it’s up to the designer to consider additional levels that might be necessary. These could include captions, additional subheadings, pull quotes, and meta information (for things like authors or dates on an article).
No matter how big, bold or all-caps your title is, no machine will be able to tell that it’s a title unless you clearly specify that. Labeling your text using heading and paragraph themes, allows browsers and screen readers to navigate through your content correctly and present it to disabled users in the right order.
Color has meaning — use it wisely
Implement good color
Color is a tool that can help guide the eye and good UI uses color to direct not just the user’s attention, but also their interactions with the entire experience. Picking out the right color palette is essential to setting the right mood and tone. Moreover, proper use of color is also a major component in the legibility of your website.
There are many online tools for testing your color contrast quickly and easily. You can use Google’s Color Tool, or Colorable by Jxnblk. Both of these websites use hex values to rate your color combos based on WCAG accessibility guidelines.
Don’t rely on color alone to convey information
A green light means go, red light means stop — we get this instinctively. But what if you’re color blind and can’t tell the two apart? Many visually impaired users can’t perceive color accurately, or not at all. For that reason, make sure to use more than just color to convey information — from adding text, to icons or patterns — to ensure full readability.
For example, when designing buttons for your website, even if you make them green and red, be sure to add text labels on both so that all types of users can immediately know what they mean. To test the color accessibility of your website, try converting your design to black and white to see if the same information still comes across.
To ensure accessibility for things like error or success messages or system warnings, make sure to incorporate messaging or iconography that clearly states what is happening.
Be thoughtful with the most commonly indistinguishable colors. The more you know about your users’ ability to absorb your content, the more informed choices you can make about your designs.
Ensure sufficient contrast between text and its background.
Some people with low vision experience low contrast, meaning that there aren’t very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.
There are nearly three times more individuals with low vision than those with total blindness. “One in twelve people cannot see the average full spectrum of colors — about 8% of men and 0.4% of women”. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast.
For example, presenting light gray text on a white background makes it difficult for users to distinguish the shapes of the characters, which can reduce reading comprehension and slow down reading speed.
Low-contrast text can negatively affect the reading experience for all your users. For example, if you’ve ever read something on your mobile device outside, you’ve probably experienced the need for text with sufficient contrast.
Color transparency and opacity are taken into account in the background.
Ensure that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text. For larger type, starting at 18 point (or a bold 14 point type), the ratio is a more lenient 3 to 1.
Forms are important so be really careful
When designing an online submission form (such as a login or contact form), it’s important to provide the user with enough necessary guidance, enabling them to easily understand what they need to fill in, and where. What’s most important is to ensure that each field is clearly labeled and instructions and information are provided. You should also aim to place the labels adjacent to the respective fields. While a sighted user can easily match a label to the corresponding field or option, this may not be obvious for someone using a screen reader.
This means naming each field in its label element, and not as placeholder text. Additionally, the text that’s visible to the users should be the same as the field’s name. So if the user sees a ‘First Name(required)’ label, then the field name should be exactly that, too, as opposed to something like ‘Contact_Field02’. These practices make it easier for people using assistive technology to correctly fill out forms, as it is the field name and label element, and not the placeholder text, that tools such as screen readers use.
To create accessible forms in WordPress, you can use a tool like the Caldera Forms builder. This is a plugin specifically focused on accessibility, which will make your job much easier.
Avoid content that can cause seizures
The WCAG accessibility guidelines include specific technical requirements for determining whether content flashes or flickers at an unsafe level. In general, if content flashes more than three times per second, it is unsafe. Anything above that threshold might trigger seizures for people suffering from photosensitive epilepsy. For any flashing content, it’s also advisable to reduce its contrast and avoid using saturated reds. As a rule of thumb, it’s always better to enable users to freeze or disable the animation on screen, so that they can have more control over their experience of your content.
W3C provides a more precise technical formula for calculating general flash and red flash thresholds. The Trace Center at the University of Maryland has developed a Photosensitive Epilepsy Analysis Tool (PEAT) for measuring whether web or computer applications are likely to cause seizures.
*
When designing or redesigning a website, evaluate accessibility early and throughout the development process to identify accessibility problems early, when it is easier to address them. Comprehensive evaluation to determine if a website meets all accessibility guidelines takes more effort.
There are evaluation tools that help with evaluation. However, no tool alone can determine if a site meets accessibility guidelines. Knowledgeable human evaluation is required to determine if a site is accessible.
If you are a web developer, this article can help you have further knowledge of accessible websites.
