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.
To use this bookmarklet, drag the following link to your bookmark toolbar. Visit your questionable page and click the link.
Continue Reading Find aria-hidden with this bookmarklet
Lings Cars is a great example of really bad design. Please Note: this has flashing images and autoplay sounds.
The :root selector targets the highest level parent, which would be the <html> tag in an HTML document. The :root has a higher specificity, as it is a pseudo-class instead of a plain element.
CSS-Tricks has a great description on this: :root by Sarah Cope.
In this example, the background of the page would be red, as :root is more specific than html.
The :root selector is supported across all major browsers.
I don’t know about you, but I have a terrible time typing “accessibitily”. That right there was a common typo that keeps popping up. My fingers get tangled typing the last 6 letters. So here’s a little tip for my fellow Mac users. I’m sure there is a similar version for PC users.
Continue Reading Avoiding accessibility typos
Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.
Continue Reading CSS3 Gradient Backgrounds and Controlling Their Height