If you want to be a Good Frontend Developer then you Should Care About Web Accessibility.
When we say a site is accessible, we mean that the site’s content is available, and its functionality can be operated, by literally anyone(including differently able people)
The W3C Web Accessibility Initiative (WAI) develops technical specifications, guidelines, techniques, and supporting resources that describe accessibility solutions. These are considered international standards for web accessibility, which are linked in the resources at the end of this article.
Type of disabilities
- Keyboard Navigation
- Screen Readers (Assistive technologies)
- ARIA_Attributes
- Semantic HTML
Types of disabilities :
Web accessibility encompasses all disabilities that affect access to the Web, including:
- Visual Impairments (Blindness, Low vision, Color blindness)
- Auditory (Hard of hearing, deafness, etc)
- Cognitive (learning disabilities etc)
- Speech (Muteness, Dysarthria, etc)
- Physical (Paralysis, Amputation)
Keyboard Navigation [tabindex=0]
Blind users or users with tremors might rely on a keyboard instead of a mouse for navigation. Basically, most of the social media websites like Facebook, Twitter, Youtube, etc are accessible with a maximum of two keystrokes (keyboard accessible ) .header over to youtube.com and click on the shift + ? button a modal pops up with a list of the keyboard shortcut to access the website. On every website, you can navigate using the tab keyboard. Remember div and spans are not tabbed accessible unless they are added with the attribute tabindex=”0" (this mean that the element should be focusable and reachable via sequential keyboard navigation)
Screen Readers:
Screen readers are a form of assistive technology that helps users who are blind, visually impaired, or have learning disabilities navigate the web. They translate text into auditory or tactile output by reading it out loud.
Popular Screen readers:
JAWS,NVDA(Windows), Voiceover(Mac), Chromevox(Chrome).
Alt text (Accessible Images): Make sure you always add an alt attribute to the images, A screen reader will announce that it’s looking at an image and read the alt text. Besides, it will also benefit from seo and cases where your image is not loaded, and hovering on that can describe the defined text of the image.
ARIA Properties
Accessible Rich Internet Applications (ARIA) provide a set of attributes that includes roles, labels, and states that help us communicate semantic information to assistive technology. ARIA attributes make web content and applications more accessible.
aria-label, aria-labelledby, aria-expanded, aria-hidden, and role.
As the screen reader reads the icon links as the content in href , adding the aria-label instructs the screen reader to read the content in the aria-label.
aria-expanded is helpful in a scenario where the menu is in a toggle state(opened/closed) in mobile devices.
the role attribute is used where you have an element that is not semantically meant to ex: if you use div to create a button instead of the button tag due to some reasons then in order to make it semantic you can define role=” button”.
Semantic HTML 🔥
Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.
Elements such as
<header>,<footer>and<nav>are all considered semantic because they clearly describe the purpose of the element and the type of content that is inside them.
Examples of non-semantic elements:<div>and<span>- Tells nothing about its content.
When we write semantically correct HTML, we’re letting the browser know what type of content it’s dealing with and how that content relates to other content. By doing this, assistive technology is more easily able to do its job because it has a structure that it can work with.
Always use semantic HTML to communicate layout by using tags like <header>, <article>, <nav>, <section>, and <footer>. When we have to use non-semantic HTML, like <div>or <span>, we can provide the necessary context with aria-landmarks, like role=”navigation” or role=”main.”
Semantics in REACTJS🧑🏻💻:
Sometimes we break HTML semantics when we add <div> elements to our JSX to make our React code work, especially when working with lists (<ol>, <ul> and <dl>) and the HTML <table>. In these cases, we should rather use React Fragments to group together multiple elements.
More about accessibility in REACT applications : https://reactjs.org/docs/accessibility.html
Testing
There are lots of ways to test your site. You can install accessibility auditors on Chrome to run checks for basic things. You should also test navigating your site as a keyboard user. You should be able to use the tab to move forward and shift + tab to move backward. Accessibility developer tools extension in the chrome that helps you to do an audit on the site accessibility.
Resources:
- Web Content Accessibility Guidelines (WCAG) 2.1 https://www.w3.org/TR/WCAG21/
- WAI-ARIA Authoring Practices: https://www.w3.org/TR/wai-aria-practices-1.1/
- Aria-attributes: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
- Web Accessibility in ReactJS applications: https://reactjs.org/docs/accessibility.html
