It can be a challenge for developers interested in learning how to implement Accessible Rich Internet Applications (ARIA), which defines ways to make web content and web applications more accessible to everyone.
First, there’s learning the basics of how assistive technology works. Second, there’s no visual points of reference for validating their work.
Thanks to my friend Scott Williams, web accessibility coordinator at the University of Michigan, for sharing this resource earlier today, there’s a helpful resource that aims to solve one of those challenges.
What is Visual ARIA?
- Development teams
- Everyone interested in learning how ARIA works in a visual manner
How Visual ARIA Works
For many developers, ARIA is an invisible technology. Visual ARIA solves that by making it a visual technology based on ARIA specification compliance.
ARIA static roles are identified with a purple border and tooltip, a blue border and tooltip identifies structural roles, a red border and tooltip identifies role usage errors within structural role usage.
Additionally, live region and interactive roles are identified with other colored borders and corresponding tooltips.
From the Visual ARIA page:
- This allows sighted educators within classrooms to visually teach the cause and effect of ARIA usage to their students;
- for students to visually validate their assignments and coding projects while experimenting;
- for online learning courses to provide real-time ARIA feedback for shared coding projects;
- for QA teams to evaluate ARIA usage without need of prior experience using Assistive Technologies;
- for engineering teams to visually validate agile development projects using ARIA with real-time results,
- and for any sighted person who is interested in ARIA to observe how it is applied on any website.
Learn more about how to install Visual ARIA, the details on how it works, and limitations on the Visual ARIA website.