Jump directly to: Content Table of Content Navigation


& audio Accessibility

Physical and Audio accessibility covers every user that has difficulties using a regular mouse and/or difficulties to hear audio. He may use only his keyboard and/or have special hearing devices. According to the NIDCD 2-3 out of 1000 children are born with hearing loss and ~15% of the US adults report having troubles hearing. According to the CDC ~15% of the US Adults have physical disabilities. Audio accessibility is not only about deaf users, but covers public places where the user might not be able to use audio as well. Physical accessibility covers every user using a keyboard, disabilities causing the hand to tremble/shake and users using eye-tracking software.

Contribute to this section


Contribute to this section


Contribute to this section


Contribute to this section


Contribute to this section

Navigation & Menu

Drop Downs

  • If possible, try to reduce the complexity of your navigation before implementing drop downs.

  • Usually Submenus are individual lists ul or ol, nested in the parents list item li.
  • Drop downs should stay dropped down once activated or have a tolerance for a wavering mouse. This prevents the menu from unintentionally closing when used by people with reduced dexterity. The same holds true for all appearing/disappearing elements. On this website an easy CSS technique was used to show/hide the link anchors with a delay. Here is a simplified example:
  • skip code example to next item
     * 1. the second number is the animations delay
    .anchor {
      opacity: 0;
      transition: opacity 0.5s 0.5s; /* 1. */
     * 1. overwrite the delay and show it immediately
     *  if the element is not hovered (thus on blur) 
     *  the rule above takes effect and add a delay
    .anchor--li:hover .anchor,
    .anchor--li:focus .anchor {
      opacity: 1;
      transition: opacity 0.5s; /* 1. */
  • do not open the submenu as soon as the focus enters the top-level menu item. A keyboard-only user does not want to step through all the submenu links to get to the next top-level item. One way would be that the top level is actually not a link, but just a toggling button. If this top level item should remain a link to a page you can delay the drop down on focus so that the user would be able to quickly fly over it. Then, however, the user will have to wait some time before seeing the subnav when he actually wants to open it. Another solution is to be able to navigate through the menu using the arrow keys. Left and right to navigate the top buttons, down and up to access the sub-links. That is quite tricky to code and some users might not understand it. The easiest and probably best solution is to add a separate “show submenu” button (i.e. an arrowhead) that is accessible and will toggle the submenu. Here is an example:
  • skip code example to next item
    var menuItems = document.querySelectorAll('.exampleButton');
    for(var i = 0; i < menuItems.length; i++) {
      menuItems[i].addEventListener('click',  function(e){
        var button = this;
        var buttonText = button.querySelector('.visuallyhidden');
        var subMenu = button.parentNode.querySelector('.example-submenu');
        if (!button.classList.contains('open')) {
          buttonText.innerText = 'hide submenu';
          // sadly we have to set the focus on the first link element,
          // otherwise screenreader do not notice the change
        } else {
          buttonText.innerText = 'show submenu';
          subMenu.setAttribute('aria-hidden', 'true');
  • skip code example to next item
    <nav id="exampleNav2" role="navigation" aria-labelledby="exampleNav2title">
      <h2 id="exampleNav2title">Example Accessible Navigation</h2>
        <li><a href="#link">Section1</a></li>
          <a href="#link">Section2</a>
          <button class="exampleButton">
            <span class="visuallyhidden">show submenu</span>
          <ul class="example-submenu hidden" aria-hidden="true">
            <li><a href="#link">Section2-1</a></li>
            <li><a href="#link">Section2-2</a></li>
        <li><a href="#link">Section3</a></li>
    Visual output:


  • Horizontal Scrolling is a challenge for most users and becomes an even greater pain for people with unsteady hands. Moreover, some modern browser hide the scrollbar which makes it even more difficult.

  • In general, users ignore horizontal scrolling even if there are arrows. Also, the more to the right the content is, the less it will be seen. If you still use horizontal scroll, always indicate how many items are hidden.
  • Also, vertical scrolling is not always obvious. I.e. when having a full height header image, a lot of users do not notice that they can actually scroll. So, provide a visual hint.
Contribute to this section

Testing & resources