Coding for Beginners: Web Accessibility #12— What is WAI-ARIA?
Interested in Web Access Pro to analyze and fix Accessibility Errors on your site? Get your 14 Day Free Trial: https://join.designerslearncode.com/w...
The Daily Code Snippet is part of our "Coding for Beginners" video series for designers to learn the basics of HTML and CSS coding. We teach a single, easy to understand concept in each video so that you can learn to code even if you have a busy schedule. Subscribe here: / @designerslearncode
------
Before discussing how to make buttons accessible we need to talk about WAI-ARIA.
WAI-ARIA stands for the Web Accessibility Initiative Accessible Rich Internet Applications Suite. WAI-ARIA helps dynamic content and user interface controls that are created with HTML, javascript and other technologies become more accessible to people with disabilities. Without WAI-ARIA some website functionality will not be available to some users with disabilities, especially those who rely on screen readers and those unable to use a mouse.
When possible, we still want to use accessibility features built-in to HTML5. There is a website that tracks how well browsers are implementing the latest accessibility features of HTML5 here: http://www.html5accessibility.com/.
When HTML5 doesn't fully address accessibility, we need to use the framework provided by WAI-ARIA. WAI-ARIA is used to describe navigation and identify structures such as menus, primary vs secondary content, and banner information. This helps users identify and move region by region on a web page rather than having to press "tab" multiple times to get where they want to go on a page. WAI-ARIA is also used to map controls, live regions, and events to APIs (application programming interfaces). So it applies to buttons, drop-down lists, calendar functions, expandable menus, and more.
Roles are used to identify the type of widget presented such as a "slider," "menu," or "progress bar." They can also be used to describe a structure such as a "heading," "region," or "table." The state of a widget can also be described such as whether a checkbox is checked or not.
We will go over some of the basics associated with WAI-ARIA but to fully understand its features please review the standards set out by the W3C: https://www.w3.org/WAI/standards-guid... and WAI-ARIA 1.1 are the current set of guidelines from 2017: https://www.w3.org/TR/wai-aria-1.1/. WAI-ARIA 1.2 is currently under development.
#HTML #CSS #coding #webdesign #webdesignerslearncode #dailycodesnippet #codingforbeginners #accessibility #learntocode #wai-aria #waiaria #webaccessibilityinitiative #WebAccessibilityInitiativeAccessibleRichInternetApplicationsSuite #accessiblerichinternetapplications(aria) #webaccessibility #webaccessibilitytutorial #accessiblebuttons #assistivetechnology #arialabel #arialandmarks #ariahtml #ariaattributes #webaccessibilitystandards