index.html

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

<div class="mainrow">
  <button id="showhidesbsmall" data-target="#sidebar" type="button" data-toggle="collapse" aria-expanded="true" aria-controls="#sidebar" class="btn btn-default"><span class="word-show"><svg aria-hidden="true" class="i-chevron-right"><use xlink:href="{{ "img/icons.svg" | prepend: site.baseurl }}#i-chevron-right"></use></svg> Show</span><span class="word-hide"><svg aria-hidden="true" class="i-chevron-down"><use xlink:href="{{ "img/icons.svg" | prepend: site.baseurl }}#i-chevron-down"></use></svg> Hide</span> in-page navigation and filter options</button>

  <div class="sidebar" id="sidebar">
    <div class="fixedsticky" style="top:0;">
      <nav>
        <ul class="nav nav-tabs buttons" id="navtabs">
          <li>
            <button id="hidesidebars" aria-expanded="true" 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" | prepend: site.baseurl }}#i-chevron-left"></use></svg> Hide</span></span></button>
          </li>
          <li class="active">
            <a href="#col_overview" aria-expanded="true" data-toggle="tab" data-toggle="tab" aria-controls="col_overview"><span><svg aria-hidden="true" class="i-menu"><use xlink:href="{{ "img/icons.svg" | prepend: site.baseurl }}#i-menu"></use></svg> Contents</span></a>
          </li>
          <li>
            <a href="#col_customize"  aria-expanded="false" data-toggle="tab" data-toggle="tab" aria-controls="col_customize"><span><svg aria-hidden="true" class="i-settings"><use xlink:href="{{ "img/icons.svg" | prepend: site.baseurl }}#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" | prepend: site.baseurl }}#i-info"></use></svg> Changing filters will change the listed Success Criteria and Techniques.
            </div>
            {% include tags.html show="true" %}
            {% include filters.html %}
          </div>
        </aside>
      </div>
    </div>
  </div>
  <main>
    <div class="navrow fixedsticky with-expandcollapseallbutton" style="top:0;">
      <button id="showsidebars" aria-expanded="false" hidden type="button" class="btn btn-default btn-sm"><span><svg aria-hidden="true" class="i-chevron-right"><use xlink:href="{{ "img/icons.svg" | prepend: site.baseurl }}#i-chevron-right"></use></svg> Show Sidebar</span></button>
      {% include filter-status.html button="true" %}
    </div>
      <div class="maininner">
      {% assign p = 0 %}
      {% for principle in site.data.wcag2.principles %}
        {% assign p = p | plus: 1 %}
        {% assign g = 0 %}
        <div class="principle panel panel-default">
          <div class="panel-heading">
            <h2 id="principle{{ principle.num }}"><strong>原則 {{ p }}</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>
      {% 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="http://github.com/w3c/wai-wcag-quickref/issues/">report bugs</a> and contribute directly to the <a href="http://github.com/w3c/wai-wcag-quickref">Github repository</a></li>
          <li>Techniques — contribute <a href="http://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="http://www.w3.org/WAI/WCAG20/comments/">instructions for commenting</a></li>
        </ul>
      </div>
    </div>
      {% include footer.html %}
    </div>
  </main>
</div>