I have a select control that a user will use to display a specified quantity of form fieldsets (like, "How many fieldsets do you need?"). I don't have a lot of control over the form structure, which uses an UL with 1 LI per form input - some LIs are hidden then become visible based upon the value of the select. I'm thinking of setting aria-controls="id of UL" on the select, and introducing a text element with attributes aria-live="polite" and role="status" - then updating this element's text to describe the quantity of fieldsets available. Thoughts?
Nathaniel asked for a code example - here's the basic HTML (I can't modify the list structure but I can modify everything else via JS):
<ul id="myform">
<li><select aria-controls="myform"><option>1</option><option>2</option></select>
<div role="status" aria-live="polite" aria-atomic="true" id="statusMsg">This text will announce how many fieldsets are now visible</div></li>
<li class="fieldset1"><input type="text"></li>
<li class="fieldset1"><input type="text"></li>
<li class="fieldset2"><input type="text"></li>
<li class="fieldset2"><input type="text"></li>
</ul>
Related
UA: Mozilla Firefox 28.0;
AT: JAWS 14.0.1534 and NVDA 2014.1;
OS: MS Windows 7 Professional SP1
Given the following simple ARIA-enhanced menu widget, why is the associated 'Where to go' label never read? It's been my understanding that labels associated with focusable elements should be announced when focus is received. Instead, only the menu item's text is read.
<div role="application">
<ul id="main-menu" role="menu" aria-label="Where to go" aria-activedescendant="item-1" tabindex="0">
<li id="item-1" role="menuitem">First page</li>
<li id="item-2" role="menuitem">Second page</li>
<li id="item-3" role="menuitem">Third page</li>
</ul>
</div>
Is it some kind of "optimization" as to prevent excessive information to be read to the user everytime the menu received focus? Like, the contents of the "menuitem" would be prioritized over the labelling of the containing menu widget. Of course, this is just a wild guess. Does anybody have more details that could help clarify the above situation?
A related question based on the same code sample: I've found out that doing away with the containing div (the one with the role="application" attribute) changes absolutely nothing regarding the behavior of the widget (there's Javascript code for controlling keyboard interaction and updating the UL's aria-activedescendant attribute). When do you actually need a container with role="application"?
Based on the example, it doesn't look like something that should be a menu.
The menu role is intended for application style menus which pop-up sub-menus. See this menubar example.
Upon tabbing to the menu, you then use arrow keys to navigate, not tab.
What you've got (so far at least) is simple navigation, and on a website the most appropriate mechanism is standard links.
<nav aria-label="Where to go">
<ul id="main-menu">
<li>First page</li>
<li>Second page</li>
<li>Third page</li>
</ul>
</nav>
The aria-label may or may not be read out by a screenreader (in a brief test NVDA did not, VoiceOver did), if that is important hide an off-screen heading above the menu. However, that label is used if the user navigates by "landmark".
If you do go for a full menu, I'd try the accessible Adobe mega-menu.
I am generating asp.net project in which I want to put one control over another and make them visible true\false according to the list item selected from unordered list. I want to know how can I get which list item is selected from unordered list and how to place one control over other like what we can do easily in windows form.
Code for unordered list is:
<ul id="nav" >
<li class="srvlist">Dashboard
<div class="sub1">
<ul id="inner_nav">
<div class="arrow1"></div>
<li>Recent</li>
<li>All</li>
</ul>
</div>
</li>
<li class="srvlist">Statistics
<div class="sub1">
<ul id="inner_nav">
<div class="arrow1"></div>
<li>Opens</li>
<li>Clicks</li>
<li>Bounces</li>
<li>Spams</li>
<li>Unsubscribe</li>
<li>Blocks</li>
<li>Invalid Ids</li>
</ul>
</div>
</li>
<li>Graph</li>
<li>Compose</li>
</ul>
Keep both controls side by side, invisible control will automatically release that place for visible one.
Create two divisions , and put your control into each division !
In this fiddle example , you can see how to overlap two division using position:absolute; .
You can change the visibility of each division like yourDivID.Visible = true/false; in code-behind !
And additionally , I suggest you to use UserControl for your requirement !
You have to make two UserControl and , you can bind this UserControl to the same Content
dynamically !
I am creating a dynamic navigation list and I want to be able to highlight the page from that list that the user is currently browsing without having to explicitly add the style into a CSS document. For instance,
<div class="check-me">
<ul class="any-class">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
Essentially, I want to be able to replace the "any-class" with another class, one that appears on an LI element within the "any-class" UL.
<div class="check-me">
<ul class="shirts">
<li class="hats">Hats</li>
<li class="shirts">Shirts</li>
<li class="pants">Pants</li>
</ul>
</div>
I cannot append an "active" class to any LI due to limitations, so I wonder if this is possible using a wildcard CSS selector to use inside div.check-me to highlight anything that shares the same class with the UL. I hope I've been clear enough.
Here's the jQueryTools demo page on how to use their tooltips: http://flowplayer.org/tools/demos/tooltip/any-html.html
Basically, if you want to have a tooltip that contains HTML, you have to put that HTML in a div and place it directly after the trigger element like so:
<a href="http://www.stackoverflow.com" id="link1">
<div class="tooltip">
<img src="img/SOicon.png">stack<span style="font-weight:bold">overflow</span>
</div>
But my trigger element isn't <a href="http://www.stackoverflow.com" id="link1">. It's an <li>, and my guess is that I can't put anything other than an <li> in the parent <ul>. In other words, I can't place the after the trigger element like I'm supposed to.
I've come up with a way to fix this (scrapping the unordered list with floated <li>s and switching over to floated divs) but figured I should probably consult the experts (you guys, of course!) before I got started on fixing the problem.
How would you guys fix this?
It's no problem to use another element outside your structure as tooltip target !
<ul id="mylist">
<li title="List Point 1">List Point 1</li>
<li title="List Point 2">List Point 2</li>
<li title="List Point 3">List Point 3</li>
</ul>
<!-- many other HTML ELements -->
<div id="mylist_tooltip"></div>
At the end put in your jQuery's ready() :
jQuery("#mylist li").tooltip({
// target div
tip: '#mylist_tooltip'
});
Read more in the docu ;-)
I have a list of articles in a ul list. Reading http://www.w3.org/WAI/PF/aria/roles#role_definitions i can either use the roles list and listitem per item, but they are also considered as an article.
Option 1: Can I do the following (have 2 roles on the same element):
<ul role="list">
<li role="listitem article">...<li>
</ul>
Option 2: Should I just use the article role:
<ul>
<li role="article">...<li>
</ul>
You should use Option 3 :)
<ul role="list">
<li role="listitem">...<li>
</ul>
All you really want to do is let assistive technologies understand the markup of the content.
Actually, with most assisted technologies, the "role" attribute is usually only required on rich internet content, like sliders, and many HTML5 elements.
If you are worried about screen readers properly working with your code, marking up something such as the list correctly would be suffice.
Good Example
<p> This is a list </p>
<ul role="list">
<li role="listitem"> List Item 1 <li>
</ul>
Bad Example
<p> This is a list </p>
<p> - List Item 1 </p>
The difference between the two, is that when a screen reader comes to the "Good Example" it will read, "This is a list, List contains 1 item, item 1 of 1 - List item 1"
With the "bad example", the screen reader would read "This is a list dash List item 1"
Keep in mind though, the assitive technology is not working properly with the "Good Example" because of the "role" attribute. It is working properly simply because you used correct markup to create the list (<ul> <li> tags). Although, it is good practice to include the role attribute even though it is not required to make a list accessible.
Someone feel free to point out some more goodies :)