Check your site against this to determine your accessibility compliance with the WCAG.

Hidde de Vries:

WebAIM have come out with their latest report on which accessibility issues they found in the top million websites that they tested automatically. What is some low hanging fruit you could fix today?

At Ace Centre we have just launched an application that uses your webcam to detect when a user blinks. The application then triggers a switch press. This allows users who can’t access a physical switch or eye tracking to communicate using their chosen communication software.

We are really excited about the real world impact EyeCommander is already having and we would love to have more people contributing to the open source codebase

EyeCommander is an Electron app with a React frontend. It uses Mediapipe, which is a collection of pretrained ML models for landmark detection in videos, provided by Google. It is cross platform so you can get up and running on whatever platform you use.

Austin Gil writes an excellent post on how to get more team members involved with accessibility by sharing tools they’ll actually use. He covers tools for designers, developers, editor plugins, frontend frameworks, stylesheets, and even CI/CD integrations.

(This was also a big topic of discussion in JS party #204: JavaScript will kill you in the Apocalypse.)

In this episode Dominic speaks with Jon about his experience transitioning to using a screen reader and learning to code without his vision. They discuss how some of the tooling works, things other developers can do to make their code more accessible for blind teammates, and more.

Salma Alam-Naylor joins us this week to share her thesis that JavaScript is best in moderation, and is a liability when creating performant, resilient, and accessible web applications. Salma says we’re drunk on JavaScript, and it’s time we learn how to leverage this powerful web primitive to enhance our web experiences, alongside HTML and CSS, instead of purely relying on JavaScript to completely run the show.

Accessibility when designing for a screen is not an exception to the Pareto principle. We believe that just about 20% of designer effort can solve up to 80% of accessibility challenges for digital interfaces. Read on for an extensive collection of practical tips that can help you build a great foundation for a11y—right at the mockup stage.

Spotify’s Tryggvi Gylfason joins Emma & Nick to discuss common accessibility mistakes and tips for avoiding them!

What do you do when you make a living typing on a keyboard, but you can no longer do that for more than a few minutes at a time? Switch careers?! Not Josh Comeau. He decided to learn from others who have come before him and develop his own solution for coding without his hands. Spoiler Alert: he uses weird noises and some fancy eye tracking tech.

On this episode Josh tells us all about the fascinating system he developed, how it changed his perspective on work & life, and where he’s going from here. Plus we mix in some CSS & JS chat along the way.

Daniela Borges Matos de Carvalho:

In this blog post I explain the path I took to fix most accessibility issues on my personal website. It is interesting to understand how everyone can fix most issues with the tools we have in hands. Specially in the COVID-19 situation we’re facing there is no reason to leave people behind.

What you’re about to hear is a series of lightning chats recorded live from All Things Open 2019. How’s this for topic diversity? 👇

A/B testing, finding your tribe, dancing, TikTok, what is happening with front-ends becoming full-stacks, Code the Dream, OSI approved licenses, breaking in to tech, a11y, hiring juniors, whiteboard interviews, better interview practices, JPGs, coding bootcamps, tech re-entry programs, and more.

A great example of how good accessibility practices are often actually good usability practices for all. While the problems highlighted are most impactful on those who have challenges, I found every single alternative suggested improved usability for me as well.

Author Raghavendra Peri states:

According to the research conducted by Nielsen, it is not best practice to have a placeholder in the form field from a user experience perspective. This is because many users are confused by placeholders. In particular, people with cognitive disabilities tend to have issues understanding placeholder text because they think it is pre-populated text and will try to submit the form without entering their specific information.

TL;DR Don’t use placeholders! But for examples of what else to do, read this article.

CSS Grid is a wonderfully powerful technology, making possible incredibly complex and interesting layouts with fractions of the effort of older tools. But with great power comes great responsibility, for it is now also very easy to shoot the accessibility of your site in the foot.

Author Rachel Andrew:

I think this is something we sorely need to address at a CSS level. We need to provide a way to allow the tab and reading order to follow the visual order. Source order is a good default, if you are taking advantage of normal flow, a lot of the time following the source is exactly what you want. However not always, not at every breakpoint. If we don’t give people a solution for this, we will end up with a mess.

Fascinating read through covering historical context for accessibility and assistive technologies as well as diving into the way we do accessibility in the web today.

According to author Be Birchall this article aims to shift your perspective

by showing how web accessibility fits into the broader areas of technology, disability, and design. We’ll see how designing for different sets of abilities leads to insight and innovation. I’ll also shed some light on how the history of browsers and HTML is intertwined with the history of assistive technology.

The prefers-reduced-motion media query is a great tool for improving accessibility and helping users with visual impairments that make animations and such hard to follow, but did you know you can use it inside a picture element with a srcset? Brad writes:

This technique would definitely be helpful for posts with embedded animated GIFs in it. Authors would have to grab a static frame of a GIF as a fallback, so there’s a bit of extra work involved, but the technical execution is pretty dang straightforward.

What would be even cooler is if blogging and social media services did this automatically…

Reakit offers a host of usable React components that strictly follow A11y standards. From tabs and tooltips to forms and buttons. There’s a lot to like here.

Put your brand color(s) in, and get accessible color variations out. An easy way to generate WCAG AA/AAA color pairs based on an existing color.

Eric Bailey writing for CSS-Tricks:

Good design isn’t about forcing someone to walk a tightrope across your carefully manicured lawn. Nor is it a puzzle box casually tossed to the user, hoping they’ll unlock it to reveal a hidden treasure. Good design is about doing the hard work to accommodate the different ways people access a solution to an identified problem.

For reading articles, the core problem is turning my ignorance about an issue into understanding (the funding model for this is a whole other complicated concern). The more obstructions you throw in my way to achieve this goal, the more I am inclined to leave and get my understanding elsewhere—all I’ll remember is how poor a time I had while trying to access your content. What is the value of an ad impression if it ultimately leads to that user never returning?

Fantastic article full of amazing resources. As web developers, we want people to experience our site the way it was intended. But that means we have to put in the work to make that experience easy, accessible, and clutter-free.

Ire Aderinokun:

The main reason the visibility: hidden rule isn’t just about visual visibility is because it affects the elements visibility to assistive technology as well.

Love deep dives like this. Especially how it affects accessibility. Definitely something we front-end developers need to pay more attention to.

Nick Salloum:

When we’re dealing with inputs, there’s a host of techniques to consider in order to give users the best experience. We need to make sure that we’re giving users necessary information at all points in time, and that means finding the balance between too much and too little.

Time and time again we’ve been told that having a proper label is a better UX. The thing is, having a bunch of labels on a form can start to look congested. This solution is a great one, and saves us from having to use JavaScript.

Abhishek Singh isn’t deaf or mute, but that didn’t stop him from asking the question:

If voice is the future of computing interfaces, what about those who cannot hear or speak?

This thought led to a super cool project wherein a computer interprets sign language and speaks the results to a nearby Alexa device. Live demo here and code here.

Suz, Safia, and Kball get together to talk about accessibility; what does it mean, why should we care, and what tools and resources can we use to better educate ourselves, and improve our work.

The latest version of Firefox adds some powerful new features. It enables parallel CSS parsing, which combines with their existing parallel CSS style computation to make CSS in Firefox incredibly fast. In addition, this version adds a brand new Accessibility Inspector, giving developers direct access to the ‘accessibility tree’ screen-readers use to interact with a website. This is HUGE for helping developers make websites more accessible.