{"id":20488,"date":"2022-12-02T11:57:12","date_gmt":"2022-12-02T11:57:12","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2022\/12\/02\/what-is-aria-in-accessibility-why-should-you-use-it\/"},"modified":"2022-12-02T11:57:12","modified_gmt":"2022-12-02T11:57:12","slug":"what-is-aria-in-accessibility-why-should-you-use-it","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2022\/12\/02\/what-is-aria-in-accessibility-why-should-you-use-it\/","title":{"rendered":"What Is ARIA In Accessibility & Why Should You Use It?"},"content":{"rendered":"

<\/a>\n
<\/p>\n

\n

ARIA, short for Accessible Rich Internet Applications, is a specification that is used to add accessibility information to HTML elements, making Web content and Web applications more accessible<\/a> for those with disabilities. The main guide<\/a> you should follow when it comes to applying ARIA is written by W3<\/a>. The guide details five rules of ARIA for developers \u2013 in this article we\u2019ll guide you through the first two.<\/p>\n

So, what is ARIA?<\/h2>\n

ARIA stands for A<\/strong>ccessible R<\/strong>ich I<\/strong>nternet A<\/strong>pplications.<\/p>\n

This essentially means applying native controls to custom HTML elements and it\u2019s broken down into two areas:<\/p>\n

Let\u2019s go through this in a bit more detail. Basically, ARIA is a means for a developer<\/a> to make a custom element behave like a native HTML element so that assistive technologies know how to present it to the user.<\/p>\n

A custom accordion is a perfect example of this, but did you know that there\u2019s a native HTML 5 accordion<\/a> and you don\u2019t even need any libraries?<\/p>\n

While we\u2019ll only be covering two of the five rules to ARIA<\/a> in this article, we\u2019d highly advise that you take the time to read all five at some point.<\/p>\n

Rule one<\/h2>\n

According to W3\u2019s guide, this is the first rule of ARIA<\/a> use:<\/p>\n

\n

\u201cIf you can use a native HTML element [HTML51] or attribute with the semantics and behaviour you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.\u201d<\/p>\n<\/blockquote>\n

Stop and think about what you\u2019re going to be making. Do you really need to use some custom JS and HTML? Can\u2019t you simply use a native HTML 5 element?\u00a0 More often than not, you actually can use a native element and it will only require a bit of CSS styling to make it look close to the designs.<\/p>\n

If you do go down the custom route, are you clear on how to use the roles<\/a> and states<\/a> accordingly? There\u2019s a quite daunting list of things that will need to be applied to all the various interactions involved with this new component.<\/p>\n

Rule two<\/h2>\n

W3\u2019s guide states that this is the second rule of ARIA<\/a> use:<\/p>\n

\n

\u201cDo not change native semantics, unless you really have to.\u201d<\/p>\n<\/blockquote>\n

A good example of one of the most common mistakes is applied to the humble button.<\/p>\n

Wrong:<\/h4>\n

<a href=\u201d#\u201d role=\u201dbutton\u201d class=\u201dbutton-class\u201d>Button<\/a><\/p>\n

This technique also involves additional custom JS to stop the anchor behaving like an in page scrolling anchor and so on. Not only that but this implementation of a button is still not even accessible in the default tab indexing of the page due to the preventDefault() used in the JS to override the default browser scroll behaviour!<\/p>\n

Correct:<\/h4>\n

<button class=\u201dbutton-class\u201d>Button<\/button><\/p>\n

Yes, it\u2019s a button so make it one. It solves all the problems that you just had to work around.<\/p>\n

Basically, do not use the ARIA roles to override default HTML 5 behaviour. Always retain default roles and states for a HTML element. It should be semantically correct, which is good for accessibility, SEO<\/a> and probably all round usability in general.<\/p>\n

If you do have to use ARIA<\/h2>\n

Take note of all the ARIA rules, but this list of tips<\/a> should also provide some good guidance on debugging.<\/p>\n

Try and think about user interactions with your custom element and how they\u2019re getting feedback from the events that occur. Some people may have be completely blind or not use a mouse, so take this into consideration.<\/p>\n

A massive downside to building a custom element is that it won\u2019t contain any of the default keyboard navigation<\/a> associated with it and you\u2019ll have to replicate them all with ARIA states. This can sometimes be a huge task \u2013 but ignoring that fact, do you know what the default keyboard navigation is for that component you\u2019re trying to replicate?<\/p>\n

There\u2019s a saying:<\/p>\n

\u201cNo ARIA is better than bad ARIA.\u201d<\/p>\n

ARIA is a very powerful thing and if used incorrectly it can be incredibly destructive to those using assistive technologies. There\u2019s a great article on this issue<\/a> that you should take into consideration before you start.<\/p>\n

A webAim survey of over one million homepages<\/a> found that pages with ARIA implemented on them averaged over 41% more errors detected than those without any ARIA.<\/p>\n

Keep in mind that if it is difficult to make a component accessible then maybe it\u2019s too complicated for users to use without assistive technology. It might be time to rethink and simplify the component.<\/p>\n

Round-up<\/h2>\n
\n
\n
\n

Follow the five rules of ARIA<\/a>.<\/p>\n

Stick with native HTML and components as much as possible because all browsers and assistive technologies understand it. Don\u2019t reinvent the wheel.<\/p>\n

Think about the feedback you are going to need to give when somebody interacts with your component and make sure to apply the appropriate roles and or states.<\/p>\n

Only use ARIA when it\u2019s needed to give additional feedback, but if you do create a new component, always test it thoroughly.<\/p>\n

Want a helping hand with your website accessibility<\/a>? Don\u2019t hesitate to get in touch<\/a> with our development team.<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n