What is HTML5 ARIA?

What is HTML5 ARIA? I do not understand how to implement it.

Accessibility: recommended alt-text convention for SVG and MathML?

Overview HTML5 now allows <svg> and <math> markup with an HTML document without depending on external namespaces (decent overview here). Both have their own alt-attribute analogs (see below) which...

Recommended WAI-ARIA implementation for navigation bar/menu

We are in the process of implementing (i.e. adding) WAI-ARIA support to the main navigation menu of a web portal. Menu is the one shown here: Menu is implemented by means of classic <ul> / <li> /...

HTML5 details element and VoiceOver

I am currently using the details/summary element in my JSP. When I turn on VoiceOver to test accessibility, VoiceOver simply stops when it reaches the details element. It sounds like it doesn’t...

What ARIA state role to use for current page in navigation

Recently I've been implementing ARIA into a web application and I found this question to be quite helpful in the improving the navigation parts. After implementing this in all modules, I...

Custom elements and accessibility

I'd like to implement a listbox widget using the current web components specs. Moreover, the resulting listbox should conform to the ARIA standard. Instantiating the listbox widget should be as...

Toggle an element's attribute with jQuery?

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

Can I have a header work as a button but not use the role of a button

I have a header that I want to work as a button. My problem is that if I assign the header a button role, it messes with accebility and a screen reader; The button role overrides the header so the...

Aria-live not working when focus put on another field

I am writing a very simple SPA application that has a single read-only 'output' field, followed by a single input field. When the user types an input command and hits enter, the JavaScript writes...

Where to place the aria-controls attribute in my tabs markup

I'm setting up a tabbed content section in my page using a script that follows the following syntax: <!-- Clickable tab links --> <ul class="js-tablist"> <li id="tab1" class="js-tab active"><a...

Do I need to implement WAI ARIA to comply with WCAG 2.0 AA?

I am building a site that needs to conform to WCAG 2.0 Level AA. My question is how many of the ARIA roles do I implement? https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

"Attribute aria-expanded not allowed on element li at this point"

I have the following code (from here): <div role="menubar"> <ul role="menu" aria-label="functions" id="appmenu"> <li role="menuitem" aria-haspopup="true" tabindex="0"...

How to make a screen-reader go through a <span> without any stopping

I have this span element: <span>Select the <strong>START</strong> <span class="icon-start></span> button.</span> That is just a line that says "Select the START button" with a small icon after...

How to keep focus within modal dialog?

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

Prevent background items from receiving focus while modal overlay is covering them?

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

jQuery change aria-expanded attribute depending on its value

I have an item that I want to change aria-expanded attribute depending on the current state. It changes OK to true, but for some reason doesn't change to false on the second click: html <li...

How to make screenreader read different text in div

I have a div like this: <div class="whatever">17:03</div> And when someone using a screen reader hovers over that text, I'd like it to read "17 minutes and 3 seconds" What's the standard practice...

How to set `aria-selected=true` via jQuery

How can I change the state of aria-selected="false" to aria-selected="true" by using jQuery? Here you can see how I tried to do it: $('element aria-selected').html(true) $('element...

What should be the `aria-role` of an accordion? During accessibility check, my accordions are read as buttons, which may confuse the user

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

HTML language switcher accessibility

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

HTML-Aria-label not accepting on anchor tag

I am trying to apply Aria-label but it is throwing error when I try to validate it for STQC. 2.4.4 Link Purpose (In Context) The WAI-ARIA 'aria-label' attributes should be descriptive of the...

How to test your Aria tags on your website?

I been doing some research but I having issues finding a good way to test my Aria-labels, and other Aria tags I used. What is the best practice for testing this. Currently doing this for Angular...

Ant Design Select dropdown list aria label accessibility

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

NVDA Ignoring "aria-hidden" with Boostrap Popover - Reads "blank"

I am trying to improve a website's accessibility, and I am coming across some issues making things work for both mobile (VoiceOver and TalkBack) and on desktop using NVDA. I am trying to use the...

when do we need divs and spans to be clickable, why wouldn't we rather use a button?

It is my understanding that anything that is clickable on a web page must be a link or a button. If on click, you want to take the user to a different page or a new context, you should use a link,...

Change the aria-label for button within mat-date-picker-toggle

<mat-form-field appearance="fill"> <mat-label>Choose a date</mat-label> <input matInput [matDatepicker]="picker1" [formControl]="date"> <mat-datepicker-toggle matSuffix...

How to apply an Aria label to a sub-element of a PrimeNG component?

Initial scenario: PrimeNG 9.1.0 Angular 9.1.9 The accessibility test of Google's Lighthouse notes the missing Aria label for the chevron element of the PrimeNG dropdown component ("Buttons do...

How to have a parent treeitem in a treeview be a link

The treeview example of the WAI-ARIA Authoring Practices shows how to have a tree with some items being expandable parent nodes, and some being hyperlinks: <ul role="tree" aria-label="Foods"> ...

Make HTML form elements 'display only' - non-interactive

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

Do HTML elements like pill/badge need extra Aria-role?

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