-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·181 lines (161 loc) · 11.5 KB
/
index.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
181
<!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.css"></li>
</head>
<body>
<div id="main-content">
<h1>Accessibility in Media: Tip Sheet & Resources</h1>
<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'>[email protected]</a></p>
<p><a href="./bad-example.html">Demo: Inaccessible example</a></p>
<h4>What is accessibility?</h4>
<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>
<ul>
<li>Web: Could a screen reader read your website in a way that makes your content make sense?</li>
<li>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?</li>
<li>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?</li>
<li>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?</li>
<li>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?</li>
</ul>
<h4>Why is accessibility important?</h4>
<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:
<ul>
<li>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>)</li>
<li>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>)</li>
<li><a href="http://www.colour-blindness.com/general/prevalence/">7-10 percent</a> of males have red-green color blindness</li>
</ul>
<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" alt="A screengrab from a Verizon commercial showing a man checking his cell phone service from a street manhole.'" />
<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>
<h4>What areas of journalism should be thinking about accessibility?</h4>
<p>The short answer is everyone! But more specifically, here are a few groups in particular and some prompts to get you thinking.</p>
<ul>
<li>Content: </li>
<ul>
<li>Are your links on descriptive words or phrases so that people on screen readers jumping between links know what each link goes to?</li>
<li>Is your content free of jargon? Could your content benefit from being translated into another language?</li>
</ul>
<li>Images and graphics: </li>
<ul>
<li>What should alt text include? How much alt text should you write?</li>
<li>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?</li>
<li>If the graphic is interactive, is there a clear way to interact with the graphic?</li>
<li>Is your <a href="https://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/">SVG accessible</a>?</li>
</ul>
<li>Audio and video: </li>
<ul>
<li>How can you provide transcriptions or closed captioning on a quick turnaround?</li>
<li>For which videos should we provide audio description?</li>
</ul>
<li>Social media/audience engagement: </li>
<ul>
<li>How do you make all of your social media content more accessible?</li>
<li>How do you build in accessible ways for your readers to engage with you?</li>
</ul>
<li>Product management:</li>
<ul>
<li>News doesn't stop for anyone. How can you build in accessibility into a quick turnaround design and development process?</li>
<li>How do you get institutional buy-in for accessibility?</li>
<li>Who is your audience, what needs are not being met and how do you reach an even larger audience?</li>
</ul>
<li>Design/development:</li>
<ul>
<li>Before launching new projects, are you going through accessibility checklists? Are you taking advantage of core HTML elements and ARIA?</li>
<li>How can you use "visually hidden elements" to guide a screen reader user through your page?</li>
<li>How can you help screen reader users navigate around ads? Around menus?</li>
<li>How long does it take for a page to load? How much would that cost a user?</li>
</ul>
<li>QA/Testing:</li>
<ul>
<li>Who are you using for your UX testing? Are you also experience testing?</li>
<li>How can you make sure your testers reflect your audience? Are you missing anyone?</li>
</ul>
</ul>
<h4>Resources</h4>
<h5>Accessibility guidelines/resources from news organizations</h5>
<ul>
<li><a href="http://www.bbc.co.uk/guidelines/futuremedia/">BBC</a></li>
<li><a href="http://accessibility.voxmedia.com/">Vox Product</a></li>
<li><a href="https://yahooaccessibility.tumblr.com/">Yahoo! Accessibility Lab</a></li>
</ul>
<h5>Good reads</h5>
<ul>
<li><a href="https://medium.com/@ablerism/beyond-alt-text-103b00eec89">Beyond alt-text</a> (Sara Hendren)</li>
<li><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)</li>
<li><a href="https://www.amazon.com/Design-Meets-Disability-MIT-Press/dp/0262516748">Design Meets Disability</a> (Graham Pullin)</li>
</ul>
<h5>Web accessibility tutorials</h5>
<ul>
<li><a href="http://webaim.org/">WebAIM</a></li>
<li><a href="https://teachaccess.github.io/tutorial/">TeachAccess web accessibility tutorial</a></li>
<li><a href="http://a11yproject.com/">The A11Y Project</a></li>
<li><a href="https://pages.18f.gov/accessibility/">18F Accessibility Guide</a></li>
</ul>
<h5>Alt text guidelines</h5>
<ul>
<li><a href="http://webaim.org/techniques/alttext/">Alt text: guidelines and examples</a> (WebAIM)</li>
<li><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)</li>
</ul>
<h5>Colors and design</h5>
<ul>
<li><a href="https://michelf.ca/projects/sim-daltonism/">Sim Daltonism</a></li>
<li><a href="http://colorbrewer2.org/">Colorbrewer</a></li>
<li><a href="http://www.checkmycolours.com/">Check my Colours</a></li>
<li><a href="http://jxnblk.com/colorable/demos/text/">Colorable</a></li>
</ul>
<h5>Screen readers and voiceover</h5>
<ul>
<li><a href="https://www.apple.com/voiceover/info/guide/_1131.html">Voiceover commands and gestures</a> (Apple)</li>
</ul>
<h5>Closed captioning and audio description resources</h5>
<ul>
<li><a href="http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/">Closed captioning FAQ</a> (WGBH)</li>
<li><a href="http://www.acb.org/adp/ad.html#what">All about Audio Description</a> (American Council of the Blind)</li>
<li><a href="http://www.nytimes.com/interactive/2014/01/16/opinion/16OpDoc-NotesOnBlindness.html">Notes on Blindness</a> (NYT example)</li>
<li><a href="http://webaim.org/techniques/captions/">Captions, Transcripts, and Audio Descriptions</a> (WebAIM)</li>
<li><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)</li>
<li><a href="https://www.youtube.com/watch?v=JZlNVajYx9s&feature=youtu.be&t=3m43s">Best practices for video description</a> (Rick Boggs)</li>
<li><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)</li>
</ul>
<h5>Social media</h5>
<ul>
<li><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)</li>
<li><a href="https://www.digitalgov.gov/resources/improving-the-accessibility-of-social-media-in-government/">Improving the Accessibility of Social Media in Government</a></li>
<li><a href="https://hackpad.com/Federal-Social-Media-Accessibility-Toolkit-xWKKBxzGubh">Federal Social Media Accessibility Toolkit Hackpad</a></li>
<li><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)</li>
<li><a href="https://support.google.com/youtube/answer/2734796?hl=en">Adding subtitles and closed captioning on Youtube</a></li>
<li><a href="https://support.twitter.com/articles/20174660">Adding alt text to images on Twitter</a></li>
</ul>
<h5>Testing tools</h5>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en">Chrome Accessibility Developer Tools</li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/ainspector-sidebar/">AInspector Sidebar</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/">aXe</a></li>
<li><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh">WAVE</a></li>
<li><a href="http://www.garcialo.com/tools/presentation/">Pros and cons and info on the accessibility tools listed above</a> (Luis Garcia)</li>
</ul>
<h5>Resources/guidelines from other industries</h5>
<ul>
<li><a href="http://www.includification.com/">Game Accessibility Guidelines</li>
<li><a href="http://touchgraphics.com/">Touch Graphics</a></li>
</ul>
<h5>Interesting examples</h5>
<ul>
<li><a href="https://craighospital.org/">Craig Hospital accessibility menu</a> (hit the tab button when you land on the page)</li>
<li><a href="http://haltersweb.github.io/Accessibility/barchart.html">Bar chart made with an HTML table</a> (Adina Halter)</li>
</ul>
</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>