I am trying to add live region support in a web page to make NVDA usable with the page. However, I have seen quite a different behavior with aria-live attributes than expected.
I have tried adding a single live region which is hidden and I dump all the messages (each message enclosed in <p> tag) into that region to be read by screen reader. It works fine, but the only problem is that the first message inserted into live region div is never read by the NVDA screen reader. Subsequent messages are read perfectly. This live regions div is created dynamically when the first message is to be announced.
aria-live="assertive" doesn't really interrupt the current flow to announce the message.
I am using knockout in web page. When HTML div, which is marked as live-region, is displayed based on knockout condition, then it is not detected by screen reader.
For example:
<!-- ko if: $data -->
<div aria-live="polite" data-bind="text: $data">
</div>
<!-- ko -->
When page is loaded initially, $data is null. So live-region div is absent. But when data is fetched that div gets inserted. However, NVDA doesn't read the content in added div. Is this expected behavior? Is there any workaround to fix this behavior?
Quick answer, pressed for time.
You must have your live region on the page at page render. This primes the browser to monitor it for updates. Adding the element after the fact only primes the browser, but does not trigger it.
I forked your pen and got it working in the first button (through the browser pronounces "XYZ" as "zeyes"). This is in debug mode so there is no CodePen code in there at all (nor frames) to jack it up:
http://s.codepen.io/aardrian/debug/wgWqVm
Non-debug mode so you cans see the code:
http://codepen.io/aardrian/pen/wgWqVm
Your code puts the aria-live on an element wrapped within a Knockout ko if: statement, so it is not rendered to the page at load:
<p>Last name:
<!-- ko if: lastName -->
<strong aria-live="polite" data-bind="text: lastName"></strong>
<!-- /ko -->
</p>
I tweaked it to put the live region around the ko if: check, and now it is announced when the button is pressed:
<p>Last name:
<div aria-live="polite">
<!-- ko if: lastName -->
<strong data-bind="text: lastName"></strong>
<!-- /ko -->
</div>
</p>
Yes, I put a <div> in a <p>, but that is only for demonstration purposes.
Tested in NVDA 2016.4 / Firefox 50.1.1 and it works as I believe you intend. I did not touch the second one at all.
Related
I am trying to implement the notification component that will show the list of the items and will be opened by clicking on the notification icon on the fixed navigation bar on the top. I don't think it's a menu bar. Because the menu provides the actions that can be performed and it can also have a sub-menu.
https://www.w3.org/TR/wai-aria-practices/#menu
Can anyone let me know what should be the aria-role of such kind of components?
Below is the code sample. I will open the template dynamically by clicking on the notification icon button:-
<button aria-label="notifications">
<mat-icon class="mr-md">notifications</mat-icon>
</button>
<!-- Notification template -->
<div class="notifications__item">
Notifications
<li *ngFor="let notification of notifications" class="notifications__item">
<mat-icon class="notifications__icon material-icons-round">
{{ notification.icon }}
</mat-icon>
<div class="notifications__content">
<div [ngClass]="{ 'notifications__warn': notification?.type }">
<span>{{ notification.title }}</span>
</div>
<div>{{ notification.description }}</div>
</div>
<small class="notifications__caption">
{{ notification.duration }}
</small>
</li>
</div>
There are still a lot of things to consider that your example doesn't cover, so this isn't a complete answer, it is just pointing you to the relevant WAI-ARIA depending on what route you take.
The button
The first thing to consider is the button. You need to tell screen reader users what state it is currently in. For this we use aria-expanded to indicate whether the item it controls is currently opened or closed. (aria-expanded="true" for open, aria-expanded="false" for closed.)
At the same time we want to indicate what item this button controls (as the notification list isn't 'owned' by the element - for example if it was an <li> with a nested <ul> in a menu then the list would be 'owned' by it).
For this we would use aria-controls or aria-owns and point it to the ID of the element it controls. For the difference between them see this stack overflow post as a good explanation, in this example I would say it is aria-controls but yet again depends on your implementation and positioning in the DOM.
With regards to the button itself and where it sits in your menu, this is still considered navigation so it should sit within your <nav> element. However if this sits outside of your navigation along with say a 'help' and 'account' section you may consider those items part of a toolbar. (yet again I would say it doesn't apply here but something to look at)
Also it doesn't appear to be applicable here but if you include any links etc. within the 'popup' / modal that shows the notification list (i.e. a 'view all notifications' link), you should consider aria-haspopup="true"
The notification list
Right so we have a button pointed to the container (don't forget to give the container the relevant ID for aria-owns or aria-controls). Next what about the container itself?
Well in this example it appears that the container should be treated like a modal.
So for this reason you need to consider:-
trapping focus in the modal,
close with Escape,
returning focus to the button that activated it on close,
providing a close button that is accessible by keyboard,
a title for the modal (even if it is visually hidden)
What I would recommend is add some of the accessibility features above, try it with a screen reader and keyboard and see if it is easy to use. Once you have decided on your pattern ask some more questions on specific use case issues as the above is general guidance.
A few things to consider based on your markup
Additional things to consider from your example:-
use aria-hidden="true" on your icons, they don't add anything for screen readers (assuming your notification.title is descriptive).
For the notification title consider making it a relevant heading (<h2> - <h6> depending on position in document.
Don't forget to add some visually-hidden text that describes the warning level (I can see you have some form of colouring / distinction in [ngClass]="{ 'notifications__warn': notification?.type }" - expose the same info to screen readers.)
You currently have a <li> within a <div> - maybe change the outer <div> into an <ul> so it is semantically correct (<div class="notifications__item"> into <ul class="notifications__item">)
I hope the above is useful to set you on the right track, a lot to read but after reading the linked articles you should be able to make a better decision on what pattern you are using (as I didn't even mention making this a sub item within your menu) and can then ask some more questions on specific details you don't yet understand.
final thoughts / tips
test with a screen reader - this is the biggest tip I can give on working out how WAI-ARIA works and interacts with things.
Also if you are ever in doubt as to whether a WAI-ARIA attributre is applicable it is better to not include it.
Incorrect use or WAI-ARIA is actually worse than not including it at all so make sure you understand when to use an attribute reasonably well before implementing it. If I am ever unsure (as it still happens to me!) I tend to look at 2 or 3 examples of it in use and see if my pattern fits the examples I looked at.
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.
I am currently tweaking a BigCommerce theme for my employer. They have asked me to remove and change a few CSS / HTML elements to fit the style and functionality that they are after.
Rather than just DELETING the functionality within the theme, I was hoping to just comment it out in case it is needed later. But I am having an issue with the formatting.
The following is the code as displayed in the ProductDetails.html Panel file:
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
%%Panel.ProductReviews%%
%%Panel.ProductByCategory%%
%%Panel.SimilarProductsByCustomerViews%%
</div>
I am trying to comment out the last 3 lines only.
However, when I do, the end of the comment ( --> ) shows up in the browser. I have closed the comments correctly but there must be some simple concept that I am missing. Hoping the good people at SO can help.
Below is the code as I have saved it and a screenshot of the display in my browser. The first screen shot is how it looks before I add any comments and the second is after I add them. You can clearly see the closing comment in the second image, can anyone tell me why??
Thanks in advance for any help.
<div class="Content" id="prodAccordion">
%%Panel.ProductTabs%%
%%Panel.ProductDescription%%
%%Panel.ProductVideos%%
%%Panel.ProductWarranty%%
%%Panel.ProductOtherDetails%%
%%Panel.SimilarProductsByTag%%
<!--%%Panel.ProductReviews%%-->
<!--%%Panel.ProductByCategory%%-->
<!--%%Panel.SimilarProductsByCustomerViews%%-->
</div>
Nicole, I've dealt with this and can definitely explain why it's happening and how to avoid it.
Why It's Happening
It's happening because this is how BigCommerce's server side PHP processor parses the code you're looking at. The code is basic HTML, while the %%Panel.something%% are simply ways for BigCommerce's processor to recognize as a command for BigCommerce.
Anytime the BC site sees %%Panel.Name%%, it knows that this is not HTML, but rather a place where BC server-side processor should insert the Panel file before serving this HTML to the user.
How to Avoid it and Comment-out Correctly
Simply, remove the % symbols and use regular commenting. This will work:
<!-- Panel.ProductReviews-->
So will this:
<!--%%Panel.ProductReviews-->
And this:
<!-- Panel.ProductReviews%%-->
Or even this:
<!-- %Panel.ProductReviews% -->
Mainly, you have to make sure that each side of a Panel.Name reference, doesn't have 2 % symbols on each side.
To Restore the Correctly Commented Out Code/Panel
Simply restore the 2 % symbols on each side like so (the spaces between - and % don't matter, you can have none or 10):
<!-- %%Panel.ProductReviews%% -->
Why You're Seeing --> On Live Site
As broached/explained in the comments of your question, you're seeing --> when commenting out a Panel like so <!--%%Panel.Name%%--> because by commenting out the Panel that way without removing at least one of the % symbols, you're still telling BigCommerce to load the Panel HTML file, but to place it within the
<!-- [HTML code from panel goes here] -->
The problem with that is simply that some of these Panel files contain comments themselves.
For example, let's say you comment out %%Panel.Header%% like so !<--%%Panel.Header%%-->. The Header.html Panel may be code like this:
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
By commenting out the code without removing the % symbols, BigCommerce will load this:
<!--
<!-- this is the header code panel-->
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
when a user open a page that uses the Header.html panel, they will see this code as commented <!--<!-- this is the header code panel-->, because the browser will start the comment at the first <!-- and end the comment at the first appearance of -->.
In the browser, the user will see the uncommented remains:
<div class"MainHeader">
<ul class="TopNav">
...
</ul>
</div>
-->
And hence you'll see some extra, probably broken HTML, plus the stray --> somewhere at the end of the improperly commented code.
Again, to avoid all this, just remove one of the % symbols, then use regular commenting to comment out a Panel file reference.
Let me know if this helps and if you have any other questions.
I have called a view within another view
<!-- right area ends -->
</div><!--row marginTR-30px ends-->
</div><!--container marg-top-bnr ends-->
<!-- blog area ends -->
<?php $this->load->view('common/footer'); ?>
<?php $this->common_lib->compared_salon(); ?>
</div><!--body-inner salon-profile ends -->
Top
Here I have rendered my view footer after these element and html comment
<!-- right area ends -->
</div><!--row marginTR-30px ends-->
</div><!--container marg-top-bnr ends-->
<!-- blog area ends -->
But when it's loaded, the entire element available inside the footer view goes to some of its parent element as I'm able to see it with inspect element
Click here to see it in large view
All social icons are horizontally aligned, but due to tag structure change while loading view, its look is totally changed.
Earlier it's running well, I'm unable to find solution. According to me all footer tag element should come after these line, but it's showing before it.
<!-- right area ends -->
</div><!--row marginTR-30px ends-->
</div><!--container marg-top-bnr ends-->
<!-- blog area ends -->
Unfortunately you have not shown any of the HTML associated with your issue.
My educated guess is that your divs are "up the spout". I'd be looking at the actual HTML Source and making sure your pairs are where you expect them to be.
If you "had it working" and now it's not - it's very easy to have this happen (read as - I've done this myself on the odd occassion ).
UPDATE:
So out of all that code you provided, I found
<div class="marginT-30px social clearfix">
</div>
I'm Not sure if 6 x 4 is ever equal to 12! :)
I'd be going over that code with a fine tooth comb. I've no idea what or where marginT-30px and friends are set.
I want to display comments in my HTML source, but only in the source and not on the actual rendered content of the page. For example, when a user right clicks their browser window and selects "View Source", I want the comments to be visible for them to read there, but I don't want the comments to be visible on the actual rendered website.
I tried
<span style="visibility: hidden;">
Joe Hancock - 04/16/12 - Some comment
</span>
But doing this takes up actual room on the webpage (white space) and really throws off my styling.
Anyone know of an good way to do this?
<!--This is a comment. Comments are not displayed in the browser-->
HTML Comments
Try this:
<!-- Comment goes inside here -->
1<div style="display:none">This is hidden</div>2