This markup is able to be read by JAWS arrow navigation in IE11, however in Microsoft Edge it only allows it to be fully read via tab navigation. Does anyone have any idea why Edge refuses to read this list item? We have other list items that are similar to this that are read just fine, but this one in particular doesn't seem to be available to be read via JAWS arrow navigation.
<li id="some-id">
<a href="/destination">
<span class="submenu"></span>
<span class="label"> Destination </span>
<span class="count">
<span class="value" data-info=0></span>
</span>
</a>
</li>
I've tried setting data-info=0 with and without quotes. I'm stumped.
Related
I use jquery-ui tabs. Sample code:
<ul role="tablist">
<li role="tab"><a class="label" href="#tabs-1" aria-label="Description tab">Description</a></li>
<li role="tab"><a class="label" href="#tabs-2" aria-label="Reviews tab">Reviews</a></li>
<li role="tab"><a class="label" href="#tabs-3" aria-label="Credits tab">Credits</a></li>
<li role="tab"><a class="label" href="#tabs-4" aria-label="Cataloging tab">Cataloging</a></li>
</ul>
The axe-core DevTools accessibility checker flags a "serious" problem with this code: "Interactive controls must not be nested", with the explanation "Interactive control elements must not have focusable descendants" and referencing guideline WCAG 4.1.2.
The problem, as I understand it, is that there is a link inside the listitem. From a Github discussion for axe-core (https://github.com/dequelabs/axe-core/issues/601), the clickable link within the list item causes issues with screen readers.
But this seems like a standard use of the jquery-ui tab widget. How I do change the tabs widget code to make it accessible?
The items within <ul role="tablist"> will have tabindex="0" etc. added to them in order to make them focusable (the actual li, not the link) and then the anchor should have tabindex="-1" added to it.
The idea is that the link is a fallback for if JS fails, this is why it is included in the first place and isn't just plain text.
However this does indeed cause nesting of interactive elements as you now have tabindex="0" on the list item (making it "interactive" / focusable) and then a link within it.
They add tabindex="-1" to the link to remove it from the focus order, but some screen reader / browser combos will still pick this link up and this is why it is flagged.
So there is a workaround but you will need to implement it yourself.
First, add role="none presentation" to the link:
<li role="tab"><a class="label" href="#tabs-1" role="none presentation">Description</a></li>
What this does is signal that this anchor should be treated like a <div> or a <span> as far as assistive technology is concerned (it removes all semantic meaning).
Secondly, (but you would have to check it works with jQuery-UI) would be to remove the href attribute from the link via JS (so it is only removed once the Tab component has initialised).
You should end up with the following if you inspect the elements after doing this (ignoring any classes added etc.):
<li role="tab"><a class="label" role="none presentation">Description</a></li>
This will stop it being a focusable item if JS works and loads correctly, but will fall back gracefully if JS fails to load.
Also notice I removed your aria-label as the fact you are using a role="tab" already tells a screen reader that it is a tab so your label was not needed.
So in summary:
add role="none presentation" to the links within the <li>
remove the href attribute from the links via JavaScript.
remove the aria-label (not related to the problem)
This should make the tabs as accessible as possible within jQuery-UI, but there may be other problems with it so I can't say whether it is accessible or not!
I am trying to show fa icons with name of category in woocommerce wordpress products. I have figured it out to display them on a separate page but while showing them in the mega menu (Tweezers By Category), I am facing the problem that the FA icons are showing in the new line rather than showing before the name. You can check the live link here.
Please check if anyone can help me here.
You should add the icon inside each <li> element, example:
<li style="float:left;">
<a href="http://newsite.cealinetweezers.com/tweezers/tweezers-by-category/aquarium-aquascaping-tweezers/">
<i class="fa fa-dropbox"></i>
Aquarium & Aquascaping Tweezers
</a>
</li>
Wrapping the icon with a span and float left outside the li it's not the way to go.
So the span tag is doing the trick here.
<li style="float:left;">
<i class="fa fa-dropbox"></i> Aquarium & Aquascaping Tweezers</li>
Is there any way to tell an assistive tool to treat an element (e.g: <div>) as a whole, and not split it in child elements?
First example
Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:
Second example
This elements are splitted in two parts, where the best solution would be read "122 points" and "First position":
<div class="row">
<div class="stat lg col-xs-6">
<span>122</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Points</h5>
</div>
<div class="stat lg col-xs-6">
<span>1ยบ</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Position</h5>
</div>
</div>
VoiceOver on iOS does indeed sometimes split a sentence, although your example code actually works fine. I used your code as the first line in the screen shots below and then copied the text without the <a> tag as the second line. The second line gets broken up by VoiceOver but the <a> tag does not.
<span class="label info">
<a href="/round/next">
Next round starts <strong>in 3 days</strong>
</a>
</span>
<br>
Next round starts <strong>in 3 days</strong>
(Note: I have the enhanced outline turned on for VoiceOver so the black outline is probably thicker than what you're used to seeing.)
I found that using role="button" the element is treated as a group and its innerText property is read, but announced as a button.
I'm using font-awesome in my Django project, as icons in front of nav-bar list. My problem is, as the title says, some icons show up normally, some icons show square with 4-digit unicode inside, and some icons show up but mismatch the code. What a mess!
I've been stuck here for long, and i tried a lot to solve it. Read the docs through, and googled a lot, but no effective solutions found.
Environment information:
I'm using the latest version of Font-awesome(4.6.3) local copy on linux server(Ubuntu 14.04).
I've tried to load this page on Chrome/Firefox/IE, the results are no different.
I've tried to disabled the AdBlock plugin, resulted in vain.
Specific code:
The 1st icon is normal.
The 2nd icon only show square with unicode (the same with official).
The 3rd one show a mismatch icon.
<li class="openstack-panel">
<a class="openstack-spin" tabindex="6">
<i class="fa fa-home fa-fw"></i>
Security Group
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="7">
<i class="fa fa-key fa-fw"></i>
Key Pairs
</a>
</li>
<li class="openstack-panel">
<a class="openstack-spin" tabindex="8">
<i class="fa fa-git fa-fw"></i>
Floating IP
</a>
</li>
Here is how icons are displayed on browser:
Could anyone help me out?
Use the following link for Font Awesome and try,
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
or
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css
I have a navigation bar that has two glyphicons from bootstrap the envelope and phone I want my phone icon to disappear when screen reaches <768px so I used the bootstrap class .hidden-xs but it doesn't work, any help? My code is
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-phone"; class="hidden-xs"></span>
That's not how you assign multiple classes to an element. There should only ever be one class="" attribute...
<span class="glyphicon glyphicon-phone hidden-xs"></span>
Separate the individual classes with a space.