By a checkout progress bar, I mean something like this:
I am trying to make such web ui component accessible, especially for screen reader(like JAWS) users. I have been googling for hours to find some aria attributes that are designed for such use case, but didn't find any.
A not so elegant solution that I can think about is that, whenever this progress bar changes -- advance or going back, use javascript to generate an alert message in a format like "you completed:abc, you are now at:d, you still have:efg to go". I wonder if there is a better way of doing this.
A horizontal timeline can easily be setup with bootstrap 3 and inline lists like this:
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Which will result (with styling) to appear like this:
See codepen:
http://codepen.io/richfergus/pen/pNvRWd?editors=1100#0
Use HTML5's progress tag and ARIA's progressbar role.
http://www.w3schools.com/tags/tag_progress.asp
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role
Related
I am trying to optimize my code.
I have a menu that navigates me between multiple pages. I want to keep the same menu on each page, but I want the name of the page I am currently on to show up in a menu in a different color.
Here is the code I put in each page:
<nav class="stroke" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content">
<ul>
<li>Home</li>
<li>Data Upload</li>
<li>Data Transformation</li>
<li>Database View</li>
<li>Maintenance</li>
<li>Log</li>
</ul>
</nav>
As you can see, I am currently on Database View page, so "Database View" menu item is highlighted in orange. If Log page document, I have "Log" menu item highlighted in Orange.
This solution is simple and it works, but I was wondering if it's possible to do this in a more efficient manner. Something CSS related. I would like to avoid making it it too convoluted, like putting a bunch of if/else statements and echoing lines from PHP, or doing innerHTML from Javascript.
Thanks,
Jake
I am using aria-expanded in an attempt to make my tree list more accessible:
Consider the following:
<ul role="tree">
<li role="tree-item">
Link
<ul role="group">
<li role="tree-item">List item</li>
<li role="tree-item">List item</li>
</ul>
</li>
</ul>
Am I using aria-expanded in the correct place or should it be on the nested UL group?
aria-expanded should be on the control that opens the sub-tree, so the short answer is yes, it is in the right place assuming that the first anchor is the one that controls the opening.
However there are a few things to consider with the example given.
First of all you should never have a hyperlink that is empty. This should be a <button>.
"Buttons Do Things, Links point to URLs" is a great way to think of it, or "Buttons Do Things, Links go places".
Secondly from an ordering point of view your hyperlink "link.html" should be above the current hyperlink that I said to turn into a button. Otherwise the focus order is not logical so you might not pass WCAG 2.4.3.
Finally if you are using the first anchor (button) to expand and collapse the section you probably want to add aria-controls="idOfTheItem" to the button as well to ensure the relationship is correct (and add id="idOfTheItem" to the <ul> to correctly associate them).
Above all test it with a screen reader as there are certain behaviours expected of a tree view that may be more difficult as you aren't using a typical pattern for design (for example using arrow keys to navigate).
A typical pattern
Just so you are aware normally you would make the <li> itself open the sub tree. You might get some strange screen reader behaviour adding a button etc. into the tree-item as that is not quite expected.
You may be better building a custom widget here that has a list of links with buttons next to them to expand options / additional information.
Without seeing your use case it is very hard to tell.
If you go this route then you could utilise <details> and <summary> elements.
The following fiddle should give you an idea, notice how it all works without JavaScript (although you will need to polyfill it for IE as details / summary aren't supported in IE)
It would need some visually hidden text or aria-labels etc. to describe each of the <ul> if this is a complex tree but like I said just an idea for you to explore depending on your use case as the role="tree" doesn't seem to quite fit your pattern.
a{
float: left;
width: 100px;
}
<h3 id="descriptionID">An alternative</h3>
<ul aria-labelledby="descriptionID">
<li>
Link
<details>
<summary>Open</summary>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</details>
</li>
<li>
Link
<details>
<summary>Open</summary>
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</details>
</li>
</ul>
I've come a bit stuck this afternoon with a bug in my web application in the latest version of Opera.
Usually, it is possible to remove elements from the markup's tab-index flow by giving it the attribute:
tabindex="-1"
This means that when someone comes to the page and starts hitting their 'tab' key they will traverse the anchors/inputs in the document but those elements with -1 assigned will be ignored.
However, Opera's spatial navigation flow still allows users to access those elements via their keyboard.
Does anybody know of an alternate way of removing elements from Opera's spatial navigation flow in the same way that elements can in other browsers using tab-key document traversal?
Specifically: removing anchors from being accessible via Opera rather than inputs.
The markup below gives a rudimentary example. In non-Opera browsers you can use the tab key to go through the list, but it skips links 3, 4, and 7 because they have tabindex = -1 set. In Opera using spatial navigation (Ctrl+down/up arrow) it will still focus on those links..
<html>
<head>
<style>
:focus{border: 1px dashed green}
</style>
</head>
<body>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3 (tabindex -1)</li>
<li>Link 4 (tabindex -1)</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7 (tabindex -1)</li>
<li>Link 8</li>
<li>Link 9</li>
</ul>
</body>
</html>
I can't find a nice way to do this. It's possible to do an ugly hack like <a onfocus="document.moveFocusDown()" tabindex="-1"> but I would not recommend it because there isn't a good way to figure out if the user wants to go up or down..well, you could listen for keyup and do it from there if a tabindex=-1 element is focused and the key is arrow up/down, I guess..
I recommend you report a bug saying that spatnav should respect tabindex="-1" - IMO your code as-is is fine and it would make sense to change this on Opera's side. I'm happy to kick the bug in the general direction of the right developers once you've reported it. (I work on testing and QA at Opera).
As you probably know, Opera has a different type of keyboard navigation than most browsers. This actually makes it incredibly easy to navigate using keyboard navigation.
Now, back to your question... it works for me in Opera 10.61 1250 (Windows 7). The following is my sample page:
<html>
<head>
</head>
<body>
<input type="textbox">
<input type="textbox" style="display:none">
<input type="textbox" tabindex="-1">
<input type="textbox">
</body>
</html>
The 2nd and 3rd inputs are skipped when I hit tab.
If this differs from what you have, please post a code sample.
My solution for this issue was to cache the href attribute as data- for each link that should not be included in the focus loop, then when the link can receive focus again, I restore the href from the cached data-.
http://jsfiddle.net/majornista/5pbFz/46/
I'm currently trying to come up with a good and accessible way to format a status indicator which should be rendered within a set of wizard-like pages on a website. The website should provide a multipage form with a status indicator on top of it as demonstrated in the wireframe below:
Given the new progress-tag in HTML my first thought was to do something like this:
<progress value="2" max="3">
<ul>
<li>Beginning</li>
<li class="now">Right now</li>
<li>End</li>
</ul>
</progress>
... but since <progress> only accepts phrasing content using a list is not really an option. So right now I would probably go with something like this, integratinng the ARIA progressbar-role:
<ul aria-role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="3" aria-describedby="state2" aria-valuetext="Right now">
<li id="state1">Beginning</li>
<li id="state2" class="now">Right now</li>
<li id="state3">End</li>
</ul>
But again, I'm not really sure if the progressbar role can be applied in such a way to a list.
Another problem is, that <progress> is rendered as progress bar in Opera, for instance, so >progress> itself is probably not really a viable solution altogether :-(
Can anyone perhaps recommend an accessible status bar that does not only rely on using a single image?
Current solution
For now I will go with following markup:
<section class="progress">
<h1 class="supportive">Your current progress</h1>
<ol>
<li><span class="supportive">Completed step:</span> Login</li>
<li class="now"><span class="supportive">Current step:</span> Right now</li>
<li><span class="supportive">Future step:</span> End</li>
</ol>
</section>
All elements of the class "supportive" will be positioned off-screen. IMO this way we should have a nice compromise of semantic markup (the state succession is in my opinion really an ordered list ;-)) and accessibility thanks to the additional header and status text for each step.
According to whatwg, you're not supposed to assign progressbar role to <ul> elements.
I'd just ditch <ul> and describe progress using (surprise) phrasing content:
<section role="status">
<h2>Task Progress</h2>
<p>You're now at <progress value=2 max=3>"Right now" step</progress>.
</section>
Update: You're right, progress doesn't suit here, it's more like an interactive form widget. I should've checked first, before taking it from your first example. But anyway, the point is there's no need to use a list (even more so, unordered list), when you can just describe what's going on in plain text. In the case that the list of past and future steps is necessary, I'd just add two more paragraphs, one before the status (‘You've completed the "Beginning" step’), and one after (‘Next step will be the "End" step’).
However, I admit that this isn't a complete answer to your question.
Also, I'd say some aria attributes look redundant to me. For example, aria-valuetext perhaps would make more sense in the context of interactive widget, when there's no other human-friendly description of its state. Though I may be wrong here.
well, I am trying to write parallel checkbox menus in html, but somehow my logic is not helping. May be some of you experts can just help me a bit. This is how I want my menus to look
[] Menu 1 [] Menu 2
[] Item 1 [] Item 5
[] Item 2 [] Item 4
Item 1, 2 are under Menu 1 and 5,4 are under Menu 2. Square brackets indicate checkboxes.
Items under menus are actually collected dynamically and their numbers under different menus can vary.
I would suggest using lists and floated divs. Lists can make it easy to nest as many checkbox trees as you'd like.
<div style="float:left;">
Menu 1
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul>
</li>
</ul>
</div>
<div style="float:left; margin-left:30px;">
Menu 2
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2a</li>
<li>Item 2b</li>
</ul>
</li>
</ul>
</div>
This would have double nesting. You can make as many checkboxes as you want at a certain indent interval by just adding more list items <li> to a given unordered list <ul> tag.
If your question is only about HTML and CSS, you can use padding and margin attributes to make appropriate indent.
If yuor question about programming logic for generating such tree structure, write please what language you are using.
You might want to look at the jquery library jstree. I use that for my treeview, it's definitely the most advanced treeview available.
it is amazingly configurable, and easy to use.
it has a checkbox plugin that I use in my project. That works perfectly for me.
The development is very active, so even if you might find an issue, the developer is very reactive and will help you.
take a look here : http://jstree.com
and the checkbox demo is here
good luck :)