I am trying to toggle an aria tag between true and false when a button is clicked. I've tried several implementations which seems to do absolutely nothing. Below is what I am currently using which ...

I am working on making an overlay modal more accessible. It works essentially like this JSFiddle. When you open the modal, the focus doesn't properly go into the modal, and it continues to focus on...

I'm trying to make a form accessible. Should I make my inputs have both disabled and aria-disabled attributes, or just one? <label for="textbox1">Input</label> <input id="textbox1" ...

I am implementing a search box. One of the scenarios is that the total count of results must be announced. To achieve this I put the <p> tag inside of an aria-live region, and it announces it...

I'm developing an app with Angular and Semantic-UI. The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this purpose the modals should keep focus within the dial...

A common use for a tooltip is adding it to a ⓘ icon in order to display "more info". I'm currently working on making my components more accesible, so I wanted to add the "tooltip&quo...

Is it possible to make a screen reader reread the select element if the contents of the aria-label changes? I've made a simple snippet, I know I'm not following most aria conventions, to show what...

Problem: Grouping form elements I have an HTML form, where in few places a single control is composed of several inputs. One example is a group of radio buttons. I'd like to group those inputs an...

I'm trying to add accessibility to my web page and I'm not sure how to deal with this badge element. It's something like the number circle you see on your online shopping cart icon. (See example im...

I have a webpage and I have managed to keep few accordions in it as well. Since I have given "role"="button" on accordions, my accordions are read as 'button' during accessibility testing. What s...

When I have a mandatory (required) radio group, which element(s) should have the aria-required="true" attribute? Basically, I have a bunch of <input type="radio"> elements that share the same...

What WAI-ARIA roles should be used for carousels, like the one below? Notes: I'm familiar with the slider role, but this refers to a different type of widget. The example is from USA.gov and t...

I'm building an interactive widget that consists in making a button list out of a list of HTML markups. To achieve that, the HTML markup is wrapped with a button-like component <div role="b...

After browsing a number of Google and other SO articles, I've decided to ask my question plainly in hopes of a simple, direct answer. To add one further step to the discussion on Does opacity:0 ha...

What's the best practice regarding aria attribute translations? If a page is available in several languages, should aria attributes be too? I am using react-i18next useTranslation hook to translate...

Will an empty string be ignored by screen readers or should i avoid adding them to the element if the string is empty? For reference, this is a usecase in react where you want to default to an emp...

I have a pop-up/overlay that appears on 'click' of an element. Because there is plenty of HTML content behind the pop-up the buttons/input elements on the pop don't naturally have focus/tabindex be...

I'm showing product ratings using Unicode star symbols. iOS VoiceOver doesn't read this aloud correctly, so I thought I'd use aria-label on my span to tell screen readers what it means. <sp...

I have a simple text that gets updated on an action and I want that to be announced by the screen reader. But I don't want that text to be visible on the web page. I tried display: none and visibil...

Is there any aria-something or a role to add in a language switch link ? For exemple, I put two links in the footer to change the current language. <a href="/language/switch/fr">Fr</a>...

I have a list of data in a visualisation and I want to make it as accessible as possible. There are two lists next to each other. The list items has two states. Multiple rows can be active or inact...

Building a tree menu with jQuery, and I want it to be accessible, so I'm using aria attributes. What I want to do is toggle the "aria-expanded" attribute from true to false on click/enter. I've tri...

There's contradictory information in various tutorials across the web, as well as in this SO question, so I'm seeking some help to clarify. In contex to a step progress indicator like the one below...

I am trying to implement accessibility for my dropdown list. I used antd's Select component. But my problem is that when I use keyboard up and down arrow keys to navigate in the listbox(dropdown li...

I'm working on a dynamic form builder, where the user can add different blocks of content to a page (buttons, text inputs, paragraphs of text, images etc), which they can later publish and it will ...