Our Blog

Related Posts

Lawsuits for websites that do not comply with web accessibility standards are on the rise for e-retailers, content providers, and other private companies.

Accessibility-driven design: Learn why and how to map out your ARIA Landmarks as soon as you start planning site architecture design & writing HTML5 markup.

Incorporate accessibility improvements early by empowering designers and developers with these tools and agile processes.

Popular Tags

Recent Comments

Landi Lark

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.

ARIA overlay showing landmarks on a page
Example of a wireframe with ARIA landmarks manually highlighted.

To best visualize the accessibility holes and features on a site in regards to ARIA landmarks, we created a JavaScript bookmarklet that highlights the ARIA landmarks on a page, much like the overlay above.  

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.

Comments

3 thoughts on “Our new bookmarklet helps visualize design of ARIA landmarks

  1. Landi,

    The ARIA landmark overlay will be a very useful tool for web designers and developers.

    Unfortunately, there’s a message where the video displays saying I need to request permission from the owner to see the video. I would attach a screenshot, but it doesn’t look like the comments allow attachments.

    Reply
  2. Hi Deborah!

    We fixed the share settings on the video. Thank you for pointing that out. I do hope you find this post and these tools useful!

    Reply
  3. Pingback: Weekly Roundup of Web Design and Development Resources: November 6, 2015

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required

Related Posts

Lawsuits for websites that do not comply with web accessibility standards are on the rise for e-retailers, content providers, and other private companies.

Accessibility-driven design: Learn why and how to map out your ARIA Landmarks as soon as you start planning site architecture design & writing HTML5 markup.

Incorporate accessibility improvements early by empowering designers and developers with these tools and agile processes.

Recent Comments

Interested in working with us?
CONTACT US