Tag Archives: js

Introducing A11y Toggle

If you’re only here for the code, go straight to the GitHub repository.

A few weeks ago, I introduced a11y-dialog. Today, I am coming back with another accessibility-focused module: a11y-toggle.

At Edenspiekermann, we used to heavily rely on the checkbox hack to toggle content visibility. Unfortunately, this hack (the word is an understatement) involves some usability and accessibility concerns.

What’s wrong with the checkbox hack?

That’s a lot of people excluded just for the sake of simplicity (which is also arguable). On top of that, the checkbox hack has some accessibility issues. See, for a content toggle to be fully accessible to assistive technology users, it should respect the following:

So we need JavaScript (unfortunately). However, we don’t need a hell lot of it. A few lines are enough. And that’s precisely what a11y-toggle does (in roughly 300 bytes once gzipped). It just makes it work™.

 

Curated by (Lifekludger)
Read full article at Source

Pixi becomes Accessible – Goodboy™

Pixi is now Accessible!

That’s right accessible. What am I talking about? Read on…Some users navigate the internet using the keyboard rather than mouse or trackpad. Users with certain disabilities interact purely the keyboard or an accessibility switch and blind users rely on assistive technology such as screen readers and so on. This is where using canvas to create full content starts to come unstuck, as the canvas itself has no concept of what’s going on inside it. Basically, it’s a bit of a black box!

The browser will always see it as a single element. Meaning that content rendered in canvas is completely unreachable by assistive technology such as screen readers. Not great really as it means certain users will not be able to navigate content built using canvas.

Doing a fair chunk of work for the BBC this year, they are striving to make their games as accessible as possible. One hurdle which we both faced was that a lot of games and rich media content these days are built on top of canvas. What we needed was a way to make the content accessible to the screen readers so that all users can enjoy the content they output as much as possible.

Source: Pixi becomes Accessible – Goodboy™ — Goodboy™