The saying to code by is, “No ARIA is better than bad ARIA.” In fact, the WebAIM million survey found that home pages with ARIA averaged 41% more accessibility errors. The biggest developer pitfall when it comes to ARIA is adding it haphazardly or just copying and pasting it from other code. We mentioned this above, but it’s worth saying again before we dive into the examples. Watch the video below to see how incorrect ARIA affects users using a screen reader.īack to top Biggest developer pitfall when it comes to ARIA If it is added haphazardly or just copy and pasted in, it can cause significant problems for users with disabilities. To see a more detailed example of this rule in action, check out the button example below.īack to top Impact of using ARIA incorrectlyĪRIA requires HTML knowledge to use it correctly. Instead, the native HTML element should’ve been used. This rule really means if there’s a native HTML element or attribute that’ll get you the behavior you’re looking for, then just use the HTML element or attribute.įor example, ARIA is often used incorrectly when people make buttons from divs or links. The first rule may sound funny, but it’s don’t use ARIA. There are actually five rules when it comes to using ARIA. The assistive technology user can now differentiate between the two menus. Now, the screen reader would announce “User Menu” for the top navigation and “Main Menu” for the left navigation. Without any ARIA added, assistive technology, like a screen reader, would announce both as “navigations” because of the HTML nav element.īut, the aria-label attribute renames the element. In the HTML below and the accompanying image of the web page, there are two navigations using the nav HTML element. Here’s an example of how ARIA is used to make a page more accessible. Example of how ARIA can make a website more accessible To end this introduction, we’ll show you how incorrect ARIA impacts user’s with disabilities. Then, we’ll go over the number one rule of ARIA. Let’s start with an example of how ARIA is used. Introduction to ARIA for people editing HTML If you build websites or work with HTML, keep going to learn more about ARIA, the impact of using ARIA incorrectly, and how to handle common ARIA situations. So, if you don’t work with HTML, you’re done! You have the ARIA basics you need. Wait! Before you keep going…Īt this point, you know what ARIA is, and you know that incorrect ARIA can actually make your website less accessible. That’s because using ARIA incorrectly can actually make a website less accessible, so it’s important anyone editing HTML is familiar with ARIA. In fact, WebAIM’s web accessibility evaluation tool, WAVE, has an entire category dedicated to showing you where ARIA is on a website. Not all HTML elements have accessibility built into them, so ARIA is used to add that accessibility. Rather watch a video on ARIA? Watch our What ARIA is and its impact on accessibility to learn what ARIA is, why it matters, and examples that show why ARIA matters.ĪRIA, or Accessible Rich Internet Applications, is HTML used to make webpages more accessible.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |