This container is created on the fly and added into the dom. The container is removed from the dom once the data is loaded. When this container is added into the dom and narrator/NVDA is on, I need to announce "Loading"
<div id="loadingContainer">
<span id="spinner">
<svg/>
</span>
<div id="loadingText" aria-label="Loading...">Loading...</div>
</div>
Tried role = "alert" for the loadingtext div but it announces "alert" which is not good for me. Tried role = "status" but it didnt announce anything, I presume because the container is created with the role attribute and there is no change in the value of the element.
Should be a simple matter of having a container for the container that's added with aria-live="polite". I always use polite for aria-live regions unless it's absolutely necessary for a message to be announced immediately, which is rarely needed.
So your code would just have
<div aria-live="polite">
<!-- your newly created <div> will go here -->
</div>
And when the container is created, you'd have:
<div aria-live="polite">
<div id="loadingContainer">
<span id="spinner">
<svg/>
</span>
<div id="loadingText" aria-label="Loading...">Loading...</div>
</div>
</div>
You'd also have to change the value of aria-relevant since the default is "additions text" which will only announce when you add the DOM element. If you want an announcement made when you remove that DOM element, you'd need "removals" too. Or simply use "all".
<div aria-live="polite" aria-relevant="all">
<!-- your newly created <div> will go here -->
</div>
role=“status” would be most suited for conveying the text. Alternatively you can choose to have no role but add an “aria-live=“assertive”. Be sure that the container with role=“status”/aria-live is present from the start, when the page is loaded, and then give it some content when you would like it to be announced. You should do this, because Firefox + NVDA screen-reader does not immediately see when a new live area appears in the DOM. Having it present from the start is the surefire way to let the browser + screen-reader listen for changes in that element.
You can also consider setting aria-busy=“true” on the actual element being updated.
Also, having an aria-label with the same text as it’s content (“Loading…”) won’t have any effect. Just skip the label and keep the text.
Related
On our (Vue.js v.2) webpage we have a section where you can swipe between cards, or by pressing "left" and "right" button. This swiping section is written with vanilla JS, and no fancy library. In order to have the adjacent visible when swiping, I need to have all of them visible in the DOM tree, but hiding them from the viewer. I have made it so all the unfocused cards are aria-hidden, and it works great when using ChromeVox. The problem is that when using VoiceOver, and I click the "right" button, and immediately tab down to the card, it will read out the card to the left, and also get trapped there since the card is aria-hidden. Code-wise the change from aria-visible to aria-hidden happens as soon as the button is pressed, but it seems like VoiceOver has already decided that when I am focusing on the "right" button, that the next element should be card 5 (for instance). If I wait around 1 or 2 seconds after clicking the "right" button, it will change the "next" element, and focus on the correct one (card 6) when I tab down. Is there any way to get around this, so it will focus only on the aria-visible element? Maybe a way to "force refresh" VoiceOver's stack of elements to read next? Maybe if I remove the message being read out when clicking the button, it will refresh immediately? I still haven't found of doing either of those things. I created a low quality flowchart to illustrate the problem better. What I want is for it to behave like ChromeVox.
I have tried several methods of getting this to work now, and it feels like it's a bug with VoiceOver. Some of the (desperate) attempts I've tried: setting tabindex=-1, role=presentation, changing the ID of "right" button dynamically as I navigate between cards, creating an empty div with a dynamic ID below the button, using aria-flowto, dynamically setting aria-describedby on the "next" element, and different variations between these and some other stuff I can't remember.
Eventually I found a solution that kinda works. I'm not very happy about it, but it's better than nothing. What I did was to make the title inside the card aria-hidden, and creating a currentHeader variable in store. I created an sr-only & aria-visible title above the swiping section, where the v-html points to the currentHeader variable. This way, the "next" element for the "right" button will always be the same element, but content will change after I click the button. It's not a perfect solution, and for some reason it makes VoiceOver "halt" when trying to go to the next element immediately after clicking the button, but at least the user won't read the wrong text and get trapped. Here's a pseudocode illustration of how I did it if my explaination was confusing:
// old solution // old swiping-section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 v-html="element.title" />
<swiping-section /> <p v-html="element.desc" />
</div>
// new solution // new swiping section
<button id="left" /> <div v-for="element in elements" />
<button id="right" /> <h3 aria-hidden="true" "v-html="element.title" />
<h3 class="sr-only" v-html="currentHeader" /> <p v-html="element.desc" />
<swiping-section /> </div>
If anyone finds a better way to do it, please post your solution.
I need to have a screen in my app which all of it's content will be read using the screen reader automatically.
I tried to add role="dialog" aria-live="assertive" aria-atomic="true" and it didn't make it.
I also tried to use role="alert" aria-live="assertive" aria-atomic="true" it did read it, but using 'alert' as prefix.
How can I make it happened using no prefixes and additional info ?
I believe the document role is the correct one to use in your case. From MDN:
Generally used in complex composite widgets or applications, the document role can inform assistive technologies to switch context to a reading mode: The document role tells assistive technologies with reading or browse modes to use the document mode to read the content contained within this element.
You should include tabindex="0" on the element in which you wish to be immediately read, and use JavaScript to set the focus to the element.
Update
I tested the following code in Mac/Chrome, version 79.0.3945.88, and removed the tabindex attribute as well as all JavaScript. VoiceOver immediately read the contents of the document in its natural order.
<div class="container" role="document">
<p>
Read this first.
</p>
<p>
Read this next.
</p>
</div>
I did a screen capture of the VoiceOver utility as it was reading the above HTML to show it working on page load (forgive the Giphy Capture bit at the beginning of the gif).
If this really is something like a dialog - which means it consists mostly of operable content (UI controls such as buttons) then the non-operable content will not get announced by default. You can solve this if, on the thing with role="dialog", you have aria-labelledby pointing at its heading, and aria-describedby pointing at all the ids (space-separated) of the elements inside that you want read-out when it opens.
The markup might look like this:
<div role="dialog" aria-labelledby="dialogheading" aria-describedby="foo bar">
<h2 id="dialogheading">Let's have a dialog</h2>
<p id="foo">lorem ipsum</p>
<p id="bar">rhubarb rhubarb</p>
<button>yadda</button>
<button>yoda</button>
</div>
If there's really a lot of non-operable content, or if there's no operable content, role dialog is the wrong thing. If the context for this 'screen' is in forms/application mode use role=document instead, and make sure it has a tabindex so you can give it focus, which should switch the screen reader to browse mode.
I'm working on fixing some accessibility issues on a web page. I have this div that acts as a dialog, and inside at one point a div containing a loading animation and a text "Working..." is displayed.
I am unsure as to how to label these two items in order to correctly notify the blind user that there is a progress animation and that it's working and he should wait.
<div id="loading" style="display: none;">
<div class="mgBot15"><span class="txt16" role="alert">Working...</span></div>
<img src="loading.png" role="progressbar" aria-busy="true"/>
</div>
I tried adding the role and aria-busy properties to the img (also to the parent div, at first).
When this div appears (by changing the display style property), it correctly reads "Working..." but I hear no indication that it's busy and that the user should wait, am I missing something?
I've looked all over for examples for loading animations, to no avail so far.
Note: I'm using NVDA as a screenreader to test.
Thanks
The best solution I could come up with was using role alert, and aria-busy="true".
<div id="loading" style="display: none;">
<div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div>
<img src="loading.png" alt="loading" />
</div>
I believe the most sensible approach would to use the combo
aria-busy="true" aria-live="polite"
The reason for that is because some pages might have a lot of separate loaders (let's say one for each component, not a single loader for the whole page) and it you use aria-live="assertive" or role="alert" it will be very intrusive and each of the loaders will get called out.
The correct role to use here is progressbar as the original question used. Other roles like alert may work, but they are less specific, meaning assistive technology may present the information in a less ideal manner.
There are a few issue with the original question's example, though:
If you wish to have the text be announced in the same as an alert is, aria-live="assertive" should be used rather than the alert role. That aria-live value is what causes the screenreader to announce the text when it does for an alert.
The text to be announced should be set on the element with the progressbar role using the aria-valuetext attribute. It should not be set solely on a separate adjacent element. If it needs to also be included in another element for presentational reasons, that element should have aria-hidden="true".
Per the spec, aria-valuemin and aria-valuemax are to be specified even when the progress is indeterminate (like a spinning loading indicator). These could be set to 0 and 100 respectively as simple placeholders implying a percentage.
When the loading is complete, the aria-valuenow could be set to whatever was used for aria-valuemax, and aria-busy can be set to false.
This leads to one potential alternative to the original question:
<div id="loading" role="progressbar" aria-valuetext="Working…" aria-busy="true"
aria-live="assertive" aria-valuemin="0" aria-valuemax="100">
<div class="mgBot15" aria-hidden="true"><span class="txt16">Working...</span></div>
<img src="loading.png" alt="" />
</div>
After a day of fiddling with a similar issue, I was able to finally get this working with a lot of reading and experimenting. I'm using NVDA for a screen reader.
<div class="loader" show.bind="isLoading" role="alert" aria-label="Loading"></div>
The following attributes were key: role and aria-label.
Above example makes NVDA announce "Loading alert" once isLoading becomes true. Important to note is that NVDA pronounces the aria-label value, followed by "alert". Using roles "log" or "status" did not end up in any announcement.
Bootstrap used role="status" like this :
<div class="spinner-grow text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
and in MDN it said :
The status role is a type of live region and a container whose content
is advisory information for the user that is not important enough to
justify an alert, and is often presented as a status bar. When the
role is added to an element, the browser will send out an accessible
status event to assistive technology products which can then notify
the user about it.
There's a good article I came across that explains what needs to be done for this scenario Loading spinner accessibility
The spinner should be included inside the container. Its visibility can be toggled in relation to the aria-busy attribute. They should always be opposites, i.e, if currently loading, section[aria-busy="true"], .tn-spinner[aria-hidden="false"], once the content is loaded, toggle to false and true respectively.
I am using anchor tag for linking my welcome page to my main page. It is working on chrome but not in mozilla.
Code:
<div id="wel1"><h1>WELCOME TO ASSESMENT ENGINE</h1></div>
<div id="wel2">
<div id="wel3"><p id="wel4">Instruction:</p><br>
<p id="lang">Total number of questions : 5.<br><br>
Time alloted : 3 minutes.<br><br>
Each question carry 10 mark, no negative marks.</p>
</div>
<div id="wel5">
<p id="wel4">
Note:</p><br>
<p >
<ul>
<li><p>Click the 'Submit Test' button given in the bottom of this page to Submit your answers.</p></li>
<li><p>Test will be submitted automatically if the time expired.</p></li>
<li><p>Don't refresh the page.</p></li>
</ul>
</p>
</div>
<button id="bu">START THE TEST</buttton>
</div>
In this image START THE TEST button working on chrome perfectly but not on mozilla.
You have invalid close tag </buttton>
Try:-
<button id="bu">START THE TEST</button>
Demo
Although the code works if the end tag spelling error is corrected, it is illogical and forbidden in HTML5 to nest interactive elements: the a element must not have interactive content like a button element. A click on such an element could activate the outer element, or the inner element, or both. Although this might not matter in this specific case, it’s still not recommended.
Instead, you can use an image of a button an make it a link:
<img src="start.png" alt="START THE TEST" border="0">
or use a minimal form (submitting a form is different from following a link, but the differences often don’t matter, or could be an improvement):
<form action="as.html"><button type="submit">START THE TEST</button></form>
Spell mistake in the Closing button tag, Use </button> instead </buttton>
I have a section of HTML that I would like to be editable with CKEditor but in 2 different pieces.
Ideally I would want my HTML to look like:
<div class="page-header">
<h1>
<span>Heading</span>
<small>Subheading</small>
</h1>
</div>
where the subheading would be displayed on the same line as the heading and each are editable separately. This looks fine without CKEditor enabled.
One attempt was to hack the editor to enable span and small tags: (Enable CKEditor4 inline on span and other inline tags)
CKEDITOR.disableAutoInline = true;
CKEDITOR.dtd.$editable.span = 1;
CKEDITOR.dtd.$editable.small = 1;
$("[data-allowed-formating='all']").ckeditor();
http://jsfiddle.net/OzzieOrca/PCH9z/1/
This mostly works but if you double click the Header (to select everything) and start typing, it deletes the subheading and you can't get it back until you refresh the page
I tried using <div style="display: inline"> instead of the small and span but when CKEditor is instantiated, it changes the styling of the div and the subheader drops below the header.
I will try see if there is anything else I can do with CKEditor or see if I have any other HTML layout or styling ideas but any suggestions would be appreciated.
(I had the same issue with TinyMCE so I tried CKEditor and I think I like it better so I decided to keep using it but I still have this same problem)
Edit:
I finally tried this:
<div class="page-header">
<h1 class="pull-left">Header</h1>
<h1 class="pull-left">
<small class="padding-left">Subheader</small>
</h1>
<div class="clearfix"></div>
</div>
but then realized that this wouldn't wrap the subheader but just moves it to a new line if it is too long. I submitted this bug report: http://www.tinymce.com/develop/bugtracker_view.php?id=6354 which includes this example of what I want to do and what is not working http://jsfiddle.net/OzzieOrca/jKmZ7/
First, make sure the editor doesn't attach itself to the <h1> element.
If that works correctly, then I suggest to wrap the elements that you want to edit in a block element during edit and restore the DOM when editing stops.
I don't know why CKEeditor might distinguish between inline and block elements but it's quite possible that it never occurred to the author that someone might want to edit only part of a block.