Partnership on Employment & Accessible Technology (PEAT) - Digital accessibility tutorialshttp://www.peatworks.org/taxonomy/term/digital-accessibility-tutorials
enSocial Media Accessibilityhttp://www.peatworks.org/staff-training/social-media
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>Below are a few tips to help you ensure that your social media posts are accessible to everyone. For more detailed guidance, visit <a href="https://digital.gov/resources/improving-the-accessibility-of-social-media-in-government/#general">DigitalGov&#39;s social media accessibility toolkit</a>.</p>
<ul>
<li>Make sure your profile page includes alternative contact options, like an accessible &quot;contact us&quot; form or toll-free phone number, or an email link to somebody who can assist people with questions.</li>
<li>Write social media posts informally and in <a href="/highlights/2015/oct/keeping-it-simple-using-plain-language-enhance-accessibility-erecruiting">plain language</a>. Avoid abbreviations and spell out acronyms.</li>
<li>Use @mentions to tag other organizations on social media and use relevant hashtags on key words and phrases to categorize posts.</li>
<li>For multi-word hashtags, capitalize the first letters of each section of a compound word (#LikeThisExample).</li>
<li>Provide closed captioning for YouTube videos. YouTube includes an option for&nbsp;<a href="https://support.google.com/youtube/answer/6373554?hl=en">automatic captions</a>, though you&rsquo;ll want to review and <a href="https://support.google.com/youtube/answer/2734796?hl=en">edit them manually</a> before publishing,&nbsp;as the quality is not yet reliable. Alternately, you can upload a transcript or transcribe the captions manually.</li>
<li><a href="https://www.facebook.com/help/214124458607871?helpref=related">Add captions</a> to Facebook video posts. Make sure captions are turned on for <a href="https://www.facebook.com/help/427723640933279">live videos</a>. Link to pages with full captions or transcripts of photos, videos, or audio.</li>
<li>Avoid using emojis, or at least refrain from using excessive emojis in posts.</li>
<li>Describe your photos in the caption of social media posts on Instagram.</li>
<li>Turn on <a href="https://help.twitter.com/en/using-twitter/picture-descriptions">image description settings</a> in Twitter and compose descriptive text to make images accessible. Note that this setting doesn&rsquo;t work for GIFs.</li>
<li>Add and edit <a href="https://www.facebook.com/help/214124458607871?helpref=faq_content">alternative text descriptions</a> to images posted on Facebook.</li>
<li>If possible, test your tweet with assistive technology before posting it.</li>
</ul>
<p>Facebook, Twitter and Google are working on increasing their accessibility, but their platforms aren&#39;t always fully accessible to all users. There are resources that may help you meet your accessibility needs:</p>
<p><a href="https://www.dol.gov/cgi-bin/leave-dol.asp?exiturl=https://play.google.com/store/apps/details?id=com.levelup.touiteur%26feature=nav_result/&amp;exitTitle=www.play.google.com">Android Plume for Twitter app </a></p>
<p><a href="http://www.easychirp.com/">EasyChirp third-party Twitter interface</a></p>
<p><a href="https://www.deque.com/tools/amaze/">My Amaze multiple browser accessibility plug-in by Deque</a></p>
<p><a href="https://www.facebook.com/help/273947702950567/?helpref=hc_fnav">Facebook Accessibility </a></p>
<p><a href="https://www.google.com/accessibility/products-features.html">Google Accessibility </a></p>
<p><a href="https://help.instagram.com/">Instagram Help Center</a></p>
<p><a href="https://help.twitter.com/en">Twitter Help Center</a></p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div><div class="field-item odd"><a href="/taxonomy/term/staff-training-awareness">Staff training &amp; awareness</a></div></div></div>Mon, 18 Jun 2018 19:44:30 +0000Corinne Weible1985 at http://www.peatworks.org10 Tips for an Accessible Websitehttp://www.peatworks.org/content/10-tips-accessible-website
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>Are your websites and digital tools usable by everyone? Consider that nearly 1 in 5 Americans has a disability, and that 1 in 8 Americans is 65+. If your website isn&rsquo;t accessible to them, you could be losing out on potential job candidates or new customers, and&nbsp;<a href="http://www.peatworks.org/resources/policy/DOJsettlements">exposing yourself to legal risk</a>.</p>
<p>People with various permanent, temporary, situational, or changing disabilities <a href="http://www.peatworks.org/content/get-started">access the web in different ways</a>. Check out the following tips to ensure that everyone can use your website&mdash;regardless of whether they can manipulate a mouse, their level of vision, how many colors they can see, how much they can hear, or how they process information.</p>
<h2><a name="_4wevyywiv33r"></a>Screen reader compatibility</h2>
<p>People with low vision, people who are blind, and people with dyslexia typically navigate the web using a screen reader that converts text to speech and provides non-visual navigation commands. For this <em>assistive technology</em> to work, it&rsquo;s important that you include detailed and consistent navigational elements in the page structure, such as <a href="https://webaim.org/techniques/semanticstructure/">headers, titles, and lists</a>. Most operating systems today include a built-in screen reader that you can use to test your website, including Narrator on Windows and Voiceover on Mac OSX.</p>
<ul>
<li>Curious about how a screen reader works? <a href="https://www.youtube.com/watch?v=G1r55efei5c">Watch Sina Barham use a computer at 1,000 WPM</a>!</li>
<li><a href="https://webaim.org/techniques/screenreader/">WebAim: Designing for Screen Reader Compatibility</a></li>
<li><a href="https://developer.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/">Paciello Group: Basic Screen Reader Commands for Accessibility Testing</a></li>
</ul>
<h2><a name="_5rm971t75jek"></a>Alternative text for images</h2>
<p>People who can&rsquo;t see images rely on well-written descriptive text (called an &ldquo;<a href="/glossary#ALT_attribute" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;span class=&quot;skip-lexicon&quot;&gt;An ALT attribute provides a text equivalent for a website image if a user cannot view it. The descriptive text is known as alternative text, or &amp;quot;ALT text&amp;quot; for shorthand. The ALT attribute&lt;/span&gt; is inserted as an attribute in an HTML (Hypertext Markup Language) document to describe the nature or contents of an image.&lt;/p&gt;
" title="ALT attribute" class="lexicon-term">ALT attribute</a>&rdquo;), visible to screen readers, to understand the information they convey.</p>
<ul>
<li><a href="http://www.peatworks.org/blog/2016/nov/implementing-accessible-workplace-tech-making-sure-alternative-text-isn%E2%80%99t-afterthought">Making Sure Alternative Text </a><a href="http://www.peatworks.org/blog/2016/nov/implementing-accessible-workplace-tech-making-sure-alternative-text-isn%E2%80%99t-afterthought">I</a><a href="http://www.peatworks.org/blog/2016/nov/implementing-accessible-workplace-tech-making-sure-alternative-text-isn%E2%80%99t-afterthought">sn&rsquo;t an Afterthought</a></li>
</ul>
<h2><a name="_jf60mrvx723c"></a>Keyboard accessibility</h2>
<p>One of the easiest initial tests for accessibility is whether you can use a website without a mouse. Can you Tab through your website content from start to finish, or are there &ldquo;keyboard traps&rdquo;?</p>
<ul>
<li><a href="https://www.accessibilityoz.com/factsheets/keyboard/keyboard-accessibility-principles/">Accessibility Oz: Keyboard Accessibility Principles</a></li>
</ul>
<h2><a name="_pe3idgmtrkaf"></a>Controls for moving content</h2>
<p>Some websites include moving content to engage users, such as animations, slideshows, videos, and popups. Best practices for accessibility include avoiding excessive blinking (which can induce seizures) and including a stop/pause button for users with visual processing or cognitive disabilities, or who may be using an assistive technology that requires sound-based navigation, such as a screen reader.</p>
<ul>
<li><a href="https://www.csun.edu/universal-design-center/web-accessibility-criteria-screen-movement">CSUN Universal Design Center Web Accessibility Criteria - Screen Movement </a></li>
</ul>
<h2><a name="_p87syjkd3u92"></a>Controls for timed content</h2>
<p>Many people using assistive technology require extra time to navigate a website and complete tasks. For web pages with time limits, the user should have options to turn off, adjust, or extend that time limit.</p>
<ul>
<li><a href="https://www.csun.edu/universal-design-center/web-accessibility-criteria-timed-response">CSUN Universal Design Center Web Accessibility Criteria - Timed Response</a></li>
</ul>
<h2><a name="_n061n0f2ekym"></a>Labeled forms</h2>
<p>Be sure to explicitly label form fields such as checkboxes, data fields, and radio or option buttons so that people using certain types of assistive technology, such as screen readers, can understand them. Labels should tell the user that they have encountered a field, explain what type of field it is, and in some cases, provide additional cues to let the user know what type of information is needed.</p>
<ul>
<li><a href="https://webaim.org/techniques/forms/">WebAim: Creating Accessible Forms</a></li>
</ul>
<h2><a name="_3lzr9rsdgp9y"></a>Color contrast</h2>
<p>Did you know that red&ndash;green color blindness affects up to 8% of males? Ensure that they can use your website by testing your design elements for proper color contrast.</p>
<ul>
<li><a href="https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/">Smashing Magazine: Color Contrast Tips and Tools for Accessibility</a></li>
</ul>
<h2><a name="_wrbg4pdkrla0"></a>Accessible downloadable files</h2>
<p>Any downloads you have on your website also need to be accessible. Many savvy companies today avoid this issue by adding all content directly to their website in HTML, which also simplifies navigation for mobile users. But if you have to include downloadable files, be sure to check them for accessibility before posting.</p>
<ul>
<li><a href="https://support.office.com/en-us/article/Accessibility-video-training-71572a1d-5656-4e01-8fce-53e35c3caaf4?ui=en-US&amp;rs=en-US&amp;ad=US">Microsoft Office: Accessibility Training</a></li>
<li><a href="http://www.peatworks.org/blog/2017/jun/pdf-accessible-format">Is PDF an Accessible Format?</a></li>
</ul>
<h2><a name="_3kahw3h2yx3x"></a>Plain language</h2>
<p>Simple, concise language will help all users navigate your site, including individuals with intellectual and learning disabilities, cognitive issues, traumatic brain injuries, and other disabilities.</p>
<ul>
<li><a href="http://www.peatworks.org/talentworks/resources/plain-language">Using Plain Language to Enhance eRecruiting </a></li>
</ul>
<h2><a name="_79xuw3a268w9"></a>Captions</h2>
<p>Include captions and transcripts for all media, such as online videos. As a bonus, adding captions has been proven to increase your SEO online and boost user engagement.</p>
<ul>
<li><a href="http://www.peatworks.org/blog/2017/feb/accessible-videos-are-your-friend">Accessible Videos Are Your Friend</a></li>
</ul>
<h1><a name="_73i9m79ip33"></a>Additional Resources:</h1>
<h2><a name="_f1nygcg1vpge"></a>Get Started</h2>
<ul>
<li><a href="http://www.peatworks.org/content/get-started">Why Accessible Technology Matters</a> - A quick introduction to what accessible technology is, and how people with disabilities navigate the web.</li>
<li><a href="http://www.peatworks.org/resources/policy/DOJsettlements">How is the Department of Justice Addressing Website and ICT Accessibility?</a> - In many cases, digital access to websites is required by law.</li>
<li><a href="https://webaim.org/intro/">WebAim: Introduction to Web Accessibility</a> - A great overview of how to get started with digital accessibility and <a href="/glossary#Universal_design" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;span class=&quot;skip-lexicon&quot;&gt;Universal design (UD)&lt;/span&gt; means &amp;quot;the design of products, environments, programs and services to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.&amp;quot; (UN Convention on the Rights of Persons with Disabilities (CRPD), Article 2). UD, a design process rather than a description of products, encompasses accessibility, going beyond it to address the widest possible user base. UD does not exclude assistive technologies where needed, as they are part of the usage environment that must be taken into account.&lt;/p&gt;
" title="universal design" class="lexicon-term">universal design</a>.</li>
<li><a href="https://www.w3.org/WAI/WCAG20/glance/">Web Content Accessibility Guidelines</a> (WCAG) - WCAG is the global standard for accessibility. The U.S. federal <a href="http://www.section508.gov">Section 508</a> standards and the European standard <a href="http://mandate376.standards.eu/standard">EN 301 549</a> are both aligned with WCAG.</li>
</ul>
<h2><a name="_4uj72dat6z30"></a>Test with Automated Accessibility Tools</h2>
<p>Many free automated tools can help you get started with identifying accessibility issues, though please note they are only a starting point! A knowledgeable person will always need to test the site manually, followed by user testing by people with disabilities.</p>
<ul>
<li><a href="https://www.deque.com/products/axe/">aXe Accessibility Checker </a></li>
<li><a href="https://tenon.io/">Tenon</a></li>
<li><a href="http://wave.webaim.org/">Web Accessibility Evaluation Tool (WAVE</a>)</li>
</ul>
<h2><a name="_y8p2ed3wl5rf"></a>Train and Hire Staff</h2>
<ul>
<li><a href="http://www.peatworks.org/content/knowledge-power-training-your-staff-accessible-technology-issues">Knowledge is Power: Training Your Staff on Accessible Technology Issues</a>&nbsp;- Find training tutorials, free accessibility tools, professional development resources, and more.</li>
<li><a href="https://askjan.org/media/webpages.html">SNAP Tool</a> - The Job Accommodation Network (JAN) provides this 15-step self-assessment tool to guide staff through the process of making a website accessible.</li>
<li><a href="http://a11yproject.com/resources.html#professional-help">A11Y Project: Professional Help</a> - The Accessibility Project maintains a list of accessibility consultants available to test and fix websites.</li>
</ul>
<h2><a name="_bkmdobxmi5pq"></a>Buy and Implement Accessible IT</h2>
<ul>
<li><a href="http://www.peatworks.org/techcheck">T</a><a href="http://www.peatworks.org/techcheck">echCheck</a> - This quick assessment tool provides a benchmarking &quot;snapshot&quot; of the current state of your technology, the accessibility goals you want to reach, and what steps you might take to achieve them.</li>
<li><a href="http://www.peatworks.org/Buy-IT">Buy IT!</a> - Learn best practices for ensuring that the technology you purchase is accessible.</li>
</ul>
<p><em>This tipsheet&nbsp;was created in partnership with the <a href="http://www.askearn.org/earns-primer-on-disability-inclusion/">Employer Assistance and Resource Network on Disability Inclusion (EARN).</a>&nbsp;</em></p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div><div class="field-item odd"><a href="/taxonomy/term/staff-training-awareness">Staff training &amp; awareness</a></div></div></div>Mon, 26 Feb 2018 20:49:47 +0000Corinne Weible1794 at http://www.peatworks.orgDigital Accessibility Basicshttp://www.peatworks.org/staff-training/digital-accessibility
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>Any digital content your company distributes, either internally or externally, needs to be accessible. Luckily, more and more vendors are paying attention to accessibility, and most provide good resources for learning how to create accessible content using their products. Although the following list is by no means exhaustive, resources for many popular workplace products appear below.</p>
<h1>Email</h1>
<p><a href="https://support.office.com/en-us/article/video-improve-email-accessibility-ebf3730a-18f8-4b57-81d1-730086231775">Microsoft Office: &ldquo;Improve Email Accessibility&rdquo; Video</a></p>
<p><a href="https://www.abilitynet.org.uk/news-blogs/creating-accessible-emails">Ability Net: Creating Accessible Emails</a></p>
<p><a href="https://blog.mailchimp.com/accessibility-in-email-marketing/">MailChimp: Accessibility in Email Marketing</a></p>
<p><a href="https://www.campaignmonitor.com/resources/guides/accessibility/">Campaign Monitor: Accessibility in Email Campaigns</a></p>
<h1>Documents</h1>
<p><a name="_gjdgxs"></a><a href="http://www.peatworks.org/content/implementing-accessibility">Implementing Accessibility: PDFs</a></p>
<ul>
<li>
<p>Factsheet:&nbsp;<a href="http://www.peatworks.org/content/pdf-accessibility-principles">PDF Accessibility Principles</a></p>
</li>
<li>
<p>​Blog:&nbsp;<a href="http://www.peatworks.org/blog/2017/jun/pdf-accessible-format">Is PDF an Accessible Format?</a></p>
</li>
<li>
<p>Webinar Recording:&nbsp;<a href="http://www.peatworks.org/content/webinars/2017/03/PDFs">Implementing Accessible Workplace Tech: PDF Accessibility</a></p>
</li>
</ul>
<p><a href="http://www.adobe.com/accessibility/resources.html">Adobe Acrobat Accessibility</a></p>
<p><a href="https://support.office.com/en-us/article/Accessibility-video-training-71572a1d-5656-4e01-8fce-53e35c3caaf4?ui=en-US&amp;rs=en-US&amp;ad=US">Microsoft Office Accessibility Training</a></p>
<p><a href="https://www.google.com/accessibility/products-features.html">Google Suite Accessibility</a></p>
<h1><a name="_ca9ytp8plehi"></a>Social Media</h1>
<p><a href="/staff-training/social-media">Social Media Accessibility</a></p>
<h1><a name="_rws5heijj9c7"></a>Multimedia</h1>
<p><a href="http://www.peatworks.org/content/implementing-accessibility">Implementing Accessibility: Videos</a></p>
<ul>
<li>Factsheet:&nbsp;<a href="http://www.peatworks.org/content/video-accessibility-principles">Video Accessibility Principles</a></li>
<li>Blog:&nbsp;<a href="http://www.peatworks.org/blog/2017/feb/accessible-videos-are-your-friend">Accessible Videos Are Your Friend</a></li>
<li>Webinar Recording:&nbsp;<a href="http://www.peatworks.org/content/webinars/2017/01/Videos">Implementing Accessible Workplace Tech: Videos and Accessibility</a></li>
</ul>
<p><a href="http://ncam.wgbh.org/invent_build/web_multimedia">National Center for Accessible Media: Guidelines and Tools</a></p>
<p><a href="https://www.w3.org/2008/06/video-notes">W3C: Multimedia Accessibility</a></p>
<p><a href="http://www.washington.edu/doit/Brochures/Technology/vid_sensory.html">University of Washington DO-IT Center Guide for Video and Multimedia Products</a></p>
<p><a href="http://www.adobe.com/accessibility/resources.html">Adobe Flash Accessibility</a></p>
<h1><a name="_4714u97ct2ow"></a>Content Management Systems (CMS)</h1>
<p>With today&rsquo;s CMS, adding website content is easier than ever. However, this also means that a wide range of people may be involved in uploading and editing your website content. While the average employee doesn&rsquo;t need to know the nuts and bolts of web accessibility, you&rsquo;ll want to ensure that anyone involved with the website understands how to upload accessible content (for example, by adding alternative text to an image so that people using screenreaders understand the meaning it conveys).</p>
<p><a href="/content/10-tips-accessible-website">10 Tips for An Accessible Website Tipsheet</a></p>
<p><a href="https://www.w3.org/standards/webdesign/accessibility">W3C: Accessibility: An Overview of the How,&nbsp;Why, What, and How of Web Accessibility</a></p>
<p><a href="http://www.afb.org/info/programs-and-services/afb-consulting-services/afb-accessibility-resources/how-to-make-your-blog-accessible/1235">How to Make Your Blog Accessible</a></p>
<p>Platform-Specific Guidance:</p>
<p><a href="https://en.support.wordpress.com/accessibility/">Wordpress Accessibility</a></p>
<p><a href="https://make.wordpress.org/accessibility/handbook/best-practices/">Make Wordpress Accessible</a></p>
<p><a href="https://www.drupal.org/about/features/accessibility">Drupal Accessibility</a></p>
<p><a href="https://docs.joomla.org/Portal:Accessibility">Joomla Accessibility</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="selenium-highlight">&nbsp;</div>
</div></div></div>Tue, 23 Jan 2018 21:01:58 +0000admin1761 at http://www.peatworks.orgImplementing Accessibilityhttp://www.peatworks.org/content/implementing-accessibility
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p><img alt="Gian Wild headshot" class="image-thumbnail" height="100" src="/sites/peatworks.org/files/styles/thumbnail/public/uploads/images/node/1398/accessozrye-15.jpg?itok=NFryyyvs" style="margin: 1px; float: right;" width="100" />As the digital gateway to your company or organization, your company&rsquo;s website is an ideal place to start when implementing accessible technology practices. But how do you actually get started? In this multi-part series,&nbsp;<strong>Gian&nbsp;Wild</strong>&nbsp;of&nbsp;<a href="http://www.accesssibilityoz.com/">AccessibilityOz</a>&nbsp;shares essential tips for ensuring that your&nbsp;eRecruiting&nbsp;materials and other website content are accessible to as many people as possible.&nbsp;</p>
<p><strong>Website Images</strong></p>
<ul>
<li>Factsheet:&nbsp;<a href="/content/accessibility-principles-website-images">Accessibility Principles for Website Images</a></li>
<li>Blog:&nbsp;<a href="/blog/2016/nov/implementing-accessible-workplace-tech-making-sure-alternative-text-isn%E2%80%99t-afterthought">Making Sure Alternative Text isn&rsquo;t an Afterthought</a></li>
<li>Webinar Recording:&nbsp;<a href="http://www.peatworks.org/content/webinars/2016/12/Images">Implementing Accessible Workplace Tech: Website&nbsp;Images</a></li>
</ul>
<p><strong>Website Tables</strong></p>
<ul>
<li>Factsheet:&nbsp;<a href="/content/table-accessibility-principles-websites">Table Accessibility Principles for Websites</a></li>
<li>Blog:&nbsp;<a href="/blog/2016/oct/implementing-accessible-workplace-tech-website-tables">Implementing Accessible Workplace Tech: Website Tables</a></li>
<li>Webinar Recording:&nbsp;<a href="/content/webinars/2016/11/Tables">Creating&nbsp;Accessible Tables&nbsp;for the Web</a></li>
</ul>
<p><strong>Website Videos</strong></p>
<ul>
<li>Factsheet:&nbsp;<a href="http://www.peatworks.org/content/video-accessibility-principles">Video Accessibility Principles</a></li>
<li>Blog:&nbsp;<a href="http://www.peatworks.org/blog/2017/feb/accessible-videos-are-your-friend">Accessible Videos Are Your Friend</a></li>
<li>Webinar Recording:&nbsp;<a href="http://www.peatworks.org/content/webinars/2017/01/Videos">Implementing Accessible Workplace Tech: Videos and Accessibility</a></li>
</ul>
<p><strong>Website&nbsp;PDFs</strong></p>
<ul>
<li>Factsheet:&nbsp;<a href="http://www.peatworks.org/content/pdf-accessibility-principles">PDF Accessibility Principles</a></li>
<li>​Blog:&nbsp;<a href="http://www.peatworks.org/blog/2017/jun/pdf-accessible-format">Is PDF an Accessible Format?</a></li>
<li>Webinar Recording:&nbsp;<a href="http://www.peatworks.org/content/webinars/2017/03/PDFs">Implementing Accessible Workplace Tech: PDF Accessibility</a></li>
</ul>
</div></div></div>Mon, 28 Aug 2017 16:13:48 +0000Corinne Weible1602 at http://www.peatworks.orgIs PDF an Accessible Format?http://www.peatworks.org/blog/2017/jun/pdf-accessible-format
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>Today, PDFs are a widespread form of document sharing. Invented in 1993 by <a href="http://www.adobe.com">Adobe</a>, PDFs helped spur a revolution toward paperless offices by allowing graphics-heavy files to retain their original look when shared.</p>
<p>But are PDFs accessible to everyone, including people with disabilities? In 2001, Adobe added the function to tag PDF contents for navigation with screen readers and other assistive technologies. Both <a href="http://www.adobe.com/accessibility/resources.html">Adobe</a> and the <a href="https://www.w3.org/TR/WCAG20-TECHS/pdf.html">W3C</a> provide detailed instructions on PDF accessibility. Unfortunately, making PDFs accessible is more complicated than many other formats, such as HTML. In practice, many PDFs have not been created correctly.</p>
<h2>Types of PDFs</h2>
<p>A PDF is either just a scanned image of a document or a combination of images and text that is tagged or untagged. Of these three types, only tagged PDFs are accessible.</p>
<h3>Scanned PDFs</h3>
<p>A scanned PDF is simply an image, which is inaccessible to all assistive technologies. With the use of Optical Character Recognition (OCR), it may be possible to access some text, but not reliably, as this commenter explains:</p>
<blockquote><p>I recently attended a training course, and we were required to read a number of articles prior to the commencement of the course. The articles were all sent as PDFs. I opened the first one, hoping that it had been formatted correctly so that it would be accessible to read. My screen reader announced: &quot;alert: empty document&quot;. I sighed in frustration, realizing the document was a scanned image of the text. I tried to use OCR software to recognize the text. Certain parts were readable, while other paragraphs contained text interspersed with symbols and numbers, making it impossible to read.</p>
</blockquote>
<h3>Untagged PDFs</h3>
<p>PDFs that display text and images are generally untagged by default, though it is possible to automatically tag some features when converting from programs like Word. While assistive technology users can technically access the content in untagged PDFs these files are often very difficult to interpret and use&mdash;to the point of inaccessibility:</p>
<blockquote><p>I&#39;d not been to this particular venue before, so I found a PDF version of the menu on their website. The screen reader presented the food items first, followed by a string of numbers, indicating prices for each item. This made it difficult to read the menu properly, and I had to rely on my friends to read it for me. People are usually happy to help, whether it be friends or restaurant staff, but when information isn&#39;t accessible, it takes away a person&#39;s choice and right to be independent.</p>
</blockquote>
<p>&nbsp;</p>
<blockquote><p>There is nothing as frustrating and time consuming as PDFs with tables which are not tagged. Imagine a programming tutorial in which first you read (hear) ten commands and only then you read their explanation starting from the first one. It happens when instead of a correct table one puts text in two columns. For a sighted person it looks fine, but for a screen reader user it is illegible.</p>
</blockquote>
<h3>Tagged PDFs</h3>
<p>A correctly tagged PDF is (mostly) accessible. It allows the user to read and understand the information in the intended order by adding content such as heading tags, alternative text for images, and table headings.</p>
<p>However, two major accessibility issues still complicate PDFs:</p>
<ol>
<li>Tagging is essential for accessibility, but it is a time-consuming and often buggy process compared to formats like HTML. A skilled PDF tagger requires training and time to appropriately do their job.</li>
<li>PDFs can be problematic for mobile users even when correctly tagged. Unlike HTML, they often don&rsquo;t resize or display properly, and assistive technologies don&rsquo;t always interpret tags appropriately on mobile devices.</li>
</ol>
<h2>Why do people use PDFs?</h2>
<p>In my line of work, I hear many excuses for only providing information in PDF format&mdash;and none of them are great arguments. &nbsp;</p>
<h3>Reason 1: It&rsquo;s easy</h3>
<p>PDFs are easy <strong>because the information is created in another application first</strong>. No one creates their PDF in Adobe Acrobat. Designers create the content in another format first, such as InDesign or Word&mdash;which makes providing another accessible format to your customers alongside a PDF extremely easy.</p>
<h3>Reason 2: Security</h3>
<p>People often create a PDF to lock information from editing or alteration. However, it&rsquo;s possible to break into a PDF and easy to recreate content from it. The best way to protect your content is also an accessibility best practice: in addition to the PDF, ensure that you publish that content to your website in HTML. Someone has to hack your server in order to change that!</p>
<h3>Reason 3: Brand</h3>
<p>The ability to display graphic-heavy content on items such as annual reports is hard to resist from a branding perspective. But in today&rsquo;s mobile-centric world, will people want to take the time to download a document in order to access the information? If you must provide a PDF, ensure that everyone has access by also providing the same information in HTML.</p>
<h3>Reason 4: Print versions</h3>
<p>Print versions are indeed popular when received in person. But today, a majority of people use smartphones at least some of the time and are more likely to prioritize receiving content in HTML that they can download quickly and easily. Providing these items as PDFs also cuts the cost of printing&mdash;and did you know that ink costs more than crude oil?</p>
<h2>So, what&rsquo;s the conclusion?</h2>
<p>Adobe is working to improve their accessibility features, but until PDFs are easier to tag and use on mobile devices, you should publish content in an alternative format (such as HTML or Word) alongside any PDF. And if you must provide PDFs without alternatives, be sure to train your staff to tag them properly with accessibility features. Providing professionally prepared, accessible content will make a big difference to your employees and potential hires, as this user notes:</p>
<blockquote><p>Whenever I come across a correctly tagged PDF document, I know that the company which released it hires really professional editors who do know their job.</p>
</blockquote>
<p>For more information techniques for creating accessible PDFs, check out the factsheet <a href="/content/pdf-accessibility-principles">PDF Accessibility Principles</a>, as well as these additional resources:</p>
<ul>
<li><a href="/content/webinars/2017/03/PDFs">Archived Webinar: PDF Accessibility</a></li>
<li><a href="https://blogs.adobe.com/accessibility/">Follow Adobe&rsquo;s blog for accessibility tips and updates</a></li>
</ul>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div></div></div><div class="field field-name-field-talentworks-resource-type field-type-taxonomy-term-reference field-label-above"><div class="field-label">Resource Icon:&nbsp;</div><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/document">Document</a></div></div></div>Thu, 29 Jun 2017 20:12:22 +0000Corinne Weible1504 at http://www.peatworks.orgPDF Accessibility Principleshttp://www.peatworks.org/content/pdf-accessibility-principles
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <h1>Accessibility Requirements</h1>
<p>Considering accessibility is important both when creating a PDF and when publishing a PDF on the internet.</p>
<h1>PDF Requirements</h1>
<p>Requirements for PDF accessibility include, but are not limited to:</p>
<ul>
<li>PDFs should always have an accessible alternative, such as HTML, Word, Text, or RTF;</li>
<li>PDFs must be tagged with accessibility features, such as:
<ul>
<li>Headings and text;</li>
<li>Alternative text for images;</li>
<li>Tables and lists;</li>
<li>Bookmarks; and</li>
<li>Links.</li>
</ul>
</li>
<li>PDF forms must be coded with accessibility techniques;</li>
<li>Page numbers must be specified for consistency across PDF readers;</li>
<li>The document title and language must be specified;</li>
<li>Bookmarks must be used in addition to headings to navigate content; and</li>
<li>All text must be searchable (i.e. the PDF is not a scanned image).</li>
</ul>
<h1>HTML Requirements</h1>
<p>Requirements for HTML accessibility include, but are not limited to:</p>
<ul>
<li>PDF should be published with an equivalent accessible alternative (HTML, Word, Text, or RTF);</li>
<li>The link to the alternative version must be placed adjacent to the PDF link;</li>
<li>PDF (and its alternative) link text must:
<ul>
<li>be purposeful, descriptive, and meaningful;</li>
<li>indicate the target is a PDF;</li>
<li>not use ASCII characters, ambiguous words (e.g. &lsquo;more&rsquo;, &lsquo;here&rsquo;), or device-dependent words (e.g. &lsquo;click&rsquo;); and</li>
<li>be consistently presented for all downloads.</li>
</ul>
</li>
</ul>
<h1>Impact on Users</h1>
<p>PDFs cannot be fully accessible yet because they lack all the features of HTML. For example, the tagging features within PDF are not available to screen readers on mobile and tablet devices. That&rsquo;s why an equivalent fully accessible document should accompany PDF.</p>
<p>That being said, developers can implement specific features within a PDF to optimize access for people with disabilities, especially for people who are blind or have low vision.</p>
<h1>PDF Accessibility Features</h1>
<h2>Tagging</h2>
<p>Tagging content elements within a PDF creates a logical document structure for assistive technologies to interpret. Having a logical structure means users can understand the reading order of the document and receive extra information about content, such as text, images, and tables.</p>
<p>Non-tagged PDFs are unreliable. They may cause assistive technology to encounter incorrect information, an incorrect reading order, or content that may not be read at all.</p>
<h3>How to set tags</h3>
<ol>
<li>Open the tags panel by selecting the &lsquo;Tags&rsquo; icon from the Navigation panel options on left-hand side (if not visible right-click to add to navigation panel).</li>
<li>From the Tags options, select &lsquo;Highlight Content&rsquo; to ensure selected tags in the document are highlight when selected.</li>
<li>Go through the tags and select those that contain no information. When you select a tag, it will be highlighted in the content section.</li>
<li>Right-click the relevant tag and select &lsquo;Delete Tag&rsquo;.</li>
<li>Re-order the tags so the reading order of the tags matches visual order. Where the order of the tags does not match the visual order, select the tag in the left-hand panel and drag it to its correct position.</li>
<li>For items that have been tagged incorrectly, in the Tags panel, right-click the tag you want to change, and select Properties. In the Tag tab, select the correct tag type from the dropdown list &lsquo;Type&rsquo;.</li>
<li>For documents that are untagged, tags can be added automatically. In the Tools panel, expand the Accessibility options and select &lsquo;Add Tags to Document&rsquo;. Tags will be added to the document. The progress indicator will show when this is completed.</li>
</ol>
<h3>Tags that can be used:</h3>
<ul>
<li>Text: Tags the selection as text.</li>
<li>Figure: Tags the selection as a figure. Text contained within a figure tag is defined as part of the image and is not read by screen readers.</li>
<li>Form Field: Tags the selection as a form field.</li>
<li>Figure/Caption: Tags a selected figure and caption as a single tag. Any text contained in the tag is defined as a caption. Useful for tagging photos and captions and preventing caption text from being incorrectly added to adjacent text blocks. Figures may require alternate text. Note: This option will delete the alternative text that was converted from Word.</li>
<li>Heading 1, Heading 2, Heading 3, Heading 4, etc: Tags the selection as a first, second, or third level heading tag. You can convert heading tags to bookmarks to help users navigate the document.</li>
<li>Table: Tags the selection as a table after the selection is analyzed to determine the location of headings, columns, and rows.</li>
<li>Cell: Tags the selection as a table or header cell. Use this option to merge cells that are incorrectly split.</li>
<li>Formula: Tags the selection as a formula. Because speech software may handle formula tags differently from normal text, you may want to add a description using alternate text.</li>
<li>Background: Tags the selection as a background element, or artifact, removing the item from the tag tree so that it doesn&rsquo;t appear in the reflowed document and isn&rsquo;t read by screen readers.</li>
<li>Table Editor: Automatically analyzes the selected table into cells and applies the appropriate tags. The table must be tagged as a table before you can use the Table Editor command on it.</li>
</ul>
<h2>Logical reading order</h2>
<p>Screen readers and other assistive technologies require a logical reading order or structure to move through the document in an order that is consistent with the meaning of the content.</p>
<h3>How to set the Reading Order</h3>
<ol>
<li>Select the &lsquo;Z&rsquo; icon from the Navigation panel options on left-hand side (if not visible right-click to add to navigation panel). The Reading Order panel will appear on the left-hand side.</li>
<li>In the Reading Order panel, right-click the name of the document and select &lsquo;Show reading order panel&rsquo;.</li>
<li>Change each of the following options to different colors:
<ul>
<li>Show page content order;</li>
<li>Show table cells;</li>
<li>Show tables and figures.</li>
</ul>
</li>
<li>Select any empty items in the Reading Order panel and right-click (non-content items such as decorative images should also be set to background).</li>
<li>Select the &lsquo;Tag as background&rsquo; option.</li>
<li>Drag and drop items on the left-hand side so the reading order matches the visual order.</li>
<li>Where the order does not match the visual order, select the appropriate item in the left-hand panel and drag it up or down to its correct position.</li>
</ol>
<h2>Text descriptions for all meaningful images (ALT text)</h2>
<p>Screen readers cannot interpret images such as graphs, diagrams, and scanned text. Alternative text communicates the image content or purpose to users of screen readers or users with a cognitive disability. Images of scanned text are inaccessible because assistive technologies cannot read or extract the words from them. Additionally, text is unable to reflow, which means the text is unable to wrap, or adjust on zoom. Scanned images are also not searchable when a user is looking for information in the document.</p>
<h3>How to set text descriptions for images</h3>
<ol>
<li>Select &lsquo;Content Editing&rsquo; in the &lsquo;Tools&rsquo; panel on the right-hand side and then &lsquo;Edit Text &amp; Images&rsquo;.</li>
<li>Click on the relevant image. The image will appear with a thin blue border.</li>
<li>In the &lsquo;Tools&rsquo; panel on the right-hand side, select &lsquo;Accessibility&rsquo; and then &lsquo;TouchUp Reading Order&rsquo;. A dialog box appears and the mouse changes.</li>
<li>Very carefully, click and drag to select the entire object. Ensure you select just outside the blue border. Ensure you do not include anything else in your selection.</li>
<li>When you have successfully selected an object, the buttons in the TouchUp Reading Order dialog box will become active.</li>
<li>Select Figure, which tags the selection as a figure. Text contained within a figure tag is defined as part of the image and is not read by screen readers. The image will appear in the Reading Order and will be highlighted on the page. <strong>Note</strong>: non-content and decorative images should be set as a Background.</li>
<li>Add alternative text</li>
</ol>
<h2>Tables that use the appropriate markup tags</h2>
<p>Data in a table must be presented in a way that preserves the relationship of content in different cells, even when users cannot see the table or the presentation format. Using table markup tags conveys to the screen reader the logical relationship between text, numbers, images, or other data that are represented in columns and rows of the table.</p>
<h3>How to code data tables</h3>
<ol>
<li>To determine whether data tables have coded table headers, you must open the Tags panel in the Navigation panel. Review the table headers and data cells to check they are correct.</li>
</ol>
<h4>Changing TD to TH</h4>
<ol start="2">
<li>Open the Tags panel in the Navigation panel. Expand the tags until the top row of the table is fully expanded.</li>
<li>Right-click the &lsquo;TD&rsquo; in the right-hand Tags panel that needs to be changed to a TH.</li>
<li>Select &lsquo;Properties&rsquo;.</li>
<li>In the dialog box, select &lsquo;Table Header Cell&rsquo; in the Type section.</li>
<li>The table cell will appear as a table header in the Tags panel in the Navigation panel.</li>
</ol>
<h4>Separating TH</h4>
<ol start="7">
<li>Sometimes several cells have merged to create one table header cell (TH). Open the Tags panel in the Navigation panel on the left-hand side. Expand the Table tags.</li>
<li>Right-click on the text of the merged TH cells. Select &lsquo;Delete Tag&rsquo;. Do not delete the TH tag.</li>
<li>Select the correct text in the document.</li>
<li>Right-click the relevant TH tag and select &lsquo;Create Tag from Selection&rsquo;. The tag is created.</li>
</ol>
<h2>Bookmarks and heading tags</h2>
<p>Bookmarks and heading tags allow users to locate content more easily by providing a hierarchical outline of the document content, rather than reading through many pages. This outline is especially useful to a person with a cognitive disability or a screen reader user. Bookmarks benefit all people by providing users with a mechanism to go directly to the page or section they want.</p>
<h3>How to code Bookmarks</h3>
<ol>
<li>Open the Bookmarks panel. Select the &lsquo;Bookmarks&rsquo; icon from the Navigation panel options on left-hand side (if not visible right-click to add to navigation panel). The Bookmarks panel will display on the left-hand side of the page.</li>
</ol>
<h4>Delete bookmarks</h4>
<ol start="2">
<li>Go through the bookmarks and select those that contain no information. When you select a bookmark, it will be highlighted in the content section.</li>
<li>Right-click the relevant tag and select &lsquo;Delete Bookmark(s)&rsquo;.</li>
</ol>
<h4>Re-order the bookmarks</h4>
<ol start="4">
<li>Drag and drop the bookmarks on the left-hand side so the bookmark order matches the heading order.</li>
<li>Where the order of the bookmarks does not match the heading order (see Figure below), select the bookmark in the left-hand panel and drag it to its correct position.</li>
</ol>
<h4>Adding bookmarks</h4>
<ol start="6">
<li>Sometimes headings do not have a corresponding bookmark.</li>
<li>Select the text that needs to become a bookmark.</li>
<li>Right-click the text and select &lsquo;Add Bookmark&rsquo;.</li>
<li>The bookmark will be created in the left-hand side.</li>
</ol>
<h4>Changing the nesting of bookmarks</h4>
<ol start="10">
<li>Sometimes the bookmark is added at the incorrect level. Bookmark nesting should mimic heading nesting.</li>
<li>Select the relevant bookmark.</li>
<li>Drag it up or down to the correct location.</li>
</ol>
<h2>Navigation</h2>
<p>Documents with additional navigational aids such as a table of contents provide an easy way for users to move around a document and scan pages for information. Page numbering provides a mechanism for users to orient themselves and find information and is consistent across different PDF readers.</p>
<h2>Document language</h2>
<p>By identifying the language of the document, assistive technologies and conventional user agents can render text more accurately. Screen readers can load the correct pronunciation rules, and visual browsers can display characters and scripts correctly. As a result, users with disabilities are better able to understand the content.</p>
<h3>How to set Document Language</h3>
<ol>
<li>Open the &lsquo;Advanced&rsquo; tab.&nbsp;</li>
<li>Under the &lsquo;Reading options&rsquo; section select the &lsquo;English&rsquo; option for &lsquo;Language&rsquo;.</li>
</ol>
<h3>Forms</h3>
<p>Providing name, role, state, and value information for all form components allows assistive technologies to gather information about and interact with form controls in a PDF. Form components may include text input fields, checkboxes, radio buttons, combo boxes, list boxes, and buttons. Without this information, assistive technology users may not be able to control form fields.<br />
In addition, screen readers can interpret form fields with tooltips to provide extra information.</p>
<h3>Security features</h3>
<p>Most PDF security settings are not compatible with assistive technologies and will prevent access to the document content. Text access for screen reader devices should always be enabled and/or security settings be set to &lsquo;no security&rsquo;.</p>
<h2>HTML</h2>
<h3>Accessible alternative</h3>
<p>Support for PDF accessibility features over various assistive technologies is varying and incomplete. Some features convey semantic meaning that is not supported by all assistive technologies (such as screen readers). For example, a tagged heading allows a user to navigate the sections of a document quickly, and a tagged paragraph identifies paragraph blocks.</p>
<p>These features are not yet consistently supported and therefore an equivalent accessible alternative (HTML, Word, Text or RTF) must also be published, with a link to the alternative next to the PDF link.</p>
<h3>Download link</h3>
<p>Users should be able to understand the purpose of each link so they can decide whether they want to follow the link.</p>
<ul>
<li>A list of links on a page can be provided by some assistive technology, and descriptive link text will help users select a link from this list.</li>
<li>Keyboard users are able to tab from link to link and understand the purpose of the link.</li>
<li>Descriptive link text helps inform users of the content to expect and the format it may be presented in (e.g. a downloadable document such as a PDF or Word document), enabling them to make an informed choice prior to selecting the link.</li>
</ul>
<p>&nbsp;</p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div></div></div>Thu, 22 Jun 2017 19:36:14 +0000Corinne Weible1550 at http://www.peatworks.orgImplementing Accessible Workplace Tech: PDF Accessibilityhttp://www.peatworks.org/content/webinars/2017/03/PDFs
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <div class="row">
<div class="col-sm-12 col-md-9">
<div class="webinar-description">
<p><a href="http://www.accessibilityoz.com">AccessibilityOz</a>&nbsp;CEO​ Gian Wild and Rob Haverty, Senior Program Manager at&nbsp;<a href="http://www.adobe.com">Adobe</a>&nbsp;explore the&nbsp;accessibility challenges related to&nbsp;PDFs. Topics include&nbsp;how to handle issues such as an existing archive of untagged&nbsp;PDFs&nbsp;on a website. Recording date:&nbsp;March 23, 2017.</p>
<div class="media_embed">
<iframe allowfullscreen="" frameborder="0" scrolling="no" src="https://www.youtube.com/embed/vkpJOyazLWw"></iframe></div>
<p>&nbsp;</p>
<p><a class="btn btn-default" href="/content/webinar-transcript-pdf-accessibility">Read Transcript</a></p>
<p><a class="btn btn-default" href="/sites/peatworks.org/files/uploads/attachments/node/1427/pdf_webinar_accessibilityoz_adobe_03232017_final.ppt" title="Download Presentation Slides">Download Presentation Slides</a></p>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="speaker-block">
<h2>Speakers:</h2>
<p><img alt="gian wild headshot" class="image-thumbnail" height="100" src="/sites/peatworks.org/files/styles/thumbnail/public/uploads/images/node/1427/accessozrye-15.jpg?itok=-gs9_H7k" width="100" /></p>
<p>Gian Wild is the CEO of <a href="https://www.accessibilityoz.com/">AccessibilityOz</a>. She has worked in accessibility industry since 1998. She spent six years contributing to the W3C Web Content Accessibility Guidelines, Version 2.0 and spoke at the United Nations Conference of State Parties on the importance of web accessibility.</p>
<p><img alt="Rob Haverty headshot" class="image-thumbnail" height="100" src="/sites/peatworks.org/files/styles/thumbnail/public/uploads/images/node/1427/robhaverty.jpg?itok=G7ei4KqO" width="100" /></p>
<p>Rob Haverty is Senior Program Manager, Accessibility at <a href="http://www.adobe.com">Adobe</a>. Rob holds over 20 years of accessibility experience, and previously worked at Microsoft, focusing on product development, technical evangelism, and policy and standards development.</p>
<p>&nbsp;</p>
</div>
</div>
</div>
</div></div></div><div class="field field-name-field-attachments field-type-file field-label-above"><div class="field-label">Attachments:&nbsp;</div><div class="field-items"><div class="field-item even"><span class="file"><img class="file-icon" alt="Office presentation icon" title="application/vnd.ms-powerpoint" src="/modules/file/icons/x-office-presentation.png" /> <a href="http://www.peatworks.org/sites/peatworks.org/files/uploads/attachments/node/1427/pdf_webinar_accessibilityoz_adobe_03232017_final.ppt" type="application/vnd.ms-powerpoint; length=24857088" title="pdf_webinar_accessibilityoz_adobe_03232017_final.ppt">Download Presentation Slides</a></span></div></div></div>Fri, 03 Feb 2017 18:39:14 +0000Corinne Weible1427 at http://www.peatworks.orgWebinar Transcript: Videos and Accessibilityhttp://www.peatworks.org/content/webinar-transcript-videos-and-accessibility
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <h2>Introduction</h2>
<p>Hello folks. Welcome to PEAT Talks. We&#39;re just a couple minutes from getting started. Thank you for your patience.</p>
<p>Hey folks, we&#39;re going to get started in just one minute.</p>
<p>Hello there and welcome to &quot;Implementing Accessible Workplace Tech: Videos and Accessibility.&quot; This is a webinar by the Partnership on Employment and Accessible Technology. My name is Josh Christianson and I&#39;m the project director for PEAT. I&#39;ll be introducing today&#39;s talk and moderating the question-and-answer later after the presentation.</p>
<p>Before we get started, I&#39;m going to quickly review a few logistics. You can see on the slide there we have some information up. And, just as a reminder, we will definitely have time for Q&amp;A. And I want to encourage participants to use the chat window there to insert any questions you have, and we will answer those at end of the session. I&#39;ll moderate that with Gian.</p>
<p>And you can also use the chat window if you&#39;re having any technical difficulties or you have questions, pertinent, relevant resources to share, we encourage you to chime in there and we will do our best as a team to respond to those and resolve any issues you have. You can download today&#39;s presentation if you&#39;re having any issues with the player. That&#39;s at our website, peatworks.org, P-E-A-T-W-O-R-K-S.O-R-G. And as with all of our webinars, an archived recording will be posted online following today&#39;s event.</p>
<p>Additionally, for any social media folks, we will be live tweeting today&#39;s event from our account @PEATworks. And feel free to join in there, chime in, follow along. You can see it all using the hashtag #PEATworks, P-E-A-T-W-O-R-K-S. Okay.</p>
<p>So, let&#39;s talk about the topic at hand today. Videos are super valuable, a super valuable form of media for any company or organization. They are increasingly used both internally for a company and externally on websites, and, as such, are a great place to begin when implementing accessible technology practices. There are many different video players used on websites, not all are equal in the eyes of accessibility. Consider even just accurate closed captioning on their videos for one example. But today we will talk about what makes a video player accessible, share best practices and some examples with you. Thanks for being here and please do chime in with questions as we go along in the chat box.</p>
<p>We are joined today by our resident expert, Gian Wild, the CEO of AccessibilityOz, way across the globe in Australia where it is some super early hour in the morning. She has worked in the accessibility industry since &#39;98. Gian spent six years contributing to the W3C Web Content Accessibility Guidelines version 2.0, <a href="/glossary#WCAG" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;a href=&quot;http://www.w3.org/TR/WCAG20/&quot;&gt;Web Content Accessibility Guidelines 2.0 (WCAG 2.0)&lt;/a&gt; is the international set of technical guidelines produced by the &lt;a href=&quot;http://www.w3.org/WAI/&quot;&gt;Web Accessibility Initiative (WAI)&lt;/a&gt; of the World Wide Web Consortium (W3C). WCAG 2.0 includes general guidance, with detailed information about solutions, and 3 levels of compliance.&lt;/p&gt;
" title="WCAG" class="lexicon-term">WCAG</a> 2.0, and has spoken at the United Nations Conference of State Parties on the importance of web accessibility. She has given countless number of well-received webinars and talks on a variety of accessibility issues, and we are pleased to have her here as part of the team. So, without further ado, I will turn it over to you Gian. Thanks for joining us today. Are you there, Gian? You might have to unmute. I hear something.</p>
<p>Sorry about that. Technical difficulties.</p>
<p>No problem. Welcome.</p>
<h2>Presentation</h2>
<p>Thanks, Josh. Can everyone hear me? Thank you. Yes, so, thank you very much, Josh, for that introduction. And it is -- well, it is six A.M. in the morning, so, you know, you might end up hearing some birds singing and things like that, or my dogs barking, because I&#39;m actually doing the webinar from my house. So, I do apologize for that. Probably the biggest deal is yesterday was Australia Day, so we all had a public holiday. So, there was a whole lot of partying and we had what we call Triple J Hottest 100, one of -- some of you might know it, where we count down the most popular songs by Australians.</p>
<p>And I can see that the captioner has a lot of difficulty with my accent. I do have a strong Australian accent. I&#39;ll try and slow it down. In fact, I remember running a presentation for Michigan State University, and someone coming up to me afterwards and saying, &quot;I just loved your presentation. I didn&#39;t listen to a word you said, but I love your accent.&quot; So, perhaps, you know, that&#39;s not the best feedback for me. But I hope you enjoy today&#39;s presentation. And thank you very much for being here and thank you very much, PEAT Works, for, you know, having this presentation. And we&#39;ve got a couple of videos at the end, which we&#39;re going to send you off with. And I&#39;m really happy to talk about any questions that you have.</p>
<p>Video accessibility can seem like a really scary subject, but it&#39;s really straightforward. It can be a little time-consuming at times, but it is straightforward to make this stuff accessible. So, I hope you leave this presentation feeling, you know, like you really have a handle on what it is that makes videos accessible. So, I&#39;m going to move the slides. So, talking about videos, by 2020, which is only three years away, 80 percent of Internet traffic will be streaming video content. And that&#39;s going to be a big deal for third-world countries and things like that, because they don&#39;t have really fast Internet. Unfortunately, it&#39;s probably going to be a problem for Australia as well because we don&#39;t have [inaudible] anyone.</p>
<p>78 percent of people watch a video or more every week. 85 percent of people watch video every single day. And if you have -- if you&#39;re putting content out to social media, and it consists of video, it actually generates 12 times more shares than social media images and text. And we&#39;ll talk a bit about social media and videos because accessibility is really important there. And it really increases, you know, the number of people that access your content. 64 percent of users are more likely to buy a product online after watching a video. And after watching the video, 65 percent of executives visit the marketer&#39;s website, and 39 percent actually call a video -- call a vendor. As I said, it&#39;s six o&#39;clock in the morning.</p>
<p>So, how do people with disabilities watch videos? Captions are for people who are hearing impaired, and they&#39;re text that you see at the bottom of the screen. And I apologize if this is all a bit basic for you guys, but we have to start at the start. So, captions, there&#39;s two types of captions, closed captions and open captions. Open captions are where the captions are burnt in to the video and you can&#39;t turn them off. Closed captions are where you can turn them on and off as you require.</p>
<p>So, captions are a direct -- a text version of the speech and the sound in the video. And they&#39;re different to subtitles, which are actually just a direct translation of speech from one language to another. So, captions are what you have for people who have hearing disabilities, whereas subtitles are for people who have English as a second language or are watching a video in a different language.</p>
<p>Audio descriptions, they&#39;re sometimes called video descriptions, are for people who are vision-impaired and can&#39;t see the screen. And what happens is they -- it actually describes the content that you see on the screen. So, that way you actually -- people who are vision-impaired can follow along. Now, there&#39;s two types of audio descriptions, there&#39;s standard audio descriptions and extended audio descriptions.</p>
<p>So, standard audio descriptions occur only during the natural pauses of the video. So, if you&#39;ve got a three-minute video, then audio described video is also going to be three minutes long. If it was an extended audio description, you actually have to pause the video at certain times to allow the &quot;descriptioner&quot; to describe what&#39;s going on. So, a three-minute video might end up being five or six minutes. So, it&#39;s something that varies, maybe one or two video players in the world that actually support audio descriptions. And I think only one of them supports extended audio descriptions.</p>
<p>Now, text transcripts are basically your captions added to your audio descriptions. So, a description of the speech and the sound are added to a description of what&#39;s happening on screen, and it&#39;s in text. And it&#39;s basically for everyone, especially people that might have trouble accessing the video or they don&#39;t want to watch it because they&#39;re in a loud place or they don&#39;t have good bandwidth or something like that, or they just want to grab the specific information. So, I know you&#39;ve all had the experience where there&#39;s an hour video and you just want that five minutes where it talks about the, you know, the thing that&#39;s of interest to you. The other thing about text transcript is they&#39;re for Google as well. Google can&#39;t actually search video, but it can search text transcripts. So, it&#39;s a really good way of increasing your Google stats.</p>
<p>So, video accessibility really improves absolutely everything. So, it really can increase the use of your video and how popular it is. So, a page that has a video with a transcript versus a page with a video without a transcript has 16 percent more revenue. So, that&#39;s quite a lot. When you think about search engine optimization, you can usually get a two- or three-percent increase, and 16 percent is huge. Google can search captions and transcripts, but it can&#39;t search the video. And the interesting thing that the BBC found was that 80 percent of people who use captions are not deaf or hard of hearing. They&#39;re actually people who decide to turn captions because of, you know, their own requirements.</p>
<p>So, I know, for example, that if a video that&#39;s posted on Facebook doesn&#39;t have captions, then I won&#39;t watch it because I&#39;m usually looking at Facebook while I&#39;m in the taxi or waiting for an airplane, or, you know, between the ads in a TV show. And, you know, if there&#39;s no captions, I&#39;m not going to turn the audio on, and so, you know, I won&#39;t look at that video. So that&#39;s a huge percentage of people that use captions that actually don&#39;t need them for accessibility. Completion of a video actually doubles when the video has captions, and that&#39;s, you know, borne out by, you know, how the public use them as well.</p>
<p>So, let&#39;s talk about web accessibility requirements for video. There is an act called the 21<sup>st</sup> Century Communications and Video Accessibility Act, and it requires that all television broadcasts be captioned. However, it only requires that 50 hours per quarter of television requires video descriptions or audio descriptions for each of the top four broadcasters. So, it&#39;s not really equal, the accessibility that&#39;s provided to the deaf versus people with vision impairments.</p>
<p>And it&#39;s actually quite interesting because there&#39;s been a lot of litigation, especially by the National Federation for the Blind, around web accessibility. But the other big area of litigation in web accessibility is by the National Association for the Deaf. So, the National Federation for the Blind very much talks about the accessibility of websites, whereas the National Association of the Deaf talks about the inaccessibility of videos. And then, of course, the important thing is that if that captioned television broadcast to the web, it must actually be captioned there as well.</p>
<p>So, the other thing to think about when it comes to the web is, of course, the W3C Web Content Accessibility Guidelines. And so there are three levels for WCAG, which is the Web Content Accessibility Guidelines. And we use version two, so we call it WCAG 2. There are three levels, A, AA, and AAA. And A is the minimum level. Captions are required for prerecorded media. So, any videos that are on your site that&#39;s not streaming, they require captions. At AA, you are required to provide audio descriptions. However, if we move down a level, if you don&#39;t have audio descriptions, you must have a transcript at level A. But if you&#39;re meeting level A, you can meet level A by providing captions and a transcript. But if you&#39;re meeting AA, you have to provide captions and an audio description. And at AA, you also need to provide captions for streaming content. I would say that you should always provide a transcript as well. Transcripts are incredibly useful for a number of reasons, and they&#39;re not particularly hard to do once you&#39;ve got your captions and your audio descriptions because you just add them together.</p>
<p>Let&#39;s talk about the lawsuits regarding video accessibility. The first one was the National Association of the Deaf versus Netflix. They brought a class action lawsuit regarding the lack of closed captioning. Now, Netflix argued in court that they couldn&#39;t provide captions for the videos because that would actually be breaching copyright requirements. And the judge decided that that was a bit of ridiculous defense and ordered Netflix to pay $795,000 in penalties. And they were required to provide captions on all programs within two years, which they did. So, that&#39;s good.</p>
<p>Now, about six months after they achieved that, they released a TV series called &quot;Daredevil,&quot; which is about a blind superhero. And it was presented without audio descriptions. And there was a bit of an uproar in the accessibility community that you would, you know, present a blind superhero without providing an accessible way for people who are vision-impaired or blind to access that content. And to their credit, they actually put audio descriptions up on the site -- up on the TV series within two to three days. And their audio descriptions are absolutely excellent. So, we&#39;ll be adding a link at the end of this, and I strongly encourage you to actually go listen to those audio descriptions, because they are really, really good.</p>
<p>The next lawsuit that was of interest is the U.S. Equal Opportunity Commission versus FedEx. So, EEOC filed a lawsuit against FedEx for discriminating against deaf and hear of hearing applicants. And they have quite a lot of staff who, you know, unload boxes and things like that are deaf or hard of hearing. However, they didn&#39;t provide -- FedEx didn&#39;t provide ASL or closed captions for any orientation videos, tour videos, staff meetings, safety seminars, and performance meetings. Now, the lawsuit is ongoing, and the National Association for the Deaf actually joined in 2015. So, that&#39;s going to be interesting, the result of that.</p>
<p>A couple years ago, the National Association for the Deaf brought a lawsuit against both Harvard and MIT arguing that not all videos were captioned, but also that some were captioned inaccurately, and they were captioned inaccurately because people were using the YouTube auto-caption feature. And I&#39;ll talk a little bit about how you can use that but you can&#39;t rely on that for providing your content. The U.S. Department of Justice actually got involved last year. Both Harvard and MIT requested the motion be dismissed and Department of Justice argued that it shouldn&#39;t be. And so the lawsuit is ongoing.</p>
<p>This one -- this particular -- well, it wasn&#39;t a lawsuit but it was a complaint, against the South Carolina Technical College System was really, really interesting. This happened a few years back. But it&#39;s the only lawsuit that actually references the inaccessibility of the video player as a problem when providing accessible content. So, the U.S. Department of Education&#39;s Office of Civil Rights, so, OCR, reviewed South Carolina Technical College System because they received a complaint. And they found &quot;Additionally, some videos were without proper labeling, keyboard control, or captioning.&quot; And so that -- even though it mentions captioning, proper labeling and keyboard control is all about accessibility of the video player.</p>
<p>So, how do you actually make your video content accessible? So, just because you have to have cat pictures -- I don&#39;t have a cat video, but I have cat pictures. That&#39;s my cat taking a nap. There&#39;s basically seven steps to making your content accessible. So, no flickering accessible content, accessible player, no auto-play, captions, video descriptions or audio descriptions, and a transcript.</p>
<p>So, flickering content can actually trigger epileptic attacks and migraines in some people. And I actually get migraines, and I can get them triggered by flickering content. So, flickering content -- excuse me -- is something that you need to be aware of in terms of videos. And I&#39;ve had migraines triggered three or four times by watching videos that have some kind of flickering content. So, the rules are that flashing images, especially those with red, should not flicker faster than three times per second. If the image doesn&#39;t have red, it still should not flicker faster than five times per second. And flashing images should not be displayed for a total duration of more than two seconds. And stripes, whirls, and concentric circles should not take up a large part of the screen.</p>
<p>So, there&#39;s this case of what is called Pok&eacute;mon shock, where, in Japan, back in 1997, they had a Pok&eacute;mon episode and it contained about six seconds of flashing content. And as a result, up to 700 people were actually hospitalized or taken to hospital because they had some form of epileptic attack. And some of the symptoms were things like vomiting, [indiscernible], dizziness, loss of eyesight, and one person actually had to stay in hospital for almost two weeks. So, you know, it can be a really big deal. It&#39;s something that you do need to worry about. When it comes to WCAG 2, meeting the flickering requirement or the no flickering requirement is what we call a critical requirement. There&#39;s four critical requirements in WCAG 2, and flickering or no flickering is one of them.</p>
<p>Number two, accessible content. So, make sure that you use high contrast colors for any text overlaying video content, and don&#39;t convey information with color alone. So, you know, don&#39;t show a map with the public tennis courts available in green and the private tennis courts available in blue. And avoid patterned backgrounds. So, this is an example of a problem with color contrast. You can see here that the caption is &quot;Pope&#39;s Eye, Port Phillip Heads Marine National Park,&quot; and it&#39;s white text but the background is a very light green, and so it&#39;s quite difficult to read.</p>
<p>Accessible video player, so, look at your video player and make sure that it meets these requirements. It must have adequate keyboard access. So, it must be able to be operated by the keyboard. So, one of the best things that you can do is tab through your page and see if you can actually play, pause, change the volume using just the keyboard. Sufficient control and operation, so this is about making sure there are labels and things for people who use screen readers, and then implementing those things properly. So, that&#39;s more the developer&#39;s side. Color contrast is important in the video player itself, and don&#39;t rely on color alone. So, you might see that knowing when the closed captions are turned on or off is indicated by a color. So, if they&#39;re on, their little &quot;CC&quot; button is white, and if they&#39;re off, the little &quot;CC&quot; button is gray, and that&#39;s what I mean by relying on color alone.</p>
<p>So, this is the YouTube video. And we spent -- about five years ago, we spent some time with a web development firm working on the YouTube video player to make it accessible. And about two years later we tested it again and it was actually a keyboard trap. So, what that means is that the keyboard gets trapped within the video. You can&#39;t go past the video. And as a result, to actually, you know, escape a keyboard trap, you need to close the site and close the browser and start again. So, it&#39;s a really big accessibility problem. It&#39;s another critical accessibility problem.</p>
<p>So, this is the thing about video players is that if you do come across a video player that claims to be accessible, firstly, just make sure that it is accessible, but secondly, find out how often they actually test their video player for accessibility, because you&#39;ll find that a change in -- an update to a browser or an operating system or something like that will render all the work inaccurate and basically mean that that video player is no longer accessible.</p>
<p>So, let&#39;s have a little talk about YouTube. You think that YouTube was accessible. This is one of the reasons why it&#39;s not accessible. So, when you&#39;re tabbing through -- well, and this is also the order that a screen reader will read the content -- it&#39;s important that the order of the content on the screen matches the keyboard order as well as the screen reader order, because someone using a keyboard is -- they often can see the screen, so they expect it to follow a natural pattern, left to right, top to bottom. And it&#39;s important that screen readers follow the right visual order as well because sometimes people with cognitive disabilities actually use screen readers. So, they also are looking at the page, and if it&#39;s jumping the order of the content that gets read, it&#39;s jumping around a lot, then that&#39;s going to be confusing to them.</p>
<p>So, when you tab into the YouTube page, the first thing you get to is the search bar, which is in the middle at the top of the page. And then if you tab again, you actually go backwards to the YouTube menu and the YouTube logo. And the next tab takes you to the very right-hand side of the page, which has the upload, notifications, and, you know, your account. Then you go to what are basically I suppose section links, which is &quot;Home,&quot; &quot;Pending,&quot; and &quot;Subscriptions,&quot; and then you jump back to the left-hand side to the navigation. So, you can see that would be very confusing. And also the keyboard focus indicator, so what basically the indicator that shows where you are when you tab through things, that&#39;s not very good on YouTube. So, not only do you not follow a regular order but you can&#39;t tell where it is that your keyboard is.</p>
<p>I just see a chat that says &quot;Seems frozen.&quot; Has everyone got YouTube with a &quot;no keyboard focus indicator&quot; on the screen? Okay. Great. Okay. So, this is another thing, one of the things, of course, we all like to do is skip the ads on videos. Now, it is keyboard accessible, however it doesn&#39;t have a keyboard focus indicator. So, the user doesn&#39;t know when they are actually on that &quot;Skip Ad&quot; link, and as a result that&#39;s going to be very difficult for people using keyboard only to operate.</p>
<p>The fourth thing to worry about is the lack of -- you need to make sure that a video doesn&#39;t automatically play. We call this auto-play. Now, this is something that YouTube does by default. So, you&#39;ll find that if you go to a page with video, the video automatically plays. But the other problem is that once the video is finished, it will automatically play the next video. Now, in order to turn off that auto-play in the next video, you have to tab through the entire video and content to get to the auto-play button in the top right-hand corner, but it doesn&#39;t have a keyboard focus indicator. So, it is really hard to actually do if you are reliant entirely on a keyboard. Now, the problem with auto-play is that, you know, the video and the audio continues over the top of the screen reader. And so auto-play is actually another one of those criteria that are absolutely critical under WCAG 2.</p>
<p>Number five, captions. So, there are a couple of rules about captions. They should be synchronized to appear at the same time as they -- as the sounds they&#39;re captioning. They should include all important audio information. It&#39;s not just about speech, it&#39;s also about the sounds in the video, the relevant sounds. So, you know, &quot;car backfiring&quot; if it&#39;s relevant, that kind of stuff. There needs to be sufficient color contrast between the background and the caption text. And they must appear on the screen for enough time to be actually read. You need to attribute speech to a particular speaker if there are multiple people on the page. And you need to identify all changes in speaker. You also should not contain important information that&#39;s not included in the video.</p>
<p>So, this is the YouTube auto-captioning, which has a few problems. So, basically, the person is saying, &quot;Aw, man, just hold the phone up in the air and let me hear the ocean.&quot; And the YouTube automatic captioning has interpreted it as, &quot;Aw, Reg, just hold up -- hold the phone up in the end of idiom.&quot; So, it can be quite inaccurate. That doesn&#39;t mean that you can&#39;t use it. When it comes to captioning a video, what you can do is upload your video to YouTube, request that it auto-captions, and then you can actually download that caption file and modify it so that it&#39;s correct, and then re-upload it. So, you can use it to do things like time stamp, to make sure that the captions show up at the right time, but you can&#39;t rely on it entirely. It is something that you need to check.</p>
<p>Number six, audio descriptions, these are for people who are vision-impaired. Adequate -- they need to adequately describe all important visual content. So, remember, it&#39;s only important visual content. If someone&#39;s wearing a red t-shirt is only important if that person wearing a red t-shirt is relevant to, you know, the video in some way. It should not impact on other speech or important sounds. And if there&#39;s a lot of speech in the video or a lot of sounds in the video, then you might need to provide extended audio descriptions where you pause the video and add those audio descriptions in.</p>
<p>The audio descriptions need to be distinguishable from the audio content in the video itself, and you&#39;ll see that or you&#39;ll hear that when you look at the Daredevil audio descriptions, if you have a chance to look at them later. You can definitely tell what is an audio description versus what is just the speech or the sounds in the video. And it also needs to contain only information that&#39;s included in the video and nothing else.</p>
<p>Number seven, you need to have transcripts. Transcripts need to be in an accessible format. So, you can&#39;t have, say, a PDF version of a transcript unless it&#39;s tagged properly. In the transcript, just like captions, you need to identify the speakers and include all speech. You also need to include relevant information about the speech. So, if it&#39;s relevant that someone is yelling, then you need to say that they&#39;re yelling in the transcript. You need to provide all non-speech audio information and any textual or graphical information.</p>
<p>Now, what I would suggest when it comes to creating a video is that you go through, create the captions, you write down what you&#39;re going to use as the audio descriptions, and you have to speak them aloud and add them as a second audio track. But then the text transcript is basically the captions added to the text version of the audio descriptions. So, it&#39;s really easy to do once you&#39;ve done captions and audio descriptions.</p>
<p>The other thing that you need to think about is include a description of on-screen events and important changes of scene, and also you need to indicate the end of the transcript if it&#39;s on the same page as the video, or provide a message to return to the video if it&#39;s on another page. Now, unfortunately, products like YouTube don&#39;t have a standard way of providing transcripts. So, what I would suggest is that you actually have a standard, you know, like your first comment on a YouTube video or something like that is a link to your transcript. So, as long as you&#39;re consistent within your organization, that should be fine.</p>
<p>Now, we can&#39;t show you the video, unfortunately, the videos that I had planned, but these are definitely worth having a look at. So, I&#39;ll give you the URLs for them. But I -- and it&#39;s a short presentation, but I always have about 20 minutes for questions when I run this presentation. So, I want to make sure that we left enough time. So, please let me know if you have any questions and I&#39;ll be happy to answer them.</p>
<p>Awesome. Thank you, Gian. Folks, if you have questions around accessibility of videos, you want to put them in the chat window. We will get to those. While we&#39;re waiting for some to come in, I want to remind people that this series is really just a part of a series of webinars that Gian has been delivering for PEAT. Two of the earlier webinars discussed, one was about tables and how to make those accessible, and the other was about images and how to make those accessible. And you can find both of those archived on the PEAT Works website. Gian, I see we have a question there from Alice. Would you like to address that?</p>
<p>Yeah, absolutely. Thanks, Alice. In terms of tools, I would suggest using the YouTube auto-captioning feature to create the captions, and then download it, modify it, and upload it again. And that doesn&#39;t mean that you have to have the video on YouTube permanently, but that is definitely the easiest way to add captions. The other tool that I recommend is Adobe Premier for developing the audio descriptions. It&#39;s very, very easy to develop the audio descriptions when you&#39;re using Premier. Unfortunately, it is something that costs money.</p>
<p>Annette, &quot;Is there any additional concerns for training videos, for internal training as well as external training on products?&quot; I presume, Annette, that you are talking about, you know, whether you need to meet accessibility requirements for internal training. And the answer is yes, and that&#39;s definitely what the FedEx lawsuit is about. Whether the content is for a select group of people or for the general public, it all needs to be accessible.</p>
<p>Now, in terms of risk management, you can definitely -- you know, you need to prioritize which is more important, because obviously you can&#39;t click your fingers and make stuff accessible tomorrow. So, I would suggest that you, without knowing your specific situation, that you would actually focus on the external training on products because that&#39;s something that you know is going to reach more people and is maybe more important than internal training. But I can&#39;t speak to your specific situation. Annette, let me know if there&#39;s anything else that you would like me to talk about regarding that.</p>
<p>Joanne would like me to recommend a video player that is accessible. This is where we run into a little bit of problems. I run AccessibilityOz, and we actually have an accessible video player that&#39;s been out for three to four years.</p>
<p>And Gian, that&#39;s totally fine. It&#39;s totally fine. The question came up. I would plug it. It&#39;s a good product. And we&#39;re not only putting out AccessibilityOz products, so, by all means, you can share that briefly and we&#39;ll keep going.</p>
<p>Excellent. So, Oz Player, you know, full keyboard accessibility, supports captions and audio descriptions and things like that. It is actually free for not-for-profits that have an annual revenue of under a million U.S. dollars a year, or for websites that have less than ten videos. And there&#39;s an Oz Player Code Generator on our website where you just plug in the URL and you can, you know, use YouTube videos and things like that. Or you can host a video on your own site. So, that&#39;s what I would definitely recommend, because that&#39;s what we work on. If it&#39;s not -- if you don&#39;t fit into those two categories, then it&#39;s two-thousand dollars license a year for an organization. And California community colleges all use Oz Player. So, it is used a lot.</p>
<p>The other one that is fully accessible is Able Player which is created by a guy, Terrill &quot;Temp-something.&quot; My only [indiscernible] I mentioned earlier before is that you need to test your video players very regularly because, you know, if something changes and all of a sudden your captions show up twice, you might have browser updates or something like that. And we test every couple of weeks. So, we actually did do a video player analysis of about 28 different video players. And I might get PEAT Works to send through a link to that, if that&#39;s all right. And we talk about the accessibility of it as well as the screen reader accessibility of all these different video players. So, yeah, we&#39;ll send that out to you as well so you can have a look at exactly what is inaccessible in your own video players.</p>
<p>Thank you.</p>
<p>Now, Malcolm --.</p>
<p>Before we move on to other questions, I just want to address the captioning people. I apologize, Gian and to our participants, that there is a lot of gaps in the captioning. We will definitely have a clean transcript that we will post that will be used for the upload webinar version that&#39;s going to be on our website. So, folks can wait for that. And you can get the PowerPoint now and you&#39;ll be able to get a clean version of the captioning, along with the archived video, in the future. But moving on, Renee had a question there, Gian, that says, &quot;What is the current status of requirements for audio descriptions in media platforms like Netflix?&quot;Yes. So, just before I answer that, I just want to say that there is going to be a stat sheet that will be released in a couple -- a week or two, I believe, and a blog post that will go into these things in more detail. I don&#39;t know, Josh, if you want to talk about that briefly.</p>
<p>Sure. So, all of the series of webinars we&#39;ve been having Gian do, as I mentioned, we had one on tables earlier, we had one on images, we&#39;re going to do one on PDFs. She is also writing, with PEAT, a blog about those, so, kind of a brief overview, as well as a fact sheet, which is a real handy kind of how-to to-do that goes over the nuts and bolts and steps of all of what she&#39;s talking about today. So, in addition to the webinar, you&#39;ll have some very useful information that you can share and use yourself, and those will come out shortly.</p>
<p>Okay. So, Renee, interestingly, the current status of requirements for audio descriptions in media like Netflix is a little bit up in the air. So, WCAG 2, the Web Content Accessibility Guidelines is seen as the de facto standard in the U.S. Basically, what that means is that organizations that have websites, such as Netflix, need to meet AA requirements. And so when the OCR has been involved, or Department of Justice, regarding a, you know, a lawsuit against a website, they have always required compliance with the Web Content Accessibility Guidelines Level AA.</p>
<p>So, what that means is that the current status of requirements for Netflix is captions for all of their content, captions for all their live streaming content, which I [indiscernible] use it with live streaming, and audio descriptions for all their content. Now, unfortunately, some things are audio described in Netflix, but by no definition is everything audio described. So there are -- they do not meet WCAG 2. They are behind the times, but, as I&#39;ve said earlier, there&#39;s a real difference between people meeting requirements regarding captioning versus people meeting requirements via audio descriptions.</p>
<p>Jonathan Rowlands [ph] asks &quot;Are you aware of any video players that support audio video descriptions on separate tracks?&quot; I believe that Oz Player is the only one that supports audio descriptions as a separate track. If anyone has -- disagrees with me, please let me know, because we&#39;d like to add that to the video player list. But yes, in all the testing that we&#39;ve done, we didn&#39;t find anything that, you know, separated the tracks.</p>
<p>Joseph, &quot;Is there any reason why we should avoid embedding captions into videos, open captions versus closed captions that can be toggled on or off via video player?&quot; No, there&#39;s really no reason why you wouldn&#39;t burn your captions in. I know there are some people that find captions distracting and they want to be able to turn it off, but, you know, you&#39;ve got to weigh that up against the people that would really use them but don&#39;t necessarily know how to turn them on. Of course, if you have those open captions, you need to be really -- you need to be careful about what they&#39;re overlaying. So, make sure they don&#39;t overlay any important content. But I think open captions are definitely a good idea.</p>
<p>&quot;Can the transcript be used in place of closed captioning,&quot; asked by Suzette. Great name, Suzette. No, it can&#39;t. So, WCAG Level A requires both the transcripts and the captions. So, you really can&#39;t rely just on transcript. Of course, it may -- providing a transcript and not closed captioning may mean that you&#39;re less liable to a complaint than if you didn&#39;t rely on anything at all just by the fact that people can access some of your video content by looking at the transcripts. But there&#39;s -- yeah, definitely, it is very clear that you need transcripts and captions.</p>
<p>&quot;Any live audio description companies, like live captioning companies?&quot; That is a great question, Renee and Ken Dobson [ph], which is a great surname. I don&#39;t know of any. I will actually do a bit of research and I&#39;ll make sure I send the answer out. I&#39;ll get Josh to send the answer out when he sends out the link to the video. Thank you, Annette Welsh [ph], for saying that, usually your accent, that she enjoys listening and can understand completely.</p>
<p>&quot;Is there any guidelines for making notes of accents?&quot; That&#39;s another great question. What I would say to that is that if it was relevant to the video, then, yes, you should in your caption and transcript reference the accent. So, for example, if there was a video of me -- back to that situation that I told you before where I spoke to a group of people and someone came up afterwards and commented on how great my accent was, then you&#39;d want to do a little thing in the caption that says, you know, and have whatever I&#39;m speaking about and then note &quot;Strong Australian Accent,&quot; because then they would have the information to understand the comment that comes later. But if it&#39;s not really relevant to the video, then you don&#39;t need to include it.</p>
<p>In terms of transcripts, captions, audio descriptions, if you&#39;re not sure if it should be included, then just think about how relevant it is to the video. Is it something that if you were describing the video to someone else because they couldn&#39;t view it, would you mention it? And if the answer is yes, then it needs to be in the transcript, captions, or audio descriptions.</p>
<p>JW Player, in terms of accessibility compliance -- let me just pull up my results. I will -- JW Player. So, just so you know, this video comparison looks at YouTube, embedded YouTube, Vimeo, embedded Vimeo, PayPal, Flow Project, American Federation for the Blind, Able Player, ACORN, E-standards, Cultura, Brightcove, RAMP, Panopto, MAGpie, Video.js, Plyr -- as in P-L-Y-R -- Blackboard, and JW Player.</p>
<p>JW Player failed, uses color alone in their controls, the color contrast is in the video itself is not sufficient, and the video is not keyboard accessible, which is not a good thing. And it doesn&#39;t have a highly visible keyboard focus indicator. It also is completely inaccessible to screen readers. It failed absolutely every single screen reader requirement, including labeling the controls, determining if the button status is on or off, announcing the volume while changing, announcing the current time of current played movie, being able to fast forward or rewind, turning on captions and subtitles. So, it failed all of them. So, it was actually one of the lowest -- in fact, I think it was the lowest at 30 percent accessible. But, as I said, I&#39;ll put this up -- I&#39;ll send this out.</p>
<p>Jeremy Smith [ph] asks, &quot;What is the best approach if you cannot control the player the user is using?&quot; Well, that&#39;s the thing is that when I&#39;m talking about players, I&#39;m talking about the embedded players that you have on your website. So, you should be able to control that. So, I presume you mean that, you know, if you&#39;re locked into a certain player, what can you do. It&#39;s -- yeah, that&#39;s a good question. I would -- we&#39;re working with some organizations to see if they can overlay Oz Player on top of their, you know, CDM, you know, Cultural or Brightcove or things like that. So, that might be one thing that can be done.</p>
<p>I would suggest making sure that you have a very obvious text transcript and also having a very clear way for users to tell you if they can&#39;t use the player. And if you know the things that are inaccessible about the video player, then I suggest that you contact that video player manufacturer and say, &quot;These are the things we want you to fix. And, you know, we&#39;re thinking of looking elsewhere&quot; -- whether you are or not doesn&rsquo;t matter, but you can definitely tell them that -- &quot;if you don&#39;t address these things, because they&#39;re mandatory requirements for us.&quot;</p>
<p>In terms of Hillary Tupnam&#39;s [ph] question, &quot;What source am I using to rate players,&quot; we did the testing ourselves. You can go through -- we actually have 12 items that we tested against. And we tested it in a variety of operating systems and browsers as well as mobile operating systems and browsers. And so keyboard accessibility we tested, you know, on Chrome Windows 8 -- sorry, Windows 8 and 10, i11, IE, Edge Windows 8 and 10, Firefox Windows 8 and 10, Safari on Mac, Firefox on Mac, as well as, you know, iPhone Safari, iPad Safari, Samsung Galaxy Chrome, Samsung Galaxy Tab Chrome. And if it failed any one of them, then it was a fail. So, we were very stringent about this testing.</p>
<p>And then the second part was the screen reader testing. And we actually got a very experienced screen reader tester to do the screen reader testing, and he actually did the screen reader testing for the Amazon Kindle. And so, once again, if it failed one thing, he tested screen readers on mobile devices as well as a variety of different [indiscernible] NDDH [ph] and Window, i, on the various different desktop operating systems and browsers, and, of course, the voiceover and, you know, all the mobile screen readers. And if it failed one of those things, then we marked it as a fail.</p>
<p>Now, luckily for us, Oz Player did come out on top, but it only got 81 percent. It failed three things, which is something that we&#39;re going to address. So, you know, we&#39;d love to get other people to do this testing because we know that it does look biased. But, yeah, it was a lot of work. And yes, Hilary, I will definitely share the results. It&#39;s actually up on our website. In fact, I might see if I can get you access now. I don&#39;t know, Josh, if you want to just take over for a second while I try and find the document.</p>
<p>Sure thing. And I love the interaction. Thank you for answering in rapid fire all of those questions, Gian. And thank you folks for chiming in. We do just have a couple of quick minutes before we wrap up, so I know she&#39;s looking up that information and going to type it in. I will start to give you a little bit. There, she put the URL in there. Thank you. I believe that was our last question we have at the moment. Is that correct, Gian? Yes. I just -- it requires a password.</p>
<p>Okay.</p>
<p>So, I&#39;m just going to put the password in as well.</p>
<p>Okay. Thank you for sharing that.</p>
<p>There you go.</p>
<h2>Conclusion</h2>
<p>There it is. Super. Thank you for sharing that. And folks, thanks for your question and your resources. I think we&#39;ll wrap up there. I don&#39;t see any more questions coming in. I want to remind folks that we&#39;ve got one more lined up in this series with Gian. I see how popular it was, and hope people are finding this useful. We&#39;ve got one coming in March 23<sup>rd</sup>. We&#39;re going to be discussing PDFs, which are widely used and have a lot of accessibility issues. So, Gian&#39;s going to help guide us through that. And we will post those registration links on our site soon, so be on the lookout for that.</p>
<p>Additionally, I want to make people aware we have just lined up a PEAT Talk that we have every third Thursday of the month, and we just lined up one for February. That&#39;s going to be with representatives from ADP, the large kind of payroll services, HR technology, and audio eye, and accessibility consultant and platform. And they&#39;re going to discuss -- they have made some huge gains on ADP&#39;s latest platform, which is going to have a big impact in the work world here. So, they&#39;re going to come on and discuss that with us. And you can find registrations links for all of these events on PEATworks.org.</p>
<p>Look out for an email. We&#39;ll have information up on this webinar -- for this webinar in the next week or two. We&#39;ll have stuff on our PEAT Talks next week. But currently, I wanted to let you know we have some information up regarding an upcoming webinar from the U.S. Access Board and it&#39;s discussing the 508 regulations refresh that just got released. And we&#39;re super excited to hear. I know many folks have been waiting for that. So, be sure and check that out. And you can see the details on our website.</p>
<p>Again, I&#39;d like to give a special thank you to Gian for speaking with us today and waking up early. To all of you who took the time to join us, and our team for helping put this together, I hope you all have a great rest of the afternoon and we will see you again in the future. Thanks so much.</p>
<p>Thank you.</p>
</div></div></div>Fri, 03 Feb 2017 18:32:26 +0000Corinne Weible1426 at http://www.peatworks.orgAccessible Videos Are Your Friendhttp://www.peatworks.org/blog/2017/feb/accessible-videos-are-your-friend
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>If an image is worth a thousand words, what is a video worth? According to&nbsp;<a href="https://www.forrester.com/report/How+Video+Will+Take+Over+The+World/-/E-RES44199">Forrester Research</a>, it&rsquo;s&nbsp;<strong>1.8 million words</strong>. Today, YouTube is the second most visited website globally, and Cisco predicts that by 2020,&nbsp;<a href="http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/complete-white-paper-c11-481360.html">IP video traffic will be 82 percent</a>&nbsp;of all consumer Internet traffic. In short, videos now dominate&nbsp;the web, including in the workplace.&nbsp;<a href="http://images.forbes.com/forbesinsights/StudyPDFs/Video_in_the_CSuite.pdf" target="_blank">Forbes</a>&nbsp;found that 75% of executives watch work-related videos on business websites at least once a week, and 59% of executives would rather watch video than read text. Videos&nbsp;are also becoming an important strategy in&nbsp;<a href="http://mashable.com/2012/08/12/video-recruiting-hiring/#r48GnvzM7Eqd">hiring and recruiting</a>, particularly since videos shared on social media generate twelve times more shares than text and images. And to reach a full audience, you must&nbsp;ensure that&nbsp;your videos are accessible.</p>
<h2>Everyone loves accessible videos</h2>
<p>The good news is that making your videos accessible also boosts&nbsp;<a href="http://www.3playmedia.com/2016/12/20/more-research-concludes-nearly-all-students-find-closed-captions-helpful-for-learning/">user engagement generally</a>. Plus, closed-captioned videos also rank higher in organic search results. Why? Because&nbsp;search engines can search through captions, whereas they&nbsp;can&rsquo;t (yet) search through a video.</p>
<p>And people clearly prefer videos with a text alternative&ndash;I know I do. Often I am waiting for a plane or a taxi, checking Facebook. I find I will ignore the videos that don&rsquo;t have captions, because I can&rsquo;t watch them with the audio off. And I&rsquo;m not alone. The BBC has reported that&nbsp;<a href="https://www.ofcom.org.uk/__data/assets/pdf_file/0016/42442/access.pdf">80% of people who use captions are not deaf or hard-of-hearing</a>, and Discovery Digital Networks similarly found that adding captions to YouTube videos&nbsp;<a href="http://www.3playmedia.com/customers/case-studies/discovery-digital-networks/">increased views significantly</a>.</p>
<p>This is an essential consideration if you have videos aimed at staff. In addition to accessibility benefits, being able to use videos without using audio has become essential increasingly important in open work spaces and environments today. As with most accessibility issues, content that is accessible to the widest audience ends up being more usable for&nbsp;<em>everyone</em>.</p>
<h2>Standards and regulations</h2>
<p>Familiarizing yourself with the relevant standards and regulations is also a good idea. There have been many cases in the U.S. over the last several years related to video accessibility, and not just within the entertainment industry. In 2014, for example, a&nbsp;<a href="https://www.eeoc.gov/eeoc/newsroom/release/10-10-14.cfm">major shipping company was sued</a>&nbsp;for not providing closed captioning on employee training videos.&nbsp;</p>
<ul>
<li>The&nbsp;<a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines</a>&nbsp;(WCAG) require captions at the minimum level (Level A), and video descriptions (referred to as &ldquo;audio descriptions&rdquo;) at the medium level (Level AA). While these standards are voluntary, they are widely accepted as the standard for accessibility, and&nbsp;also align with&nbsp;the updated&nbsp;<a href="/resources/policy/508refresh">Section 508</a>&nbsp;standards&nbsp;taking effect next year.</li>
<li>The&nbsp;<a href="http://www.peatworks.org/policy/accessible-technology-and-law/cvaa">Twenty-First Century Communications and Video Accessibility Act (CVAA)</a>&nbsp;requires 100% captioning for television programs (with some exceptions).</li>
</ul>
<h2>What makes a video accessible?</h2>
<p>To make your videos accessible to everyone, you need to provide the following:</p>
<ul>
<li>Video descriptions, which provide an audio description of the visual part of the video for people who are blind or have low vision.</li>
<li>Captions, which provide a text description of the audio part of the video for people who are deaf or hard of hearing. Note that you must always be careful to provide accurate captions. Automatically generated captions (such as that found on YouTube&rsquo;s &ldquo;video manager&rdquo; feature) always require manual editing for accuracy before publication.</li>
<li>Text transcripts, which combine a text description of the visual part of the video and captions to provide a complete text alternative to the video.</li>
<li>Accessible content in the video itself. For example, do not rely on color to convey information.</li>
<li>No flashing screens. Flickering, flashing or&nbsp;strobing&nbsp;content can trigger seizures in people with photo-sensitive epilepsy or migraines (like me!). In fact, a&nbsp;Pok&eacute;mon&nbsp;TV episode in Japan triggered seizures in hundreds of people.</li>
<li>No&nbsp;autoplay. Many video players default to automatically playing a video as the page is loading, which is highly inaccessible to many different groups of people with disabilities.</li>
<li>An accessible video player. When selecting your player format, it&rsquo;s essential that you evaluate the options with accessibility needs in mind.</li>
</ul>
<p>For details&nbsp;on implementing accessible videos, please see PEAT&rsquo;s&nbsp;<a href="/content/video-accessibility-principles">Video Accessibility&nbsp;Factsheet</a>, and let us know your thoughts in the comments!</p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/staff-training-awareness">Staff training &amp; awareness</a></div><div class="field-item odd"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div></div></div>Fri, 03 Feb 2017 14:13:14 +0000Corinne Weible1425 at http://www.peatworks.orgVideo Accessibility Principleshttp://www.peatworks.org/content/video-accessibility-principles
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>Today, videos are everywhere, and for good reason. They&rsquo;re highly popular with users, and a great way to boost engagement for people with diverse learning styles. By 2020, experts predict that <a href="http://www.cisco.com/c/en/us/solutions/collateral/service-provider/visual-networking-index-vni/complete-white-paper-c11-481360.html">82% of consumer web traffic</a>&nbsp;will be video. Because they convey information through both sight and sound, accessibility must always be a key concern when producing a video.</p>
<p>In order for your video to reach a full audience, you need to ensure the following:</p>
<ul>
<li><a href="#flickering">Ensure no flickering content</a></li>
<li><a href="#color">Include only accessible content</a></li>
<li><a href="#player">Use an accessible video player</a></li>
<li><a href="#autoplay">Disable autoplay</a></li>
<li><a href="#captions">Provide captions</a></li>
<li><a href="#descriptions">Provide video descriptions</a></li>
<li><a href="#transcript">Provide a transcript</a></li>
</ul>
<h2><a id="flickering" name="flickering"></a>Ensure no flickering content</h2>
<p>Videos with content that flashes more than three times in a one-second period can induce seizures in users with photosensitive seizure disorder, and can also trigger migraines.</p>
<h3>Basic criteria:</h3>
<ul>
<li>Do not display flashing images for a total duration of more than two seconds;</li>
<li>Do not use stripes, whirls or concentric circles on large parts of the screen; and</li>
<li>Avoid flashing the color red, which can be particularly problematic for some people</li>
</ul>
<h3>Tool Recommendation</h3>
<p>To ensure there is no flickering in your video, download and run the <a href="http://trace.wisc.edu/peat/">Photo-sensitive Epilepsy Analysis Tool</a>.</p>
<h2><a id="color" name="color"></a>Include only accessible content</h2>
<p>When creating the video content:</p>
<ul>
<li>Use only high contrast colors;</li>
<li>Do not convey information using color alone; and</li>
<li>Do not use patterned backgrounds.</li>
</ul>
<p>To the best of your ability, also take care to produce the video in a way that will minimize the need for video descriptions (see the section below on providing video descriptions for more information).</p>
<h3>Tool Recommendation</h3>
<p>Test your video&rsquo;s color contrast with <a href="https://www.paciellogroup.com/resources/contrastanalyser/">Paciello Group&rsquo;s Color Contrast Analyser</a>.</p>
<h2><a id="player" name="player"></a>Use an accessible video player</h2>
<p>Keyboard navigation is essential for users who are unable to use the mouse. Without it, there is no way to exit the video player. The only option is to close the browser and start again. It&rsquo;s also important that users on mobile devices be able to access your video.</p>
<h3>Test whether your video player is keyboard and mobile accessible</h3>
<h4>Keyboard test</h4>
<p>Using the keyboard only (no mouse), navigate to the video and determine if you can:</p>
<ul>
<li>Play, pause, rewind, fast-forward and move throughout the video;</li>
<li>Modify the volume;</li>
<li>Enter and exit full screen;</li>
<li>Turn on captions; and</li>
<li>Turn on video descriptions.</li>
</ul>
<h4>Mobile test</h4>
<p>Using a mobile or tablet device, navigate to the video and determine if you can:</p>
<ul>
<li>Play, pause, rewind, fast-forward and move throughout the video;</li>
<li>Modify the volume;</li>
<li>Enter and exit full screen;</li>
<li>Turn on captions; and</li>
<li>Turn on video descriptions.</li>
</ul>
<h2><a id="autoplay" name="autoplay"></a>Disable autoplay</h2>
<p>Many video players will automatically start when a page opens, which can lead to significant accessibility issues for many people:</p>
<ul>
<li>A screen reader user may experience the page&rsquo;s text content being read over the playing video (and thus be unable to understand either);</li>
<li>A user with a cognitive disability may become disoriented; and</li>
<li>The mechanism to pause the video may be unavailable to users, or may not be keyboard-accessible.</li>
</ul>
<p>To ensure accessibility, videos must always be presented without autoplay. This may involve &ldquo;<a href="/glossary#Workaround" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;A &lt;span class=&quot;skip-lexicon&quot;&gt;workaround&lt;/span&gt; is any technique that allows a user with a disability to succeed in using an otherwise inaccessible product. Examples include viewing captions in a separate chat window for a webinar being held on a platform that does not support captions itself, and copying and pasting text from a screen-reader-incompatible source into another application that works with the screen reader. &lt;span class=&quot;skip-lexicon&quot;&gt;Workarounds&lt;/span&gt; may be effective, but they are usually inconvenient, and should be temporary.&lt;/p&gt;
" title="workaround" class="lexicon-term">workaround</a>s.&rdquo; For example, YouTube does not allow you to restrict your videos from advancing automatically on their site, but you can embed individual videos on your own website without autoplay.</p>
<h2><a id="captions" name="captions"></a>Provide captions</h2>
<p>Captions are text versions of the sound and speech in the video. They are essential for people who are deaf or hard of hearing.</p>
<p>There are two types of captions: closed captions and open captions. Closed captions (represented on most video players as &ldquo;CC&rdquo;) can be turned on and off by the user. Open captions are printed on the video itself and cannot be turned off.</p>
<p>Video captions should:</p>
<ul>
<li>Appear at the same time as the sound they are captioning;</li>
<li>Ensure all important audio information has been captured;</li>
<li>Appear on the screen for enough time for them to be read;</li>
<li>Ensure the contrast between background and caption text color is sufficient; and</li>
<li>Attribute speech to a particular speaker.</li>
</ul>
<h3>Live events</h3>
<p>For live events, such as an online webinar, you must hire a captioning service to provide Communication Access Realtime Translation (CART). CART provides &nbsp;instantaneous, verbatim translation of the spoken word into text to audience members.</p>
<p>During a live event, you must also describe the essential visual elements of a presentation so that this information also appears in the captions.</p>
<p>Following the event, the captioning service will provide a transcript of the event, which (once edited for accuracy) you can use to add captions to the archived video.</p>
<h3>Automatic captioning</h3>
<p>Some platforms (such as YouTube) now provide an automatic captioning feature when a video is uploaded.</p>
<p>This service can be useful for creating a first draft, and for accurately time stamping your captions. However, the error rate is <em>extremely</em> high, and automatic captions are never a viable alternative on their own. You must always budget time to edit and fix the drafted captions manually before publication.&nbsp;</p>
<h3>How to create captions for your video in YouTube</h3>
<ol>
<li>Using the previous transcript developed, delete all the visual descriptions.</li>
<li>Save the transcript as a plain text file (&ldquo;.txt&rdquo;)</li>
<li>Upload your video to YouTube.</li>
<li>Go to the YouTube Video Manager and select the dropdown next to the &ldquo;Edit&rdquo; button on your video.</li>
<li>Select the &ldquo;Captions&rdquo; option.</li>
<li>Select the &ldquo;Add subtitles or CC&rdquo; button.</li>
<li>A dropdown will appear. Select your language.</li>
<li>Select &ldquo;Upload a file.&rdquo;</li>
<li>Select your file type as &ldquo;Transcript.&rdquo;</li>
<li>Select &ldquo;Choose File&rdquo; and select your transcript.</li>
<li>Select &ldquo;Upload&rdquo;.</li>
<li>Select &ldquo;Set timings.&rdquo; Allow the video and the transcript time to synchronize.</li>
<li>Select &ldquo;Publish.&rdquo;</li>
<li>Select your caption track.</li>
<li>Select the &ldquo;Actions&rdquo; button. A dropdown appears.</li>
<li>Save the captions track in your preferred format. (*.vtt, *.srt or *.sbv)</li>
</ol>
<h2><a id="descriptions" name="descriptions"></a>Provide video descriptions</h2>
<p>Video descriptions (referred to as &ldquo;Audio descriptions&rdquo; in <a href="/glossary#WCAG" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;a href=&quot;http://www.w3.org/TR/WCAG20/&quot;&gt;Web Content Accessibility Guidelines 2.0 (WCAG 2.0)&lt;/a&gt; is the international set of technical guidelines produced by the &lt;a href=&quot;http://www.w3.org/WAI/&quot;&gt;Web Accessibility Initiative (WAI)&lt;/a&gt; of the World Wide Web Consortium (W3C). WCAG 2.0 includes general guidance, with detailed information about solutions, and 3 levels of compliance.&lt;/p&gt;
" title="WCAG" class="lexicon-term">WCAG</a> 2.0) provide an audio description of what is visually occurring on the video.</p>
<p>Video descriptions should:</p>
<ul>
<li>Adequately describe the visual information;</li>
<li>Not impinge on other speech or important sounds;</li>
<li>Be concise but sufficiently explanatory; and</li>
<li>Be sufficiently distinguishable from other speech.</li>
</ul>
<p>They can be included in a video in three ways:</p>
<h3>As part of the video</h3>
<p>The absolute best way to include video descriptions is to include them in the video content itself. If you plan out the video with accessibility in mind, this step is seamless and will eliminate the need for adding video descriptions later.</p>
<ul>
<li>Ensure that any text on screen is read at the same time. For example, introduce the speakers /affiliations in the audio track, rather than just printing them onscreen.</li>
<li>When writing the audio narration script, include an explanation of any important visual information during scenes.</li>
</ul>
<h3>Standard video descriptions</h3>
<p>Standard video descriptions are inserted into natural pauses in the audio track. A video with standard video descriptions is the same length as a video with these descriptions turned off. The video descriptions are a second audio track and can be turned on and off by the user.</p>
<h3>Extended video descriptions</h3>
<p>Extended video descriptions must be used in cases when the video descriptions are too long to be inserted into natural pauses. In these cases, the video itself must be paused while the descriptive tracks play. A video with extended video descriptions is typically much longer than a video with these descriptions turned off (and thus less convenient for users). &nbsp;</p>
<h3>How to create video descriptions in Adobe Premiere</h3>
<ol>
<li>Using the previous transcript developed, delete all the captions.</li>
<li>Open Adobe Premiere and create a new project.</li>
<li>Under &ldquo;File&rdquo;, select &ldquo;Import&rdquo; and select your video. The video appears in the lower-left pane.</li>
<li>Double-click your video and it will be added to the source viewer at the top-left of the program.</li>
<li>Drag the video into the Timeline section in the bottom-right pane.</li>
<li>Using the Timeline, make note of where each video description should be added.</li>
<li>Select the &ldquo;Audio&rdquo; button at the top.</li>
<li>On the second Track Mixer select the &ldquo;R&rdquo; button to record.</li>
<li>In the timeline, drag the cursor to where you first need to record a video description.</li>
<li>Select the round red &ldquo;Record&rdquo; button. Press space to begin recording. Once you have recorded the video description press &ldquo;Space&rdquo; again. The new audio track will appear in green in the Timeline.</li>
<li>Repeat steps 9 and 10 until all video descriptions have been recorded.</li>
<li>Mute all audio and video tracks in the Timeline except for this newly created audio track.</li>
<li>Under &ldquo;File,&rdquo; select &ldquo;Export&rdquo; and then &ldquo;Media&rdquo;.</li>
<li>Select &ldquo;MP3&rdquo; as the format.</li>
<li>Select Export.</li>
</ol>
<h2><a id="transcript" name="transcript"></a>Provide a text transcript</h2>
<p>Text transcripts are essential for people who cannot see or hear the video player. In addition, many people without disabilities in your audience may also reply upon them, including people unable to use Adobe Flash software, people in a group/open work environment, and people with slow internet.</p>
<p>A text transcript provides a full alternative to playing the video. It includes the audio captions, as well as a text version of the video descriptions.</p>
<p>Video transcripts should:</p>
<ul>
<li>Identify the name of the speaker;</li>
<li>Ensure that all speech content is included;</li>
<li>Include relevant information about the speech;</li>
<li>Include relevant non-speech audio;</li>
<li>Include any textual or graphical information shown in the video;</li>
<li>Be provided in an accessible format;</li>
<li>Indicate the end of the transcript if on the same page as the video; and</li>
<li>Provide a mechanism to return to the video if on another page.</li>
</ul>
<p>For a one-minute video it takes approximately 30 minutes to write a complete transcript.</p>
<h3>Best practices for text transcripts</h3>
<p>Provide a full transcript, or a link to the transcript, immediately underneath each video. If the video transcript is on the same page as the video, the end of the transcript should be clearly marked in the text. If the video transcript is on a different page to the video, be sure to include a link back to the video.</p>
<p>Only people who can&rsquo;t or don&rsquo;t want to view the video will access the transcript, so it&rsquo;s important that additional information, such as credits, are not included in the transcript unless they are also in the video.</p>
<h3>How to create a transcript for your video</h3>
<ol>
<li>Write a script of the video &ndash; including only people&rsquo;s speech.</li>
<li>Attribute all speech to a speaker.</li>
<li>Where there is a change in speaker, indicate this in the transcript.</li>
<li>Add relevant information about the speech in brackets prior to the speech (for example [shouting])</li>
<li>Add in all other audio content that is relevant to the video in italics (for example, <em>doorbell rings</em>)</li>
<li>Add into the transcript any text that is shown on the screen.</li>
<li>Write a description of each scene, where it is relevant to the video.</li>
<li>Alternately, it is common to hire a captioning/transcription service to create the transcript from a video or audio track.</li>
</ol>
<h2>Conclusion</h2>
<p>For more information about video accessibility, please&nbsp;visit the&nbsp;<a href="https://www.w3.org/WAI/WCAG20/quickref/">W3C&nbsp;Web Content Accessibility Guidelines</a>.</p>
<p>You can also explore&nbsp;additional resources on accessible technology training by visiting the article&nbsp;<a href="/content/knowledge-power-training-your-staff-accessible-technology-issues">Knowledge is Power: Training Your Staff on Accessible Technology Issues</a>.</p>
<p><span style="font-size: 8.71px;">This page&#39;s content was drawn from &quot;<a href="http://www.accessibilityoz.com/factsheets/video/">Video</a></span><span style="font-size: 8.71px;">&quot; by AccessibilityOz, which was created with funding from the&nbsp;</span><a href="http://www.bom.gov.au/" style="font-size: 8.71px;">Australian Bureau of Meteorology</a><span style="font-size: 8.71px;">. It is licensed under a&nbsp;</span><a href="http://creativecommons.org/licenses/by-nc/3.0/" style="font-size: 8.71px;">Creative Commons Attribution Non-commercial license</a><span style="font-size: 8.71px;">.&nbsp;</span></p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div><div class="field-item odd"><a href="/taxonomy/term/staff-training-awareness">Staff training &amp; awareness</a></div></div></div>Wed, 25 Jan 2017 14:45:46 +0000Corinne Weible1418 at http://www.peatworks.orgImplementing Accessibilityhttp://www.peatworks.org/news/2017/aug/implementing-accessibility
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p><img alt="Gian Wild headshot" class="image-thumbnail" height="100" src="/sites/peatworks.org/files/styles/thumbnail/public/uploads/images/node/1398/accessozrye-15.jpg?itok=NFryyyvs" style="margin: 1px; float: right;" width="100" />As the digital gateway to your company or organization, your company&rsquo;s website is an ideal place to start when implementing accessible technology practices. But how do you actually get started? In this multi-part series, <strong>Gian Wild</strong> of <a href="http://www.accesssibilityoz.com/">AccessibilityOz</a> shares essential tips for ensuring that your eRecruiting materials and other website content are accessible to as many people as possible. Please watch for upcoming events in this series, and explore the new resources we&rsquo;ve added so far:</p>
<p><strong>Website Images</strong></p>
<ul>
<li>Factsheet: <a href="/content/accessibility-principles-website-images">Accessibility Principles for Website Images</a></li>
<li>Blog: <a href="/blog/2016/nov/implementing-accessible-workplace-tech-making-sure-alternative-text-isn%E2%80%99t-afterthought">Making Sure Alternative Text isn&rsquo;t an Afterthought</a></li>
<li>Webinar Recording:&nbsp;<a href="http://www.peatworks.org/content/webinars/2016/12/Images">Implementing Accessible Workplace Tech: Website&nbsp;Images</a></li>
</ul>
<p><strong>Website Tables</strong></p>
<ul>
<li>Factsheet: <a href="/content/table-accessibility-principles-websites">Table Accessibility Principles for Websites</a></li>
<li>Blog: <a href="/blog/2016/oct/implementing-accessible-workplace-tech-website-tables">Implementing Accessible Workplace Tech: Website Tables</a></li>
<li>Webinar Recording:&nbsp;<a href="/content/webinars/2016/11/Tables">Creating&nbsp;Accessible Tables&nbsp;for the Web</a></li>
</ul>
<p><strong>Website Videos</strong></p>
<ul>
<li>Factsheet: <a href="http://www.peatworks.org/content/video-accessibility-principles">Video Accessibility Principles</a></li>
<li>Blog: <a href="http://www.peatworks.org/blog/2017/feb/accessible-videos-are-your-friend">Accessible Videos Are Your Friend</a></li>
<li>Webinar Recording: <a href="http://www.peatworks.org/content/webinars/2017/01/Videos">Implementing Accessible Workplace Tech: Videos and Accessibility</a></li>
</ul>
<p><strong>Website PDFs</strong></p>
<ul>
<li>Factsheet: <a href="http://www.peatworks.org/content/pdf-accessibility-principles">PDF Accessibility Principles</a></li>
<li>​Blog: <a href="http://www.peatworks.org/blog/2017/jun/pdf-accessible-format">Is PDF an Accessible Format?</a></li>
<li>Webinar Recording: <a href="http://www.peatworks.org/content/webinars/2017/03/PDFs">Implementing Accessible Workplace Tech: PDF Accessibility</a></li>
</ul>
</div></div></div><div class="field field-name-field-tags field-type-taxonomy-term-reference field-label-above"><div class="field-label">Tags:&nbsp;</div><div class="field-items"></div></div><div class="field field-name-field-taxonomy field-type-taxonomy-term-reference field-label-above"><div class="field-label">Editorial Section:&nbsp;</div><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/evergreen">Evergreen</a></div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-above"><div class="field-label">Topic:&nbsp;</div><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div><div class="field-item odd"><a href="/taxonomy/term/staff-training-awareness">Staff training &amp; awareness</a></div></div></div>Tue, 13 Dec 2016 14:55:49 +0000Corinne Weible1398 at http://www.peatworks.orgImplementing Accessible Workplace Tech: Videos and Accessibilityhttp://www.peatworks.org/content/webinars/2017/01/Videos
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <div class="row">
<div class="col-sm-12 col-md-9">
<div class="webinar-description">
<p>Video accessibility requires more than simply providing transcripts, captions and audio descriptions. Join&nbsp;<a href="http://www.accessibilityoz.com">AccessibilityOz</a>&nbsp;CEO&nbsp;Gian&nbsp;Wild&nbsp;for a detailed demonstration, discussion, and Q&amp;A about how to make videos accessible to people with disabilities. Recording date:&nbsp;January 26, 2017.</p>
<div class="media_embed">
<iframe allowfullscreen="" frameborder="0" scrolling="no" src="https://www.youtube.com/embed/0iOYyrlyFNU"></iframe></div>
<p>&nbsp;</p>
<p><a class="btn btn-default" href="/content/webinar-transcript-videos-and-accessibility">Read Transcript</a></p>
<p><a class="btn btn-default" href="http://www.peatworks.org/sites/peatworks.org/files/uploads/attachments/node/1427/video_accessibility_webinar_peat.ppt" title="Download Presentation Slides">Download Presentation Slides</a></p>
<p>&nbsp;</p>
</div>
</div>
<div class="col-sm-12 col-md-3">
<div class="speaker-block">
<h2>Speaker:</h2>
<p><img alt="Gian Wild headshot" class="image-thumbnail" height="100" src="/sites/peatworks.org/files/styles/thumbnail/public/uploads/images/node/1395/accessozrye-15.jpg?itok=tW_vLsWO" width="100" /></p>
<p>Gian Wild is the CEO of <a href="https://www.accessibilityoz.com/">AccessibilityOz</a>. She has worked in accessibility industry since 1998. She spent six years contributing to the W3C Web Content Accessibility Guidelines, Version 2.0 and spoke at the United Nations Conference of State Parties on the importance of web accessibility.</p>
</div>
</div>
</div>
</div></div></div>Wed, 07 Dec 2016 22:02:03 +0000Corinne Weible1395 at http://www.peatworks.orgAccessibility Principles for Website Imageshttp://www.peatworks.org/content/accessibility-principles-website-images
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <p>Images are a core aspect of most website designs today, and they can even increase the accessibility of a webpage for many users, such as employees and job seekers with cognitive and learning disabilities. Adding graphics, drawings, illustrations, graphs, and charts can benefit many users by increasing a person&rsquo;s ability to understand the concepts at hand.</p>
<p>Of course, people access the web in many different ways. One method is a by using a screen reader, which is a software program that reads the content on a webpage aloud. Screen readers are primarily used by people with vision impairments. Sometimes people with reading disabilities also use screen readers because hearing the text read aloud can make it easier for them to understand. In order for a screen reader to describe images to the user, the website/content creator must add alternative text to each image with an <a href="/glossary#ALT_attribute" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;span class=&quot;skip-lexicon&quot;&gt;An ALT attribute provides a text equivalent for a website image if a user cannot view it. The descriptive text is known as alternative text, or &amp;quot;ALT text&amp;quot; for shorthand. The ALT attribute&lt;/span&gt; is inserted as an attribute in an HTML (Hypertext Markup Language) document to describe the nature or contents of an image.&lt;/p&gt;
" title="ALT attribute" class="lexicon-term">ALT attribute</a>.</p>
<p>And to ensure equal access for the employees and job seekers using screen readers,&nbsp;you&nbsp;must always tailor&nbsp;each image description to the specific context it is used in.&nbsp;</p>
<p>There are five types of images commonly used:</p>
<ul>
<li><strong>Simple content-related images</strong>&ndash;images containing content-related information that adds value to the page content</li>
<li><strong>Complex content-related images</strong>&ndash;elaborate images such as maps, charts, and graphs containing information that adds value to the page content</li>
<li><strong>Presentational images</strong>&ndash;images that lack any valuable information, such as those used to layout page content (like a spacer), or that are purely decorative</li>
<li><strong>Logos</strong></li>
<li><strong>Images used in an image gallery</strong></li>
</ul>
<p>Each of these image types have different requirements.</p>
<h2>Overview of image type requirements</h2>
<div class="table-responsive">
<table class="table table-bordered" summary="Overview of alt text requirements for different types of images.">
<thead>
<tr>
<th>&nbsp;</th>
<th>ALT attribute</th>
<th>Text description on page</th>
<th>Color-contrast requirements</th>
<th>Used as links</th>
</tr>
</thead>
<tbody>
<tr>
<th>Simple content-related images</th>
<td>Yes&ndash;should describe the purpose of the image</td>
<td>No</td>
<td>Yes</td>
<td>Yes&ndash;and must describe target location in ALT attribute</td>
</tr>
<tr>
<th>Complex content-related images</th>
<td>Yes&ndash;title of image and reference text description</td>
<td>Yes</td>
<td>Yes</td>
<th>Yes&ndash;but only to open a larger version of the image and this must be noted in the ALT attribute</th>
</tr>
<tr>
<th>Presentational images</th>
<td>Empty</td>
<td>No</td>
<td>No</td>
<td>No</td>
</tr>
<tr>
<th>Logo images</th>
<td>Yes</td>
<td>No</td>
<td>No</td>
<td>Yes&ndash;and must describe the target location in ALT attribute</td>
</tr>
<tr>
<th>Image gallery images</th>
<td>Yes&ndash;should describe the image itself and should not be the same as the caption</td>
<td>No</td>
<td>Not essential</td>
<td>Yes&ndash;but only to open a larger version of the image and this must be noted in the ALT attribute</td>
</tr>
</tbody>
</table>
</div>
<h2>Simple content-related images</h2>
<p>Simple content-related images must:</p>
<ul>
<li>Have an ALT attribute that describes the purpose of the image, including all legible&nbsp;text in the image;</li>
<li>Meet color-contrast requirements;&nbsp;and</li>
<li>Describe the target location if it is also a link.&nbsp;</li>
</ul>
<h3>Writing accurate ALT attributes for simple content-related images</h3>
<p>The ALT attribute should describe the purpose of the image. Imagine if you were describing the page to someone over the phone, how would you describe the image?</p>
<p>ALT attributes should be:</p>
<ul>
<li>Descriptive, and</li>
<li>Concise.</li>
</ul>
<p>ALT attributes should <strong><em>not</em></strong>:</p>
<ul>
<li>Be longer than 100 characters;</li>
<li>Contain any HTML;</li>
<li>Repeat any text on the page;</li>
<li>Include the filename of the file;</li>
<li>Include words such as &ldquo;click;&rdquo;</li>
<li>Include words such as &ldquo;image,&rdquo; &ldquo;graphic,&rdquo; or &ldquo;photo&rdquo; unless these are accurate descriptors of the image (for example, &ldquo;1977 photo of the inauguration of Jimmy Carter&rdquo;); or</li>
<li>Contain any information that is not visible in the image (such as figure, copyright or author information).</li>
</ul>
<h2>Complex content-related images</h2>
<p>Complex content-related images must:</p>
<ul>
<li>Have an ALT attribute that includes the title of the complex image and references where the text description is located on the page;</li>
<li>Have a longer text description on the same page as the complex image (or a link to the longer text description must be provided immediately next to the complex image);</li>
<li>Meet color-contrast requirements;&nbsp;and</li>
<li>Not be a link, unless linking to a larger version of the image. Where the image does link to a larger version of the same image, this must be included in the ALT attribute.</li>
</ul>
<h3>Writing accurate ALT attributes for complex content-related images:</h3>
<p>The main information in a complex content-related image is included in the text description; therefore, the ALT attributes should only include the title of the complex image and refer to the text description.</p>
<p>ALT attributes should:</p>
<ul>
<li>Include the title or name the complex content-related image;</li>
<li>Refer to where the longer text description is located (refer to the preceding, heading);&nbsp;and</li>
<li>Indicate where selecting the image actually opens a larger version (&ldquo;opens a larger version&rdquo;).</li>
</ul>
<p>ALT attributes should <strong><em>not</em></strong>:</p>
<ul>
<li>Include location words such as &ldquo;below,&rdquo; &ldquo;above,&rdquo; &ldquo;left,&rdquo; or &ldquo;right;&rdquo;</li>
<li>Be longer than 100 characters;</li>
<li>Contain any HTML;</li>
<li>Repeat any text on the page;</li>
<li>Include the filename of the file;</li>
<li>Include words such as &ldquo;click;&rdquo;</li>
<li>Include words such as &ldquo;image,&rdquo; &ldquo;graphic,&rdquo; or &ldquo;photo&rdquo; unless these are accurate descriptors of the image (for example, &ldquo;1977 photo of the inauguration of Jimmy Carter&rdquo;);&nbsp;or</li>
<li>Contain any information that is not visible in the image (such as figure, copyright or author information).</li>
</ul>
<h3>Writing accurate text descriptions for charts and graphs:</h3>
<p>For most complex images, the best text description is presented in a <a href="/content/webinars/2016/11/Tables">table</a>. This allows for the multiple relationships between the information in a complex image to be encoded in a format that is easily presentable. For example, charts and graphs are just a visual representation of data that originated in a table.</p>
<h3>Writing accurate text descriptions for maps:</h3>
<p>Maps contain a lot of visual data, but not all of it is relevant. In writing a long description, ensure you include only the relevant details of the map. For example, the nearest highway and exit is relevant, but it is not necessary to describe in text all the highways and exits that are visible on the map.</p>
<h2>Presentational images</h2>
<p>Presentational images, such as spacers, borders and underlines,&nbsp;must have an empty ALT attribute. These images&nbsp;are strictly ornamental&nbsp;and do not convey any information to the user.&nbsp;</p>
<p>Other images are sometimes considered presentational if they are used alongside text that already conveys the exact same information.&nbsp;In those case, adding text to the ALT attribute for the image would be repetitive.</p>
<p>For example, in the screenshot below&nbsp;you can see that adding&nbsp;an ALT attribute to these icons just repeats the text already on the page (the section with the yellow highlight is the ALT attribute). In this case, the ALT attributes should be left empty.<br />
<img alt="Icon with ALT attribute of ‘New item’ next to text ‘new item’, followed by a different icon with ALT attribute of ‘Edit item’ next to text ‘edit item’" height="54" src="/sites/peatworks.org/files/uploads/images/node/1371/presentationalimagepeat.png" width="516" />&nbsp;</p>
<h2>Logo images</h2>
<p>Logo images must:</p>
<ul>
<li>Have an ALT attribute, and</li>
<li>Describe the target location if it is also a link.</li>
</ul>
<h2>Image gallery images</h2>
<p>Image gallery images must:</p>
<ul>
<li>Have an ALT attribute that describes the image and is <strong>not</strong> the same as the caption;</li>
<li>Not be a link, unless it is a thumbnail linking to a larger version of the image;&nbsp;and</li>
<li>Where the image does link to a larger version of the same image, this must be included in the ALT attribute.</li>
</ul>
<h3>Writing accurate ALT attributes for image gallery images:</h3>
<p>The purpose of an image gallery is essentially visual, therefore the ALT attributes should describe the image itself. The ALT attributes should be as descriptive as possible.</p>
<p>ALT attributes for image gallery images should <strong>not</strong>:</p>
<ul>
<li>Be longer than 100 characters;</li>
<li>Contain any HTML;</li>
<li>Repeat any text on the page;</li>
<li>Include the filename of the file;</li>
<li>Include words such as &ldquo;click;&rdquo;</li>
<li>Include words such as &ldquo;image,&rdquo; &ldquo;graphic,&rdquo; or &ldquo;photo&rdquo; unless these are accurate descriptors of the image (for example, &ldquo;1977 photo of the inauguration of Jimmy Carter&rdquo;);&nbsp;or</li>
<li>Contain any information that is not visible in the image (such as figure, copyright, or author information).</li>
</ul>
<p>For more information, please see the webinar <a href="/content/webinars/2016/12/Images">Implementing Accessible Workplace Tech: Website Images</a>.</p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div><div class="field-item odd"><a href="/taxonomy/term/staff-training-awareness">Staff training &amp; awareness</a></div></div></div>Wed, 23 Nov 2016 17:10:56 +0000Corinne Weible1371 at http://www.peatworks.orgImplementing Accessible Workplace Tech: Making Sure Alternative Text isn’t an Afterthoughthttp://www.peatworks.org/blog/2016/nov/implementing-accessible-workplace-tech-making-sure-alternative-text-isn%E2%80%99t-afterthought
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <div>
<p><em>As the digital gateway to your company or organization, your company&rsquo;s website is an ideal place to start when implementing accessible technology practices. But how do you actually get started? In this multi-part series,&nbsp;</em><em>Gian Wild of&nbsp;<a href="https://www.accessibilityoz.com/">AccessibilityOz</a>&nbsp;shares essential tips for ensuring that your&nbsp;eRecruiting&nbsp;materials and other website content are accessible to as many people as possible.</em></p>
<p>Images are a core aspect of most website designs today, and they can even increase the accessibility of a webpage for many users, such as employees and job seekers with cognitive and learning disabilities. That&#39;s because adding graphics, drawings, illustrations, graphs, and charts can benefit many users by increasing a person&rsquo;s ability to understand the concepts being presented. And as you probably already know, you can make images accessible for people with disabilities such as blindness and low vision by providing alternative text with an <a href="/glossary#ALT_attribute" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;span class=&quot;skip-lexicon&quot;&gt;An ALT attribute provides a text equivalent for a website image if a user cannot view it. The descriptive text is known as alternative text, or &amp;quot;ALT text&amp;quot; for shorthand. The ALT attribute&lt;/span&gt; is inserted as an attribute in an HTML (Hypertext Markup Language) document to describe the nature or contents of an image.&lt;/p&gt;
" title="ALT attribute" class="lexicon-term">ALT attribute</a>.</p>
<p>But if every website assumes that each picture is worth a thousand words and you are a screen reader user, can you imagine how long it would take to get through some websites today?</p>
</div>
<h2>What is a screen reader?</h2>
<p>A screen reader is a software program used to read the content on a webpage aloud. This is all very well when it comes to text, but what do screen readers do when they encounter an image? They read the text written in the ALT attribute&ndash;and that has to be written by the web site developer or content author.</p>
<p>Screen readers are mostly used by people with vision impairments who can&rsquo;t see the page. Sometimes people with reading disabilities also use screen readers because hearing the text read aloud can make it easier for them to understand.</p>
<h2>What makes a good ALT attribute?</h2>
<p>Images are an important part of web design, and you need to make sure that they are accessible to people who can&rsquo;t see them&ndash;and that means using well-written ALT attributes.</p>
<p>There is one basic rule when it comes to ALT attributes: <strong>describe the function of the image</strong>. This does not always mean that you describe the actual image&ndash;and it definitely shouldn&rsquo;t mean one-thousand-word ALT attributes. Instead, you need to thoughtfully consider how and why you are using each image.</p>
<p><img alt="Vintage-style globe showing Australia" class="image-medium" height="149" src="/sites/peatworks.org/files/styles/medium/public/uploads/images/node/1370/globeaustralia.png?itok=GlyCy1YR" style="margin: 1px; float: right;" width="220" />For example, at first glance it looks like we could call the&nbsp;image to the right&nbsp;&ldquo;Globe showing Australia.&rdquo;</p>
<p>But what if it were on an international travel web site and were preceded by the heading &quot;Travel&nbsp;deals?&quot;&nbsp;Then the ALT attribute should be &ldquo;Flights to Australia.&rdquo; What if it was a picture on a site selling globes? In that case,&nbsp;a better&nbsp;ALT attribute would be &ldquo;Old-style globe, reminiscent of the style of old maps.&rdquo; And what if it was a picture on a site about snake anti-venom and linked to contact details about dealing with specific snake bites in Australia? Then the ALT attribute should be &ldquo;Contact details for snake bites in Australia.&rdquo; (By the way, Australia has nine out of ten of the world&rsquo;s deadliest animals, so that might be a useful site to visit!)</p>
<p>In short, a good ALT attribute must be tailored specifically to the website and the context it is used in.</p>
<h3>Exceptions to the rule</h3>
<p>There are always exceptions, and with ALT attributes it is no different. Here are some things to keep in mind:</p>
<ul>
<li>Any legible text on the image must appear in the ALT attribute</li>
<li>If the image links through to another page, you must include the link in the ALT attribute (but you don&rsquo;t need to use words like &ldquo;link&rdquo;)</li>
<li>If the image is in an image gallery, you should describe what the image looks like</li>
<li>If an image conveys no information (for example, an underline or a spacer, or if the image is just a representation of any text that follows) then the ALT attribute should be empty</li>
<li>Don&rsquo;t use words like &ldquo;image&rdquo;, &ldquo;graphic&rdquo;, &ldquo;click&rdquo;, &ldquo;link&rdquo; or filenames for the ALT attribute</li>
<li>Remember that the ALT attribute is only read by screen readers, so you can&rsquo;t put any extra information in there about things like copyright</li>
<li>The ALT attribute must be different than any caption for the image</li>
<li>ALT attributes shouldn&rsquo;t be longer than 100 characters</li>
<li>ALT attributes should not include HTML</li>
</ul>
<h2>What else do I need to know?</h2>
<p>The main thing is to remember that you can&#39;t use a one-size-fits-all approach with alternative text. There are many types of images used on a website, and each requires a different approach for accessibility. They include:</p>
<ul>
<li><strong>Simple content-related images</strong>&ndash;images containing content-related information that adds value to the page content</li>
<li><strong>Complex content-related images</strong>&ndash;elaborate images such as maps, charts, and graphs containing information that adds value to the page content</li>
<li><strong>Presentational images</strong>&ndash;images that lack any valuable information, such as those used to layout page content (like a spacer), or that are purely decorative</li>
<li><strong>Logos</strong></li>
<li><strong>Images used in an image gallery</strong></li>
</ul>
<p>But don&#39;t be daunted, because PEAT provides a <a href="/content/accessibility-principles-website-images">detailed&nbsp;factsheet</a> on accessible images that covers the different methods to use for each image type.</p>
<p>We hope you can also&nbsp;join us on Thursday, December 8, from 2-3pm ET for our webinar <a href="/content/webinars/2016/12/Images">Implementing Accessible Workplace Tech: Website Images</a>. I&rsquo;ll be providing a detailed demonstration and leading discussion and&nbsp;Q&amp;A about how to ensure your images are both accessible and usable. If you&nbsp;have any specific questions that you&#39;d like me to address during the webinar, please add them in the comments here!&nbsp;</p>
<p>&nbsp;</p>
</div></div></div><div class="field field-name-field-acc-workpace-tech-init field-type-taxonomy-term-reference field-label-hidden"><div class="field-items"><div class="field-item even"><a href="/taxonomy/term/digital-accessibility-tutorials">Digital accessibility tutorials</a></div></div></div>Tue, 22 Nov 2016 19:11:46 +0000Corinne Weible1370 at http://www.peatworks.orgWebinar Transcript for Implementing Accessible Workplace Tech: Creating Accessible Tables for the Webhttp://www.peatworks.org/content/webinar-transcript-implementing-accessible-workplace-tech-creating-accessible-tables-web
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"> <h2>Introduction</h2>
<p>I&#39;m very excited to introduce our speaker today. Her name is Gian Wild. She is the CEO of Accessibility Oz, and she has worked in accessibility industry since 1998. Gian spent six years contributing to the W3C web content accessibility guide, <a href="/glossary#WCAG" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;&lt;a href=&quot;http://www.w3.org/TR/WCAG20/&quot;&gt;Web Content Accessibility Guidelines 2.0 (WCAG 2.0)&lt;/a&gt; is the international set of technical guidelines produced by the &lt;a href=&quot;http://www.w3.org/WAI/&quot;&gt;Web Accessibility Initiative (WAI)&lt;/a&gt; of the World Wide Web Consortium (W3C). WCAG 2.0 includes general guidance, with detailed information about solutions, and 3 levels of compliance.&lt;/p&gt;
" title="WCAG" class="lexicon-term">WCAG</a> version 2.0 and spoke at the United Nations conference of State Parties on the importance of web accessibility. We have seen and known Gian in the accessibility field for quite a while and are really happy to have her join us here. So without further ado, I will turn it over to Gian and encourage folks to participate in the chat. Thank you.&nbsp;</p>
<h2>Presentation</h2>
<p>Thanks, Josh. Thanks for the lovely introduction and thank you everyone for joining us today. I am very happy to be here and this is just one of a series of conferences that we&#39;ll be doing. We&#39;ll be doing one on images and PDFs, and video as well. So I hope that you guys can get involved in that. We&#39;ll also releasing some love quotes and factsheets around these topics, so there&#39;s quite a lot of information. And so feel free to ask questions, and I hope you guys are all okay with my accent. I am Australian. I am in the U.S. I&#39;m actually in New York at the moment. I spent quite a lot of time in the U.S. (inaudible) here as well. So it&#39;s great to be here. So let&#39;s get started.&nbsp;</p>
<p>There are basically two types of tables used in the Web. There&#39;s what we call data tables, and these are either simple or complex, and these are used to present data. So, you know, a table of information, say costs for a mobile phone plan or something like that. And the other type of table is a layout table. It&#39;s used to lay out information, so just present information. And let&#39;s have a look at some examples now.&nbsp;</p>
<p>So data tables, as I said, is used to present tabular data. Often it&#39;s numeric, but it doesn&#39;t always have to be. Sorry. I&#39;m just wondering if there&#39;s anything that I can do to stop the fading in and out. That&#39;s really quite annoying. Okay. All right. Just one second while I rearrange the mic. Okay. Hopefully that is a little bit better.&nbsp;</p>
<p>So data tables are used to present tabular data, often numeric, in an easy-to-understand format. The meaning of a piece of content is affected by its relationship to the table column and row headings.&nbsp;</p>
<p>So this is an example of a simple data table. So if you look at the third column and the third row, it says there 19 cents. Now that doesn&#39;t actually mean anything by itself. It only makes sense if you look at the relevant heading. Oh, sorry, we&#39;re going to go 51 cents. It only makes sense if you look at the rate-per-mile heading and the motorcycle heading, and then with that information you can find out that rate per mile for motorcycles is 51 cents.&nbsp;</p>
<p>A complex data table looks something like this. It&#39;s got quite a lot of information, and if you looking at a particular cell, say this cell here, where it says 171, there are actually three table headers that are relevant. There&#39;s the Q4, the quarter four. There&#39;s the year 2015, and there&#39;s the location, which basically means that in Bethesda in quarter four of 2015 there were 171 staff. So that&#39;s what a complex data table looks like. I&#39;m glad (inaudible). I&#39;m also speaking louder.&nbsp;</p>
<p>Okay. So the thing about data tables is they often have visible borders and they only make sense if you know the heading of the row or column. They can&#39;t be understood when read cell-by-cell, left-to-right, top-to-bottom. And they&#39;re usually used when presenting complex information.&nbsp;</p>
<p>So let&#39;s talk about layout tables. Layout tables are used to present or space or lay out page content and can be purely decorative. The arrangement or position of information within a layout table should have little or no bearing or impact on its meaning. So this is an example of a layout table on a website. And if we outline the table cells themselves, you can see that there&#39;s just really one row, and we see this a lot with layout tables, so this is one row. And it&#39;s important to note that it doesn&#39;t really which cell you read first and the content in cells is not relevant to any other content in any other cell. So often they do not have -- layout tables do not have visible borders. They often do not have headings for the row or columns, and they always can be understood when read cell-by-cell, left-to-right, top-to-bottom, and they often make sense if you read the cells in any order.&nbsp;</p>
<p>Okay. Now another thing to think about is maybe you don&#39;t really need table. There are actually different things that you can do instead of tables. You can use style sheets instead of layout tables, texts instead of data tables, and graphs instead of bar tables.&nbsp;</p>
<p>So this is content. It looks like it&#39;s in a table. It&#39;s the (inaudible) of the PEAT Works website, and it has five columns; the title home, government wide, initiative, customer support, reference, and website information. So it looks like it could be a table with five columns and one row, but this is actually done all through (inaudible). So it&#39;s not actually a table. It still gets read column by column, but it&#39;s also a lot easier for, say, a screen reading of two, three of that content.&nbsp;</p>
<p>This is another example. So here the task is pay, and the days that you have is two business days and remove the property, you have ten business days. And that doesn&#39;t make a whole lot of sense by itself. And this is an alternative way of getting the information. So it has the heading awarded. And it says &quot;The sale has ended and there is a successful bidder of the property. The successful bidder has two business days to pay and ten days to remove the property.&quot;&nbsp;</p>
<p>So sometimes just having content (inaudible), as opposed to a data table is preferable. And this is to present really complex data. This is a great graph. It talks about -- it shows you the usage of various screen readers over the years, from January 2009 to July 2015. And as you can see, JAWS has decreased from 2009 in about 75% to just under 50%, and video has increased from about 10% to just over 50%. VoiceOver has increased from about 10% to about 30%, et cetera, et cetera.&nbsp;</p>
<p>Now this content can be presented in a table as well, and that would be very useful for people who can&#39;t see the graph. But the graph itself is a really good representation of the content that&#39;s quite easy to understand. So when you do have really complex data like this, it&#39;s worth considering providing a graph, as well as a data table.&nbsp;</p>
<p>So let&#39;s talk about table accessibility requirements. So there are specific things that you can do with tables to make them more accessible. The first one is coded table headings. And so what happens is that you can simplify a particular data cell is a table header, and so that actually informs what the headers are for particular data cells. And so when it comes to simple data tables you do need to code those table heading and you use codes called TH.&nbsp;</p>
<p>With complex data tables you also need to code those table headings and you need to do it with TH ID and TD headers. However, if you have a layout table, you don&#39;t need to code those table headings, and, yeah, you just need to leave the table as it is.&nbsp;</p>
<p>The second table accessibility requirements are captions. So captions are some code that often appears at the top of the table, and it&#39;s basically the title of the table, and so you do need to have a title of the table for a simple data table, and you do need to have this title for a complex data table as well. However, it&#39;s not something that you do in a layout table.&nbsp;</p>
<p>The third requirement is summary. Summary is a summary of the content in the table. It&#39;s not just a title. It&#39;s actually a description of content. So view the content or the average detail, we&#39;ll talk about how you would do that. And once again, it&#39;s something that you do have in a simple data table, you don&#39;t have in a complex data table, but you don&#39;t it in a layout table. And the summary is not visible to the users, but it is actually read to screen reader users so they can get an idea of the content of the table.&nbsp;</p>
<p>Now another requirement is that whether the table needs to make sense when read cell-by-cell, left-to-right, top-to-bottom. Now that&#39;s not a requirement for simple data tables, and it&#39;s not a requirement for complex data tables; however, it is a requirement for layout tables.&nbsp;</p>
<p>&nbsp;And the last requirement is that the content of the table only makes sense when referring to the table heading, and that is something that is required for simple data tables. It is also required for complex data tables. But it&#39;s not required for layout tables. So let&#39;s look at these in more detail in terms of the type of tables that we&#39;re looking at. Let&#39;s start with simple data tables.&nbsp;</p>
<p>So as you saw in the previous slide, these tables do need to have coded table settings. They do need to have captions. They do we need to have summaries. They don&#39;t need to make sense, whether they&#39;re left to right, top to bottom. And they do make sense only by referring to the table heading.&nbsp;</p>
<p>So let&#39;s come back and have a look at that original system data table. So here we&#39;ve got basically the title of the data table called privately owned vehicle mileage reimbursement rates. There are four modes of transportation, including the privately owned automobile, government furnished automobile, motorcycle, and airplane. There&#39;s an effective applicability date and for all four modes of transportation, it&#39;s January the 1st, 2016, and then you&#39;ve got a rate per miles for those four modes of transportation.&nbsp;</p>
<p>So these outlines here are the table headers, and these are what you have to mark up with TH. So the first row has three columns, three cells; modes of transportation, effective applicability dates, and rate per mile, and they&#39;re all table headers. And then the first column also had privately owned automobile, government furnished automobile, motorcycle, and airplanes and they are table headers as well.&nbsp;</p>
<p>So how do we go about coding that? This is what the code of that table usually looks like. TR stands for the beginning of a row. And then TD stands for the beginning of data cell. Now they aren&#39;t data cells. They&#39;re actually table header cells. So what we need to do is change those TDs to THs, and that&#39;s what it looks like here. So here you can see mode of transportation starts with TH and ends with TH. And that&#39;s how you specify something as a header cell.&nbsp;</p>
<p>This is the caption. The title, &quot;Privately Owned Vehicle Mileage Reimbursement rates. So the way that you quote the caption is within the table just after the table element, and you just write caption, quote, caption and then whatever your caption is, end quote, and then the element. So that&#39;s really easy to put in.&nbsp;</p>
<p>I just see a question here about both equals column is both equals row. That&#39;s actually not necessary. You can use them if you want to, but screen readers are really very good at dealing with THs now, and so that requirement is not something you need to worry about.&nbsp;</p>
<p>Summary: So summary is an overview or summary of the content. It is not the same as the caption. Now a lot of people put the summary the same as the caption; however, that&#39;s definitely a problem. There is sort of some differences in HTML5, where table summary is obsolete, and we should use aria described by instead. However, it&#39;s still something that is used a lot by screen reader users -- screen readers, and so it is something that I recommend that you do. There certainly was a lot of discussion and disagreement about, you know, removing summary from HTML5. So it is something that maybe in a year or two it will be sufficient using aria describedby. But at the moment, I still think summary is a good idea.&nbsp;</p>
<p>So summary is actually meant for people who can&#39;t interpret the table, and because you know it&#39;s too complex or something like that, and it should provide general details about the content, so it should actually provide information about, you know, an overview of the main point or average information so that even though people can&#39;t get all the information that they need, they&#39;ll get the important information.&nbsp;</p>
<p>So let&#39;s have a look at this table again. So I&#39;m just going to read out the content of the table. So for a privately owned automobile you get 54 cents per mile, so government furnished automobile you get 19 cents per people. So motorcycles you get 51 cents per mile, and for an airplane, lucky people, they get $1.17. And the effective accessibility rates for all those transportations is January the 1st, 2016. So let&#39;s have a look at what we&#39;ve done for the summary.&nbsp;</p>
<p>We&#39;ve said rate per mile of four different modes of transportation, including privately or government-sponsored automobiles, motorcycle, and airplane, effective date of January 1st, 2016. Rates are lowest for the government-funded automobile, 19 cents; approximately 50 cents for the privately owned automobile and motorcycle, and over a dollar for the airplane. So if we go back to that table, you can see that it gives you a pretty good overview of what the content in that data table is.&nbsp;</p>
<p>Sorry. I&#39;m just going to summarize the information. So the summary is actually an attribute of the table element. So you put it in the table code itself. So table summary and then equal quote, and then you add your summary and end quote. And, really, the important thing to know is that the summary and the caption are very different things and summary can often be a paragraph or two and could be quite detailed.&nbsp;</p>
<p>So let&#39;s talk about complex data tables. As we saw before, you need to code your table headers at this time with TH ID and TD headers. You do need to have a caption. You do need to have a summary. They don&#39;t make sense when read cell-by-cell, left-to-right, top-to-bottom. And they do only make sense when referring to the table headers.&nbsp;</p>
<p>So this is the table that we saw before that is incredibly complex. And, really, what I would suggest to you is that if you have a table that&#39;s this complex I would suggest breaking it up into smaller tables. So these are all the headings in the tables. So we&#39;ve got 2014, 2015, 2016, Q1, Q2, Q3, Q4, Q1, Q2, Q3, Q4, Q1, Q2, Q3, Q4, Arlington, Alexandria, Bethesda, Fort Lincoln. So there&#39;s a whole lot of table headers, and these are very complex tables. So, really, it would be better to break it up into years.&nbsp;</p>
<p>So here, this is the number of staff in 2014 by location and quarter, and this you can see here you&#39;ve only got two sets of table headers, Arlington, Alexandria, Bethesda, Fort Lincoln, Q1, Q2, Q3, and Q4. And you can code that as a simple data table. So let&#39;s talk about layout tables. As we saw before, layout tables should not have coded table headings, those should not have a caption, and they should not have a summary. They must make sense when read cell-by-cell, left-to-right, and top-to-bottom. And they don&#39;t make sense when referring to the table heading. And, in fact, they don&#39;t usually have table headings.&nbsp;</p>
<p>So this is an example of a table, a layout table. It says three throws, and the reason why this is a coded table is so that people have easily put a background color to a particular row. So the first row is federal acquisition service and it has a light gray background. The second row is public billing service, which has a white background. And then the third row is technology transformation service, which has a gray background.&nbsp;</p>
<p>Now this is something that can be done with (inaudible), but it&#39;s a lot easier to do with tables, and so someone has actually created a table here just to add that background color. This here is the number table, and at the top of the heading is that says &quot;Additional information is available specifically for,&quot; and then there&#39;s four sections; federal agencies disposing of, federal agencies looking for, state agencies and public organizations looking for, and citizens looking for.&nbsp;</p>
<p>Now that heading, &quot;Additional information is&quot; --&nbsp;</p>
<p>Gian, it sounds like you dropped out. Emily, this is Josh. Are you able to confirm that you can hear me and/or if you can hear Gian, because I lost audio?&nbsp;</p>
<p>I can hear you. I cannot here Gian. Can you hear me?&nbsp;</p>
<p>Yes. So bear with us, folks. It looks like she&#39;s typing in ore presenter chat. Hopefully we&#39;ll get her back on in just a moment. Apologize for the inconvenience. She&#39;s calling back in now. I&#39;ll use this pause to encourage people to continue to use the chat window for questions, and also other resources that we may want to share with each other. We will definitely have a Q&amp;A with Gian at the end, if she chooses to address those now, otherwise I&#39;ll put them at the end and we&#39;ll run through them. But while you&#39;re waiting, please feel free to chat in the box there. Thank you.&nbsp;</p>
<p>Oh, thanks for bearing with us. We&#39;re in contact with Gian and trying to troubleshoot. Hopefully she will be back up and on here shortly. In the meantime, I see there are some people sharing some resources, which I love to see. That&#39;s what PEAT is about, collaborating and sharing resources. I encourage people to use this down time to get on the chat box and maybe share some information and tips, best practice or resources that you may be able to find.</p>
<p>Gian has joined the conference.</p>
<p>It sounds like we have Gian back. Are you there?</p>
<p>Yes, I&#39;m here. Can you hear?&nbsp;</p>
<p>Yes, we can hear you loud and clear.&nbsp;</p>
<p>Excellent.&nbsp;</p>
<p>So I&#39;ll let you continue.&nbsp;</p>
<p>All right. I don&#39;t know what happened. My phone was still working apparently. So, yeah, I do apologize about that. So the last thing that I think I was talking about was this table. And so, really, the reason that we use this table here is to emphasize the heading. And the heading is additional information is available specifically for and we&#39;ve done that by giving that heading a background. And so therefore, it looks like it&#39;s the heading for the contact (inaudible).&nbsp;</p>
<p>Once again, this is something that you can do with (inaudible), but it is sometimes a lot easier to do with tables. This here is --&nbsp;</p>
<p>(PHONE RINGS) I&#39;m sorry I can&#39;t take you call right now. If you would give me just a few minutes.</p>
<p>Hello.&nbsp;</p>
<p>Gian, I&#39;m not sure what that was, but I heard that dial in, which shouldn&#39;t be in presenter mode. But let&#39;s hope that was the last one. Continue.&nbsp;</p>
<p>Very strange. Okay. So this is a table that, once again, has the heading &quot;2016,&quot; with that dark gray background, and then it has three columns. The first column is the date, the second column is information about particular events, and the third column is the location. So a table has been used here just to lay out the content so that everything is aligned properly, because if you just had those three pieces of content one after another, then it would not necessarily aligned properly. So once again, this is something that can be done with Star shoot but it&#39;s often a lot easier to do with tables. Okay. Let&#39;s talk about other issues with tables. A couple of contrasts is a big thing. It&#39;s really important that if you use those background colors or use different colors in your table, which I do encourage you to do, but you need to make sure that it meets both the color contrast requirements.&nbsp;</p>
<p>So this here is the Paciello Group&#39;s Color Contrast Analyzer. And what you do is you select a little eye dropper on the right-hand side here, and that will choose the color that you want to test, and then the results appear at the bottom. So we&#39;ll go through this in a little bit more detail. This is some content from the PEATWorks website. The background is a green, like a pea green, and the text is black. So we can see that.&nbsp;</p>
<p>If you go down to the bottom you can see that the color contrast, there are two options. There&#39;s Pass at AA and Pass at AAA, and that is relevant for small text, which is the small text outlined there. And you can see on the right-hand side that it also passes at AA and it passes the triple A, and that&#39;s about the large text. So there are actually different color requirements for the small text and large text, and this analyzer covers both. The other thing that you need to be aware of is using color or shading alignment to convey information. You can certainly use color and shade to emphasize the information, but you need to make sure that the information is here.&nbsp;</p>
<p>So these are product specifications for two different items, and where the items are different, they actually have colored the background of the cell light blue, so otherwise the background of the cell is one. Now this actually is accessible because you can tell just by looking at the content that there&#39;s a difference between the two items. So the first row is in white and it says &quot;Warranty terms, parts,&quot; and for both items it&#39;s one year. The second row is &quot;warranty terms, labor.&quot; It&#39;s also in white, and the terms are one year. And then the third row is height, and it&#39;s in blue. And the first item is 5.63 inches, and the second item is 5-5/8. So once again it&#39;s just emphasizing the difference, but it&#39;s also in text so everyone can access it.&nbsp;</p>
<p>And it&#39;s important to know that screen readers don&#39;t actually range changes in color or text or table backgrounds or things like that, so that&#39;s why you can&#39;t rely on that alone. The other thing is you really shouldn&#39;t use shapes alone to convey information, such as stars or bullets or crosses. So this is a table about venues that are available at each venue. So the Bills Vanina Sports Pavilion has one number of bookable spaces, maximum capacity of hundreds of people, and then it has a check under full kitchen. It doesn&#39;t have a check on the kitchenette. It doesn&#39;t have a check under the hearing loop. It does have a check under accessible toilet. It doesn&#39;t have a check under equipment. And it does have a check under on-site parking. But usually you can look at that and say the building as a venue has one bookable space, maximum capacity of a hundred, has a full kitchen, accessible toilet, and on-site parking.&nbsp;</p>
<p>However, those checks, it depends what they are, if they&#39;re images that can actually to say, yes, it does, this content, this is here. But if they&#39;re (inaudible) or they&#39;re some kind of (inaudible), they won&#39;t necessarily get read to a screen reader. And the other problem with this particular table is it doesn&#39;t tell you -- there&#39;s no content [BREAK IN AUDIO] in that instance is actually put that content in the data cell.&nbsp;</p>
<p>Alternatively you could have a more information link that perhaps opens up more information and shows that to the user. But the problem is, is that a lot of screen readers don&#39;t actually read grammatical marks at asterisks. Certainly by default, (inaudible) for example, doesn&#39;t read asterisks. So screen reader users wouldn&#39;t necessarily know that there&#39;s more information. The other problem is that it&#39;s an asterisk, and usually you can look down the page and see where that asterisk is. But for a screen reader user it just shows you asterisk, and you don&#39;t know where on the page where that additional information is.&nbsp;</p>
<p>So that&#39;s my quick overview of tables. You can actually download the PowerPoint presentation, which is fully accessible by going to a11yoz.com/table, and I&#39;m sure PEAT will sound out our version of the PowerPoint presentation as well. So I&#39;m very interested in questions that you have, and I think you&#39;re asked questions about those, that if anyone wants to ask further questions about that, that would great. So I&#39;ll hand it over to Josh to organize the questions.&nbsp;</p>
<p>Thank you very much. Thank you, Gian. I&#39;m glad we got our audio straightened back out. We did have a few questions. One you answered in (inaudible) and some folks answered in shared resources, which I was excited to see.&nbsp;</p>
<h2>Q&amp;A and Conclusion</h2>
<p>There was one question, which you may have addressed. I&#39;m not sure. It was basically when you were talking about summary and it asked, you know, someone had said they had seen elsewhere where summary was just described as structure of complex tables and not simple tables. I believe you addressed that, but I just want to make sure that gets focused on.&nbsp;</p>
<p>Yes. So that&#39;s actually something that we&#39;ve seen over and over again; that summary has been used to say this is for cells and these are the headings. That&#39;s really not what summary is used for. I don&#39;t know why it&#39;s believed that it&#39;s used for that. You know, it&#39;s got six rows and seven columns. That information is read aloud by a screen reader anyway, so you don&#39;t need that in a summary. So when and -- and the summary actually is very much just the screen reader. And when a screen reader encounters this table, it will actually say table six, seven rows, seven columns. So it doesn&#39;t make sense to put that information in the summary.&nbsp;</p>
<p>So, yes, the summary really is kind of a <a href="/glossary#Workaround" data-toggle="popover" data-trigger="focus hover" data-content="&lt;p&gt;A &lt;span class=&quot;skip-lexicon&quot;&gt;workaround&lt;/span&gt; is any technique that allows a user with a disability to succeed in using an otherwise inaccessible product. Examples include viewing captions in a separate chat window for a webinar being held on a platform that does not support captions itself, and copying and pasting text from a screen-reader-incompatible source into another application that works with the screen reader. &lt;span class=&quot;skip-lexicon&quot;&gt;Workarounds&lt;/span&gt; may be effective, but they are usually inconvenient, and should be temporary.&lt;/p&gt;
" title="workaround" class="lexicon-term">workaround</a> for a table that&#39;s so complex that a screen reader can&#39;t interpret it. So that&#39;s why you have that kind of overview of content that&#39;s the most content of the interesting content. Does that answer the question, Josh? Next question.&nbsp;</p>
<p>Sure. So some people chimed in, and we&#39;ll have one shortly in the archives. But people asked about just what tools people were using to create accessible tables. Do you have any that you&#39;d recommend and one specifically that is geared toward backup use?&nbsp;</p>
<p>Yes. So table creation in things like Word Press, or Drupal or King Site or Shared Voice often support the addition of summary and caption and TH. So they often don&#39;t support TH, ID, and TD headers. And that&#39;s where I recommend that you create a (inaudible) table, as opposed to try and create complex data tables. There is a (inaudible) called Tiny MCE, which we implemented at (inaudible) University, which makes life a little bit easier. And there is a product -- I can remember the name from Ephox. It&#39;s called EditLive. I think&#39;s being renamed. But we actually use that quite a lot to create complex data tables, and it created the XML quite well. I might just jump in, because I can see there&#39;s a couple questions here. (Inaudible). Josh you can (inaudible).&nbsp;</p>
<p>I think we&#39;re good.&nbsp;</p>
<p>Yeah. The asterisk is definitely similar to using a footnote or an end note, so you should definitely (inaudible), you should definitely avoid footnotes and end notes. What you should do instead is have, you know, more info link or something like that that&#39;s an anchor link to that information. Or use JAVA Script to open that information. But, yes, footnotes and end notes are definitely just as problematic. And if you think about it, for a screen reader user, it&#39;s something like privately owned automobile one, and that doesn&#39;t mean anything to them. And even if it&#39;s linked, you know, privately owned automobile link one, it doesn&#39;t mean anything. That&#39;s why you can&#39;t use them.&nbsp;</p>
<p>Do all the tasks I covered also apply to tables on (inaudible) website? Yes, definitely they do. There&#39;s no difference between a desktop version and our website in terms of table XML. Yes, we talked about the tools. So, yes, addressing footnotes and end notes, yes, as I said, that&#39;s more information. Okay.&nbsp;</p>
<p>So the statement about summary -- oh, not there yet. Summary, yes, it is obsolete next to (inaudible) five. It&#39;s something that a whole lot of people didn&#39;t agree on, and it&#39;s something that also a lot of the screen readers and assistive technologies are catching up to XML five and aria, so I do think that in the future you can replace summary with aria describedby. But it certainly not something that is supported in things like Drupal or Word Press or SharePoint. So you can -- in some of those systems you can add a summary, but there&#39;s no way that you can add aria described by. So I would suggest -- and also we know that the screen readers read the summary, whereas not all of them support aria describedby. So I think that that&#39;s something that will change with time, but at the moment, I suggest just use summary.&nbsp;</p>
<p>Josh, are there any questions?&nbsp;</p>
<p>I don&#39;t think so. If I did, folks, feel free to chime in. There&#39;s a question about scope, but people kind of shared some responses, so I think we&#39;re good. But if I missed any, folks should feel free to write in and type them in now. The back and forth is great, and we love to capitalize on Gian&#39;s expertise and get any questions answered we can.&nbsp;</p>
<p>Yeah, so just a comment on scope. It definitely was something that was popular when screen readers were not very good at interpreting TH and TH ID. But they are much, much better at doing that now. It certainly doesn&#39;t hurt to add scope. But it certainly, you know, it&#39;s additional code that makes life a little bit more difficult, so that&#39;s why I didn&#39;t cover it.&nbsp;</p>
<p>Great. It looks like someone else is typing in, so we have time for another question or two before we wrap up. Some people are thanking you. So I&#39;ll go ahead and talk a little bit about the series and start to wrap up. But I&#39;ll check the question box here in a minute, so we can come back to it. So if you&#39;ve got a question, don&#39;t hesitate to jump in there. But I really want to thank you, Gian, for this initial discussion and webinar on tables. I want to remind everyone that we have a blog that she wrote, as well as a tip sheet that you can use and check out that contains a lot of useful information on our website at PEATWorks.org. And then let people know that this is just the beginning of a series we&#39;re starting to try to get some resources out to people&#39;s hands that is useful. So we&#39;ve heard from other folks what they&#39;d like to see. We worked with Gian to see what we thought would be useful and easy to get out there.&nbsp;</p>
<p>Next month, on December 8th, we&#39;re going to be having another of the series, so we&#39;ll have a blog, we&#39;ll have a tip sheet, and then another webinar that&#39;s really about images, and so how to ensure that the website images are both accessible and usable for people with disabilities, so we encourage you to spread the word and join us about that. And we&#39;ll have other ones in the series. But I would encourage folks to reach out to us and let us know if there are other topics or issues that you&#39;d like to get some resources, insight on, and we can continue the series addressing people&#39;s needs.&nbsp;</p>
<p>So I don&#39;t think we see any other questions in there, do I? No. I see some -- Corrine, thank you, has put in the resources. I appreciate that. Oh, here&#39;s one more we can address before you leave. Could aria describedby be used to overcome the problem with the asterisk question?&nbsp;</p>
<p>So aria describedby is not something that&#39;s unique to -- it&#39;s not something that replaces table summary. Aria describedby, if you think about it, is kind of like an old attribute for an image, but it&#39;s supplied to a whole range of features like tables or field labels or things like that. So you couldn&#39;t -- I wouldn&#39;t suggest that you use the replacement aria describedby, even as a summary to describe the asterisk content, if that makes sense.&nbsp;</p>
<p>So the question is could aria describedby be used to overcome the problem with the asterisk? So you could actually put aria describedby around the asterisk to add that content. So you could do that. I mean, you still come across exactly the same problem, which is that, you know, aria and (inaudible) five is not, you know, perfectly implemented by a whole lot of assistive technologies. I think, really, if you -- yeah, think, really, the easiest option is to have a link that says more information, and then just have it an as anchoring to the content below. And usually that content isn&#39;t very complex. Usually it can just be put in the data fill anyway.&nbsp;</p>
<p>LG has said I&#39;m not familiar with aria. Can anyone recommend a good website to learn about it? I&#39;m open that. Yeah, I&#39;ll put that out to the audience. There&#39;s good stuff on the W3C website. But I&#39;m sure some people have some great examples of the (inaudible) websites. So, yes, Corrine probably (inaudible) of course. And, yeah, it&#39;s definitely a great thing that just needs to be implemented a little bit more and supported by those, you know, screen readers and other assistive technologies.&nbsp;</p>
<p>It looks like there&#39;s another question that came in about templates to use with faculty, who may or may not be comfortable with styling XTML. I&#39;m not sure, Gian, if that&#39;s something that you would know, or other folks on the webinar might be able to share that information with Alice.&nbsp;</p>
<p>Yeah, I think that&#39;s something to put out for the group as well. Okay.&nbsp;</p>
<p>So I can see (inaudible).&nbsp;</p>
<p>Folks might chime in with some answers. I&#39;m going to move on to talk about some other things. So hopefully people will chime in with Alice. Also, if people think of, have questions, or resources to share, they could reach out to us as <a href="mailto:info@peatworks.org">info@peatworks.org</a> is a great way to connect and collaborate, as PEAT is always looking to connect with people and share resources.&nbsp;</p>
<p>Before we go, I do want to plug again that Gian will be joining us next month, December 8th, 2:00 Eastern Standard Time, and we&#39;ll be talking about website images and how to ensure that they are accessible and usable for people with disabilities.&nbsp;</p>
<p>Also, I want to announce later this month, please join us next week for our November PEATTalks. That&#39;s Thursday November 17th, at 2:00 Eastern Standard Time, and our guest will be Jenny Lay-Flurrie. I probably butchered her last name, but she&#39;s so nice she wouldn&#39;t mind. She is the chief accessibility officer at Microsoft, and if you haven&#39;t heard her speak, I strongly encourage you to join us and join the chat. She will be glad to have an interactive conversation with both. And she is going to discuss the issue of creating a workplace culture that fosters accessibility and inclusion. So we look forward to having her there. That&#39;s Thursday November 17th, 2:00 p.m. Please sign up, spread the word, and join us.&nbsp;</p>
<p>Otherwise, I want to send a big thank you to everyone who joined, who stayed through the technical difficulties, and to, Gian, thank you so much for this first webinar, and we look forward to more to come. Otherwise, everyone please enjoy the rest of your afternoon.&nbsp;</p>
<p>
&nbsp;</p>
</div></div></div>Wed, 16 Nov 2016 14:30:44 +0000Corinne Weible1360 at http://www.peatworks.org