1,503 questions
Advice
0
votes
3
replies
59
views
Accessible two column-grid using role=table
Situation
We used to have a description-grid component that was our own interpretation of visually representing a list of key-value-pairs using div and role="table". We had a "one-...
- 4,062
Best practices
0
votes
1
replies
40
views
What would the correct HTML5 elements/aria-roles for a drag-and-drop UI?
I want to implement an interface where some "slots" start out empty and can be filled with "objects". Something roughly like:
My question is, what would the correct aria-role (or ...
- 18.2k
0
votes
1
answer
89
views
Why doesn’t NVDA read Arabic text correctly from aria-label in HTML?
I was checking how NVDA reads Arabic text from aria-label, Even though my page has lang="ar" and the aria-label contains Arabic text but it is not reading arabic language it is just skipping ...
- 167
2
votes
1
answer
50
views
"Interactive elements must be able to be activated using a keyboard" issue with a range <input>
With the following HTML:
<input type="range">
This results in the Firefox "Accessibility" tab reporting a keyboard accessibility issue that Interactive elements must be able to be ...
- 153
0
votes
1
answer
54
views
How to focus only Overlay on next.js using aria
I need to focus overlay/dialog when using screen reader.
so I added aria-hidden="true" on main area when open dialog , and added role="dialog" aria-modal="true"
But on ...
- 89
1
vote
1
answer
72
views
How can screen reader users resume reading after closing a modal window?
I'm building a fully accessible webpage for blind users who rely on screen readers for our study. They can read a document and ask AI assistant questions.
Current design:
The main content is a ...
- 161
1
vote
0
answers
56
views
Can role="combobox" be used with a non-popup (permanent) list?
I have a dialog box that contains a search box and a list underneath. As you type, the list items are filtered out. Can I add role="combobox" to the input?
With an input combobox, normally, ...
- 3,863
0
votes
1
answer
82
views
How can I reset the heading tag hierarchy within an HTML5 document?
I have an HTML document that contains an <article> element. I am trying to insert a section that exists outside of the heading hierarchy of the page. It seems natural to use an <aside> ...
- 1,163
0
votes
0
answers
49
views
Accessibility issue with input and autocomplete attribute
Got the following Input markup in my ASPNet page:
<asp:TextBox
aria-describedby="errorCardNumber"
OnTextChanged="cardNumber_TextChanged"
onkeypress="return ...
- 4,476
3
votes
1
answer
115
views
CSS selector computed aria name
Is it possible to select via a CSS selector (or xpath) an element based on its computed aria name (=accessible name)? For instance for buttons it is computed like
The button has an accessible label. ...
- 2,604
1
vote
0
answers
97
views
aria-live regions re-announce after closing a modal due I hide the rest of the DOM with aria-hidden. HOW this w/o letting the SR cursor esc?
I’m building an accessible modal. When it opens, I mark all siblings of the modal with aria-hidden="true" so the screen reader cursor can’t roam outside. That removes those nodes from the ...
- 310
0
votes
1
answer
49
views
how to make assistant technologies announce changes of a switch button acting as an expandable too
I have an element acting both like a switch and a header of an accordion at the same time:
<button
role="switch"
aria-checked="true"
aria-expanded="true"
aria-...
- 2,618
0
votes
0
answers
43
views
What ARIA pattern should I use for a card that swaps visibility of two areas of content?
I can't find an example of the pattern I'm being requested to build. It is a parent that contains at least two elements, A and B, whose visibility is toggled by clicking the parent. When A is visible, ...
2
votes
0
answers
141
views
What is the proper WCAG markup for radio buttons with comboboxes
I have the UI that has radio buttons and comboboxes next to them. The problem is that WCAG checkers like Arc Toolkit or Axe say that comboboxes inside radiogroups are not ok. I tried replacing the ...
- 67
2
votes
2
answers
117
views
What is the proper way to indicate how a word should be read to screen readers?
I’m writing fiction in HTML (which will be published as an EPUB – which is a wrapper around HTML), and I want to be sure that it’s as accessible as can be. However, I’m using weird things like non-...
- 1,519
0
votes
0
answers
144
views
VoiceOver not reading alert referenced by aria-errormessage
When there is an error in a required field we render this:
<label for=":r0:-input">First name</label>
<input id=":r0:-input" type="text" value="" ...
-1
votes
1
answer
63
views
How to handle form close on cancel? [closed]
I have a modal form made with Bootstrap, and when the user clicks the cancel button I get a warning in the console:
locked aria-hidden on an element because its descendant retained focus...
This is ...
- 3,549
2
votes
2
answers
206
views
aria-label VS sr-only (usage of voice command tool)
I'm an IT trainer, and I’d like to better understand a particular point to avoid saying anything incorrect to my trainees.
The criterion "2.5.3 Label in Name" (WCAG 2.2) tells that the aria-...
- 43
0
votes
1
answer
43
views
Selenium on a jQuery select
I'm trying to get a select to work for the following div:
<div class="control-group generic-style clearfix">
<label for="Category">Category</label>
<...
- 51
-1
votes
1
answer
71
views
role=slider WAI ARIA requirements for touch screens
I have a custom slider implementation. When it's :focus:visible, I handle the arrow keys (Up/Left and Right/Down) to move its thumb. I suppose, that's enough to declare the control role="slider&...
- 367
0
votes
1
answer
161
views
Why is the section displayed as generic in the Google accessibility tree? Shouldn't it be assigned the 'section' role?
The section element is displayed with a generic role in the accessibility tree below. When using the article element, the accessibility tree correctly assigns it the role of 'article'. But, for ...
- 3
0
votes
1
answer
46
views
Does a date picker with date format instructions in placeholder fail 3.3.2 Labels and Instructions when an accessible date picker is also provided?
I found 3 accessible examples related to this, one of them is from Deque and uses only placeholder to provide instructions for date format.
https://dequeuniversity.com/library/aria/date-picker
https://...
1
vote
1
answer
420
views
Why does my ARIA live region only announce the first update when using a Web Component?
I’m building a custom Web Component that displays live sustainability stats for hotels. The component updates CO₂ savings in real-time, and I want screen readers to announce the updates using an ARIA ...
- 54
0
votes
3
answers
171
views
How to make an accessible accordion using an hgroup?
I have an accordion in my app where each button has a heading and some supplementary information:
My initial implementation (which works fine) is as follows, but is not ideal from an accessibility ...
- 10.3k
0
votes
0
answers
39
views
Describe irregular headers in role="grid" layouts
We have quite complex tables (dynamically built) which contain multiple header rows and multiple columns that built a super-ordinate dimension over the lower row's or next column's cells.
Such table ...
- 4,641
0
votes
1
answer
138
views
Would this Navigation menu pass an accessibility test?
I am trying to improve my skills in developing accessible elements for my WordPress theme since the new European accessibility act will soon come into effect.
I'd like to show the HTML that my custom ...
- 105
1
vote
0
answers
80
views
How to make a collaborative cursor accessible?
Collaborative online editors often use an inline cursor widget to display the cursor positions for other users. Below, I have taken a screenshot of how Google Docs renders its collaborative cursors ...
- 1,006
0
votes
1
answer
293
views
Use <input type="button">, <input type="image">, <input type="reset">, <input type="submit">, or <button> instead of the "button" role
So basically i have a React's div wrapper that i built to act as a button for clickable block with complex content that no button or link can cater.
<div
ref={ref}
role="button&...
- 1,782
0
votes
3
answers
1k
views
Do I need aria-hidden for a decorative <svg> within a <button>?
If I have a button:
<button>
<svg width="1em" class="inline"><use href="#start-icon"></use></svg>
Start
</button>
Will screen ...
- 367
0
votes
0
answers
5k
views
Blocked aria-hidden on an element because its descendant retained focus
When I normally open/close the popup the aria-hidden was not showing. but if i open the popup inspect the inside of the modal element then I close it the error was showing. how to solve this problem. ...
-1
votes
1
answer
107
views
Why NVDA does not read output's label?
I wanted to use <output> element, because I thought it's the best solution in terms of accesibility (and maybe SEO) for calculated valeus (I have two <input>s and one <output>). NVDA ...
- 1
0
votes
0
answers
63
views
Role for Interactive elements in Menu Header
My application has a navigation menu pop-out panel that has a header with a home link and a filter dropdown above the list of menu items (which I cannot change). From what I understand (from a third-...
0
votes
3
answers
83
views
Accessibility of a text with inline <svg>
I have the following code:
<h2>
Deadpool
<svg width="53" height="64" class="inline" aria-label="and">
<use href="#oleo-...
- 367
0
votes
1
answer
352
views
Is aria-label required for <ul> in <nav>?
I have the following code:
<nav class="navbar navbar-expand-md">
<div class="container px-0">
<div id="navbarCollapse" class="collapse ...
- 367
0
votes
1
answer
110
views
How to annotate ARIA grid HTML table when a selection change of a cell causes opening a menu
I have a role="grid" table with some cells sharing the same content (e.g. text, number or date).
Clicking a cell means changing the selected state of the value in the cell, which is ...
- 4,641
0
votes
2
answers
253
views
Referencing an input with a label by aria-labelledby
If I have an input with its aria-label set to 1 and an associated label set to 2, what will be calculated as aria label of an element, referencing the input?
<input type="radio" id="...
- 367
1
vote
1
answer
96
views
Is aria-label useful for tablist role?
If we take a look at Bootstrap tab example:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/...
- 367
-1
votes
1
answer
190
views
aria-controls requires id, id must be document-unique, how to write templates?
Let's take a look at the W3 ARIA toolbar example:
<div class="format" role="toolbar" aria-label="Text Formatting" aria-controls="textarea1">…</div>
…...
- 367
0
votes
1
answer
159
views
How to click an aria button with Puppeteer?
I want to click the Facebook's Photo/video button when creating a post. The element is:
<div aria-label="Photo/video" aria-pressed="false" class="..." role="...
- 3,404
0
votes
1
answer
313
views
Can I use aria-current more than once but in nested contexts?
Suppose I have a page with different <section>s. Some <sections> may contain, within them, other <sections> and so forth. Now, suppose I want to create a non-primary navigation to ...
- 99
0
votes
0
answers
486
views
role="option" with aria-selected Not Announced Correctly in VoiceOver
I am implementing an accessible listbox with role="listbox" for the parent container and role="option" for each item and aria-selected to indicate the selected state. However, ...
- 1
0
votes
1
answer
98
views
Customize accessibility reader for a table implemented with divs
I have a table implemented like this, with appropriate classes to make it look like a table:
<div>
<div>
<div id="e3">
<div role="table">
...
- 1,396
1
vote
1
answer
140
views
Can I assign the 'presentation' role to an HTML5 dialog element
The exact confusion I have is the following
On one hand WAI-ARIA provides the 5 rules as a practical guide for authors to use WAI-ARIA (the document isn't a W3C recommendation though), and there ...
- 11
0
votes
1
answer
51
views
can we change the native semantics of landmark elements or any element of html5 using aria
can we change the native semantics of landmark elements or any element of html5 using aria, is it semantically correct and conforming to do so ?
Suppose I want to use the dialog element as a ...
- 1
0
votes
1
answer
117
views
NVDA screen reader only reads the value from span
I am trying to add a text verbiage to my screen reader "The progress is at x%". However, NVDA screen reader only says the digits out loud.
I am trying to show only the x% to the user, but ...
- 1
1
vote
1
answer
798
views
Accessible skeleton loading (loading placeholder) HTML
In this question, we'll consider 2 examples but please note that this question is about arbitrary loading placeholder (it means that the loading placeholder could consist from any shape, not ...
- 1,017
1
vote
1
answer
175
views
What is the difference between the menuitemradio and radio roles in ARIA?
I have just learnt about menuitemradio when I was searching about radio role on MDN.
However, seems there is no explanation about the difference between them..
Can I confirm that they are actually the ...
- 65
2
votes
3
answers
201
views
What is the correct aria and role for a button/label that fills the value of an input?
If a set of buttons (or labels) set the value of an input with a different value each, what roles and arias should they possess?
In this scenario the input can also be inserted/edited by the user ...
- 6,653
0
votes
3
answers
417
views
What WAI-ARIA tags are required for an input that filters a list of checkboxes?
Let's say I have a list of checkboxes inside a <fieldset>. I want the user to be able to filter this list (given that this is pretty big), that is, you type something in this input, and only the ...
- 8,904
0
votes
1
answer
351
views
How to handle the accessibility of a filter and result buttons for a list of checkboxes?
Let's say I'm trying to build a multi-select input using a list of checkboxes:
I've put the checkboxes inside a <fieldset> with a <legend> label
There is an input that lets the user ...
- 8,904