Questions tagged [aria-live]
36 questions
6
votes
2 answers
Accessibility: Page Loader indicator using aria-live
Issue: I have an accessibility issue that I am struggling with. I have an angular web application. A page loading spinner/indicator is shown when content is loading. And when the page content has loaded the spinner is hidden. This "div" is never…
akhouri
- 3,065
- 3
- 25
- 29
6
votes
1 answer
Aria-Live="Assertive" is not read by JAWS
Hello Stackoverflow community. This is my first question, but I will try to be as concise and detailed as possible.
I have been tasked with updating our ASP.NET web applications to be section 508 compliant. This is all very new to me, and I'm…
Ray Phillips
- 95
- 1
- 7
5
votes
2 answers
re announce a under aria-live even if the text is same
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
tag inside of an aria-live region, and it announces it as expected. Expected scenario: User types a string -->…
Shivam Chawla
- 390
- 5
- 17
5
votes
1 answer
Aria-Live in Firefox not read by screen reader
I am having an issue where the Screen Reader is not reading the text that changes within aria-live section in FireFox.
This is a simple example for a page where in chrome the Screen Reader reads the changes as they come in and in FireFox it does…
Nachshon Schwartz
- 15,289
- 20
- 59
- 98
3
votes
1 answer
Changes in aria-live area not read properly on client-side search results in Vue 2
I am building a simple client-side text search on a list of items, where I want the screenreader to read how many items are found. For example if your search return two items, I want the screenreader to announce: "Two results found". To test this I…
Chrisdh
- 31
- 4
3
votes
0 answers
trigger an aria-live region with React state
The react example below only exhibits the unexpected behavior on Firefox with VoiceOver.
Using the aria-live attribute on this p tag, I expect my screen reader to read me the text when it is updated. However, my screen reader is not reading me the…
Jake Loew
- 81
- 7
3
votes
1 answer
JAWS doesn't read dynamic content. IE11
I have a search form. When user submits form, ajax request is sent to the server. When the response comes, I update found items count value, but JAWS reads previous items count value.
To get JAWS read new content I use aria attributes and…
iOne
- 153
- 2
- 12
2
votes
0 answers
VoiceOver reads content of aria-live in system language (en), even with lang="nl" applied. How to change?
I have a live region on my page. The whole page is in dutch (lang="nl" on is applied), and for most text, it all works fine. However, if I use a live region with aria-live, the text is announced in the system language, even if I put lang="nl"…
Peter Goes
- 459
- 4
- 12
2
votes
0 answers
Angular accessibility aria-live won't vocalize on "0" value
I'm willing to make an Angular component vocable for visual impairs.
The components has two buttons which add or remove 10 on the displayed value.
The displayed value is vocable for any value except when the value is "0%". I can't figure this…
Neovea
- 504
- 3
- 17
2
votes
0 answers
Aria and Accessibility for the dynamic page title in Angular JS
Can any one guide me how to implement the accessibility on Single Page Application? My precise question is on announcing page title and new content.
HTML
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/angularjs" class="post-tag grid--cell" title="show questions tagged 'angularjs'" rel="tag">angularjs</a>
<a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a>
<a href="../../questions/tagged/single-page-application" class="post-tag grid--cell" title="show questions tagged 'single-page-application'" rel="tag">single-page-application</a>
<a href="../../questions/tagged/aria-live" class="post-tag grid--cell" title="show questions tagged 'aria-live'" rel="tag">aria-live</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Dec 16 '16 at 10:15">asked Dec 16 '16 at 10:15</time>
<a href="../../users/3563657/padmareddy" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/3563657.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="PadmaReddy" />
</a>
<div class="s-user-card--info">
<a href="../../users/3563657/padmareddy" class="s-user-card--link">PadmaReddy</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">41</li>
<li class="s-award-bling s-award-bling__bronze" title="2 bronze badges">2</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-37733795">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>2</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>2</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/37733795/read-label-of-aria-live-region" class="question-hyperlink">Read label of aria-live region</a></h3>
<div class="excerpt">I have a definition list where one of the items can change:
// Update dynamic content
setInterval(function() {
document.getElementById('dynamic-info').textContent++;
}, 3000);
<dl>
<dt>Static information</dt>
<dd>Value 1</dd>
…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a>
<a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a>
<a href="../../questions/tagged/wai-aria" class="post-tag grid--cell" title="show questions tagged 'wai-aria'" rel="tag">wai-aria</a>
<a href="../../questions/tagged/screen-readers" class="post-tag grid--cell" title="show questions tagged 'screen-readers'" rel="tag">screen-readers</a>
<a href="../../questions/tagged/aria-live" class="post-tag grid--cell" title="show questions tagged 'aria-live'" rel="tag">aria-live</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jun 09 '16 at 18:40">asked Jun 09 '16 at 18:40</time>
<a href="../../users/2993478/aebabis" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2993478.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="aebabis" />
</a>
<div class="s-user-card--info">
<a href="../../users/2993478/aebabis" class="s-user-card--link">aebabis</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">3,657</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="22 silver badges">22</li>
<li class="s-award-bling s-award-bling__bronze" title="40 bronze badges">40</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-37196532">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>2</strong></span>
<div class="viewcount">votes</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/37196532/aria-live-doesn-t-say-label-after-updates" class="question-hyperlink">Aria-live doesn't say label after updates</a></h3>
<div class="excerpt">I have this piece of HTML which is updated dynamically with JS. The screen reader only reads out the new value when they get updated. It doesn't say the label of the input who was updated.
<ul class="points-transfer-detail-points-calculation…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a>
<a href="../../questions/tagged/wai-aria" class="post-tag grid--cell" title="show questions tagged 'wai-aria'" rel="tag">wai-aria</a>
<a href="../../questions/tagged/aria-live" class="post-tag grid--cell" title="show questions tagged 'aria-live'" rel="tag">aria-live</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked May 12 '16 at 20:10">asked May 12 '16 at 20:10</time>
<a href="../../users/5149613/raphael-parent" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/5149613.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Raphael Parent" />
</a>
<div class="s-user-card--info">
<a href="../../users/5149613/raphael-parent" class="s-user-card--link">Raphael Parent</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">474</li>
<li class="s-award-bling s-award-bling__silver" title="5 silver badges">5</li>
<li class="s-award-bling s-award-bling__bronze" title="9 bronze badges">9</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-71216824">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/71216824/how-to-set-up-aria-live-assertive-and-role-alert-in-a-nested-structure" class="question-hyperlink">How to set up aria-live="assertive" and role="alert" in a nested structure?</a></h3>
<div class="excerpt">I have a big web page, and in which after a successful submission of a form, it starts showing up a success/failure message, and we want NVDA to automatically read the same as soon as Submit button is clicked. I've tried the basic recommendations to…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a>
<a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a>
<a href="../../questions/tagged/nvda" class="post-tag grid--cell" title="show questions tagged 'nvda'" rel="tag">nvda</a>
<a href="../../questions/tagged/aria-live" class="post-tag grid--cell" title="show questions tagged 'aria-live'" rel="tag">aria-live</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Feb 22 '22 at 06:32">asked Feb 22 '22 at 06:32</time>
<a href="../../users/2600283/tanmayghosh2507" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2600283.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="tanmayghosh2507" />
</a>
<div class="s-user-card--info">
<a href="../../users/2600283/tanmayghosh2507" class="s-user-card--link">tanmayghosh2507</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">773</li>
<li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
<li class="s-award-bling s-award-bling__silver" title="12 silver badges">12</li>
<li class="s-award-bling s-award-bling__bronze" title="31 bronze badges">31</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-60514991">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status ">
<strong>0</strong> answers
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/60514991/chrome-sending-entire-element-to-screen-reader-when-any-change-is-made" class="question-hyperlink">Chrome sending entire element to screen reader when any change is made</a></h3>
<div class="excerpt">At some point recently (I believe during the v80 update) Chrome has started sending the entire contents of an aria-live element to the screen reader whenever content is added. Previous to this, it used to only announce the additions. Firefox still…</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/google-chrome" class="post-tag grid--cell" title="show questions tagged 'google-chrome'" rel="tag">google-chrome</a>
<a href="../../questions/tagged/screen-readers" class="post-tag grid--cell" title="show questions tagged 'screen-readers'" rel="tag">screen-readers</a>
<a href="../../questions/tagged/jaws-screen-reader" class="post-tag grid--cell" title="show questions tagged 'jaws-screen-reader'" rel="tag">jaws-screen-reader</a>
<a href="../../questions/tagged/nvda" class="post-tag grid--cell" title="show questions tagged 'nvda'" rel="tag">nvda</a>
<a href="../../questions/tagged/aria-live" class="post-tag grid--cell" title="show questions tagged 'aria-live'" rel="tag">aria-live</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Mar 03 '20 at 20:26">asked Mar 03 '20 at 20:26</time>
<a href="../../users/2077161/buddy-wagner" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2077161.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Buddy Wagner" />
</a>
<div class="s-user-card--info">
<a href="../../users/2077161/buddy-wagner" class="s-user-card--link">Buddy Wagner</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">13</li>
<li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mln24">
<div class="question-summary" id="question-summary-59638388">
<div class="statscontainer">
<div class="stats">
<div class="vote">
<div class="votes">
<span class="vote-count-post"><strong>1</strong></span>
<div class="viewcount">vote</div>
</div>
</div>
<div class="status answered-accepted">
<strong>1</strong> answer
</div>
</div>
</div>
<div class="summary">
<h3><a href="../../questions/59638388/read-customized-message-when-content-updates-for-aria-live" class="question-hyperlink">Read customized message when content updates for aria-live</a></h3>
<div class="excerpt">If I have an element that has the aria-live='polite', but I don't want the screen reader to reads the updated content, but a customized message I provide, is it possible?
Thanks!
</div>
<div class="grid ai-start jc-space-between fw-wrap">
<div class="grid gs4 fw-wrap tags ">
<a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a>
<a href="../../questions/tagged/uiaccessibility" class="post-tag grid--cell" title="show questions tagged 'uiaccessibility'" rel="tag">uiaccessibility</a>
<a href="../../questions/tagged/aria-live" class="post-tag grid--cell" title="show questions tagged 'aria-live'" rel="tag">aria-live</a>
</div>
<div class="started mt0">
<div class="s-user-card s-user-card">
<time class="s-user-card--time" datetime="asked Jan 08 '20 at 01:47">asked Jan 08 '20 at 01:47</time>
<a href="../../users/2158478/bunny" class="s-avatar s-avatar__32 s-user-card--avatar">
<img class="s-avatar--image" src="../../users/profiles/2158478.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="bunny" />
</a>
<div class="s-user-card--info">
<a href="../../users/2158478/bunny" class="s-user-card--link">bunny</a>
<ul class="s-user-card--awards">
<li class="s-user-card--rep" title="reputation score">1,797</li>
<li class="s-award-bling s-award-bling__gold" title="8 gold badges">8</li>
<li class="s-award-bling s-award-bling__silver" title="29 silver badges">29</li>
<li class="s-award-bling s-award-bling__bronze" title="58 bronze badges">58</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="s-pagination pager fr">
<div class="s-pagination--item is-selected">1</div>
<a class="s-pagination--item" href="../../questions/tagged/aria-live_page=2" rel="" title="Go to page 2">2</a>
<a class="s-pagination--item" href="../../questions/tagged/aria-live_page=3" rel="" title="Go to page 3">3</a>
<a class="s-pagination--item" href="../../questions/tagged/aria-live_page=2" rel="next" title="Go to page 2"> Next</a>
</div>
</div>
</div>
</div>
</div>
<script src="../../static/js/stack-icons.js"></script>
<script src="../../static/js/fromnow.js"></script>
</body>
</html>