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.

ARIA is an acronym that stands for Accessible Rich Internet Applications. It is a set of attributes that specify ways to make web content and applications more accessible to those with disabilities. This is especially important if the content or app is Javascript-developed.

ARIA supplements HTML so that standard widgets and interactions in applications are passed on to assistive technologies when there is no other mechanism to do so. For example, ARIA authorizes accessible navigation landmarks in HTML4, uses hints and error messages, JavaScript widgets, live content updates, and much more in order to allow individuals to use an application or website to its full potential. ARIA offers an easy web accessibility platform for people who use assistive technology.

Before ARIA

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

  Roles specify what an element is or what it does. Many of these duplicate the semantics of HTML5’s structural elements.

• Properties

  Properties define the elements and give them extra meaning.

• States

  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

  Sometimes, keyboard accessibility and screen reader reporting suffer when other elements are used with JavaScript. They simulate similar interactions of the built-in HTML elements that have native keyboard elements. Use WAI-ARIA to enable other elements.

• Signposts/Landmarks

  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

  Accessibility can suffer when native control is greatly enhanced or complex UI features are created by CSS/JavaScripts. Screen reader users have difficulty working out what a feature does if there are no clues or semantics and use ARIA to help provide what’s missing.

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.

PRO TIP:

“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.”