This repository has been archived by the owner on Mar 6, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 33
/
accessibility.html
102 lines (101 loc) · 7.63 KB
/
accessibility.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
---
layout: default
desc: Vanilla Framework accessibility guidelines
sitemap:
priority: 1.0
changefreq: 'monthly'
lastmod: 2017-06-30T17:20:30+00:00
copydoc: https://docs.google.com/document/d/1_cCvuHSwS9i0pzD_4WHDFoTenVAfZVr9qGxG-rSHHGY/edit
---
<div id="main-content" class="p-strip--image is-dark vfio-hero">
<div class="row">
<h1 class="u-no-margin--bottom">Accessibility guidelines</h1>
</div>
</div>
<div class="p-strip is-bordered">
<div class="row">
<div class="col-8">
<h2 class="p-heading--3">Vanilla aims to be as inclusive as possible.</h2>
<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 and building your components</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>level AA.</p>
</div>
</div>
</div>
<div class="p-strip is-bordered">
<div class="row">
<div class="col-8">
<h2 class="p-heading--3">Accessibility testing</h2>
<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>
</div>
</div>
<div class="row">
<div class="col-12">
<ul class="p-list is-split">
<li class="p-list__item is-ticked">Make sure there is enough contrast between text and its background color</li>
<li class="p-list__item is-ticked">Don't indicate important information using colour alone</li>
<li class="p-list__item is-ticked">Design focus states to help users navigate and understand where they are</li>
<li class="p-list__item is-ticked">Help users understand inputs, and help them avoid and correct mistakes</li>
<li class="p-list__item is-ticked">Write good alt text for your images</li>
<li class="p-list__item is-ticked">If an experience cannot be made accessible, create another route for users to get that information</li>
<li class="p-list__item is-ticked">Be as consistent and clear as possible in layout and copy</li>
<li class="p-list__item is-ticked">Use the correct HTML element for your content</li>
<li class="p-list__item is-ticked">Use the correct lang attribute on the html element</li>
<li class="p-list__item is-ticked">Support keyboard navigation</li>
<li class="p-list__item is-ticked">Understand and use HTML landmarks</li>
<li class="p-list__item is-ticked">Use ARIA attributes when applicable</li>
<li class="p-list__item is-ticked">Give users a way to skip top level navigation to access main content</li>
<li class="p-list__item is-ticked">Make links descriptive</li>
<li class="p-list__item is-ticked">Avoid images and iconography in pseudo-elements</li>
<li class="p-list__item is-ticked">Make SVGs accessible to assistive technology</li>
<li class="p-list__item is-ticked">Hide decorative elements from screen readers</li>
<li class="p-list__item is-ticked">Links should be visually identifiable and have clear :focus and :active states</li>
<li class="p-list__item is-ticked">HTML document should have a language attribute</li>
<li class="p-list__item is-ticked">Users should be able to navigate content using a screen reader</li>
<li class="p-list__item is-ticked">The general architecture and hierarchy of the content should make sense</li>
<li class="p-list__item is-ticked">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>
<small>*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></small>
</div>
</div>
</div>
<div class="p-strip is-bordered">
<div class="row">
<div class="col-8">
<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>
</div>
</div>
<div class="row">
<ul class="p-list is-split">
<li class="p-list__item"><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 class="p-list__item"><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 class="p-list__item"><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 class="p-list__item"><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>
</div>
</div>
<div class="p-strip">
<div class="row">
<div class="col-8">
<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>
</div>
</div>
<div class="row">
<ul class="p-list--divided is-split">
<li class="p-list__item"><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 class="p-list__item"><a class="p-link--external" href="https://contrast-ratio.com/">Contrast Ratio tool</a></li>
<li class="p-list__item"><a class="p-link--external" href="http://colororacle.org/">Color Oracle</a></li>
<li class="p-list__item"><a class="p-link--external" href="http://www.chromevox.com/">ChromeVox: a screen reader for Chrome</a></li>
<li class="p-list__item"><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/canonical-web-and-design/vanilla-framework/issues" class="p-link--external">filing an issue</a> on GitHub.</p>
</div>
</div>