A11y

The Tenon.io blog

Improving accessibility for web pages

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.

Another message to my past self, this time on the importance of accessibility, how to achieve it, and how to test it.

You’re wrapping up a web project and just as you’re putting the finishing touches you get sent a list of accessibility errors forwarded to…

» Screenreader support for text-level semantics

A guideline to accessibility testing, from tools to workflows, by Rian Rietveld. This talk was originally presented at WCUS 2017, as 'Accessibility testing, tools and workflow.'

A community-driven effort to make digital accessibility easier.

At work I have been optimizing one of the sites I have helped developed for one of our clients (I can't say who) for be ADA compliant using WAI-ARIA attributes. I've been wondering if it wouldn't j...

While most browsers work all right with the new semantic elements of HTML5, they don’t add the ARIA accessibility attributes that the specification demands. This small JavaScript adds those attribu...

The ARIA switch role is functionally identical to the checkbox role, except that instead of representing "checked" and "unchecked" states, which are fairly generic in meaning, the switch role represents the states "on" and "off."

Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup. T...

Screen reader compatibility for HTML tables, showing how failures and techniques work in specific screen reader / browser combinations.

Here's a simple example: we want to animate a container open and closed, perhaps as part of an expand/collapse treatment. .acc-demo-1 { height:40px; padding:10px; overflow:hidden; transition:0.5s all; } .acc-demo-1.hidden { height:0px; padding:0px …

The more inclusive you are to the needs of your users, the more accessible your design is. Let’s take a closer look at the different lenses of accessibility through which you can refine your designs.

Accessible design is often reduced to adding alt text and avoiding colors imperceptible by colorblindness. While physical differences are an important component of accessible design, cognitive diff…

Our Best Practice of the Week (BPOW) looks at an often unknown area of accessibility: animations that have an adverse effect on a variety of people. Recent updates to CSS and JavaScript have made it really easy to implement fun, engaging animations on a web page. Be it CSS transitions or keyframes, or the latest jQuery SVG animation framework, one thing to keep in mind is your animation may make the user uncomfortable.

Two tools and some quick tips to easily create an accessible contrasted color palette for your designs, whether it's web, ui or even mobile design

There’s a lot of talk about accessible design, but have you ever thought about color accessibility?

This document provides readers with an understanding of how to use WAI-ARIA 1.1 [WAI-ARIA] to create accessible rich internet applications. It describes considerations that might not be evident to most authors from the WAI-ARIA specification alone and recommends approaches to make widgets, navigation, and behaviors accessible using WAI-ARIA roles, states, and properties. This document is directed primarily to Web application developers, but the guidance is also useful for user agent and assistive technology developers.