perceivable.html

---
layout: grouping
title: Perceivable
pour: perceivable
---
<ul class="list-inline">
    {% assign sorted_examples = site.examples | sort:"relatesto" | where: "pour", "perceivable" %}
    {% for example in sorted_examples %}
    {% if example.accessible == false %}
    <li class="" style="height:450px; width:220px; vertical-align: top;">
        <div class="">
            <svg height="140" width="140">
                <title>{{ example.relatesto }}</title>
                <desc>This relates to section {{ example.relatesto }} of WCAG 2.0.</desc>
                <circle cx="70" cy="70" r="68" stroke="grey" stroke-width="3" fill="grey" />
                <text x="40" y="75" fill="white" style="font-size: 2em;">{{ example.relatesto }}</text>
            </svg>
            <div class="progresscheck label label-info label-as-badge hide" data-toggle="tooltip" title="You have done this exercise." data-path="{{ example.path }}">
                <span class="glyphicon glyphicon-check"></span>
            </div>
        </div>

        <h2>{{ example.title }}</h2>
        <p>{{ example.description }}</p>
        <p><a class="btn btn-default" href="{{ example.url | prepend: site.baseurl }}" role="button">Inaccessible Example &raquo;</a></p>
    </li>
    {% endif %}
    {% endfor %}

</ul>