Question:

WAI-ARIA

Consider the following snippet:

<header>
   <h1>Main title</h1>
   <form action="/" method="get">
      <input type="search">
      <input type="submit">
   </form>
</header>
<ul>
   <li><a href="/">Home</a></li>
   <li><a href="/products">Products</a></li>
   <li><a href="/about">About</a></li>
</ul>
<main>
   <article>
      <h1>Main title</h1>
      <p>This is the content of this section</p>
   </article>
</main>
<footer>
   <small>Copyright &amp;copy; Aurelio De Rosa 2014</small>
</footer>

Can you improve its accessibility using WAI-ARIA roles where appropriate, taking into account older technologies?

Answer:

The code can be rewritten as follows:

<header role="header">
  <h1>Main title</h1>
  <form action="/" method="get" role="search">
     <label for="search">Search:</label>
     <input id="search" type="search">
     <input type="submit">
  </form>
</header>
<nav role="navigation">
  <ul>
     <li><a href="/">Home</a></li>
     <li><a href="/products">Products</a></li>
     <li><a href="/about">About</a></li>
  </ul>
</nav>
<main role="main">
  <article role="article">
     <h1>Main title</h1>
     <p>This is the content of this section</p>
  </article>
</main>
<footer role="contentinfo">
  <small>Copyright &amp;copy; Aurelio De Rosa 2014</small>
</footer>

To improve the accessibility, the main navigation list has been wrapped with a nav element. To improve the accessibility in older technologies that don’t support the new semantic elements, the role of headernavigationmainarticle, and contentinfo have been added to the headernavmainarticle, and footer elements respectively.

Other improvements have been made on the search form. First of all the form has been marked using the search role. Then, an explicit label element has been added to give context for the input field, and it has been associated with the input through the use of the for attribute.


Keywords:

© 2017 QuizBucket.org