Find aria-hidden with this bookmarklet

Use this bookmarklet to find aria-hidden attributes on your page. Continue Reading Find aria-hidden with this bookmarklet

I love purpose built bookmarklets that help you find problematic code. I got an email yesterday from Travis Roth about a potential vestigial aria-hidden attribute on an otherwise visible element. Unfortunately, it’s not uncommon to find an element that has aria-hidden=”true” on an element that is visible and should have either “false” or no aria-hidden attribute. This causes assistive technology to ignore the element.

My first reaction was to search the code for aria-hidden attributes, but this can take time and would have to be completed on each page to find the issue.

So I created the following bookmarklet that will find any element on your page that uses aria-hidden. It will force it to be visible and will display the attribute’s value.

screenshot showing the bookmarklets effect on hidden elements

To use this bookmarklet, drag the following link to your bookmark toolbar. Visit your questionable page and click the link.

aria-hidden bookmarklet
Continue Reading Find aria-hidden with this bookmarklet

ARIA Label Bookmarklet

I love simple bookmarklets that visualize coding patterns. I was working on a project today and wanted to verify that aria-labels were sufficiently descriptive. So I put together this quick bookmarklet.

aria-label bookmarklet

Simply drag that up to your bookmark bar and click on it whenever you need to test a page.

If an element has an aria-label, it should get a yellow background and the label displayed in red. Your particular styles may affect this.

If an has an aria-labelledby, it should have a pink background and the object it is pointing to will be displayed in green.
I’m labelling the next element


I’m using this on a project that uses aria-label extensively in a complicated form. In the past, I found some of the aria-label attributes didn’t provide adequate context, so this now makes it pretty simple to discover.

Neutered Links: A.K.A removing the href attribute

There’s an old programming saying: Garbage in, Garbage out. This helps people explain why all sorts of things don’t work. Concentrate on using the best content possible if you want a successful product, web page, mobile app, or chocolate covered cream puff. I’ve seen a new inaccessibility pattern appear with links that are not keyboard accessible. This article will explain the problem, solution, and provides a helpful bookmarklet for finding these neutered links on your page.

The Basics

HTML, at its most basic, is a markup language that allows linking; within a document and to an external document. These links use the <a> tag. The early HTML standards defined two functions for this tag.

Placing an href attribute into the tag converts it to a link, which can take the user to new content. This also places the link into the normal tab flow and makes it clickable.

Continue Reading Neutered Links: A.K.A removing the href attribute