In our previous accessibility post, Choosing ARIA Landmarks: Get Your Semantics Right, we discussed how blueprints can help our developers implement the proper ARIA structure for their sites and applications.
One of these blueprints is an ARIA overlay, which groups content on the wireframe and labels them with ARIA landmarks that should be included to maximize accessibility for all users. The availability of landmarks allows users of assistive technology to use a keyboard shortcut to quickly navigate through the page. The ARIA overlay is a visual tool to review what content is included in which landmarks.
Recently, we teamed up with the University of Illinois at Urbana-Champaign Disability and Resource Educational Service (DRES) to make this into an open source project with a collection of accessibility bookmarklets that quickly and easily visualize headings, lists, forms, and other accessibility concerns. To download these bookmarklets, contribute to this project, or learn more about these visualization tools, please visit our website. For more about web accessibility in general, see the W3C’s site.
Take a look at this short demo video of the landmarks bookmarklet:
It is our vision that creating new tools and processes to incorporate accessibility early in the project’s timeline and designing for accessibility will minimize violations during final testing. Remember, just because content is free of violations doesn’t mean it provides the best experience for all users. Early project attention to accessibility provides an optimal user experience that allows everyone to use and contribute to the web.
For more information on how Pixo incorporates accessibility into the design and UX teams’ processes, you can download our presentation slides. We’d love to hear how your team plans ARIA landmarks or includes accessibility considerations in the UX and design processes. Feel free to share ideas in the comments below.