Is there a way to apply a parent's tabindex to all of it's children? Example code: <div id="app"> <div tabindex="2" class="parent-section"> Section 2 <a href="test.com" class="child-section bg-accent">test 2 a</a> <a href="test.com" class="child-section bg-accent">test 2 b</a> <a href="test.com" class="child-section bg-accent">test 2…
I have a form like so: <form {...props} tabIndex={0}> <ProgressBar /> <FormTitle /> props.questions.map(q => <Question {...q} />) </form> When the focus gets to the form element, screenreaders (e.g. VoiceOver on Mac) only seem to auto-read out the progress bar…
How can we add alt text and aria label to a fav icon? Tried the following but has no effect. I am questioning whether a fav icon even needs these details but see no references in W3 to confirm whether…
In an HTML form (being generated by React, but that's not relevant), I have a checkbox with a label. The checkbox is hidden (invisible), and the way to check/uncheck it is by clicking the label. At the moment, I have…
I use a third-party website to get the public ipv6. When I use VoiceOver to read the IPV6 address, it omits the colon in the address. But it reads the dot in the IPV4 address. Is there a way to…
A typical input/label pair: <label for="Foo">Hello</label> <input id="Foo" type="text" ... /> The for denotes that the label is associated with a particular input. I've seen it done this way: <label for="Foo" id="FooLabel">Hello</label> <input id="Foo" aria-describedby="FooLabel" type="text" ... /> The aria-describedby…
I am trying to make a toast message component accessible (to comply with WCAG 2.1 AA standards) in Angular. The toast message has 4 types (Success, Warning, Error, Info) and each type has a dynamic message. The html of the…
When a user clicks tab on my page, it travels to all the links and buttons. Simply anything that is interactive. This works fine. But how will a person that has accessibility limitations know there is a text on the…
I have created the below JavaScript code for a popup that needs to be accessible. The problem is that during keyboard-browsing the tab button selects all the buttons behind the popup on the landing page first. I need it to…
I have a bottom tab navigator from react navigation. Previously, when you had the screen reader on, both the text and the icon of each tab could be selected as one container. Here we see both the icon and label…