talkback | A simple HTTP proxy that records and playbacks requests | Proxy library

The role attribute only changes the type of element that Talkback and other screen readers announce. Setting it to presentation or none just removes the semantic type of element. A does not have a native role by default so it's essentially presentation/none implicitly and won't have any effect.

aria-hidden is the key. It will hide the element from the screen reader. (CSS display:none and visibility:hidden will also hide an element from the screen reader but it also makes the element invisible to sighted users too.)

Your code example should work just fine with Talkback. However, you mentioned that you dynamically change the contents of the . That's not a problem but is there a chance that when you updated the text, the aria-hidden got removed?

I have used aria-hidden on Android without any trouble.

Date ranges are always a tricky thing as there isn't a better way than the one you are using (

01/06/2017 - 01/06/2018

However there is a way you can force it to say "to", with a quick caveat: If you use this method then if someone uses auto translate or you internationalise the site at some point it may result in poor translations / a lot of work converting the "to" to other languages.

With that disclaimer out of the way, the trick is to use the actual word "to":

01/06/2017 to 01/06/2018

But I know what you are thinking, I don't want the word "to" to be visible, I want to use a dash visually.

So now we introduce visually hidden text and aria-hidden to display one thing but read out another:

As described in the accessibility doc you can use the semantics properties. Use the invisibleToUser property to mark an element to be invisible to the user.

The first example is still accessible even though aria-current is not announced.

Both examples you have given can be used in production and will be perfectly accessible.

While according to the spec you should be able to use aria-current on a none interactive item, in reality most screen readers / browser combinations will not support it on an item you can't interact with.

Your second example is the "correct" usage, adding it to a hyperlink!

Both of the patterns you provide will be accessible without any issues. The aria-current not being announced in the first example is not a problem as the pattern is well known an indicates that "data" is the current page (as it is not a link).

With that being said, you can provide the extra information to screen reader users just for completeness!

We can add "(current page)" in a . We can then visually hide that span with CSS so that it is still read by a screen reader but does not change the visual design using a visually hidden CSS class.

I recommend replacing the Bootstrap .sr-only class with the one in the fiddle below just because it is more robust.

You can set an AccessibilityDelegate on a view to override things like how it describes itself in general:

I've tried the following using Chrome on a Samsung Galaxy S10 with TalkBack (Android 11):

You keep adding more and more client.on('data', ...) handlers. Each time you call waitForUserInput(), you end up adding another duplicate handler for the data message. So, after calling waitForUserInput() twice, you have two identical handlers for the data message so when a new piece of data arrives, each of the two handlers gets called and the output in your console appears twice. One one piece of data arrives, but you have duplicate handlers that are listening for it.

You can either use .once() instead of .one() or you can move the handler listening for the incoming data outside of the function so it's just installed once and only once.

Incidentally, using setInterval() here is also a problem for several reasons. You're creating a new interval timer every time you call waitForUserInput() and there's no coordination between that and when the question is actually answered.

As described in the accessibility documentation you can use the semantics modifier.
You can use the contentDescription semantic property to set a custom content description:

If your code is semantically correct, then you shouldn't have to do anything. Let the individual screen readers handle it as they see fit. In your simple code example, with VoiceOver on iOS (I don't have a Mac to try it on), when I swipe right, my VO focus goes to the "Billing Address" border and it's announced as "Billing Address, Form start". I won't hear the if I swipe to any of the input fields.

With NVDA, if I arrow down through the DOM, similar to swiping right with VoiceOver, I hear "grouping, Billing Address". If I tab to the input field instead of arrowing down, thus skipping the text, the text is still announced before the first field is announced, "Billing Address, grouping, Street edit has auto complete blank".

So it seems to be working correctly. If talkback doesn't announce it correctly, then it's a bug with talkback.