If you want to sell, make it Accessible!
Accessibility should not be treated as a nice-to-have feature, but it should be the topmost priority for any product. Always assume the product we are developing will be used by many people with disability.
VMware rolled out a VMware’s Advocates program to train our developers, designers, and content creators on how to make their work more accessible. If you are a developer, check for such programs in your organization, and join those!
“The disability is not the problem, the accessibility is the problem.” — Prof. Mohamed Jemni
Let’s discuss Web Accessibility and some of the best practices we should follow as developers.
What is accessibility?
Accessibility means your product is usable, and the functionality can be operated by everyone, no matter their ability. It also means adding different ways to use the product for people with disabilities. Basically, it should be treated like a fundamental right.
“Accessibility allows us to tap into everyone’s potential.” ― Debra Ruh
According to the WHO Disability and Health index, over 1 billion people live with some form of disability, and this corresponds to about 15% of the world’s population. So, it’s critical that whatever product we are building should also be made accessible for that 15%.
Types of Disabilities
When we talk about accessibility, we have to first understand what are the different types of disability exist. Without understanding these in detail, we cannot make the product fully accessible. Below are some high-level categories, as outlined in the Web Accessibility guidelines:
- Visual Disabilities: This can have sub-categories like blindness, low-level vision, and color blindness, etc. People with visual disabilities can use physical magnifiers or software zoom, as it is available in many modern browsers and operating systems. They also use the screen readers which read out the text based on user's selection.
- Hearing Disabilities: This can have various levels of hearing loss, ranging from deaf to hard-of-hearing. Ensure that we are not relying only on sounds and have captions and transcripts.
- Cognitive Disabilities: This can have sub-categories like ADD (Attention deficit hyperactivity disorder), Autism, and Dyslexia, etc. Ensure we have different ways to deliver our content like text-to-speech or video, consistent layout, easy forms with clear error messages.
- Mobility/Dexterity Disabilities: Disabilities related to movement, which might involve physical disabilities such as loss of limb or paralysis, or neurological/genetic disorders that lead to weakness or loss of control in limbs. Ensure keyboard accessibility for all functions and have logical tab order. Skip links can be added to navigate across the site.
Developer’s Role
First, come out of the developer's comfort zone and start thinking like a real user. Apart from concentrating on looks, functionality, security, and performance, it’s essential for us to keep in mind that the product we are developing will also be used by many people with disability, who may not be able to see, touch or interact with the product the way we do. To make our product accessible, proper planning is required. To achieve this, Web Content Accessibility Guidelines (WCAG) is a good starting point to understand accessibility in detail. Furthermore, The A11y Project are some excellent resources related to accessibility.
Web Accessibility Best Practices
Accessibility starts from the design phase itself. As developers, make sure to discuss with the UX team about the accessibility guidelines they are following and the best way you can contribute. Below are some key points we should follow as a best practice.
- Easy to Navigate:
a. Avoid using many links on each page.
b. Make links look different from the normal content.
c. The web page should be easily accessible via the keyboard tab.
d. The keyboard tabs should be highlighted properly with outlines, and it should be in a logical order. - Proper landmarks:
a. Landmarks are regions of a page such as a header, navigation, body, footer, sidebar, etc.
b. Consider separating out the content with semantic HTML tags such as header, main, nav, section, etc. - Text clarity:
a. As per the W3C, the minimum contrast ratio between text and background should be 4:5:1.
b. Use units like em, rem, pt, etc. to allow font resizing.
c. Bold texts should be minimum of 16px.
d. Spacing between lines should be a minimum of 25% of the font size. - Don’t rely only on color:
a. Colors are the easiest way to communicate any information, but we should not rely on colors solely because this will be an issue for people with color blindness.
b. Apart from colors, add some form of text or shapes to communicate the same information.
c. Colors should have proper contrast of min 4:5:1. - Make shapes accessible:
a. Always add a text label.
b. Check the color contrast.
c. Icons should not be tiny, should be properly sized.
d. Mouse, touch, and keyboard are accessible. - Semantic HTML:
a. Semantic HTML or Semantic markup adds meaning to the web page. For example, the nav tag indicates that the enclosed section is the page navigation. Same way, we should use other semantic HTML tags to define our web page, such as <header> <section> <p> <aside> etc.
c. Use the semantic HTML as much as possible, e.g., <button>Click Me</button> for buttons and not <div>Click Me</div> and make it look like a button.
d. Order the HTML content properly, such as the h1 to h6 tags, should be used in a specific order which helps the screen reader to read out the content properly.
e. For images, <img src=”picture.jpg” /> always add a meaningful alt=’’ attribute. As a good practice, keep the text length under 50 characters.
f. Use title=’’ attribute wherever required. This will help to show the extra information for the element.
g. User proper roles=’’ for the elements. This will help the screen readers or magnifiers to describe the role properly. - Use Aria attributes properly to make elements accessible:
a. Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications accessible.
— Remember: No Aria is better than a Bad Aria, use cautiously! - Ensure users have the time to interact with the content:
a. For components like alerts and banners that shows and hides away, we should give people enough time to read them.
b. Alerts and banners should be made accessible so that the screen readers read out the content. - Simplify the forms:
a. The forms should be made as simple as possible.
b. Simplify navigation between different form elements.
c. Proper relation between labels and the form fields by adding for=’’ and id=’’ attributes.
d. Handle error messages properly for each form field. - Be careful with Animations/Transitions:
a. People with extreme motion sickness occasionally find trouble with animations/transitions.
b. Most of the modern OS today has the feature to enable reduce motion, enabling which reduces the impact of the animation. Consider using “prefers-reduced-motion” in CSS to leverage the same as -
.animate {
animation: slide 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.animate {
animation: none;
}
} - Dark theme:
a. Consider giving the option for switching to Dark theme as this really helps migraine patients to interact with your site with ease without any problem.
b. You can also consider auto-switching the theme as per the OS preference.
Web Accessibility Testing Tools
There are many good tools out there for doing web accessibility testing. Below are a couple of tools that can be used for the same:
- Accessibility Insights — Accessibility Insights for Web is an extension for Chrome and Edge that helps developers find and fix accessibility issues in web apps and sites.
- WAVE — WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. Here is a video https://youtu.be/ITUDiTgAZY0.
Above, I just touched the tip of the iceberg and Accessibility is a very broader term that needs to be understood in detail, discussed, and implemented properly in all our products. Accessibility is not something we can learn in a single day, it comes with practice as we work more and more on it.
VMware Accessibility, is a dedicated place where we can learn more about Accessibility!
Keep learning and keep serving the community! Peace ✌️
