How to get a free shirt (and make accessible web sites) 🆓 👕🚨

Allowing people with disabilities to use your website is too easy to be an afterthought.

A simple perspective to make a web site accessible is to achieve two goals:

1. Can any flow on the site be performed with just tab, enter, and arrow keys (emulating accessibility switches)?
2. If you navigate the site with a screen reader plugin, do all of the labels make sense?

Achieving #1:

It’s mostly about tabindex .

• Q: What belongs in the tab ordering?
• A: Interactive elements only. Great news: if you use the right semantic html elements, you get this for free. input, select, a, button, etc will be a part of the natural top-down, left-to-right tab ordering. Non-interactive elements like img, div, p, h1, etc will not be added to the tab ordering out of the box.
• Q: I have an interactive element that is not in the tab ordering. How do I add it?
• A: This happens if you’re using a non-interactive HTML tag for an element you intend to be interactive. An example of this I often see is when you want an image, icon, or GIF to be clickable like a button. You can add an element with a non-interactive HTML tag to the tab ordering by giving it a tabindex of 0, or you can wrap the element in a button or a tag. If you go with the former you should give your element the appropriate aria-role .
• Q: I have a non-interactive element in the tab ordering. How do I remove it?
• A: This happens when you are using an interactive HTML tag for an element you intend to be non-interactive. I would try to replace the interactive HTML tag with an appropriate non-interactive one first. If you must though, you can remove an element from the tab ordering by setting its tabindex to -1.

Besides that, it’s mostly about visual indicators.

• Can you tell which element is being focused with each tab?
• Like tabindex above, you should get visual indicators on the appropriate elements for free. When I see a visual indicator missing, it is usually because someone has removed the default outline property from an interactive element—perhaps they thought it looked bad on their buttons or links. Don’t do that 🛑.

Achieving #2:

It’s mostly about aria-label’s.

Ideally your button’s are descriptive enough: “Log in”, “Log out”, “File a claim”, “Chat with us”, etc. But sometimes they’re not: “Get started”.

Get started with what? Simple fix: just add an aria-label to the element, for example: “Get started filing a claim.”

And that’s pretty much it. Of course there’s a lot more bonus points you can rack up with accessibility but just doing the above two things — which are almost entirely achievable out of the box by using the right html elements or with just minor tweaks to tabindex and aria-label’s — you will already have a more accessible site than most. The tools below will easily take your accessibility practices to the next level.

Tools:

Scanners that will help you meet the above 2 criteria and more:

• Lighthouse: Built into Chrome Developer Tools
• Axe: Grab axe beta while it’s free AND get a free t-shirt 7 days after signup

Each issue discovered with Axe comes with a Learn more link that provides awesome perspective on how to resolve that issue and why it matters.

Screen reader that will help you test your aria-label’s (or lack thereof):

• ChromeVox plugin

What’s next?

If you’ve made it this far, thanks for reading and enjoy the free shirt! I’ll write a follow-up that covers some extra accessibility practices that will take your site to the next level. As a teaser, I’ll leave you with two links on my favorite*: the skip link.

• Skip link
• Why it matters

*It’ll be your favorite too if your site has a header.