index.html

---
layout: default
title: Nutrition Cards for Accessible Components
description: A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the <a href="https://w3c.github.io/aria-practices/">WAI ARIA Authoring Practices Guide</a>.
---

<ul class="subnav">
{% for item in site.components %}
    <li><a href="#{{ item.title | slugify }}">{{ item.title }}</a></li>
{% endfor %}
</ul>

{% for item in site.components %}
    <div id="{{ item.title | slugify }}" class="card">
        <header class="title">
          <small>Component Name</small>
          <h2><a href="{{ item.url | relative_url }}">{{ item.title }}</a></h2>
          <!-- <h2>{{ item.title }}</h2> -->
          {% if item.description %}
            <p>{{ item.description }}</p>
          {% endif %}
          {% if item.example %}
            <p><a href="{{ item.example }}" rel="external">See an example of this component</a>
          {% endif %}
        </header>
        
        <div class="keys">
          <small>Keyboard Expectations</small>
          {{ item.keyboard | markdownify }}
        </div>
      
        <div class="focus">
          <small>Focus Expectations</small>
          {{ item.focus | markdownify }}
        </div>
      
        <div class="label">
          <small>Labelling Expectations</small>
          {{ item.labelling | markdownify }}
        </div>
    </div>
{% endfor %}