Space trainers

Space trainer for a classic and stylish look.
Use a for
attribute on the <label>
element linked to the id
attribute of the form element, or using WAI-ARIA attributes. In specific situations it may be acceptable to hide <label>
elements visually, but in most cases labels are needed to help all readers understand the required input.
Ensure that alternative text for images is added to all informational and functional images. Use empty alternative text, alt=""
for decorative images, or include them in the CSS instead. Text alternatives are usually provided by those responsible for written content.
Indicate the primary language of every page by using the lang
attribute in the html
tag, for example <html lang="en">
. Use the lang
attribute on specific elements when the language of the element differs from the rest of the page.
Use appropriate mark-up for headings, lists, tables, etc. HTML5 provides additional elements, such as <nav>
and <aside>
, to better structure your content. WAI-ARIA roles can provide additional meaning, for example, using role="search"
to identify search functionality. Work with designers and content writers to agree on meanings and then use them consistently.
<form action="#" method="post">
<div role="search">
<label for="search">Search for</label>
<input type="search" id="search" aria-describedby="search-help">
<div id="search-help">Search records by customer id or name</div>
<button type="submit">Go</button>
</div>
</form>
Provide clear instructions, error messages, and notifications to help users complete forms on your site. When an error occurs:
Be as forgiving of format as possible when processing user input. For example, accept phone numbers that include spaces and delete the spaces as needed.
For example, (02) 1234 1234
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel"
pattern="^(\(?0[1-9]{1}\)?)?[0-9 -]*$"
aria-describedby="phone-desc">
<p id="phone-desc">For example, (02) 1234 1234</p>
Ensure that the order of elements in the code matches the logical order of the information presented. One way to check this is to remove CSS styling and review that the order of the content makes sense.
Space trainer for a classic and stylish look.
<img src="images/trainer.png" alt="...">
<h3>Space trainers</h3>
<p>Space...</p>
<a href="...">Add to cart</a>
View complete code example
<article class="product">
<img alt="Purple high top trainer with white laces, empty white dot on outside ankle, and white toe cap" src="images/trainer.png">
<h3 class="name">Space trainers</h3>
<p class="desc">Space trainer for a classic and stylish look.</p>
<p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Add to cart</a></p>
</article>
<h3>Space trainers</h3>
<img src="images/trainer.png" alt="...">
<p>Space...</p>
<a href="...">Add to cart</a>
View complete code example
<article class="product">
<h3 class="name">Space trainers</h3>
<img alt="Purple high top trainer with white laces, empty white dot on outside ankle, and white toe cap" src="images/trainer.png">
<p class="desc">Space trainer for a classic and stylish look.</p>
<p class="buy"><a href="javascript:return false"><svg class="icon"><use xlink:href="#cart-plus"/></svg> Add to cart</a></p>
</article>
Use responsive design to adapt the display to different zoom states and viewport sizes, such as on mobile devices and tablets. When font size is increased by at least 200%, avoid horizontal scrolling and prevent any clipping of content. Use progressive enhancement to help ensure that core functionality and content is available regardless of technology being used.
/* On narrow viewports, make the navigation full width */
@media screen and (min-width: 25em) {
#nav {
float: none;
width: auto;
}
#main {
margin-left: 0;
}
}
/* On wider viewports, put the navigation on the left */
@media screen and (min-width: 43em) {
#nav {
float: left;
width: 24%;
}
#main {
margin-left: 27%;
}
}
Use WAI-ARIA to provide information on function and state for custom widgets, such as accordions and custom-made buttons. For example, role="navigation"
and aria-expanded="true"
. Additional code is required to implement the behavior of such widgets, such as expanding and collapsing content or how the widget responds to keyboard events.
<nav aria-label="Main Navigation" role="navigation">
<ul>
<li><a href="...">Home</a></li>
<li><a href="...">Shop</a></li>
<li class="has-submenu">
<a aria-expanded="false" aria-haspopup="true" href="...">SpaceBears</a>
<ul>
<li><a href="...">SpaceBear 6</a></li>
<li><a href="...">SpaceBear 6 Plus</a></li>
</ul>
</li>
<li><a href="...">MarsCars</a></li>
<li><a href="...">Contact</a></li>
</ul>
</nav>
Think about keyboard access, especially when developing interactive elements, such as menus, mouseover information, collapsable accordions, or media players. Use tabindex="0"
to add an element that does not normally receive focus, such as <div>
or <span>
, into the navigation order when it is being used for interaction. Use scripting to capture and respond to keyboard events.
var buttonExample = document.getElementById('example-button');
buttonExample.addEventListener('keydown', function(e) {
// Toggle the menu when RETURN is pressed
if(e.keyCode && e.keyCode == 13) {
toggleMenu(document.getElementById('example-button-menu'));
}
});
buttonExample.addEventListener('click', function(e) {
// Toggle the menu on mouse click
toggleMenu(document.getElementById('example-button-menu'));
});
CAPTCHAs create problems for many people. There are other means of verifying that user input was generated by a human that are easier to use, such as automatic detection or interface interactions. If CAPTCHA really needs to be included, ensure that it is simple to understand and includes alternatives for users with disabilities, such as:
These tips are a few of the things you need to consider for web accessibility. The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.
Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list wai-eo-editors@w3.org or via GitHub.