Rules

Page Structure

  • Page Regions in HTML5 Using WAI-ARIA
  1. <header role="banner">
  2.     …
  3.     <nav role="navigation">
  4.         <ul role="menubar" aria-label="functions" id="appmenu">
  5.             <li role="menuitem" aria-haspopup="true">
  6.                 File
  7.                 <ul role="menu">
  8.                     <li role="menuitem">menu 1</li>
  9.                     <li role="menuitem">menu 2</li>
  10.                     <li role="menuitem">menu 3</li>
  11.                 </ul>
  12.             </li>
  13.             <li role="menuitem">Help</li>
  14.         </ul>
  15.     </nav>
  16.     <form role="search">…</form>
  17. </header>
  18. <main role="main">
  19.     <aside role="complementary">…</aside>
  20.     …
  21. </main>
  22. <footer role="contentinfo">
  23.     …
  24. </footer>
  • Using aria-labelledby
  1. <nav aria-labelledby="regionheading">
  2.   <h3 id="regionheading">On this Page</h3>
  3.     …ht
  4. </nav>
  • Using aria-label
  1. <nav aria-label="Main Navigation">
  2.   …
  3. </nav>
  • Provide a ‘Skip to main content’ link.
  1. <a href="#content" class="skipcontent">Skip to content</a>
  1. .skipcontent {
  2.   position: absolute;
  3.   top: -1000px;
  4.   left: -1000px;
  5.   height: 1px;
  6.   width: 1px;
  7.   text-align: left;
  8.   overflow: hidden;
  9.   background-color: red;
  10.   &:active,
  11.   &:focus,
  12.   &:hover {
  13.     left: 0;
  14.     top: 0;
  15.     width: auto;
  16.     height: auto;
  17.     overflow: visible;
  18.     z-index: 1001;
  19.     color: white;
  20.   }
  21. }

Menus

  • Indicate the current item
  1. // 1.Using invisible text
  2. <li>
  3.     <span class="current">
  4.         <span class="visuallyhidden">Current Page: </span>
  5.         Space Bears
  6.     </span>
  7. </li>
  9. // 2.Using WAI-ARIA
  10. // Use the aria-current="page" attribute to indicate the current page in the menu. 
  11. <li>
  12.     <a href="#main" aria-current="page">
  13.     Space Bears
  14.     </a>
  15. </li>

  • Indicate submenus

    • aria-haspopup="true" declares that a menu item has a submenu.

    • aria-expanded="false" declares that the submenu is hidden.

  1. <nav aria-label="Main Navigation">
  2.         <ul>
  3.                 <li><a href="…">Home</a></li>
  4.                 <li><a href="…">Shop</a></li>
  5.                 <li class="has-submenu">
  6.                         <a href="…" aria-haspopup="true" aria-expanded="false">
  7.                             Space Bears
  8.                         </a>
  9.                         <ul>
  10.                                 <li><a href="…">Space Bear 6</a></li>
  11.                                 <li><a href="…">Space Bear 6 Plus</a></li>
  12.                         </ul>
  13.                 </li>
  14.                 <li><a href="…">Mars Cars</a></li>
  15.                 <li><a href="…">Contact</a></li>
  16.         </ul>
  17. </nav>

  • Additional markup

    • menubar: Represents a (usually horizontal) menu bar.

    • menu: Represents a set of links or commands in a menu bar, it is used for the fly-out menus.

    • menuitem: Represents an individual menu item.

    • separator: Represents a separator between two groups of menu items in a menu.

  • Each A element must contain text or an img with an alt attribute.
  1. // example 1
  2. <a href="about.html">About Me</a>
  4. // example 2
  5. <a href="/"><img src="logo.png" alt="** logo"></a>

Images

  1. // Informative Images
  2. <li>
  3.     <img src="phone.png" alt="Telephone:"> 0123 456 7890
  4. </li>
  6. // Decorative Images example 1
  7. <img src="topinfo_bg.png" alt="">
  9. // Decorative Images example 2
  10. <img src="topinfo_bg.png" role="presentation">
  12. // Functional Images
  13. <input type="image" src="searchbutton.png" alt="Search">
  15. // ALT text should not be an image file name. *

Forms

  • label elements should not be blank.
  1. // If you want to hide label, you can follow these examples blow.
  2. // Hiding label text
  3. <label class="visuallyhidden">Search: 
  4.     <input type="text" name="search">
  5. </label>
  6. <button type="submit">Search</button>
  8. // Using aria-label
  9. <input type="text" name="search" aria-label="Search">
  10. <button type="submit">Search</button>
  12. // Using aria-labelledby
  13. <input type="text" name="search" aria-labelledby="searchbutton">
  14. <button id="searchbutton" type="submit">Search</button>
  16. // Using the title attribute
  17. <input title="Search" type="text" name="search">
  18. <button type="submit">Search</button>
  • Make sure placeholder attributes are not being used in place of label tags
  1. <label>First name:
  2.     <input type="text" name="firstname" placeholder="example: John">
  3. </label>
  • Group related form elements with fieldset and describe the group with legend , Important for input type="radio" and input type="checkbox"
  1. <fieldset>
  2.     <legend>I want to receive</legend>
  3.     <label>
  4.         <input type="checkbox" name="newsletter">
  5.         The weekly newsletter
  6.     </label>
  7.     […]
  8. </fieldset>

Misc

  • Language Attribute
  1. <html lang="en">

  • Add a title attribute to each frame and iframe element.

  • No duplicate IDs, Notice for reusable components & svg elements，please rechecks their props.

  • Headings should not be empty.

  • Add role=alert for feedbacks

Tools

Articles

Examples

Tests

  • Test color contrast

  • Test for different types of color blindness.

  • Test using a screen reader

  • Test using keyboard only