Web Accessibility learned, the hard way...

This post is going to be my ever updating journal to record many learnings which I learned by implementation, from peers, some hints from blogs, sites etc. Main intent is to record everything that is not available in stackoverflow and links for everything available in stackoverflow for reference on a11y.

Screen readers used:

• Voiceover (iOSv15)
• Android Talkback

Cookbook recipes

List item element receiving focus, announcing "bullet"

CSS can help fix this issue by saying list-style-type: none

Link vs Button on pages

When we have a user action causing redirection/navigation to another URL, the role should be link. But in cases where the user actions is causing pop-ups etc, it should be button.

Using flexbox to prevent screen-reader focus

I have not come across any articles explaining this, but when we have the children as flexbox, the screen-reader just focuses on parent container. If you have aria-label on the parent to flexbox, it reads it. Else falls back to reading the contents combined.

Removing tabindex for talkback to prevent focus

In Android, when we have tabindex set, it becomes eligible for receiving focus, irrespective of its value. So, its text contents are read. Removal of that attribute prevents the focus.

Announcing status or toast updates

using HTML attributes

This method involves creating a live-region and setting politeness for announcing the alerts.

using JS

This itself involves having multiple approaches. One of them is to create a singleton placeholder and push content inside this region. The attributes like aria-hidden, aria-live etc needs to be set and this can be unset after some fixed/dynamic timeout duration.

Focus elements on page load in voiceover in Javascript

This is the best I have come across to achieve this. Tried using various focusInterval with setTimeout instead of setInterval but faced certain drawbacks each time.
When 30ms is used with setTimeout, focus was missing for some cases. With 50ms, the default focus announces an element followed by shift in focus to read the current one.

Understanding screen reader behaviours

tabindex interpretation

In the codepen above, various scenarios of tabindex are added on both parent and child. In voiceover the tabindex attributes are not considered much and screen-reader focuses mainly on presence of text/content rather than the attribute. Whereas for talkback, based on how we specify the tabindex the behaviour changes drastically. Example:

• When we have tabindex only on parent: the focus does not come to the child element since the parent already has the attribute.
• When both parent and child has the attribute: the focus comes to both of them and inner content read repetition happens.
• When there in attribute only on child: it is equivalent of no attribute because the child being a text node, it will naturally receive the focus.
• No attribute anywhere: same as case 3

Comments

[GrahamTheDev]

As the accessibility tag on SO is where I spend most of my time if you ever struggle to find something on there let me know, odds are I have answered it before! ❤️

[itzsrikanth]

Thanks a tonne @inhuofficial for your support 🙏.
As next task, I was trying to find a way to trigger a onclick on a button using Voiceover. It works using mouse click only. Can you please help me on this?

[GrahamTheDev]

Sure, are you using an inline onclick on the button or addEventListener('click'.

Also are you using a framework or is this vanilla (as a lot of frameworks break the native functionality of "click")

[itzsrikanth]

We are using addEventListener in Vanilla JS

[GrahamTheDev]

Hmm sorry to be all "stack overflow" about it but do you have a fiddle that replicates this? A click handler will work on a native <button> without issue unless there is something else interfering.

Also is your VoiceOver on Mac or Mobile just so I know which to test with!

[itzsrikanth]

Yeah sure. I will try to replicate the issue in fiddle and share the link soon. Thanks in advance for your quick responses :-)

[GrahamTheDev]

No problem, anyone working on accessibility is a super star in my book so I will help when I can! ❤️

[itzsrikanth]

Hello @inhuofficial, I have a codepen (codepen.io/snow650/pen/rNYjKxV) where the focus by Android TalkBack should be only on outermost anchor tag only. It should not be able to focus inner span elements. Any suggestions on how to achieve this?

[GrahamTheDev]

Not sure what you mean, there is a difference between focus states and where the review cursor is on a screen reader, is that what you mean? It isn't actually focusing anything and your markup is valid, there is probably nothing you need to do but I thought I would check I have understood properly.

[itzsrikanth]

I would like to send a screen recording to explain what I am try to achieve. Not able to attach video here. Can I please have your email/chat ID to send?