I have the following list and I want each list item to be readable by screenreader.
However, the list and listitems themselves are not tababble.
Adding tabindex="0" is not really option because voiceover announces the listitem as a group and being interactive, when it is isn't.
Any idea?
<ul>
<li key={i}>
<span>{date}</span>
<span>{value}</span>
</li>
</ul>
first of all, ask yourself why you want the lis to be tabbable (i.e., focusable by keyboard).
If the contents inside these lis must be clickable (i.e., really interactive), then mark it as such (as links, for instance). If not (i.e., the contents is, well, just text), then just don't make it focusable, you'll confuse your users. Please comment on my answer and/or update the question, probably I'll be more thorough then.
Related
NVDA reads correctly. JAWS read only Link 1, Link 2 (content is Link 1, Link 2), but do not read that is is a list
list-style-type: none;
html:
<ul role="list" class="content-links">
<sly data-sly-list.link="${model.links}">
<li role="listitem">
<a href="${link.href # context='html'}" aria-label="${link.label}" rel="${link.rel}"
tms-dblclick="${link.tracking.tmsDblClick}" data-pid="${link.tracking.vadm.pin}" data-pid-action="${link.track.vadm.pinAction}">
${link.label}
</a>
</li>
</sly>
</ul>
Your code is correct (other than the superfluous roles you have specified, as pointed out by #shannon). Unfortunately, that's just how JAWS works. When you tab to a link that is contained in a list, the link text is read and the fact that the link is contained in a list is not read. But if you navigate the DOM using the up/down arrow keys in JAWS, when you navigate to the link, you will hear "list of 3 items" before you hear the link text. And you'll hear "list end" when you arrow down past the list. Native JAWS users are used to it (not that that makes it the right user experience.)
The link text should provide enough information by itself for a user to know what will happen if the link is clicked. JAWS users can find out that the link is part of a list if it's relevant. Don't worry that JAWS doesn't mention that it's in a list as the user tabs through, as this isn't expected behaviour.
after I spent two hours trying to figure this out by myself, I feel it's the right time to ask people who actually know how to code.
What is my situation
I'm building a WordPress theme and I struggle to make the navigation work the way I want it. What I have in mind looks like this:
sketch of home page
Since it is WordPress menu (and because I plan to adapt the looks throughout the website), I need it to be a list. But I struggle to make the first-level items appear as headings and the second-level items as items below.
This is as far as I got:
https://jsfiddle.net/grysom/bpe924du/
I tried random stuff using flexbox properties + adding a break using :after selector with content: "\A"; but with no luck.
Do you have an idea how to do it? Is it even possible?
Thank you in advance for your ideas!
Have a nice day
grysom
You'll want the 2nd level list <ul> to be inside of the <li>:
<ul>
<li>
Pro veřejnost
<ul>
<li>Co je ergoterapie</li>
<li>Kdo je ergoterapeut</li>
<li>Seznam zařízení</li>
<li>Etický kodex</li>
</ul>
</li>
<li>
Praxe
<ul>
<li>Nabídky práce</li>
<li>Vychytávky a tipy</li>
<li>Legislativa</li>
</ul>
</li>
</ul>
I've updated your jsfiddle: https://jsfiddle.net/grysom/bpe924du/ but you'll need to adjust your styles a bit to differentiate the levels.
Say I have the following DOM tree:
<div class="box">
<ul class="gallery">
<li id="1">text</li>
<li id="2">text</li>
<li id="3">text</li>
<li id="4">text</li>
<li id="5">text</li>
<li id="6">text</li>
<li id="7">text</li>
<li id="8">text</li>
<li id="9">text</li>
</ul>
<div id="random"></div>
<ul class="gallery">
<li id="10">text</li>
<li id="11">text</li>
<li id="12">text</li>
<li id="13">text</li>
<li id="14">text</li>
<li id="15">text</li>
<li id="16">text</li>
<li id="17">text</li>
<li id="18">text</li>
<li id="19">text</li>
<li id="20">text</li>
</ul>
</div>
I want to create a CSS selector that will pick every 6th <li> tag under the div with the class "box". But I need the selector to take into account the entire <li> tags in the page and not to count them per <ul> tag. So in the end, the selector should pick the <li> with IDs 6,12,18. Currently I was only able to create a selector that picks IDs 6 & 15 when I used:
div.box li:nth-of-type(6n)
Notice 1: the IDs numbers are only added for reference. In reality the <li> tags don't have a class or an ID.
Notice 2: the number of <li> tags in each <ul> tag varies from site section to site section. Sometimes there can be even a 3rd and a 4th </ul> with more <li> tags.
Notice 3: I don't have control over the hard-coded HTML, which means I cannot unify tags, add IDs or CSS classes, etc. The selector will be called from an external JS file. While I can edit the DOM with jQuery after the page loads, I prefer to avoid such a solution to make the selector easier to handle.
Thanks
Generally Agree Impossible, except...
I basically agree with Sych and Fabrício that it is not currently possible to do as a pure CSS solution. However, there are always some exceptions, depending on actual html structure.
In your case, there may be an exception, but it does depend on the full constraints of your situation.
When Would it Be Possible?
Based off your given code, if these two constraints are true, then you can still get what you want via CSS:
All ul items that are direct children of .box are of class .gallery.
All gallery groups (except perhaps the very last one) consist of exactly nine li elements (both groups in your example do, but I don't know if that was coincidence or how you are actually setting up your code).
If the above two factors in your html are true, then this code gets what you want (using color to show selection here):
ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n) {
color: red;
}
ul.gallery:nth-of-type(2n+2) li:nth-of-type(6n+3) {
color: red;
}
You can see it works on the code you gave in this fiddle, then you can see it continues to work given an expansion of the html as this fiddle shows, even if the final list is short of nine as both this fiddle and this fiddle shows, but it will fail if the .gallery varies in length at some midpoint of the sequence, as seen in this fiddle (notice how the last two selected texts are not 6 apart from each other because the second to last .gallery has only 7 items).
The Overarching Principle
So in general, if your dynamic html is output in some type of a regular pattern as demonstrated here, then it can open up the possibility of a pure css solution along the lines of that given. It is when the dynamic generation is also fully random (so in your case if either #1 or #2 condition above is not guaranteed true) that a pure css solution is impossible.
CSS does not provide such scope, it only provides traversing "deeper in to the DOM" tree. It does not even have a parent element selector.
If you are in jQuery environment, you can write your own selector, call it, say, ":nth-from-top(n)" that will work using jQuery's DOM traversing functions.
Note, that this type of selector will be much slower, because it cannot take advantage of the performance boost provided by the native DOM methods.
nth-child and nth-of-type match based in the element's position relative to its siblings only.
As far as I know there's currently no CSS-only solution for that unless all lis had the same parent. You will have to add a class to every 6th element or use some JavaScript.
So, constraining the answer to CSS selectors only without altering the markup and without hardcoding the nth start indexes: impossible. I'd like to be proven wrong though.
Looking by the bright side, adding a class will provide better selector performance. nth-child is already considered inefficient, now if what you want would be possible it'd mean that browsers would be forced to recursively evaluate selectors and count matches each time the DOM is updated. Though this would be terrible performance wise, I believe it'd still be possible to implement through new "scoped" nth selectors a la CSS Counters. Just food for thought.
I'm referring to a main menu and a smaller supermenu (don't know the proper term), as seen here:
For something like this, I was going to put two <nav> elements in the <header>. Is there any reason (SEO or otherwise) that this is a bad idea? If so, what would an alternative be?
(this is different from multiple <nav> tags, which referred to multiple on an entire page, not in a single block element)
Short answer: no there is not (probably)
Longer answer: the HTML5 spec itself is a bit fluffy on the subject:
http://dev.w3.org/html5/spec/Overview.html#the-nav-element
The thing is that they designate the <nav> element to 'major' navigation blocks, but leave it to the imagination (of both developers and parsers) what that means. As you can see they even provided an example where they exclude the "site-wide" from the navigation block.
<body itemscope itemtype="http://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1>
<p>News -
Blog -
Forums</p>
<p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1>
<ul>
<li>Index of all articles</li>
<li>Things sheeple need to wake up for today</li>
<li>Sheeple we have managed to wake</li>
</ul>
</nav>
</header>
They seem to do that because they consider limiting the number of links in nav elements a plus for readability (think screen readers etc).
It is probably a bit too early to know what the search engines are going to do, but it seems safe to think that they will attach more importance to nav element links to detect the structure of you site and maybe more so if you have less of them...
My impression: Twitter and Facebook links seem certainly out, support and blog are debatable
I think it does not matter. NAV element just marks functional role of some content. So if you have two separate navigation blocks (regardless of where it's placed: in header or in other parts of page), you are free to use separate NAV elements for them. Some "penalties" from search engines in that case would be pointless.
Nav can be used multiple times on a page in HTML5.
CAN…yes
SHOULD…probably not.
I’ve always worked on the basis that the NAV tag is only for the primary page/site navigations.
If my main (header) navigation area is used for the [nav] then any other menus can be in divs with some role for ARIA.
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 :)