-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathbad-example.html
executable file
·180 lines (159 loc) · 12.7 KB
/
bad-example.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<title>Accessibility in Media: Tip Sheet & Resources</title>
<link rel="stylesheet" type="text/css" href="styles-bad-example.css"></li>
</head>
<body>
<div id="main-content">
<div id="headline">Accessibility in Media: Tip Sheet & Resources</div>
<p>Join our email group to continue to chat, ask for help, share resources: <a href='https://groups.google.com/forum/#!forum/a11y-journalism/join' target='_blank'>a11y-journalism@googlegroups.com</a></p>
<p><a href="./index.html">Demo: Accessible example</a></p>
<div class="section-head">What is accessibility?</div>
<p>According to the <a href="http://www.bbc.co.uk/accessibility/best_practice/what_is.shtml">BBC</a>, accessibility is used to describe "whether a product (for example, a website, mobile site, digital TV interface or application) can be used by people of all abilities and disabilities."</p>
<p>For journalism in particular, accessibility issues could include any of the following:</p>
<div class="list-group">
<div class="list">Web: Could a screen reader read your website in a way that makes your content make sense?</div>
<div class="list">Podcast/videos: Can someone who is hard of hearing, deaf or blind understand the content in your podcasts or videos? What about someone on a noisy train?</div>
<div class="list">Language: Is your content easy to understand? How do you explain complex terms and jargon? Is your content in a language that your audience will understand?</div>
<div class="list">Access: Can people find your content and get access to it from their location? How much does loading your website cost? How hard is it for someone to get access to your article?</div>
<div class="list">Design: How easy is it for someone to navigate your site? Could a user with Parkinson's disease navigate through your mobile app? Is there enough contrast in your color choices? Is your font easy for dyslexic people to read?</div>
</div>
<div class="section-head">Why is accessibility important?</div>
<p>If you don't care about it, a large group of people will never be able to access or experience the content you create. For example:
<div class="list-group">
<div class="list">15 percent (or 37.5 million) American adults report having trouble hearing (<a href="http://www.rnib.org.uk/knowledge-and-research-hub/key-information-and-statistics">NIDCD</a>)</div>
<div class="list">2.3 percent of Americans and 6.8 percent of Americans over 65 have a visual disability (<a href="https://nfb.org/blindness-statistics">NFB</a>)</div>
<div class="list"><a href="http://www.colour-blindness.com/general/prevalence/">7-10 percent</a> of males have red-green color blindness</div>
</div>
<p>But remember that accessibility isn't just about permanent or semi-permanent visual, auditory, motor and cognitive disabilities. You're also making your products accessible for the person who wants to catch up on a video on a noisy train or a person who wants to get the news of the day while running errands — e.g. temporary or situational accessibility.</p>
<img src="http://i.dailymail.co.uk/i/pix/2011/04/14/article-0-0B9F190B00000578-48_468x343.jpg" />
<p>And at the end of the day, even if you don't care about any of the above, depending on where you work and what you're doing, you could be <a href="http://webaim.org/articles/laws/usa/">legally required</a> to care.</p>
<div class="section-head">What areas of journalism should be thinking about accessibility?</div>
<p>The short answer is everyone! But more specifically, here are a few groups in particular and some prompts to get you thinking.</p>
Content:
<div class="list-group">
<div class="list">Are your links on descriptive words or phrases so that people on screen readers jumping between links know what each link goes to?</div>
<div class="list">Is your content free of jargon? Could your content benefit from being translated into another language?</div>
</div>
Images and graphics:
<div class="list-group">
<div class="list">What should alt text include? How much alt text should you write?</div>
<div class="list">Is there enough contrast in your color palette? Is your color palette color-blind friendly? Is the font size big enough on all size screens?</div>
<div class="list">If the graphic is interactive, is there a clear way to interact with the graphic?</div>
<div class="list">Is your <a href="https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/">SVG accessible</a>?</div>
</div>
Audio and video:
<div class="list-group">
<div class="list">How can you provide transcriptions or closed captioning on a quick turnaround?</div>
<div class="list">For which videos should we provide audio description?</div>
</div>
Social media/audience engagement:
<div class="list-group">
<div class="list">How do you make all of your social media content more accessible?</div>
<div class="list">How do you build in accessible ways for your readers to engage with you?</div>
</div>
Product management:
<div class="list-group">
<div class="list">News doesn't stop for anyone. How can you build in accessibility into a quick turnaround design and development process?</div>
<div class="list">How do you get institutional buy-in for accessibility?</div>
<div class="list">Who is your audience, what needs are not being met and how do you reach an even larger audience?</div>
</div>
Design/development:
<div class="list-group">
<div class="list">Before launching new projects, are you going through accessibility checklists? Are you taking advantage of core HTML elements and ARIA?</div>
<div class="list">How can you use "visually hidden elements" to guide a screen reader user through your page?</div>
<div class="list">How can you help screen reader users navigate around ads? Around menus?</div>
<div class="list">How long does it take for a page to load? How much would that cost a user?</div>
</div>
QA/Testing:
<div class="list-group">
<div class="list">Who are you using for your UX testing? Are you also experience testing?</div>
<div class="list">How can you make sure your testers reflect your audience? Are you missing anyone?</div>
</div>
<div class="section-head">Resources</div>
<u>Accessibility guidelines/resources from news organizations</u>:
<div class="list-group">
<div class="list"><a href="http://www.bbc.co.uk/guidelines/futuremedia/">BBC</a></div>
<div class="list"><a href="http://accessibility.voxmedia.com/">Vox Product</a></div>
<div class="list"><a href="https://yahooaccessibility.tumblr.com/">Yahoo! Accessibility Lab</a></div>
</div>
<u>Good reads</u>:
<div class="list-group">
<div class="list"><a href="https://medium.com/@ablerism/beyond-alt-text-103b00eec89">Beyond alt-text</a> (Sara Hendren)</div>
<div class="list"><a href="http://knightlab.northwestern.edu/2016/06/13/a-bigger-tent-how-new-techniques-and-technology-can-help-journalists-reach-more-people/">How new techniques and technology can help journalists reach more people</a> (Knight Lab)</div>
<div class="list"><a href="https://www.amazon.com/Design-Meets-Disability-MIT-Press/dp/0262516748">Design Meets Disability</a> (Graham Pullin)</div>
</div>
<u>Web accessibility tutorials</u>:
<div class="list-group">
<div class="list"><a href="http://webaim.org/">WebAIM</a></div>
<div class="list"><a href="https://teachaccess.github.io/tutorial/">TeachAccess web accessibility tutorial</a></div>
<div class="list"><a href="http://a11yproject.com/">The A11Y Project</a></div>
<div class="list"><a href="https://pages.18f.gov/accessibility/">18F Accessibility Guide</a></div>
</div>
<u>Alt text guidelines</u>:
<div class="list-group">
<div class="list"><a href="http://webaim.org/techniques/alttext/">Alt text: guidelines and examples</a> (WebAIM)</div>
<div class="list"><a href="https://cfpb.github.io/design-manual/data-visualization/accessibility.html#alt-tags?cn=cmVwbHk%3D">Alt text for charts</a> (Consumer Financial Protection Bureau)</div>
</div>
<u>Colors and design</u>:
<div class="list-group">
<div class="list"><a href="https://michelf.ca/projects/sim-daltonism/">Sim Daltonism</a></div>
<div class="list"><a href="http://colorbrewer2.org/">Colorbrewer</a></div>
<div class="list"><a href="http://www.checkmycolours.com/">Check my Colours</a></div>
<div class="list"><a href="http://jxnblk.com/colorable/demos/text/">Colorable</a></div>
</div>
<u>Screen readers and voiceover</u>:
<div class="list-group">
<div class="list"><a href="https://www.apple.com/voiceover/info/guide/_1131.html">Voiceover commands and gestures</a> (Apple)</div>
</div>
<u>Closed captioning and audio description resources</u>:
<div class="list-group">
<div class="list"><a href="http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/">Closed captioning FAQ</a> (WGBH)</div>
<div class="list"><a href="http://www.acb.org/adp/ad.html#what">All about Audio Description</a> (American Council of the Blind)</div>
<div class="list"><a href="http://www.nytimes.com/interactive/2014/01/16/opinion/16OpDoc-NotesOnBlindness.html">Notes on Blindness</a> (NYT example)</div>
<div class="list"><a href="http://webaim.org/techniques/captions/">Captions, Transcripts, and Audio Descriptions</a> (WebAIM)</div>
<div class="list"><a href="http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html">Suggested Styles and Conventions for Closed Captioning</a> (WGBH)</div>
<div class="list"><a href="https://www.youtube.com/watch?v=JZlNVajYx9s&feature=youtu.be&t=3m43s">Best practices for video description</a> (Rick Boggs)</div>
<div class="list"><a href="http://g3ict.org/design/js/tinymce/filemanager/userfiles/File/Proceedings%20-%20PDFs/A_Larry_GoldbergNY.pdf">A history of closed captioning</a> (Larry Goldberg)</div>
</div>
<u>Social media</u>:
<div class="list-group">
<div class="list"><a href="http://www.mediaaccess.org.au/web/social-media-for-people-with-a-disability">Social media for people with a disability</a> (Media Access Australia)</div>
<div class="list"><a href="https://www.digitalgov.gov/resources/improving-the-accessibility-of-social-media-in-government/">Improving the Accessibility of Social Media in Government</a></div>
<div class="list"><a href="https://hackpad.com/Federal-Social-Media-Accessibility-Toolkit-xWKKBxzGubh">Federal Social Media Accessibility Toolkit Hackpad</a></div>
<div class="list"><a href="http://www.3playmedia.com/how-it-works/how-to-guides/captions-subtitles-facebook-video/">Captions and subtitles with Facebook video</a> (3Play Media)</div>
<div class="list"><a href="https://support.google.com/youtube/answer/2734796?hl=en">Adding subtitles and closed captioning on Youtube</a></div>
<div class="list"><a href="https://support.twitter.com/articles/20174660">Adding alt text to images on Twitter</a></div>
</div>
<u>Testing tools</u>:
<div class="list-group">
<div class="list"><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome Accessibility Developer Tools</div>
<div class="list"><a href="https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/">AInspector Sidebar</a></div>
<div class="list"><a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe</a></div>
<div class="list"><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh">WAVE</a></div>
<div class="list"><a href="http://www.garcialo.com/tools/presentation/">Pros and cons and info on the accessibility tools listed above</a> (Luis Garcia)</div>
</div>
<u>Resources/guidelines from other industries</u>:
<div class="list-group">
<div class="list"><a href="http://www.includification.com/">Game Accessibility Guidelines</div>
<div class="list"><a href="http://touchgraphics.com/">Touch Graphics</a></div>
</div>
<u>Interesting examples</u>
<div class="list-group">
<div class="list"><a href="https://craighospital.org/">Craig Hospital accessibility menu</a> (hit the tab button when you land on the page)</div>
<div class="list"><a href="http://haltersweb.github.io/Accessibility/barchart.html">Bar chart made with an HTML table</a> (Adina Halter)</div>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-35229645-9', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>