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/
Related
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 have a two-sided mobile menu drawer that relies on a hidden checkbox for switching/toggling between its two sides.
There are two LABEL elements, one on each side of the menu drawer. Each LABEL, via its FOR attribute, references the ID of the hidden INPUT checkbox. Clicking a displayed LABEL thus checks the INPUT checkbox and causes the menu to switch sides (via CSS). A distillation of the HTML is:
<ul class=main-menu>
<li>
<input id=toggle-drawer type=checkbox title="hidden checkbox">
<label for=toggle-drawer>See Sub Menu</label>
<ul class=sub-menu>
<li>
<label for=toggle-drawer>See Main Menu</label>
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li>Main Menu item 1</li>
<li>Main Menu item 2</li>
<li>Main Menu item 3</li>
</ul>
It is, in fact, perfectly valid HTML to have multiple labels that reference the same input item.
See https://www.w3.org/TR/html401/interact/forms.html#h-17.9.1 :
"More than one LABEL may be associated with the same control by
creating multiple references via the for attribute."
However, the WebAIM WAVE (Web Accessibility Evaluation Tool) browser extension flags the two labels as an error, stating,
"A form control should have at most one associated label element. If
more than one label element is associated to the control, assistive
technology may not read the appropriate label."
As a remedy, it goes on to state:
"If multiple form labels are necessary, use aria-labelledby."
aria-labelledby seems not to apply to my case, as it would be put on an INPUT item that is referenced by a DIV, etc.
Is there an ARIA or similar mark-up method I can use to satisfy this accessibility audit? I do not wish to alter my HTML structure.
Although it is perfectly valid HTML, having two labels will cause issues with NVDA and possibly other screen readers where it will only read one label.
This is why WAVE suggests you use aria-labelledby as that is designed to take multiple elements and can combine them (in the order you list them).
It is perfectly valid to use this on an input, also note that aria-labelledby will override any associated <label> elements using for="id"
One thing you could do is use the less often used aria-describedby to associate the second label and ensure that the reading order is correct.
In the example below it would read 'See Main Menu, See Sub Menu' as it will read the <label for="toggle-drawer"> first and then use the aria-describedby="toggle-drawer-label" to add additional information.
The only down side is that it may read the input information in between the <label> and the describedby label.
<ul class=main-menu>
<li>
<input id="toggle-drawer" aria-describedby="toggle-drawer-label" type=checkbox title="hidden checkbox">
<label id="toggle-drawer-label">See Sub Menu</label>
<ul class=sub-menu>
<li>
<label for="toggle-drawer">See Main Menu</label>
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li>Main Menu item 1</li>
<li>Main Menu item 2</li>
<li>Main Menu item 3</li>
</ul>
The recommended way
I would recommend simply using aria-labelledby="label1 label2" as that is the accepted method and will result in the most consistent results, obviously it means you need to add id attributes to both labels so that is the trade off.
Note that using aria-labelledby="label1 label2" and associating the fields with for="toggle-drawer" on both labels has the added benefit of correctly linking the labels so that you can click on either label and it will focus the <input>.
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
I am trying to implement some BASIC css onto my website - it is a simple tree type menu.
Here is the test page I have created for it:
http://www.worldheritagetrip.com/1309-2/
Here is the working jsfiddle:
https://jsfiddle.net/fadmrdbm/
and the code:
<ul class="collapsibleList">
<li>
<label for="mylist-node1">Click to open list 1</label>
<input type="checkbox" id="mylist-node1" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>
<label for="mylist-node2">Click to open list 2</label>
<input type="checkbox" id="mylist-node2" />
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
and the css:
.collapsibleList li > input + * {
display: none;
}
.collapsibleList li > input:checked + * {
display: block;
}
.collapsibleList label {
cursor: pointer;
}
I have copied the html and css EXACTLY to my wordpress page and it fails :(
Can someone spot the problem?
The problem is that Wordpress has added extra tags to your HTML in order to try and help with the output.
Take a look at this jsfiddle - in it, the HTML from your site for the element in question is directly added from the rendered wordpress output and the same problem exhibits itself. Wordpress has added a p tag,
The declaration .collapsibleList li > input + * hits any tag, regardless of type, that is directly following an input. In your original jsfiddle, you used the HTML you pasted into WordPress, without the extra added tags, so the ul was directly after the input. With Wordpresses added p tag, the ul is now not directly following the input.
You can even see this in your page, the list is appearing when it shouldn't, but the click is also acting on the p tag and that is showing and hiding itself and creating the extra whitespace that you can see there.
Select the p tag in the inspector. You'll see the margin-bottom that is making the whitespace changes and you'll also see the css selector above applied to it. Also in the inspector you can just delete the p tag (and don't refresh the page) then see that your list works as expected as it falls back into the css selector defined.
You can get rid of erroneous WordPress tags by making sure you leave no white-space in the HTML, or you could look at a JavaScript solution that would probably be more robust.
For the record, JSFiddle takes the contents of your boxes and ensures they load, so you can drop something in their and see it working in an isolated sense but it won't direct you towards issues with external libraries, wordpress processing or missing definitions.
How are you implementing your CSS? In your HTML with or in a seperate file? If it is seperate, you need to link your CSS file with <link href="CSSFILE.css" rel="stylesheet" type="text/css"> . It will also need to be in the same directory.
I am building a website, www.vitaminjdesign.com
In IE7, you will notice that in the footer, the first line of list items are indented a little bit. Does anyone know what CSS fix I need for this? THanks
try setting list-style-position: outside on your LI elements. Put it in a conditional stylesheet so it's only seen by IE7.
BTW, there are a lot of typos in your copy throughout the site -- you'll want to clean those up if people are to take your pitch seriously.
You could create an IE hack. Create a new stylesheet (e.g. ie-hacks.css) with the following (example class used, use whatever you want):
.ie-hack ul {
margin-left: -5px;
}
You may need to change the value of the margin-left in the style.
And in the footer, update the following code:
<ul id="info" class="ie-hack">
<li class="header">Vitamin J Design</li>
<li>a web & graphic design studio</li>
<li>info#vitaminJ.com</li>
<li>(609) 238-4513</li>
</ul>
<ul id="rfi" class="ie-hack">
<li class="header" class="ie-hack">Ready To Get Started?</li>
<li>Fill out our Request for Proposal form and tell us a little bit about your proejct</li>
<li style="margin-top:4px">How Much Will My Site Cost?</li>
</ul>
<ul id="navigate" class="ie-hack">
<li class="header">Navigate</li>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
And, in the "head" section of your markup, you need to add the following:
<!--[if IE 7]> <link href="path/to/above/stylesheet.css" rel="stylesheet" type="text/css"> <![endif] -->
You have different css files for IE7. When I load the page in IE I notice there is a warning triangle down in the status bar. It complains about css_ims not being defined at line 55, char 3. Check the IE-specific files for syntax errors (I mean what MS considers syntax errors).