It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
This report made a big splash last year. It’s a large chunk of research that shows just how terribly the web does with accessibility. It’s been updated this year and (drumroll…) we got a little worse. I’ll use their blockquote:
… Read article “The WebAIM Million—Updated”The number of errors increased 2.1% between February 2019 and February 2020.
Austin Gil has kicked off the first in a five-part series about “HTML Forms Right” and to starts with semantics. It’s talking to the “we build our front-ends with JavaScript” crowd. The first block of code is an example of an Ajax form submission where the data submitted is gathered through the JavaScript API FormData.… Read article “Accessibility Links”
Ben Myers covers some clear examples of where CSS totally changes what some screen readers announce. For example, some screenreader will see text-transform: uppercase; on a button label that says “Add” and read it like an abbreviation, “A.D.D.”
… Read article “CSS Can Influence Screenreaders”These cases of CSS messing with our screenreader announcements are initially shocking, perplexing, and maybe even appalling. After all, they seem to conflict with our mental model of CSS, one that’s likely been instilled in us since we started learning web development:
Skip links are little internal navigation links that help users move around a page. It’s possible you’ve never actually seen one before because they’re often hidden from view and used as an accessibility enhancement that lets keyboard users and screen readers jump from the top of the page to the content without have to go through other elements on the page first.
In fact, you can find one right here on CSS-Tricks if you crack DevTools open.… Read article “How to Create a “Skip to Content” Link”
This is a really great list from Bruce. There is a lot of directly actionable stuff here. Send it around to your team and make it something that you all go through together.
Here’s a little one that prodded me to finally fix…… Read article “15 Things to Improve Your Website Accessibility”
User groups not well served by use of the
titleattribute
• Mobile phone users.
• Keyboard only users.
• Screen magnifier users.
• Screen reader users.
• Users with fine motor skill impairments.
• Users with cognitive impairments.
Sounds like in 2020, the only useful thing the title attribute can do is label an <iframe title="Contact Form"</iframe. … Read article “Using the HTML title attribute”
As we noted in our complete guide, you can put an <a href=""> link around whatever chunks of HTML you like. Let’s call that a “block link.” Like you are wanting to link up an entire “Card” of content because it makes a big clickable target. … Read article “Block Links Are a Pain (and Maybe Just a Bad Idea)”
What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read content throughout the site, but to someone else, it might be a totally different experience. How can put yourself in that person’s shoes to improve their experience?
There are some relatively easy ways to test contrast. For example, you can check the site on your phone or tablet in bright sunlight … Read article “Understanding Web Accessibility Color Contrast Guidelines and Ratios”
Here’s a great in-depth post from Adam Silver about his journey to create an autocomplete field that’s as accessible as possible. There are so many edge cases to consider! There are old browsers and their peculiar quirks, there are accessibility best practices for screen readers, and not to mention dealing with the component design when there’s no JavaScript, etc.
Adam offers a warning before he begins:
… Read article “Building an accessible autocomplete control”[…] I’ve been looking at ways to let users enter a destination country. Unfortunately,