Web Accessibility With ARIA
Kris Nicolaou, January 4, 2021
We think that inclusivity is essential, whether it is on a personal level or business level. This means that interactions with technology should be accessible to everyone and not be confined to the non-disabled only. ARIA shines in creating a fair chance for almost everyone.
Before Aria, a new set of accessibility problems started to materialize when web applications began to get more dynamic and synthesized.
For example, HTML5 established several semantic elements to interpret standard page features.. The previous interpretation made it challenging for a program like a screen reader to find a specific page feature, such as the main navigation.
The problem was resolved with HTML5, but it was still not precise in that it could only be used when the screen reader read from the top of the page only. This made website accessibility not fully supported across browsers and made it difficult to integrate accessibility with web designs and development.
Visually the screen readers worked, but they couldn’t make any sense of what the elements on the web page were, and users were read all the text with no explanations.
How Does ARIA Work?
W3C wrote Web Accessibility Initiative (WAI)-ARIA that defines a group of added HTML attributes to improve accessibility when lacking in web design and development. There are three main components:
Roles specify what an element is or what it does. Many of these duplicate the semantics of HTML5’s structural elements.
Properties define the elements and give them extra meaning.
States are unique properties that interpret the present conditions of elements, which convey to the Screen Reader that form input is disabled.
Support for ARIA
ARIA web accessibility support is based on the browser version, operating system, and the assistive interfacing technology. Outdated software versions may not be supported or have limited assistance to specific ARIA roles.
We’d like to note that some people who use assistive technology may be reluctant to upgrade or use the latest software versions. To mitigate this, use semantic HTML elements wherever possible as it provides better support for assistive technology.
Web browsers that support ARIA are:
- Firefox (3.0+)
- Chrome (Latest)
- Safari (4+)
- Opera (9.5+)
- Internet Explorer (8+)
When Should You Use ARIA?
Earlier, we mentioned some of the problems that prompted the creation of WAI_ARIA. Web accessibility with ARIA is useful in the following four areas:
- Enhancing keyboard accessibility
The role attribute values in ARIA can act as landmarks that go beyond HTML5 or replicate the semantics of HTML5 elements to provide signposts for different functional areas, such as tab, search, list box, tab groups, etc.
- Dynamic content updates
ARIA-Live can be used to inform screen readers whenever an area of content has been updated or changed.
- Accessibility of non-semantic controls
Use WAI-ARIA only when it is necessary to do so. Otherwise, make use of native HTML features to provide screen readers with the semantics they require.
ARIA Web Accessibility Example
Jacob is a colour-blind individual who encounters issues when shopping online. Jacob has problems when the colour contrast of text or images is not adequate. When red and green are used, they look brown to him. It is also difficult for him to make choices when coloured products are not labelled. Web accessibility initiatives can provide Jacob with a better online shopping experience.
“You can become a better web developer or employee if you understand accessibility, its scope, and its impact. WIA-ARIA is a web accessibility initiative that bridges the gaps and reaches people outside the narrow range of the ‘typical’ user.”