A11y

In dealing with role="presentation" and aria-hidden="true" you may find that they both have deceptively similar functions when it relates to how they interact with assistive technology (screen readers). Before we dig into the difference between these two attributes we first need to learn a little bit about how accessibility in a Web browser works and…

Useful resources dealing with web accessibility

This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.

Alan Dalton takes a detailed look at WCAG on this UN International Day of Persons with Disabilities. Remember, Christmas is a time of good will to all, no matter if you have difficulty seeing, hearing, reading, or just have a very shiny nose.

There's a lot of content out there on how to make your website accessible. But I haven't seen much on the subject of accessibility to users of screen magnifiers. I'm one of them, and I frequently run into annoying issues on the web.

Accessibility Object Model. Contribute to WICG/aom development by creating an account on GitHub.

A beginner's guide to digital accessibility.

I’ve been asked again and again over the years what the absolute basics of web accessibility are. And while I always thought that it is not so difficult to find resources about these basics, the recurrence of that question prompted me to finally write my own take on

Having a handy WCAG checklist is brilliant when you’re working through the guidelines. See all the guidelines in order here, from Level A to AAA.

They say beauty is in the eye of the beholder. As designers, we need to remember that the same is true of color, and all visual abilities. UX Booth author and visual UX designer Nick Babich has a list of how-tos, to help make every design both beautiful and usable.

It's Colorblind Awareness Day today! To celebrate, we raise awareness by giving you some practical examples of how design can hurt or help users with…

We all know that accessibility is important. The problem is, it is not always clear what exactly we can do to make our sites more accessible. The Web Accessibility Initiative created some Web Content Accessibility Guidelines (WCAG) targeted at us, web content developers, to create more accessible websites. The WCAG

The visual interface is an obvious place to begin digging into accessibility. In this article, we’ll discuss some of the most common visual impairments, focusing on color-blindness to explain how you can make small changes to your workflow and products to ensure you’re not alienating users.

Enabling design & development teams to use colors deliberately for improved consistency in product

The Tenon.io blog

I field questions pretty regularly about what is coming in WCAG 2.1. I have offered links to the spec, pointers to W3C mailing list email, references to other posts (most recently David MacDonald’s post that looks at the same version as this post), but have avoided gathering them in one…

The A11Y Project puts it best, and most bluntly: “Accessibility is hard.” If you’re feeling lost, start with color contrast.

Don't leave anyone out who wants to learn about your products or services.

What is accessibility and why does it matter? Part 0 of a series introducing accessibility, assistive devices and technology, inclusive design, and web accessibility standards and tools. Will include asides on why language matters, the medical vs social models of disability, why Comic Sans isn't the worst thing ever, and fun with acronyms - WCAG, POUR, ARIA and more! Glossary will be updated as the series develops.

To screen readers, a lot of the visual information that is presented on a webpage is lost. Because of this, we need to specifically provide information to them that may be obvious to a person looking at the page. One common way people define information specifically for screen readers is

The award for most-visible focus styles goes to GOV.UK. The bright orange background color provides better-than-average contrast against the default background and text colors. It’s very consistent across the UI: clicking in an input field sets a visible border in the same color, well executed because there is no shift in layout (CSS outline for the win!).

Coding for accessibility? You should get familiar with the accessibility tree, a structure produced by platform Accessibility APIs running parallel to the DOM, which exposes accessibility information to assistive technologies such as screen readers. There are multiple tools for visualizing this tree; in this lesson we'll look at Chrome and Microsoft Edge. For more on Accessibility APIs, refer to this amazing article by Leonie Watson. For a how-to on setting up the Chrome Accessibility Inspector, visit bit.ly/chrome-a11y.

It’s cool to hate comic sans. But it’s also problematic.