The core tasks of a web designer typically consist of designing a website that’s aesthetically pleasing, serves your clients’ end goals, looks and works great across devices and browsers, and is optimized to load fast and rank better in search engines. But, in our efforts to meet our clients’ expectations and check off all the tasks mentioned above, we often forget to check whether or not the finished product complies with web accessibility standards.
When you consider the fact that 54% of all disabled adults in the US use the internet on a daily basis, it’s easy to understand that accessibility shouldn’t be ignored.
If you’re wondering why accessibility matters and how to make your website more accessible, you’re in luck. In this article, we’ll discuss why you should care about it and share tips for making your site more accessible.
Why Accessibility Matters
Accessibility allows people with disabilities to not only access but to also use the web in a manner that makes it possible for them to interact and contribute in fulfilling ways. Even though the accessibility guidelines relate primarily to people with disabilities, they also relate to people who have a temporary disability such as a broken arm, elderly people who are impacted by changes due to their age, and even those with slower than average Internet connection speeds. Here are three reasons why web accessibility matters.
1. It’s One of Our Basic Human Rights And a Part of the ADA Act
The most important reason for making your websites accessible is the fact that not doing so violates the Americans with Disabilities Act and could get you into legal trouble. What’s more, according to the UN Convention on the Rights of Persons With Disabilities, web accessibility is one of our basic human rights.
2. It Allows You to Reach a Bigger Audience
If your website is accessible, chances are it’s more accessible to everyone. This means more people can easily navigate and use your site which makes them more likely to return to your website over time.
3. It Can Increase Your Website Traffic
If you take care to develop an accessible website with proper semantic markup and properly labeled links, images, forms, and other elements, your website becomes more discoverable by search engines. They can, in turn, use proper markup to get information from the website for assistive technologies, index it faster, and rank it higher on the search engine results page.
Now that we’ve covered why accessibility is important, let’s cover the tips on making your website more accessible.
How to Make Your Site More Accessible
The recommendations below are based on Web Content Accessibility Guidelines, published and maintained by W3C. The first version of accessibility guidelines was published in 1999 and the second version, which is also the most current, followed in December 2008.
According to the Guidelines, implementing their recommendations will make your website accessible to a wider range of people with disabilities and more usable for everyone in general.
The core principles of accessibility state that the information must be perceivable, operable, understandable, and robust in order to be considered accessible. It’s worth mentioning that all four principles must be met, otherwise your website and content will not be considered accessible.
In a nutshell, this means that the information should be presented to users in ways they can perceive, use, and understand while at the same time remaining robust enough to be easily understood by a variety of user agents such as assistive technologies.
Based on those core principles, here are the main recommendations to follow to make your website more accessible:
- Avoid relying on colors alone to make your links and buttons different from the rest of the content. Add a question mark or an asterisk to ensure people who are color-blind can easily understand what’s presented to them.
- When using color, opt for high-contrast such as black text on a white background rather than using similar colors.
- Refrain from using content that can cause a seizure. This includes animated GIFs and flashing animations.
- If you’re using a content management system, choose one that is designed with accessibility in mind. A CMS like WordPress or Drupal are good choices, with Drupal introducing accessibility in Drupal 7 and WordPress making the Accessibility Coding Standards a part of the official Core Handbook in March 2016.
- Ensure your design can accommodate different viewport sizes and adjust the position and presentation of main elements as necessary to maximize the use of available space.
- Consider removing CAPTCHA wherever possible or keeping them required only for authorized users. The use of CAPTCHA is not only deemed inaccessible but also ineffective against spammers.
- Your website should support braille as well as the ability to enlarge the print using both a mouse and keyboard.
- Provide text alternatives for non-textual content such as images, videos, and audio content
- Use headings and subheadings to define and organize the structure of your content
- Make sure the content on your site is easy to understand by using clear and concise language and providing definitions for jargon, technical terms, and abbreviations
- Text size and linewidth should be set to maximize readability and legibility
- Provide descriptive text for your links rather than using Click Here or Read More
- Refrain from setting links to open in a new window or a new tab without user interaction or notifying them that the link will open in a new tab/window
- Keep buttons and menu items accessible via keyboard and a mouse and make sure the visitors can highlight them using both. Don’t forget to make your drop-down menus accessible as well
- The navigation of the website should be accessible with a keyboard
- Include skip links at the top of each page to allow users to jump to main content immediately
- Label each form field with a proper label and provide input assistance with warning and confirmation messages that are easy to understand even for color-blind people
- Don’t set media elements to automatically play when a visitor lands on a website. Put the control in the visitor’s hands and allow them to play, pause, or stop the content
- Add tabindex for elements such as , , or any other element that doesn’t normally receive focus when they are being used for interaction
- Provide descriptions for any buttons that may trigger downloadable media that you offer on the site
- Make sure that video and audio content include transcripts, closed captioning, or sign language
- Use WAI-ARIA roles to provide meaning for elements like accordions, tabs, and their functions and states
While it does mean more work upfront, making your website more accessible has many benefits; from expanding your user base to ranking better in the search engines and avoiding legal troubles. Follow the guidelines above to ensure your website is accessible and usable by everyone.