<ul class="sidenav--list">
    <li>
        <a lang="en" href="/wai-website/fundamentals/accessibility-intro/" aria-current="location" class="page-link"><span>Introduction to Web Accessibility <span lang="de" dir="auto" translate="no" class="lang">(auf Englisch)</span></span></a>
        <ul>
            <li>
                <a lang="de" href="/wai-website/videos/standards-and-benefits/de" aria-current="page" class="page-link">Video-Einführung</a>

            </li>
        </ul>
    </li>
    <li><a href="#" aria-current="page">Web Accessibility Tutorials</a></li>
    <li>
        <a href="#" aria-current="location">Page Structure Tutorial</a>
        <ul>
            <li><a href="#">Page Regions</a></li>
            <li><a href="#" aria-current="page">Labeling Regions</a></li>
            <li><a href="#">Headings</a></li>
            <li><a href="#">Content Structure</a></li>
            <li><a href="#">Example</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Menus</a>
        <ul>
            <li><a href="#">Structure</a></li>
            <li><a href="#">Styling</a></li>
            <li><a href="#">Fly-out Menus</a></li>
            <li><a href="#">Application Menus</a></li>
            <li><a href="#">Application Menu Example &amp; Code</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Images</a>
        <ul>
            <li><a href="#">Informative Images</a></li>
            <li><a href="#">Decorative Images</a></li>
            <li><a href="#">Functional Images</a></li>
            <li><a href="#">Images of Text</a></li>
            <li><a href="#">Complex Images</a></li>
            <li><a href="#">Groups of Images</a></li>
            <li><a href="#">Image Maps</a></li>
            <li><a href="#">An alt Decision Tree</a></li>
            <li><a href="#">Tips and Tricks</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Tables</a>
        <ul>
            <li><a href="#">One Header</a></li>
            <li><a href="#">Two Headers</a></li>
            <li><a href="#">Irregular Headers</a></li>
            <li><a href="#">Multi-level Headers</a></li>
            <li><a href="#">Caption &amp; Summary</a></li>
            <li><a href="#">Tips and Tricks</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Forms</a>
        <ul>
            <li><a href="#">Labeling Controls</a></li>
            <li><a href="#">Grouping Controls</a></li>
            <li><a href="#">Form Instructions</a></li>
            <li><a href="#">Validating Input</a></li>
            <li><a href="#">User Notifications</a></li>
            <li><a href="#">Multi-page Forms</a></li>
            <li><a href="#">Custom Controls</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Carousels</a>
        <ul>
            <li><a href="#">Structure</a></li>
            <li><a href="#">Functionality</a></li>
            <li><a href="#">Animations</a></li>
            <li><a href="#">Styling</a></li>
            <li><a href="#">Working Example</a></li>
            <li><a href="#">Complete Code</a></li>
        </ul>
    </li>
</ul>
{%- if content -%}
{{content}}
{%- else -%}
<ul class="sidenav--list">
  <li>
  <a lang="en" href="/wai-website/fundamentals/accessibility-intro/" aria-current="location" class="page-link"><span>Introduction to Web Accessibility <span lang="de" dir="auto" translate="no" class="lang">(auf Englisch)</span></span></a>
  <ul>
          <li>
  <a lang="de" href="/wai-website/videos/standards-and-benefits/de" aria-current="page" class="page-link">Video-Einführung</a>

</li></ul>
</li>
  <li><a href="#" aria-current="page">Web Accessibility Tutorials</a></li>
  <li>
    <a href="#" aria-current="location">Page Structure Tutorial</a>
    <ul>
      <li><a href="#">Page Regions</a></li>
      <li><a href="#" aria-current="page">Labeling Regions</a></li>
      <li><a href="#">Headings</a></li>
      <li><a href="#">Content Structure</a></li>
      <li><a href="#">Example</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Menus</a>
    <ul>
      <li><a href="#">Structure</a></li>
      <li><a href="#">Styling</a></li>
      <li><a href="#">Fly-out Menus</a></li>
      <li><a href="#">Application Menus</a></li>
      <li><a href="#">Application Menu Example &amp; Code</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Images</a>
    <ul>
      <li><a href="#">Informative Images</a></li>
      <li><a href="#">Decorative Images</a></li>
      <li><a href="#">Functional Images</a></li>
      <li><a href="#">Images of Text</a></li>
      <li><a href="#">Complex Images</a></li>
      <li><a href="#">Groups of Images</a></li>
      <li><a href="#">Image Maps</a></li>
      <li><a href="#">An alt Decision Tree</a></li>
      <li><a href="#">Tips and Tricks</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Tables</a>
    <ul>
      <li><a href="#">One Header</a></li>
      <li><a href="#">Two Headers</a></li>
      <li><a href="#">Irregular Headers</a></li>
      <li><a href="#">Multi-level Headers</a></li>
      <li><a href="#">Caption &amp; Summary</a></li>
      <li><a href="#">Tips and Tricks</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Forms</a>
    <ul>
      <li><a href="#">Labeling Controls</a></li>
      <li><a href="#">Grouping Controls</a></li>
      <li><a href="#">Form Instructions</a></li>
      <li><a href="#">Validating Input</a></li>
      <li><a href="#">User Notifications</a></li>
      <li><a href="#">Multi-page Forms</a></li>
      <li><a href="#">Custom Controls</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Carousels</a>
    <ul>
      <li><a href="#">Structure</a></li>
      <li><a href="#">Functionality</a></li>
      <li><a href="#">Animations</a></li>
      <li><a href="#">Styling</a></li>
      <li><a href="#">Working Example</a></li>
      <li><a href="#">Complete Code</a></li>
    </ul>
  </li>
</ul>
{%- endif -%}
/* No context defined for this component. */

There are no notes for this item.