6 Web Accessibility Best Practices for Developers to Make Websites Accessible to All
To put it simply, the term ‘website accessibility’ is about making website adjustments so that people with disabilities such as mobility limitation and vision impairment could interact well with websites and use them properly.
The depart of justice (DOJ) has issued an act called the ADA that deems websites a public place just like physical restaurants, hotels and government buildings. As such, websites need to adhere to an ADA compliance standard.
Some examples include:
- Allowing the users to navigate through the website with only the keyboard
- Giving them control over which features to change or load
- Designing page text with sufficient contrast for color-blind people to differentiate
- Supporting non-text media (video and images) with text alternatives and captions
You must think about how companies can even design and develop a website that does not consider the aforementioned elements. Quite interestingly, many corporate websites have previously run into legal waters for not having site features accessible to the disabled.
There is a misconception that web accessibility demands aesthetic sacrifices.
Sure, there are some color contrast restrictions, but it is possible to achieve an attractive and engaging website accessible. In this article, we discuss six web accessibility best practices for developers to implement:
1. Deploy a CMS that supports accessibility
There are many content management systems that you can use to build your website. While WordPress and Drupal are most common, there are also other options. Irrespective of which CMS you choose, you must ensure the theme or template in use is accessible.
To do so, consult its documentation for notes on accessibility and steps to create accessible layouts and content for that particular theme or template. For instance, the CMS admin options (such as publishing a blog post) should be accessible.
Besides, video players must include closed captioning while editing toolbars should have options for headings. The same guidelines should be followed when selecting plugins, modules, and widgets on the CMS.
2. Give descriptive and unique names to your links
When your content includes links, use a copy that describes where the link will go. Merely writing “Click Here” is too vague and ineffective for visually-impaired site visitors. Screen readers cannot read the link within the context of the rest of the webpage.
Being descriptive can clearly explain the content of links to the disabled person using a screen reader. For instance, if there is a CTA button directing the user to your “About Us” page, don’t just write: “Click here to learn about our company.” Instead, say: “To learn more about our company and what we do, read our “About Us” page.
3. Include ALT text for images
This is a widespread practice and especially crucial for describing informative images such as infographics. When you sit down to write the ALT text, the copy should contain the message you want to convey via the image.
For instance, to a person without any visual impairment, the image will be as follows:
The text visible on hovering the mouse cursor is the ALT text. On the other hand, a screen reader user can only understand what the image is about if the ALT text describes it adequately.
The only exception is when an image is used only for decoration purposes. In which case, you can leave the ALT text box empty so that the person using a screen reader is not distracted from the primary web page copy.
4. Use colors on the website with caution
Red-green color vision defects, the most common form of color deficiency, affect less than 1% of females and 8% of males, according to Prevent Blindness. So, it is vital to use contrasting colors to ensure that all individuals can understand your message.
For example, there should be sufficient contrast between the text used on images, buttons, and icons. Besides, colors used for conveying information on maps, diagrams, and other types of imagery must also be distinguishable.
On top of that, if you use visual indicators or separators such as borders, asterisks, and question marks, that will help the disabled visitors on your website to differentiate between what is essential and what is not. Using an asterisk to indicate the required fields in a form is an example.
5. Insert purposeful title tags
The first thing a visually impaired website visitor will see when the webpage loads entirely is the text in between your <title> tags. Two things can go wrong here:
- You don’t have <title> tags on your site at all!
- You have the same tags across your website.
Either way, it makes it tedious for the screen readers users who rely on the site’s HTML markup to realize which page they are on, or which link they clicked. For example, you will often find the following title attributes as shown below:
<a href="/" title="Link to homepage">Homepage</a>
<a href="/products" title="Link to blogs">Blogs</a>
<a href="/contact" title="Link to resources">Resources</a>
This could result from the default CMS configurations or because someone didn’t invest a lot of time writing different title tags. When this happens, it becomes complicated to search functions built into screen readers. Ultimately, such elements are unable to add any value to the screen reader user’s experience.
Therefore, when writing a title tag, clarify the purpose. Here is an example on W3C - apt for visually-impaired visitors:
6. Deploy skip navigation
Since screen reader users have no choice but to read HTML documents from top-to-bottom, skip navigation allows them to skip long lists of links. It could be a link at the top of the web pages, which on being clicked, directs the visitor to the section they are interested in.
One way to do is by inserting proper headings, such as <h1>, <h2>, and <h3>, as that would make it easier for website visitors to head to the location of their interest. Imagine if they read the first paragraph of a blog post, and they realize they immediately want to leave a comment.
A non-disabled person would be able to do that instantly. However, that is not the case for the disabled. Skip navigation curbs the problem to a great extent.
The only minus point about this practice is that although this works for screen reader users, it is not worthwhile for physically-disabled - who can’t operate a mouse. But if your website has many web pages with critical information, it is best to implement this technique.
Wrapping it up
Technology has indeed made things easier for the majority of us. However, such is not the case with people living with a disability.
Now that everybody is on the internet, browsing through websites and consuming information available on them, it is not fair to leave a specific section of the audience just because websites are not equipped enough. With any web accessibility software, businesses can ensure a smooth browsing experience for everyone.
Start writing here..
(Image Source)
