It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
Eric Bailey eviscerates the notion that the term “a11y” isn’t accessible. It’s a hot take that I’ve had myself, embarrassingly enough.
I never see people asking why WWI is written out the way it is, either. Won’t people confuse that with the first Wonder Woman movie? Or the first season of Westworld? Or some new Weight Watchers product? I also never see people questioning technical numeronyms like P2P, S3, or W3C?
If you are seeing the term for the … Read article “a11y is web accessibility”
Did you see that neat technique for using the <picture></picture> element with <source media=""/> to serve an animated image (or not) based on a prefers-reduced-motion media query?
After we shared that in our newsletter, we got an interesting reply from Michael Gale:
What about folks who love their animated GIFs, but just didn’t want the UI to be zooming all over the place? Are they now forced to make a choice between content and UI?
I thought … Read article “Reduced Motion Picture Technique, Take Two”
There are a few differences between keyboards and screen readers and Léonie Watson highlights of them:
… Read article “The difference between keyboard and screen reader navigation”When using the tab key, keyboard focus and screen reader focus are synchronised with each other. The rest of the time, screen reader users have an enormous range of commands at their disposal for reading and navigating content independently of keyboard focus. The commands vary between screen readers, but they all have one thing in common: they’re tied to different HTML elements.
Accessibility is all the rage these days, specifically when it comes to color contrast. I’ve stumbled upon a couple of tools this week that I think are pretty nifty for helping make sure that all of the text on our websites is legible regardless of what background color they might have.… Read article “Color contrast accessibility tools”
I like the this wrap-up statement from Hidde de Vries:
… Read article “Naming things to improve accessibility”In modern browsers, our markup becomes an accessibility tree that ultimately informs what our interface looks like to assistive technologies. It doesn’t matter as much whether you’ve written this markup:
- in a
.htmlfile- in Twig, Handlebars or Nunjucks
- as the
<template>in a Vue Single File Component- exported in the JSX of your React component
- outputted by a weird legacy CMS
It is which markup that determines if your
Earlier this month Eric Bailey wrote about the current state of accessibility on the web and why it felt like fighting an uphill battle:
… Read article “Some Notes About Accessibility”As someone with a good deal of interest in the digital accessibility space, I follow WebAIM’s work closely. Their survey results are priceless insights into how disabled people actually use the web, so when the organization speaks with authority on a subject, I listen.
WebAIM’s accessibility analysis of the top 1,000,000 homepages was released
Leslie Cohn-Wein’s main point:
While [lots of divs, inline styles, focus management problems] are valid concerns, it should be noted that nothing in React prevents us from building accessible web apps.
True. I’m quite capable (and sadly, guilty) of building inaccessible interfaces with React or without.
I’ve long told people that one way to level up your front-end design and development skills, especially in your early days, is to understand how to change classes. I can write a few … Read article “Accessibility is not a “React Problem””
Did you see this Facebook crap?
"Why do I need a 4Ghz quadcore to run facebook?" This is why. A single word split up into 11 HTML DOM elements to avoid adblockers. pic.twitter.com/Zv4RfInrL0
— Mike Pan (@themikepan) February 6, 2019
I popped over to Facebook to verify that and what I saw was a different and even more nested mess… Read article “<span>L</span><span>e</span><span>t</span><span>t</span><span>e</span><span>r</span><span>s</span>”
Icons are great and all, but as we’ve been shown time and time again, they often don’t do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people who browse visually, like the situation Matt Wilcox describes with his mother in this linked article.… Read article “The ineffectiveness of lonely icons”
Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead:
… Read article “Customise radio buttons without compromising accessibility”Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something
