969 questions
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
0
votes
0
answers
22
views
How to add custom code injection to squarespace for ADA compliance
I am attempting to make this page pass all "critical" ADA compliance checks:
https://bmfpdauxiliary.org/community-safety-store/p/donate-1
When I test this page using https://www....
1
vote
1
answer
71
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
96
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
2
answers
83
views
How to fix "Search functionality must be placed within a landmark region" WCAG issue with input and icon?
I'm trying to fix a WCAG accessibility issue flagged by tools like axe/lighthouse:
Search functionality must be placed within a landmark region
input.v-input
The input is wrapped in a div with role=&...
- 81
2
votes
3
answers
81
views
How to tell screen readers to read the contents of a <span> differently?
I have this sign-off/footer on my Web page:
<p>Coded with ♥ by Haley Halcyon</p>
I want screen readers to read this as “Coded with love by Haley Halcyon”, instead of “Coded with heart by ...
0
votes
1
answer
198
views
How to make currency values accessible for screen readers for text elements?
I am trying to have screen readers read out values as a currency instead of plain text. Consider elements in the examples below:
<select name="money" id="money-select">
<...
- 1
1
vote
0
answers
90
views
Do screen readers ALWAYS prioritize the aria-label over the anchor text of a link?
We're working on making our website completely accessible. We know that, if possible, we should avoid using an aria-label for a link IF an anchor text is also available. Example:
Please click <a ...
- 27
0
votes
0
answers
36
views
How can I run 'Import-Module PSReadLine' or fix the terminal warning? [duplicate]
My Terminal shows this: Warning: PowerShell detected that you might be using a screen reader and has disabled PSReadLine for compatibility purposes. If
If you want to re-enable it, you can just run '...
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
104
views
How to announce page title with screen readers (NVDA) on page vavigation in Vue 3/Nuxt 3 without ARIA live regions
I'm building a Nuxt 3 application and need to ensure that the page title is announced by screen readers (e.g., NVDA) when navigating between routes for accessibility compliance. My app is a flight ...
- 73
0
votes
0
answers
83
views
OCRMyPdf conversion issue specially in table format
I’m working with a scanned PDF that contains a table with two columns, where each column has two lines of text. When I convert the scanned PDF using OCRmyPDF, I'm encountering an issue with the ...
0
votes
0
answers
93
views
Accessibility for Screen Readers on Stepper in Modal
Focus management in Alpine.js modal doesn't properly redirect screen readers between steps
The Problem
In my TALL (+Fillament) stack app, I have a multi-step modal dialog using Alpine.js and Filament ...
- 767
0
votes
0
answers
119
views
Jaws virtual cursor box not shown
The Jaws screenreader usually works intendet. Bot now it's the second time where after a pc restart the red box around the object that is read out by the virtual cursor just isn't shown. I don't know ...
0
votes
3
answers
66
views
How do you make a webpage accessible to screen readers when there is no clear header for an H1?
I'm working on a login page that consists of a logo, a paragraph, and some fields. There's no clear content to put into an H1. How should this be handled for accessibility? Put an H1 around the logo?
- 33
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
1
answer
219
views
NVDA reading links 2 or 3 times in an alert
we are trying to get the screen reader to announce the alert that appears on screen when a user makes a booking for a time that is not available
Below is a screen shot of the alert and the code behind
...
- 444
1
vote
1
answer
234
views
Have screenreader not read the entire HTML table column header when browsing data rows
In web pages we're developing, we have tables where the column headers (marked up as ths with scope="col") include a sort button, which, when browsing through the row of headers, is read out ...
2
votes
0
answers
140
views
Is a select all checkbox that selects all sub-form checkboxes accessible?
I have a form with multiple fieldsets, and each fieldset has a set of checkboxes. My customer wants to add a select all button to select all checkboxes within each fieldset. I don't think this is an ...
- 21
0
votes
0
answers
99
views
NVDA is skipping table cells when they contain input or select tags
When I activate the "+" button which adds a new row to the table, NVDA then no longer focuses on each cell individually and skips over them. If you let it read out one of the cells it does ...
- 1
0
votes
1
answer
116
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
0
answers
50
views
How to delay updates in sortable table header, so screen reader can read all?
What are good ways to slow down the provision of new information in a sortable table, with up to two sorting criteria in two lists of a table column, on a website, so that e.g. the NVDA screen reader ...
1
vote
0
answers
111
views
Bootstrap-select not accessible to screen readers. Not behaving like standard select dropdowns in any browser. Menu items not being read in Firefox
Try below code in a browser with NVDA.
The plain HTML original select dropdown works as expected with NVDA screenreader reading out the individual menu items when you go up or down with cursor keys or ...
- 85
1
vote
1
answer
386
views
Screen readers read the column header as one of the rows
Screen readers always read the column headers as one of the row. Let's say a table has three rows and one column header, then the screen reader reads it as 4 rows; this includes the column header + ...
- 101
1
vote
1
answer
797
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
0
votes
1
answer
111
views
Create hidden (screen reader only) text in PDF using Itext7 html pdf
I am trying to add text to my pdf that is only viewable to the screen reader. The pdf contains a table that converts negatives numbers, ie -4.565, to the (4.565) - red color. When I use a screen ...
1
vote
1
answer
138
views
WPF, MVVM, How to get screen reader to announce newly added List Box item
I am modifying an existing WPF, MVVM application (using .NET 8) so that it can support screen readers. For ease, and quick testing, I'm using Windows 11 Narrator, but will also be testing with JAWS.
...
- 91
0
votes
1
answer
50
views
Activating device native screan reader
Is there a JavaScript API to query the device's native screen reader to start?
It would be OK if support was very limited but preferable, if it was at least a standard, so that in the future, more and ...
- 411
0
votes
0
answers
389
views
How to prevent a screen reader from reading content twice?
I have a carousel that scrolls horizontally. Each item in the carousel has an image from an instagram post and some details from the post such as caption, the user and date. The whole item is ...
- 11
-1
votes
1
answer
92
views
Can you have a nested list that's not a direct descendent of an li
The title explains it all. I am curious if this is considered a nested list and if so is it valid HTML. I am also curious about any accessibility implications. I tested with VoiceOver and it seems ...
- 1,698
0
votes
1
answer
523
views
Voiceover is not reading description (aria-describedby) of links
I have <a> tag in my code that has tooltip attached to it and tooltips are supposed to be read by aria-describedby. Voiceover on mac is just ignoring it and only announcing the link.
Associated ...
- 17
2
votes
0
answers
580
views
Android TalkBack can't access content in a scrolling, focusable container
I need to create a scrollable container that's accessible by keyboard. The container is a div with overflow: scroll, and I've set tabindex="0" so that it's focusable. While scrolling works ...
- 21
0
votes
0
answers
34
views
Form sections with context menues: How to avoid tabbing trough menu before jumping to a new section - without compromising accessibility
I have a form like the one in the image below, that is divided into multiple sections (the white boxes). Each section has a context menu (marked in red). When you use the tab-key to navigate through ...
- 11
0
votes
1
answer
560
views
How to make accessible readonly checkboxes/radios that can't be modified?
I'm in the process of making reusable input components for a variety of input types, and I'm trying to figure out the recommended way to go about an accessible readonly input - that shouldn't be able ...
- 61
1
vote
2
answers
652
views
Making a Div element accessible to voice over on Mac
I am struggling to make the div with aria-label accessible.
<main>
<h1>Heading</h1>
<input type="text" placeholder="text">
<p>Lorem ipsum ...
user25302216
0
votes
0
answers
235
views
Screen Reader is not allowing me to enter text in input field that works without screenreader
I have quite a complicated bit autocomplete search developed using React. I don't want to redevelop full thing. I need to make it work with a screen reader, to achieve this I use a button to set focus ...
- 1,631
0
votes
1
answer
235
views
Edge read aloud doesn't read screen reader only elements
Most guides for providing css classes for screen reader only elements suggest something like the following (from https://medium.com/web-dev-survey-from-kyoto/the-visually-hidden-technique-303f8e2bd409)...
- 1
1
vote
0
answers
140
views
How to make an element ignored by voice over but readable by voice control
I am creating an accessibility tool in which there is a toggle button, on hovering on it pull up more content menu. To make it accessible for accessible for motor disability, I created a hidden ...
- 11
0
votes
1
answer
84
views
add association for screen reader on data fields
In an existing web application, there are some accessibility concerns. Some views represent a collection of key-value pairs, for example, Name -> John Doe, Street -> Diagon Alley. At the moment ...
- 1,124
0
votes
0
answers
28
views
Safari Screen Reader Ignores Sections whose id includes "contact"
Apple's screen reader is supposed to extract the headings and content from a html and format it into a minimalistic document. However, it seems that Apple's screen reader will always ignore any ...
0
votes
1
answer
206
views
Is there a way to make a link appear as plain text on a screen reader but visibly be a link?
We are trying to reduce redundant links being read out by screen readers on our blog posts. Currently the title of the post is a clickable link, as well as the "read more" being a clickable ...
0
votes
0
answers
280
views
VoiceOver + Safari on macOS doesn't announce aria-expanded state properly
In our Angular app, we have a button that is responsible for opening a menu. There is a directive residing on it that contains the logic for toggling the menu. Menu in our case is just a list of ...
- 1,431
0
votes
1
answer
597
views
Screen reader doesn't read cell value when moving accros the datepicker grid
I have the following datepicker. The problem is that when running screen reader (NVDA), when moving the selection on the datepicker grid to different cells using keyboard, the screen reader just says &...
- 1,200
1
vote
1
answer
493
views
Convert read only fields for accessibility purposes
I'm converting an application to be compliant with the W3 accessibility guidelines.
I need to have the screen reader to read the title and the value together, only using <p> tags.
This website ...
1
vote
0
answers
470
views
next js 12.2 visually hidden component causing other third party widget to load on dom
hey guys In my company Next.js 12.2 app there is one visually hidden component which takes child and all my other components inside it as children. now this visually hidden component is causing issue ...
- 171
0
votes
1
answer
205
views
Screenreader Accessibility: two buttons, one label
I have a HTML structure like this:
<fieldset>
<legend>Legend</legend>
<span>Labeltext</span>
<button aria-pressed="...
- 139
0
votes
0
answers
139
views
Overlay permission to read text on screen with user action
I am building keyboard app that will have screen reading button. when user clicks on it will read text from screen from any app and copy to clipboard. I want to know is that possible to get with ...
3
votes
1
answer
1k
views
how to fix a11y interactive controls must not be nested error
I have the following markup:
<ul role="listbox">
<li role="option">
<span>Active</span>
<button>Expand</button>
</li&...
- 31
0
votes
0
answers
101
views
<nav> inside modal dialog- what is preferred keyboard focus pattern?
I am asking this question with screenreader/ keyboard-only users in mind.
I have a main <nav> on my page. I also have a secondary <nav> nested inside my modal dialog.
When a user selects ...
- 88
0
votes
0
answers
335
views
Screen readers not reading bootstrap-select dropdown options
I am using the bootstrap-select jquery plugin in forms on my site for multiple select dropdowns. Everything funtions as it should, however screen readers don't read the dropdown options. If I test ...
- 213