Every web developer should strive to develop websites that can be used by everyone, irrespective of any conditions or impairments that might interfere with the successful navigation of the site.
Some of the common user-related impairments that might impact website navigation are:
- Visual Impairment: This includes the partial or total inability of the user to see. It also includes color blindness.
- Hearing Impairment: This includes Reduced or no ability of the user to hear.
- Motor Skills/Physical Disabilities: Difficulty in moving parts of the body by the user(s) which might make it difficult for them to work with a mouse. This difficulty can be permanent or temporary (e.g., recovering from an accident).
- Photosensitive Seizures: Flashing lights can trigger seizures for some users.
- Cognitive Disabilities: There are also many conditions that affect cognitive abilities, such as dementia and dyslexia.
Why It Matters
The web has become a great resource and has engulfed our life in terms of education, employment, health care, and recreation. As a result, more and more people are getting acquainted with the web. As developers it is not only important but also our responsibility to create websites that are accessible by everyone. So that everybody can get the maximum benefit out of it.
An accessible website is also great for business. According to the US Centers for Disease Control and Prevention (CDC), 1 in 4 adults in the US has a disability, including impairments with vision, hearing, mobility, and cognition. Disabled persons are potential customers and an inaccessible website will shut them out. Making our websites accessible is not only a good development practice, but it also helps to broaden our customer base.
Furthermore, web accessibility is required by law in many countries. And, not being able to comply with the standards might result in huge penalties and fine.
Last but not the least, web accessibility standards coincide with many web development best practices such as mobile responsiveness, Search Engine Optimization (SEO) and overall usability. These are all good reasons why we should think about web accessibility while developing for the web.
Some Tips for Making the Website More Accessible
- Keyboard Accessibility: Users with mobility disorder might not be able to navigate a website with a mouse. They usually access the site content with the help of keyboards instead, by pressing the tab key. We should always test our website to check if the entire website content is easily accessible using the keyboard. If any of the elements are not accessible by default, we can make use of the ‘tabindex’ attribute to make it focusable. A ‘tabindex = 0’ will make any element accessible with the keyboard. By default when an element has keyboard ‘focus’ and is activated with the tab key, the web browser provides a focus indicator by highlighting the element with a border outline. However, we can hide it by specifying ‘outline: 0‘ or ‘outline: none’ in our CSS styling. But if we do that the keyboard user may have a hard time figuring out which element has the keyboard focus. In addition to the outline, we can use another CSS style to design the element as per our needs to achieve the same functionality.
- Add Alt Text to Images: By default, images are inaccessible to visually impaired users. Hence, if we use images for informational purposes in our website(s) then we have to provide a description of the images. We can do that by populating the ‘alt’ attribute in the <img> tag. However, if the images are used just for decorative reasons, we can leave the ‘alt’ attribute blank. That way, users won’t be burdened with superfluous information. We should also consider providing text transcripts for audio/video content. This will make the content accessible not only to disabled users but also to users who are not able to listen to the audio at that moment for any number of reasons (such as being in a public place or at the office).
- Correct Usage of Headings: Another important method to add accessibility to our website is by structuring our content correctly. Screen readers use Heading (h1 – h6) tags to navigate through content. Therefore, we should stick to the correct and logical order of headings. We should avoid using heading tags for styling purposes as that can confuse screen reader users. As an alternative, we should consider adding CSS styles to our code. Some important points to note:
- We should use <h1> tag only for the primary title of the website and individual pages.
- We should not skip heading levels ( e.g go to <h4> from <h2> skipping <h3>). It might confuse the screen reader user(s) and lead them to think that some content is missing.
- Effective Color Usage: Colors are important for websites not only to add style and appeal but also to help users (especially ones with learning disabilities) to navigate the site. While selecting colors for our website we should also be mindful of users with color-blindness. It is always a good idea to add other visual indicators such as borders on ‘focus’ elements. For required fields, usually indicated by red text, adding an ‘*’ would help to convey the importance of the field to visually impaired users.
- Accessible Forms: Forms are an important element in many websites. When we use them we need to label them appropriately, so that screen reader users have meaningful information about the fields to help them in entering the required data. Additionally, we should make sure that all the fields are keyboard accessible for screen readers and the tab order matches the visual order.
- Accessible Tables: For accessibility purposes, we should use tables only to display tabular data. We should not use tables for layouts or lists. We should rather use CSS for layout presentations.
- Meaningful Link Tags: Link tags should be given proper descriptive names. The links should not have text that says ‘Click Me/ Click Here’ or something vague. Descriptive texts help screen reader users to understand the context of the links which in turn helps them navigate the site more effectively.
- ARIA Landmark: Many of the Aria-landmarks overlap with HTML5 elements like <nav>, <header>, <footer>, <section>. For all those we do not need to use ARIA roles, we should always make use of native HTML elements whenever possible. But in case of dynamic content like pop-ups, modals and screen overlays, we can include ARIA-landmark to make these contents accessible. These are tags that help in defining these contents on the page. This MDN Document is a great starting point to learn how to use them for website development.
Conclusion
These are just some of the ways, in which we can make our websites more accessible. Web developers should also be well versed with the Web Content Accessibility Guidelines 2.0 (WCAG) which are published by Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C). These web accessibility guidelines will help us to understand the concept at a much deeper level.
