accessibility.html

---
layout: default
desc: Vanilla Framework accessibility guidelines
sitemap:
    priority: 1.0
    changefreq: 'monthly'
    lastmod: 2017-06-30T17:20:30+00:00
---

<div class="p-strip is-deep">
  <div class="row">
    <div class="col-8">
      <h1>Accessibility guidelines</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-8">
      <p>Vanilla aims to be as inclusive as possible.</p>
      <p>While traditionally accessibility focuses on making the web more accessible for users with permanent disabilities, a focus on accessibility can deliver an improved user experience for everyone, including those with a temporary or circumstantial disability.</p>
      <p>Accessibility should permeate the entire design and development process, rather than being something that you only think about after everything else has been defined and implemented. You should focus on accessibility when you are:</p>
      <ul>
        <li>Writing your content (whether that’s words, images, videos or any other media format)</li>
        <li>Designing your patterns</li>
        <li>Building your patterns</li>
      </ul>
      <p>While the accessibility of some of the existing Vanilla design patterns is still being improved, all new and updated patterns should meet <a href="https://www.w3.org/TR/WCAG20/" class="p-link--external">WCAG 2.0</a>’s level AA.</p>
      <h3>Testing accessibility</h3>
      <p>Ideally, prototypes should be tested with real users with real accessibility issues, but that is not always possible.</p>
      <p>If you are not able to test design patterns with real users, have a look at Anne Gibson’s "<a href="https://the-pastry-box-project.net/anne-gibson/2014-july-31" class="p-link--external">Accessibility Alphabet</a>" to consider a few real-world scenarios that might hamper a user’s accessibility. Can you improve these users’ access to content and features?</p>
      <p>Use the following checklist to make sure your design patterns are designed and built to be accessible:</p>
      <ul>
        <li>Make sure there is enough contrast between text and its background color</li>
        <li>Don't indicate important information using colour alone</li>
        <li>Pair values of colours together (not only hues) to increase contrast</li>
        <li>Don't rely on sensory characteristics as the sole indicator for understanding and operating content</li>
        <li>Design focus states to help users navigate and understand where they are</li>
        <li>Help users understand inputs, and help them avoid and correct mistakes</li>
        <li>Write good alt text for your images</li>
        <li>If an experience cannot be made accessible, create another route for users to get that information</li>
        <li>Be as consistent and clear as possible in layout and copy</li>
        <li>Use the correct HTML element for your content</li>
        <li>Use the correct lang attribute on the html element</li>
        <li>Support keyboard navigation</li>
        <li>Understand and use HTML landmarks</li>
        <li>Use ARIA attributes when applicable</li>
        <li>Give users a way to skip top level navigation to access main content</li>
        <li>Make links descriptive</li>
        <li>Avoid images and iconography in pseudo-elements</li>
        <li>Make SVGs accessible to assistive technology</li>
        <li>Hide decorative elements from screen readers</li>
        <li>Links should be visually identifiable and have clear :focus and :active states</li>
        <li>HTML document should have a language attribute</li>
        <li>Run through each page with the WAVE Chrome Extension</li>
        <li>Users should be able to navigate through content using their keyboard</li>
        <li>Users should be able to navigate content using a screen reader</li>
        <li>The general architecture and hierarchy of the content should make sense</li>
        <li>Charts and images should all have alt-text so that users with screen readers or users on a slow connection will still be able to understand the images</li>
      </ul>
      <p>(Adapted from <a class="p-link--external" href="http://accessibility.voxmedia.com/">Accessibility Guidelines</a> checklist and <a class="p-link--external" href="http://a11yproject.com/checklist.html">Web Accessibility Checklist</a>)</p>
      <h3>Key WCAG documents</h3>
      <p>The amount of different documents that revolve around the WCAG 2.0 guidelines can be disorienting. These are the official W3C documents, in order of relevance, that we think you should refer to when learning about and implementing accessibility:</p>
      <ul>
        <li><a class="p-link--external" href="https://www.w3.org/TR/WCAG20/">WCAG 2.0</a>: the W3C standard, includes principles, guidelines and success criteria</li>
        <li><a class="p-link--external" href="https://www.w3.org/WAI/WCAG20/quickref/">How to Meet WCAG 2.0</a>: a customisable quick reference, includes guidelines, success criteria and techniques</li>
        <li><a class="p-link--external" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/">Understanding WCAG 2.0</a>: detailed reference, includes intent, benefits to people with disabilities, examples, resources and techniques</li>
        <li><a class="p-link--external" href="https://www.w3.org/TR/WCAG20-TECHS/">Techniques for WCAG 2.0</a>: instructions for developers, includes browser and assistive technology support notes, examples, code, resources and test procedures</li>
      </ul>
      <h3>Useful tools</h3>
      <p>The web is abundant in tools that help to create and test for accessible sites. These are a few of the ones we consider the best and most useful ones:</p>
      <ul>
        <li><a class="p-link--external" href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb/related?hl=en">Chrome Accessibility Developer Tools</a></li>
        <li><a class="p-link--external" href="http://wave.webaim.org/extension/">Web Accessibility Evaluation tool (WAVE) Chrome extension</a></li>
        <li><a class="p-link--external" href="http://leaverou.github.io/contrast-ratio/">Contrast Ratio tool</a></li>
        <li><a class="p-link--external" href="http://colororacle.org/">Color Oracle</a></li>
        <li><a class="p-link--external" href="http://www.chromevox.com/">ChromeVox: a screen reader for Chrome</a></li>
        <li><a class="p-link--external" href="https://tenon.io/index.php">Tenon.io: analyse your site’s accessibility</a></li>
      </ul>
      <p>If you think we could improve Vanilla’s accessibility in any way, let us know by <a href="https://github.com/vanilla-framework/vanilla-framework/issues" class="p-link--external">filing an issue</a> on GitHub.
      </p>
      <p>Last updated: {{ page.sitemap.lastmod | date: '%d %B %Y'}}</p>
    </div>
  </div>
</div>