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 ona11y.

Screen readers used:

• Voiceover (iOSv15)
• Android Talkback

Cookbook recipes

List item element receiving focus, announcing "bullet"

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

Link vs Button on pages

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

Using flexbox to prevent screen-reader focus

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

Removingtabindex for talkback to prevent focus

In Android, when we havetabindex 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 alive-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 likearia-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 variousfocusInterval withsetTimeout instead ofsetInterval but faced certain drawbacks each time.
When30ms is used withsetTimeout, focus was missing for some cases. With50ms, 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 oftabindex are added on both parent and child. Invoiceover thetabindex attributes are not considered much and screen-reader focuses mainly on presence of text/content rather than the attribute. Whereas fortalkback, based on how we specify thetabindex the behaviour changes drastically. Example:

• When we havetabindex 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