A11y

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.

If you are a web developer working on a Mac, you can become a hero for thousands of people out there by assuring that anything you create for the web can be read properly by a screen reader. This blog post is going to teach you how to access and wield this super power that is built into the OS you use everyday.

Tips on how to improve the accessibility of your JavaScript components and provide users with more and better ways to interact with your…

Notes from the Inclusive Design and Accessibility meetup, 20 February 2017 in Amsterdam.

Color blindness or color vision deficiency (CVD) affects around 1 in 12 men and 1 in 200 women worldwide. This means that for every 100…

It is not uncommon to see developers and designers forego creating focus styles for controls on web sites and applications. For those who are aware of the need for the focus styles, the most common reason I hear for excluding them is that the browser provides focus styles by default…

Developers and designers of mobile applications must always focus on ensuring accessibility for vision and hearing impaired users. This article will

This guideline will introduce accessibility thinking and how to design usable experiences for everyone.

Accessibility can seem like a daunting task, but even a few small considerations can lead to better, more accessible websites.

Building upon our accessibility mindset, in this part of Scott Vinkle’s three-part series we journey into the land of accessible code. We cover the basics of writing semantic HTML, and we explore why native HTML elements are so effective in creating highly user-friendly websites.

Start by experiencing how people use a computer differently than you: with a keyboard (no mouse) and screen reader.

Introducing a simple process and template for doing a11y testing — no WCAG knowledge needed.

Contrast is a critical factor in web design, it’s important to get right because it has a strong influence on the visual aesthetic, but it’s especially important for readability and accessibility of text on the page. It’s not a revolutionary idea to suggest that we use Less or Sass to help choose an appropriate text color for a particular background. There are plenty of examples of this, but what is the best way?

The most accessible format for any content on the web is plain text. Plain text is incredibly malleable, it can be altered in ways to cater to almost any disability. For users with no visual difficulties, they can simply read the text. If a user has visual impairments, the text

This post represents a final distillation of my talks given on Accessibility and Performance at Fronteers, Seattle JS and Generate NYC in…

Use HTML codesniffer to grade accessibility . Contribute to yargalot/grunt-accessibility development by creating an account on GitHub.

The home of typing by Alice Bartlett 👩🏻‍💻

What do you do when your HTML doesn't communicate the appropriate semantics to screen readers? You use the roles, states, and properties of WAI-ARIA.