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










0















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?










share|improve this question




























    0















    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?










    share|improve this question


























      0












      0








      0








      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?










      share|improve this question
















      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






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Mar 7 at 7:46







      bpGusar

















      asked Mar 7 at 7:40









      bpGusarbpGusar

      285




      285






















          1 Answer
          1






          active

          oldest

          votes


















          1














          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.






          share|improve this answer






















            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
            );



            );













            draft saved

            draft discarded


















            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









            1














            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.






            share|improve this answer



























              1














              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.






              share|improve this answer

























                1












                1








                1







                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.






                share|improve this answer













                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.







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Mar 8 at 22:29









                slugoliciousslugolicious

                5,46811420




                5,46811420





























                    draft saved

                    draft discarded
















































                    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.




                    draft saved


                    draft discarded














                    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





















































                    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







                    Popular posts from this blog

                    How to get text form Clipboard with JavaScript in Firefox 56?How to validate an email address in JavaScript?How do JavaScript closures work?How do I remove a property from a JavaScript object?How do you get a timestamp in JavaScript?How do I copy to the clipboard in JavaScript?How do I include a JavaScript file in another JavaScript file?Get the current URL with JavaScript?How to replace all occurrences of a string in JavaScriptHow to check whether a string contains a substring in JavaScript?How do I remove a particular element from an array in JavaScript?

                    Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

                    List of MPs elected to the English parliament in 1640 (April) Contents List of constituencies and members See also Notes References Navigation menueNational Archives – The Glynde Place ArchivesCobbett's Parliamentary history of England, from the Norman Conquest in 1066 to the year 1803'Aldermen in Parliament', The Aldermen of the City of London: Temp. Henry III – 1912onepage&q&f&#61, false 229