DEV Community: Andrew Nevins

Learning common keyboard shortcuts for screen readers

Andrew Nevins — Fri, 24 Jul 2020 19:33:27 +0000

When studying for my WAS exam I had a tough time learning keyboard shortcuts of screen readers. I experimented and created a mind map to help learn through a more visual format. It helped! Then I found videos of other people using assistive technologies in ways that weren't documented, which blew my mind. It sunk in! Finally I quizzed myself.

Here's my first article on The A11y Project on Learning common keyboard shortcuts for screen readers: https://www.a11yproject.com/posts/2020-07-24-learning-common-keyboard-shortcuts-for-screen-readers/

Slack: You don't have to reply so fast

Andrew Nevins — Wed, 08 Jul 2020 10:26:19 +0000

When we see a new message on Slack, some of us have the urge to reply immediately even though we haven't thought of the full answer. That's fine and natural, and why Slack is great for conversations, but sometimes it can become a frustrating habit when things we say are half-baked. Especially when someone challenges you on the comment, at which point I've found myself deleting the comment because it wasn't thought-out or I've misread the question.

It's also fine to tell yourself to slow down and take a break, but for some of us taking the time to stop and reflect is trickier than it sounds. I'd rather if there was some mechanism that told me to slow down.

That's why I developed this Tampermonkey script named 'Slack cool-down' (requires the Tampermonkey browser extension).

What it does:
1) Adds a button to Slack with the text "Cool-down replies"
2) Pressing the button then disables the comment box inside threads
3) Pressing the button again enables the comment box

A demonstration is also available on YouTube.

That's all, it's just a self-regulating tool that helps some of us take a breather when we're getting caught up in the world of Slack.

Disclaimers:

[Env] I have only tested this on Chrome
[Env] This is only usuable on the Slack Web interface (slack.com)
[Env] This has been developed with the use of 'Tampermonkey' as the browser extension that runs it
[A11y] The DOM position of the cool-down button is at the bottom, but it should be inside the thread header. The problem is, this thread header doesn't exists when the JS is executed and I couldn't find a decent way of waiting for it to exist.
[A11y] There's a big problem in the focus experience. If you were to press the cool-down button, you'd then have to trawl back to where you were and then trawl back again when you want to turn the cool-down off
[A11y] The text "Take a break" is implemented in the CSS 'content' property and won't be supported in all browser screen-reader combination
[A11y] The way the comment field is disabled is not semantic. The comment field just has an opacity style with the text laid on top to visually-disable the field. This won't work for assistive tech.

Should DEV.to pause GIFs?

Andrew Nevins — Tue, 07 Jul 2020 11:47:10 +0000

Sometimes our feeds on dev.to are populated by animated GIFs and images from people's posts. I get that images are great ways to bring someone into the post, but when they're animated images it distracts me from reading the rest of the posts.

Should there be a pause/ play control for each GIF image post? That may help with one or two GIFs, but I imagine it would be tedious to control for 3 or more posts.

Should there be a global site-wide option to disable GIFs that can be found in your profile settings?

If we're conforming to WCAG, the guideline this relates to is Pause, Stop, Hide (2.2.2)

For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; ...

Presently I admit that there are few posts with animated GIFs on my feeds, however this falls onto chance. Unless I am wrong, there are no limitations into the number of animated GIFs appearing on your feed and length of their animations.

My motivation is to prevent the distraction scenarios manifesting into problems for the audience of DEV.to.

Happy to hear insights.

Ravelry, high contrast & seizures

Andrew Nevins — Fri, 03 Jul 2020 12:43:16 +0000

Recently Ravelry was rebranded and the website redesigned to suit their new brand. Apart from meeting Google Lighthouse scores, it appears that accessibility was not considered as core to the redesign.

The Ravelry community are speaking out against the lack of inclusive design decisions and some people have been experiencing seizures when using the website.

The seizures appear to be triggered as part of the high contrast redesign colours and patterns, as Countess Ablaze describes:

"I suspect for me it was the glaring white, sensory overload of a lot of colours, flickering and high contrast black lines. I can't speculate anymore than this and now I've had one seizure (I've been seizure free since Nov 2018) I'm at higher risk for another."
https://www.countessablaze.com/blogs/news/seizure-warning-ravelry

I personally didn't know that high contrast ratios and patterns have the risk of causing physical reactions and seizures. As per WCAG 2.3.1 I knew that flashing content was wrong, but not in the sense that colours could be perceived to be flickering without any flickering mechanism of the website.

Reading further on seizures and physical reactions from the MDN docs, it's not just flashing animations, but patterns of light and dark straight lines. It gets quite mathametical and complicated!

As part of our advice in building better websites, I think we need to be aware of the too-high contrast boundaries. We already know the minimum contrast ratios as per WCAG success crition 1.4.3, but I don't think the maximum contrast ratios are clear. Is it just that it's too subjective? Or is success criterion 1.4.6 the gold-standard and maximum contrast ratio? Maybe these are too simple questions to solve a complex problem.

Would anyone know of other reading material on the subject?

Diclaimer: I am not a Ravelry member, but I have been watching discussions in the accessibility community and I'm taking notes on how not to rebrand.

Bookmarklet: Stop AccessiBe Tampering with WAVE

Andrew Nevins — Mon, 29 Jun 2020 12:46:44 +0000

When WAVE runs its tests, AccessiBe turns on settings that would not normally be turned on to enhance the WAVE test results.

This bookmarklet prevents AccessiBe from tampering with the WAVE results.