Visual

<nav role="navigation" aria-labelledby="exampleNav1">
  <h2 id="exampleNav1">Some Example Navigation</h2>
  <ul>
    <li><a href="#link">Section1</a></li>
    <li><a href="#link">Section2</a>
      <!-- submenu start -->
      <ul class="visuallyhidden">
        <li><a href="#link">Section2-1</a></li>
        <li><a href="#link">Section2-2</a></li>
      </ul>
      <!-- submenu end -->
    </li>
    <li><a href="#link">Section3</a></li>
  </ul>
</nav>

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')) {
      button.classList.add('open');
      buttonText.innerText = 'hide submenu';
      subMenu.classList.remove('hidden');
      subMenu.removeAttribute('aria-hidden');
      // sadly, we have to set the focus on the first link element,
      // otherwise the screen reader does not notice the change (note how the press-button event is not announced)
      subMenu.querySelector('a').focus();
    } else {
      button.classList.remove('open');
      buttonText.innerText = 'show submenu';
      subMenu.classList.add('hidden');
      subMenu.setAttribute('aria-hidden', 'true');
    }
  });
}

<nav id="exampleNav2" role="navigation" aria-labelledby="exampleNav2title">
  <h2 id="exampleNav2title">Example Accessible Navigation</h2>
  <ul>
    <li><a href="#link">Section1</a></li>
    <li>
      <a href="#link">Section2</a>
      <button class="exampleButton">
        <span class="visuallyhidden">show submenu</span>
      </button>
      <ul class="example-submenu hidden" aria-hidden="true">
        <li><a href="#link">Section2-1</a></li>
        <li><a href="#link">Section2-2</a></li>
      </ul>
    </li>
    <li><a href="#link">Section3</a></li>
  </ul>
</nav>

<nav class="breadcrumb" role="navigation" aria-label="You are here:">
  <a href="#link">Home</a>
  >
  <a href="#link">About Sharks</a>
  >
  <span class="visuallyhidden">Current:</span> Hammerhead Shark Facts.
</nav>

// Script to unhide Skiplinks on focus
var skiplinks = document.querySelectorAll('a.visuallyhidden');
for (var i = 0; i < skiplinks.length; i++) {
  var el = skiplinks[i];
  el.addEventListener('focus', function() {
    el.classList.remove('visuallyhidden');
  });
  el.addEventListener('blur', function() {
    el.classList.add('visuallyhidden');
  }); }

<p>Item</p>
<a href="#linkNext" class="visuallyhidden">Jump to wanted position</a>
<p>Annoying content</p>
<a href="#link">Annoying Link</a>
<p id="linkNext">Next item</p>
<a href="#link">Wanted Link</p>

Green Apples
Red Apples
Yellow Apples
<!-- Instead of -->
Apples - Green
Apples - Red
Apples - Yellow

“Two staff members wearing safety gear, shown working outdoors collecting information on a laptop and mobile phone”, 
“Eucalypt leaf, Tidbinbilla Nature Reserve, Australian Capital Territory”,
“A researcher draws blood from a patient’s arm”,
“3 young children, two boys and a girl, play with 2 golden labrador puppies, soon to be trained as seeing eye dogs”

> A chart showing sales for October has an short text alternative of "October sales chart". It also has a long description that provides all of the information on the chart.
> A search button uses an image of a magnifying glass. The text alternative is "search" and not "magnifying glass".
> A picture shows how a knot is tied including arrows showing how the ropes go to make the knot. The text alternative describes how to tie the knot, not what the picture looks like.
> A picture shows what a toy looks like from the front. The text alternative describes a front view of the toy.
> An animation shows how to change a tire. A short text alternative describes what the animation is about. A long text alternative describes how to change a tire.
> The text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com home page” rather than “Example.com logo”.

“banner”, “news item graphic”, “smiling people”,
“plant”, “open day photo”, “decorative element”,
“funny bread”, “needle”, “kids with toys”,
 etc.

<img src="grandmothers.jpg" alt="">
<strong>Grandmothers play an important role in our development:</strong>

<h1 role="alert" aria-live="assertive">3 Errors: [...]</h1>

<label for="name">Name (required): </label>
<input type="text" name="name" id="name" required aria-required="true">

<ul aria-busy="true">
  <li>Loading...</li>
</ul>

<button role="button" aria-controls="amount">Increase amount by 1</button>
<p id="amount">1</p>

<div aria-owns="child">Parent</div>
<div id="child">Child</div>

<div aria-describedby="#exampleDescription">Strange Thing</div>
<p id="exampleDescription">Representing [...]</p>

<input type="checkbox" aria-disabled="true" disabled>

<div aria-grabbed="false">Draggable</div>
<div aria-dropeffect="move execute">Target</div>

<li aria-haspopup="true">
  <button role="button">Click me to reach sublevel</button>
  <ul>
    <li>Sub Level</li>
  </ul>
</li>

<p>This is <span aria-hidden="true">hidden</span>.</p>

<input type="text" aria-invalid="true">
<input type="text" aria-invalid="grammar">
<input type="text" aria-invalid="spelling">

<input type="email" name="email" aria-label="email:">

<section aria-labelledby="example">
  <h2 id="example">This is an example.</h2>
</section>

<section aria-labelledby="example">
  <h2 id="example">This is an example.</h2>
</section>

<div aria-flowto="second">1</div>
<div>3</div>
<div id="second">2</div>

<textarea aria-autocomplete="inline">The suggestions are provided inline, after the users input.</textarea>
<textarea aria-autocomplete="list">A list of choices appears from which the user can choose.</textarea>
<textarea aria-autocomplete="both">Both types are provided.</textarea>

<button aria-expanded="false" role="button">Toggle 1</button>
<button aria-expanded="true" role="button">Toggle 2</button>

<p role="heading" aria-level="9000">wow</p>

<textarea aria-autocomplete="inline">The suggestions are provided inline, after the users input.</textarea>
<textarea aria-autocomplete="list">A list of choices appears from which the user can choose.</textarea>
<textarea aria-autocomplete="both">Both types are provided.</textarea>

<div role="application">
  <h1 id="listlabel">ARIA Multiselectable Listbox Example</h1>
  <ul id="list0" role="listbox" aria-labelledby="listlabel" aria-activedescendant="list0_item1" aria-multiselectable="true" tabindex="0">
    <li id="list0_item0" role="option" aria-selected="false">foo</li>
    <li id="list0_item1" role="option" aria-selected="false">bar</li>
    <li id="list0_item2" role="option" aria-selected="false">baz</li>
  </ul>
</div>

<a href="#" id="handle_zoomSlider"
   role="slider"
   aria-orientation="vertical"
   aria-valuemin="0"
   aria-valuemax="17"
   aria-valuenow="14">
  <span>11</span>
</a>

<input type="text" name="name" required aria-required="true">

<table id="exampleTable">
  <thead>
  <tr>
    <th aria-label="Account name: Ascending sort applied, activate to apply a descending sort" aria-sort="ascending" aria-controls="exampleTable" role="columnheader" scope="col" tabindex="0">
      Account name </th>
  </tr>
  </thead>
  <tbody aria-relevant="all" aria-live="polite">
  <tr>
    <td>Personal account</td>
    <td>Main Account</td>
  </tr>
  </tbody>
</table>