Just trying to get the hang of using the semantically correct XHTML markup.
Just writing the code for a small navigation item. Where each button has effectivly a title and a descrption. I thought a definition list would therefore be great so i wrote the following
<dl>
<dt>Import images</dt>
<dd>Read in new image names to database</dd>
<dt>Exhibition Management</dt>
<dd>Create / Delete an exhibition </dd>
<dt>Image Management</dt>
<dd>Edit name, medium and exhibition data </dd>
</dl>
But...I want the above to be 3 buttons, each button containing the dt and dd text. How can i do this with the correct code? Normally i would make each button a div and use that for the visual button behaviour (onHover and current page selection stuff).
Any advice please
Thanks
<ul>
<li>Import images</li>
<li>Exhibition Management</li>
<li>Image Management</li>
</ul>
thats good enough.
using <dl> for navigation is not very clever. or use a <span> inside the <li> with the description. <dd> will give you much headache since they aren't inside the <dt> and don't care about its position and styling
I am slightly confused by the use of your term "button". If you mean a link, then you could do:
Import images
If, however, you mean the input tag, then one way to do this would be to use input type=image and then provide an alt description.
For instance:
<input type="image" src="image.jpg" value="Import images" alt="Read in new image names to database"/>
You could use <label> elements instead of <dt> elements:
<ul>
<li>
<a href="#">
<label for="import-images">Import images</label>
<span id="import-images">Read in new image names to database</span>
</a>
</li>
<li>
<a href="#">
<label for="exhibition-management">Exhibition Management</label>
<span id="exhibition-management">Create / Delete an exhibition</span>
</a>
</li>
<li>
<a href="#">
<label for="image-management">Image Management</label>
<span id="image-management">Edit name, medium and exhibition data</span>
</a>
</li>
</ul>
... the for attribute of the <label> element need only match the id of another element in the document to be valid.
Related
I have a lengthy list of buttons that I want to make WCAG compliant. Many of the items have endnotes (marked with an asterisk) as below. What is the proper way to provide the accessible description for these endnotes?
As far as I know, some browsers are not reading aria-describedby on not focusable elements.
<ul aria-describedby="list_description">
<li><button>Element **</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element *</button></li>
<li><button>Element **</button></li>
<li><button>Element</button></li>
<li><button>Element</button></li>
<li><button>Element *</button></li>
<li><button>Element **</button></li>
</ul>
<p id="list_description">
* - Important element <br>
** - Very important element
</p>
I was thinking about the solution described here: Accessibility and asterisks end notes, but placing <a> inside <button> doesn't seem right.
Another way is to provide duplicated descriptions for every list item.
What would you suggest to approach it?
placing <a> inside <button> doesn't seem right
Not only does it not feel right, it's not valid html :-) If you look at the <button> spec, under "content model", it says "there must be no interactive content descendant". An <a> is interactive so is not allowed inside a button.
Since you already have the text on the page that documents what * and ** mean, I would put IDs on those elements and then refer to them in the aria-labelledby attribute on each button.
I would also "hide" the * and ** in the button text from the screen reader since the user doesn't need to hear "star" or "star star". You do this with aria-hidden.
The final solution would be:
<ul>
<li>
<button id='b1' aria-labelledby='b1 vimportant'>Element
<span aria-hidden="true">**</span>
</button>
</li>
<li>
<button id='b2' aria-labelledby='b2'>Element</button>
</li>
<li>
<button id='b3' aria-labelledby='b3 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
<li>
<button id='b4' aria-labelledby='b4'>Element</button>
</li>
<li>
<button id='b5' aria-labelledby='b5 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
</ul>
<p id='important'><span aria-hidden="true">* - </span>Important element</p>
<p id='vimportant'><span aria-hidden="true">** - </span>Very important element</p>
Note, for consistencies sake, I put IDs on all the buttons and used aria-labelledby on all the buttons even though the buttons without a footnote don't really need them. It kind of makes for some silly code to have a button labeled by itself but it makes it easy to add other footnotes or have some simple text that is applied to the "not important" elements. If that's not likely, then you can remove the IDs and aria-labelledby on the simple buttons:
<ul>
<li>
<button id='b1' aria-labelledby='b1 vimportant'>Element
<span aria-hidden="true">**</span>
</button>
</li>
<li>
<button>Element</button>
</li>
<li>
<button id='b3' aria-labelledby='b3 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
<li>
<button>Element</button>
</li>
<li>
<button id='b5' aria-labelledby='b5 important'>Element
<span aria-hidden="true">*</span>
</button>
</li>
</ul>
<p id='important'><span aria-hidden="true">* - </span>Important element</p>
<p id='vimportant'><span aria-hidden="true">** - </span>Very important element</p>
My link doesn't work in HTML and I don't know why.
<div class="banner-text">
<ul>
<li><h3>HOME</h3></li>
</li><h3>ABOUT US</h3></li>
</li><h3>CONTACT</h3></li>
</li><h3>STUDENT's CORNER</h3></li>
</ul>
<h1 class="big">CHAWLA CLASSES</h1>
</div>
Use a validator.
Only <li> elements may be children of <ul> elements.
Put the links in the list items, not the other way around.
Asides:
Level 3 heading elements should be used for headings. If the entirely content of a list item is a heading, you are using the wrong markup. Apply CSS if you want to format the list items.
Screen readers will tend to spell out words written in ALL CAPS letter-by-letter. If you want something to be visually rendered in capital letters: Use the CSS text-transform property.
You should change it like this
<ul>
<li> Home </li>
<li> About Us </li>
<li> Contact </li>
<li> Student's Corner </li>
</ul>
UPDATE: Well, I check again but it works. There is the screenshots
1
2
Put the anchor tag inside the <li> tag. If it doesn't work, go-to developer console to trace it .
I often need to use a step indication to display the step the user is on, or the progress of a package in transit, etc.
Like this:
This is made up of an unordered HTML list.
<ul class="progress-tracker progress-tracker--text progress-tracker--center">
<li class="progress-step is-complete">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 1</h4>
Summary text explaining this step to the user
</span>
</li>
<li class="progress-step is-complete">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 2</h4>
Summary text explaining this step to the user
</span>
</li>
<li class="progress-step is-active">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 3</h4>
Summary text explaining this step to the user
</span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 4</h4>
Shorter summary text
</span>
</li>
<li class="progress-step">
<span class="progress-marker"></span>
<span class="progress-text">
<h4 class="progress-title">Step 5</h4>
Shorter summary text
</span>
</li>
</ul>
Assuming a new list is loaded on each page (i.e. "step"), is there a way to adapt this for screen readers/assistive technology?
It would be nice to have the reader read the current step to the user, at least.
Are the steps static or can the user click on a previous step to go back?
If the progress indicator is interactive, then enclose the whole thing in a <nav> element. Your progress indicator would be similar to a breadcrumb trail. The <nav> should also have an aria-label and the current step in the process should have aria-current. So it might look something like:
<nav aria-label="progress">
<ul class="progress-tracker progress-tracker--text progress-tracker--center">
<li class="progress-step is-complete">
...
</li>
<li class="progress-step is-complete">
...
</li>
<li class="progress-step is-active" aria-current="true">
...
</li>
...
</ul>
</nav>
However, your code snippet didn't include any links so I'm guessing your progress indicator is static and not interactive. In that case, don't use a <nav>, because you can't navigate with your indicator, but you could still group the elements together. Having an unordered list is a type of grouping, but sometimes a screen reader will not read the aria-label on a list.
<ul aria-label="progress">
You could work around the issue by having:
<div role="group" aria-label="progress">
<ul>
<li>
...
</li>
</ul>
</div>
(essentially replacing the <nav> in the first example with <div role="group">.
Since your progress indicator is a series of steps, using an ordered list <ol> would have better semantic information. You can style the list so the default numbers of a <ol> are not displayed (similar to how you're not showing bullet points with the <ul>).
And finally, I would add some "hidden" text for the screen reader to say if the step is completed or not. Visually, you have blue circles for completed steps, an open circle for the active step, and gray circles for not completed. That's all done with CSS (your "is-complete" and "is-active" classes). That same context should be conveyed to screen readers. The open circle ("is-active") is conveyed with the aria-current attribute. Use a "sr-only" type class to add text for a screen reader. (See What is sr-only in Bootstrap 3?)
<div role="group" aria-label="progress">
<ol class="progress-tracker progress-tracker--text progress-tracker--center">
<li class="progress-step is-complete">
<span class="sr-only">completed</span>
...
</li>
<li class="progress-step is-complete">
<span class="sr-only">completed</span>
...
</li>
<li class="progress-step is-active" aria-current="true">
...
</li>
<li class="progress-step">
<span class="sr-only">not completed</span>
...
</li>
...
</ol>
</div>
In summary, the minimal changes you need are to:
maybe switch from <ul> to <ol>
add "sr-only" text to the "completed" and "not completed" items
add aria-current to the current step
I disagree with the answers that were previously added to this question.
The correct way of identifying the current step is with aria-current="step".
While aria-current="page" is valid, is meant to be used in a set of links (for exemple, a breadcrumbs widget or a pagination widget).I highly recommend reading more about the aria-current attribute, including its possible values and when to use it. Your example would then look like follows:
<ol>
<li>Step 1 ... </li>
<li>Step 2 ... </li>
<li aria-current="step">Step 3...</li>
<li>Step 4 ... </li>
<li>Step 5 ... </li>
</ol>
Note: I also recommend you use an <ol> instead of an <ul> as this list of steps has an order.
It doesn't look like any of your content is focusable. I had a similar situation that I've shipped in our angular app that works great with JAWS, NVDA, and VoiceOver. What you can do is wrap your markup in a 'div' container and screen reader specific content like this.
<div>
<span class="sr-only">Step 3 of 5: Summary text explaining this step to the user</span>
...
</div>
The 'sr-only' class hides the copy from the visual UI but allows for screen readers to "see" it in the accessible tree.
.sr-only {
border: none;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
It's important to only make the content available for the step that is currently active.
Hope this helps.
Consider this example:
<section id="news_block_left" class="block" itemscope="" itemtype="http://schema.org/ItemList">
<a href="http://dev.com/index.php?controller=NewsList" title="News" itemprop="url">
<h2 class="title_block" itemprop="name">News</h2>
</a>
<div class="block_content">
<ul class="news-list">
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=7&controller=News" title="News Title1" itemprop="url">
<span><span itemprop="datePublished">2015-03-30</span> <em itemprop="headline">News Title1</em></span>
</a>
</li>
<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/NewsArticle">
<a href="http://dev.com/index.php?id_news=8&controller=News" title="T230 series (1999–2006)" itemprop="url">
<span><span itemprop="datePublished">2015-03-08</span> <em itemprop="headline">T230 series (1999–2006)</em></span>
</a>
</li>
</ul>
<meta itemprop="numberOfItems" content="2">
<a class="more_news" href="http://dev.com/index.php?controller=NewsList" title="More news">
<span>More news</span>
</a>
</div>
</section>
This block exists in the sidebar, it doesn't contain full news element data, only a couple of link this them.
The link "More news" leads to a more complete list with more markup (but still only a list with links to the actual articles).
Is there a benefit in putting Microdata on such preview lists? Or is Microdata intended for complete pages (complete news page with body, product page, etc.)?
P.S. Don't mind the unfriendly URLs, it's only dev version.
That’s fine. It’s in no way required to use Microdata only for certain content. The same goes for the vocabulary Schema.org. The more the merrier.
Thanks to using Schema.org’s url property for each NewsArticle item, consumers have the chance to learn that these items have separate URLs with probably (but not necessarily) more relevant content.
On a side note: You might want to use name instead of headline (or name in addition). The name property, as it can be used on all Schema.org types, has probably more support than the headline property, which can only be used on CreativeWork types. (Currently it gets discussed if headline should be marked superseded by name.)
I am brand new to Microdata and I am slowly getting it. But for some reason this does not validate with the W3C validator since I’m putting a <div> in the middle of a <ul>:
<div itemscope itemtype="http://schema.org/BeautySalon">
<ul>
<li>
<b>
<span itemprop="name">foobar and you</span>
</b>
</li>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<li>
<span itemprop="streetAddress">6969 foobar</span>
</li>
<li>
<span itemprop="addressLocality">Miami Beach</span>,
<span itemprop="addressRegion">FL</span>
<span itemprop="postalCode">33139</span>
</li>
</div>
<li>
<span itemprop="telephone">305 691 6969</span>
</li>
</ul>
</div>
How would I correctly add the
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
and correctly add all the itemprop and still be W3C valid?
ul doesn’t allow div as child, so you can’t use it as container for several li elements. There are various possible solutions.
I think using ul here is not appropriate. But if you want to keep using ul:
It doesn’t seem to make sense that the street address is not in the same list item as the locality/region/postal code. So you might want to put them all in the same list item (and you might also want to use br for postal addresses).
If you want to use b for the name, you could omit the span. Either specify the Microdata on the b or (for consistency) on the li.
If you don’t need a separate element for the telephone number, you could specify the Microdata on the li.
This would give you:
<div itemscope itemtype="http://schema.org/BeautySalon">
<ul>
<li itemprop="name"><b>foobar and you</b></li>
<li itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">6969 foobar</span><br>
<span itemprop="addressLocality">Miami Beach</span>,
<span itemprop="addressRegion">FL</span><br>
<span itemprop="postalCode">33139</span>
</li>
<li itemprop="telephone">305 691 6969</li>
</ul>
</div>
You can use every HTML5 element for Microdata. Re-use your existing markup. Only if you need additional elements for Microdata, add and use div/span (and possibly meta/link).