Tagged “a11y”
Responsive Type and Zoom (by Adrian Roselli)
When people zoom a page, it is typically because they want the text to be bigger. When we anchor the text to the viewport size, even with a (fractional) multiplier, we can take away their ability to do that. It can be as much a barrier as disabling zoom. If a user cannot get the text to 200% of the original size, you may also be looking at a WCAG 1.4.4 Resize text (AA) problem.
Design Better Forms (UX Collective)
As Andrew Coyle says, “Life is short. No one wants to fill out a form.”. Here, he presents a number of form design tips to make the user experience more bearable and increase completion rates.
Making a Better Custom Select Element (24 ways)
We want a way for someone to choose an item from a list of options, but it’s more complicated than just that. We want autocomplete options. We want to put images in there, not just text. The
optgroupelement is ugly, hard to style, and not announced by screen readers. I had high hopes for thedatalistelement, but it’s no good for people with low vision who zoom or use high contrast themes.selectinputs are limited in a lot of ways. Let’s work out how to make our own while keeping all the accessibility features of the original.
Building an accessible show/hide disclosure component with vanilla JS (Go Make Things)
A disclosure component is the formal name for the pattern where you click a button to reveal or hide content. This includes things like a “show more/show less” interaction for some descriptive text below a YouTube video, or a hamburger menu that reveals and hides when you click it.
Who Can Use
It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments.
WAVE Web Accessibility Evaluation Tool
The featured article in this week’s Accessibility Weekly newsletter was on recent improvements to the WAVE suite of accessibility testing tools.
I can’t remember using WAVE before, however just one quick test of fuzzylogic.me using their online tool revealed an accessibility issue with the linked SVG logo in the header. A great catch, now fixed, from which I learned something new. I’ll certainly be adding WAVE to my accessibility testing toolbox from here on in.
WAVE is a suite of evaluation tools that help authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Our philosophy is to focus on issues that we know impact end users, facilitate human evaluation, and to educate about web accessibility.
Why much of the internet is closed off to blind people – BBC News
Following the recent watershed Domino’s Pizza case, BBC News reports that retailers in the USA & Canada are struggling to make their websites accessible and consumers are taking them to court.
Colors – a nicer color palette for the web
Skinning your prototypes just got easier - colors.css is a collection of skin classes to use while prototyping in the browser.
Beyond Automatic Testing (matuzo.at)
Six accessibility tests Viennese Front-end Developer Manuel Matusovic runs on every website he develops, beyond simply running a Lighthouse audit.
U.S. Supreme Court Favors Digital Accessibility in Domino’s Case
Digital products which are a public accommodation must be accessible, or will be subject to a lawsuit (and probably lose).
Using the tabindex attribute | TPG
Léonie Watson explains how the HTML tabindex attribute is used to manage keyboard focus. Of particular interest to me was a clarification of what tabindex="-1" does (because I always forget).
When tabindex is set to a negative integer like -1, (the element) becomes programmatically focusable but it isn’t included in the tab order. In other words, it can’t be reached by someone using the tab key to navigate through content, but it can be focused on with scripting.
See all tags.