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 :)
Related
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>
I'm updating a website, doing an iterative improvement on the accessibility.
I'm using multiple tools to get the pages better: FireFox's accessibility tree viewer; Chrome's lighthouse checker; the "wave" accessibility tool, and I'm trying tenon.io
(sadly, I don't have access to a decent screen reader - nvda is too fast for me to hear, orca seems to read the current line, and I don't have access to JAWS)
So here's what I have:
I have a navigation structure like this:
<nav aria-label="Main navigation">
<section class="desktop-navigation" aria-label="Main Menu">
<ul aria-label="Menu items">
<li>About Example</li>
<li>Documentation</li>
<li>Pricing</li>
<li>Status</li>
<li>Contact us</li>
</ul>
</section>
<section class="main-nav-wrapper" aria-label="Header logos">
<a href="/"><img src="/images/logo_example.svg?v=488a8c6971df396baaa401bb073b4a6b"
class="header-logo" alt="The Example logo" aria-label="Example Logo"/></a>
<div class="site-logos-right" aria-label="Corporate Logos">
<a class="external-link" href="https://www.example.com/" rel="external"><img
src="/images/logo_company.svg?v=98693292e027eca1f27cfc89b68a77d2" class="company-logo"
aria-label="The Company logo" alt="Official logo for Company"/></a>
<a class="external-link" href="https://example.com/department"
rel="external"><img src="/images/logo_department.svg?v=ff0114bb2ebf7eff339341f9554220d0"
class="edina-logo" alt="Official Department logo" aria-label="department logo" /></a>
</div>
</section>
</nav>
..... and this is 100% according the lighthouse, but tenon.io is reporting an issue (multiple times) and I don't understand why:
This element uses multiple strategies to create labels
This element has more than one possible label. The manner in which the
accessible name is calculated for controls uses an algorithm in which
only one of these labelling approaches will win. This means one of
these labels will be ignored by assistive technologies. There should
be only one label provided and the others should be removed.
Examples of items identified:
<nav role="navigation" aria-label="Main navigation">
<section class="desktop-navigation" aria-label="Main Menu">
<ul aria-label="Menu items">
<li><a href="/" aria-label="Return to the home page to read about
(I notice that the W3C site does not label the uls - but then they show as un-named elements in firefox)
I definitely want to label landmarks & sections.... so what's it actually complaing about?
<li>Pricing</li>
.... this is an example of where I want to have a more descriptive label for the element - when scanning the accessibility tree, just having the bare link-text doesn't (to me) read as well as having some context: as a sighted user, I know my eyes have flicked over much of the page, and seen additional text, so subconsciously have some context for the menu items.
My question(s)
How is the accessibility label computed?
Why can't I have a more descriptive label on a link? (lighthouse complains if the alt text doesn't contain the link text... but is happy if it's more than the link text) - or is this tenon.io being over-picky?
The accessible name computation is how accessibility labels are computed.
You're using aria-label too much, and the result may be difficult to listen to or outright confusing for human visitors using assistive technologies.
The first rule of ARIA is don't use ARIA unless you really have to.
It is appropriate to use aria-label on the <nav> and <section> elements. Keep that.
I can't think of any good reason to use aria-label on a <ul> element. I'd recommend removing that.
Using aria-label on anchor elements is normally unnecessary and should be approached with caution. Unless you have a really good reason, you probably shouldn't be presenting different content to visitors using assistive technology.
I would also recommend removing aria-label from your images. This is exactly what alt text is for.
If you really want to use aria-label on anchor elements, WCAG has some guidance:
Per the Accessible Name and Description Computation and the HTML to Platform Accessibility APIs Implementation Guide, the aria-label text will override the text supplied within the link. As such the text supplied will be used instead of the link text by AT. Due to this it is recommended to start the text used in aria-label with the text used within the link. This will allow consistent communication between users.
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA8.html#description
Don't give up on NVDA just yet. I also found the default speech settings too fast and difficult to understand. You just need to adjust the settings. The voice can also be changed out for better ones. It takes a bit of work to configure, but in my opinion NVDA is the best free screen reader available today. VoiceOver is also very nice if you have access to Mac/iOS products.
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.
In my page i need to list last news with title only. I have two methods:
One:
<div>
<p>Title One</p>
<p>Title Two</p>
<p>Title Three</p>
<p>Title .....</p>
<p>Title .....</p>
<p>Title .....</p>
</div>
Two:
<div>
<ul>
<li>TTILE ONE </li>
<li>TTILE Two </li>
<li>TTILE THree</li>
<li>TTILE .....</li>
</ul>
</div>
In HTML5 which way is better and readable?! with <p></p> Or <ul><li>?!
Neither is better in terms of how html can be read. However it is considered a list, and so your question can be answered by means of using <li>
You have there a list of news, so the correct one is UL.
The first option, using paragraphs is bad, because... Do you thing titles are paragraphs? I think title != paragraph, so uou can't use <p> tag.
Using an unordered list, <ul>, would be more semantically correct than using a paragraph, <p>.
Obviously either one could be used, so semantics may feel like a 6 vs half dozen sort of thing, but in the long run using the correct tags will make your job easier.
The <p> will come with native styles, i.e. margins and so on, that will need to be removed in your css if you intend you use them this way. While <ul> and <li> will probably only need to have bullet points accounted for.
Also not everyone experiences the web in the same way, try to keep in mind that screen readers will take markup into account when reading pages to the visually impaired.
In more extreme cases semantics can even effect your search engine optimization (SEO). Google, for instance, may grab your first paragraph and use it as a part of your site description.
I did a page and did a check on it using a software called WebKing and it tells me I have duplicate anchors??
<ul >
<li>About The Code</li>
<li>Link 2 is boring</li>
<li>3rd line in</li>
<li>Contact Manny</li>
<h3><a name="toc1" id="toc1">About the code</a></h3>
<h3><a name="toc2" id="toc2">Link 2 test</a></h3>
<h3><a name="toc3" id="toc3">3rd test</a></h3>
<h3><a name="toc4" id="toc4">Contact Manny</a></h3>
</ul>
So what am I doing wrong?? Do I change the id to something else?
This looks like it is just some bad heuristics in the analysis software you are using. There isn't anything technically wrong with that code.
That said, a modern approach (i.e. not pandering to Netscape 4) would be to say:
<h3 id="toc1">About the code</h3>
… and I suspect this would also avoid triggering the aforementioned bad heuristic.
You should probably have better ids too. id="about" — URLs that inform readers where they go are generally better than URLs that don't so /mypage/#about beats /mypage/#toc1
On the subject of bad style, the title attribute is there to provide advisory information about an element. It should contain helpful extra information. Your example has it duplicating the main text of the links. At best this will just be some extra bytes to download. At worst, you can expect some screen reader users to have to listen to the destination of every link being repeated.
The name and id attribute share the same namespace so they need to be different.
http://www.w3.org/TR/html401/struct/links.html#h-12.2.3
If you are writing valid XHTML try not to use the name tag.
http://www.w3.org/TR/xhtml1/
Section 4.10. The elements with 'id' and 'name' attributes
Note that in XHTML 1.0, the name attribute of these elements is formally deprecated, and will be removed in a subsequent version of XHTML.
Also you have some h3's that aren't inside li's but are inside of a ul.