index.html

---
layout: default
button: 1
---
{% include header.html %}

<div class="mainrow">
  <div class="sidebar" id="sidebar">
    <div>
      <nav>
        <ul class="nav nav-tabs buttons" id="navtabs">
          <li>
            <button id="hidesidebars" type="button" class="btn btn-default btn-sm" aria-label="Hide Sidebar"><span><span class="word-hide"><svg aria-hidden="true" class="i-chevron-left"><use xlink:href="{{ "img/icons.svg" | relative_url }}#i-chevron-left"></use></svg> Hide</span></span></button>
          </li>
          <li class="active">
            <a href="#col_overview" aria-expanded="true" data-toggle="tab" aria-controls="col_overview"><span><svg aria-hidden="true" class="i-menu"><use xlink:href="{{ "img/icons.svg" | relative_url }}#i-menu"></use></svg> Contents</span></a>
          </li>
          <li>
            <a href="#col_customize"  aria-expanded="false" data-toggle="tab" aria-controls="col_customize"><span><svg aria-hidden="true" class="i-settings"><use xlink:href="{{ "img/icons.svg" | relative_url }}#i-settings"></use></svg> Filter</span></a>
          </li>
        </ul>
      </nav>
      <div class="tab-content">
        <aside class="tab-pane active" id="col_overview" aria-label="Contents">
          {% include sidenav.html tags="false" heading="false" %}
        </aside>
        <aside class="tab-pane tags" id="col_customize" aria-label="Filter">
          <div class="sidebar-content">
            <div class="infobox">
              <svg aria-hidden="true" class="i-info"><use xlink:href="{{ "img/icons.svg" | relative_url }}#i-info"></use></svg> Changing filters will change the listed Success Criteria and Techniques.
            </div>
            {% include versions.html %}
            {% include tags.html show="true" %}
            {% include filters.html %}
          </div>
        </aside>
      </div>
    </div>
  </div>
  <main>
    <div class="navrow with-expandcollapseallbutton" style="top:0;">
      <button id="showsidebars" hidden type="button" class="btn btn-default btn-sm"><span><svg aria-hidden="true" class="i-chevron-right"><use xlink:href="{{ "img/icons.svg" | relative_url }}#i-chevron-right"></use></svg> Show Sidebar</span></button>
      {% include filter-status.html button="true" %}
    </div>
      <div class="maininner">
      {% for principle in site.data.wcag22.principles %}
        <section class="principle" aria-labelledby="principle{{ principle.num }}" aria-roledescription="principle">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h2 id="principle{{ principle.num }}"><strong>Principle {{ principle.num }}</strong> – {{principle.handle}}</h2>
            </div>
            <div class="panel-body panel-body-principle">
              <p>{{principle.title}}</p>
            </div>
          </div>
          <div class="guidelines">
            {% for guideline in principle.guidelines %}
              {% include guideline.html %}
            {% endfor %}
          </div>
        </section>
      {% endfor %}
      <div id="hiddensc" hidden class="panel panel-default">

      </div>
    <hr>
    <div class="pibox" id="contribute">
      <div class="pibox-heading">Contribute</div>
      <div class="pibox-body">
        <p>We welcome feedback and suggestions:</p>
        <ul>
          <li>This resource — <a href="https://github.com/w3c/wai-wcag-quickref/issues/">report bugs</a> and contribute directly to the <a href="https://github.com/w3c/wai-wcag-quickref">Github repository</a></li>
          <li>Techniques — contribute <a href="https://www.w3.org/WAI/GL/WCAG20/TECHS-SUBMIT/">new WCAG techniques</a></li>
          <li>Other — contribute corrections, updates, or new information related to techniques, failures, or other WCAG documentation, per the <a href="https://www.w3.org/WAI/WCAG20/comments/">instructions for commenting</a></li>
        </ul>
      </div>
    </div>
      {% include footer.html %}
    </div>
  </main>
</div>