How to hide ARIA-LIVE from screen readers but make they will can read content inside?2019 Community Moderator ElectionNVDA reads aria-hidden content after dynamic updatehow to make screen readers read entire page when angular changes states?Correct way to mark HTML text as decorative with ARIAMake Screenreader read messages on get-requestHow to make NVDA screen reader read the aria-label?NVDA screen reader is not reading aria-labelledby and aria-describedby in Internet ExplorerPrevent screen reader from reading aria-labelaria-live on textarea not working with JAWSNVDA screen reader aria-live issueARIA role and live attributes confict
Latest web browser compatible with Windows 98
Things to avoid when using voltage regulators?
Can you reject a postdoc offer after the PI has paid a large sum for flights/accommodation for your visit?
Who deserves to be first and second author? PhD student who collected data, research associate who wrote the paper or supervisor?
Can someone explain what is being said here in color publishing in the American Mathematical Monthly?
How to pass a string to a command that expects a file?
What wound would be of little consequence to a biped but terrible for a quadruped?
Am I not good enough for you?
Good allowance savings plan?
Time travel short story where dinosaur doesn't taste like chicken
Best approach to update all entries in a list that is paginated?
Why the color red for the Republican Party
Logic. Truth of a negation
They call me Inspector Morse
Is Gradient Descent central to every optimizer?
How strictly should I take "Candidates must be local"?
Why is there a voltage between the mains ground and my radiator?
Why don't MCU characters ever seem to have language issues?
How do I locate a classical quotation?
My story is written in English, but is set in my home country. What language should I use for the dialogue?
Low budget alien movie about the Earth being cooked
Do I really need to have a scientific explanation for my premise?
Peter's Strange Word
"One can do his homework in the library"
How to hide ARIA-LIVE from screen readers but make they will can read content inside?
2019 Community Moderator ElectionNVDA reads aria-hidden content after dynamic updatehow to make screen readers read entire page when angular changes states?Correct way to mark HTML text as decorative with ARIAMake Screenreader read messages on get-requestHow to make NVDA screen reader read the aria-label?NVDA screen reader is not reading aria-labelledby and aria-describedby in Internet ExplorerPrevent screen reader from reading aria-labelaria-live on textarea not working with JAWSNVDA screen reader aria-live issueARIA role and live attributes confict
I have on page ARIA-LIVE block like this:
<div
aria-live='polite'
role='log'
aria-relevant='additions'
aria-atomic='false'
style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
<div>message</div>
<div>message</div>
</div>
And now, if i using keyboard arrows, screen reader can reach aria-live zone, it is located at the very bottom of the page, and read content which he contain.
Is there a way to hide the aria-alive zone but at the same time make it so that the content in it is still normally read by the reader?
accessibility wai-aria screen-readers nvda
add a comment |
I have on page ARIA-LIVE block like this:
<div
aria-live='polite'
role='log'
aria-relevant='additions'
aria-atomic='false'
style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
<div>message</div>
<div>message</div>
</div>
And now, if i using keyboard arrows, screen reader can reach aria-live zone, it is located at the very bottom of the page, and read content which he contain.
Is there a way to hide the aria-alive zone but at the same time make it so that the content in it is still normally read by the reader?
accessibility wai-aria screen-readers nvda
add a comment |
I have on page ARIA-LIVE block like this:
<div
aria-live='polite'
role='log'
aria-relevant='additions'
aria-atomic='false'
style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
<div>message</div>
<div>message</div>
</div>
And now, if i using keyboard arrows, screen reader can reach aria-live zone, it is located at the very bottom of the page, and read content which he contain.
Is there a way to hide the aria-alive zone but at the same time make it so that the content in it is still normally read by the reader?
accessibility wai-aria screen-readers nvda
I have on page ARIA-LIVE block like this:
<div
aria-live='polite'
role='log'
aria-relevant='additions'
aria-atomic='false'
style='position: absolute; width: 1px; height: 1px; margin-top: -1px; clip: rect(1px, 1px, 1px, 1px); overflow: hidden;'>
<div>message</div>
<div>message</div>
</div>
And now, if i using keyboard arrows, screen reader can reach aria-live zone, it is located at the very bottom of the page, and read content which he contain.
Is there a way to hide the aria-alive zone but at the same time make it so that the content in it is still normally read by the reader?
accessibility wai-aria screen-readers nvda
accessibility wai-aria screen-readers nvda
edited Mar 7 at 7:46
bpGusar
asked Mar 7 at 7:40
bpGusarbpGusar
285
285
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
That's kind of like asking how can one apply CSS display:none to an element but still allow the element to be seen.
You can hide elements from a screen reader by specifying aria-hidden="true". If you also have aria-live, then any updates to that element will be hidden from screen readers, essentially negating the purpose of having aria-live.
About the best you can do is associate a label with that region to say "this element is for announcing dynamic updates", or something like that. A screen reader user may find it, but it doesn't hurt anything. They can easily ignore it and move on to the next element.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55038447%2fhow-to-hide-aria-live-from-screen-readers-but-make-they-will-can-read-content-in%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
That's kind of like asking how can one apply CSS display:none to an element but still allow the element to be seen.
You can hide elements from a screen reader by specifying aria-hidden="true". If you also have aria-live, then any updates to that element will be hidden from screen readers, essentially negating the purpose of having aria-live.
About the best you can do is associate a label with that region to say "this element is for announcing dynamic updates", or something like that. A screen reader user may find it, but it doesn't hurt anything. They can easily ignore it and move on to the next element.
add a comment |
That's kind of like asking how can one apply CSS display:none to an element but still allow the element to be seen.
You can hide elements from a screen reader by specifying aria-hidden="true". If you also have aria-live, then any updates to that element will be hidden from screen readers, essentially negating the purpose of having aria-live.
About the best you can do is associate a label with that region to say "this element is for announcing dynamic updates", or something like that. A screen reader user may find it, but it doesn't hurt anything. They can easily ignore it and move on to the next element.
add a comment |
That's kind of like asking how can one apply CSS display:none to an element but still allow the element to be seen.
You can hide elements from a screen reader by specifying aria-hidden="true". If you also have aria-live, then any updates to that element will be hidden from screen readers, essentially negating the purpose of having aria-live.
About the best you can do is associate a label with that region to say "this element is for announcing dynamic updates", or something like that. A screen reader user may find it, but it doesn't hurt anything. They can easily ignore it and move on to the next element.
That's kind of like asking how can one apply CSS display:none to an element but still allow the element to be seen.
You can hide elements from a screen reader by specifying aria-hidden="true". If you also have aria-live, then any updates to that element will be hidden from screen readers, essentially negating the purpose of having aria-live.
About the best you can do is associate a label with that region to say "this element is for announcing dynamic updates", or something like that. A screen reader user may find it, but it doesn't hurt anything. They can easily ignore it and move on to the next element.
answered Mar 8 at 22:29
slugoliciousslugolicious
5,46811420
5,46811420
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55038447%2fhow-to-hide-aria-live-from-screen-readers-but-make-they-will-can-read-content-in%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown