Looking at what a11y is, why it is important and techniques that could be implemented into a web application.
A11y is known for accessibility. It is best practice to ensure the web applications you build are accessible. What does this mean? It means ensuring those who have some form of disability are able to access information and/or view information on your application with ease.
Ensuring ARIA tags are placed correctly can help those who use screen readers. Checking the contrast ratio can help those visually impaired. Having a consistent layout and navigation within your application can help those with cognitive impairements.
This is the standard for accessibility. You can check the detailed standard here.
There are four main areas that are covered:
Perceivable: users must be able to perceive it in one way or another
Operable: users must be able to control the UI elements
Understandable: content must be clear and use simple language where possible
Robust: content should be developed using well-adopted web standards which work across browsers, keeping up with both past and future versions
WCAG 2.1 is the most recent and relevant standard.
Screen readers enable users to hear elements on a page. This is sometimes done via ARIA tags.
Here is an example of a progress bar:
<div
id="percent-loaded"
role="progressbar"
aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100"
></div>The visual presentation of text and images of text, should have a contrast ratio of at least 4.5:1 according to the WCAG 2.1 standard.
Images can have what’s known as an alt tag, this ensures people using screen readers, who might be visually impaired can be made aware of what the image is of.
<img src="image.png" alt="my image" />With the introduction of semantic html through HTML 5, instead of constantly using divs, we can using tags that screen readers can pick up from the HTML code.
<body>
<header>Hello I'm the Header</header>
<nav>
<ul>
<li>
<a href="">My link</a>
</li>
</ul>
</nav>
<content>
<h1>Here is where my content goes!</h1>
</content>
<footer>The end</footer>
<body></body>
</body>The tab index usually refers to the focusable element with a mouse or keyboard. Been able to navigate between elements via tabbing can be helpful to those who use screen readers.
<h1 tabindex="-1">Negative</h1>Here the author must focus the element with focus() in response to arrow or other key presses.
<h2 tabindex="0">Zero</h2>This is in tab order relative to element’s position in document.
<h3 tabindex="6">Positive</h3>tabindex value determines where this element is positioned in the tab order; smaller values will position elements earlier in the tab order than larger values.