{"id":397,"date":"2020-08-25T18:23:53","date_gmt":"2020-08-26T01:23:53","guid":{"rendered":"https:\/\/idwerkz.com\/blog\/?p=397"},"modified":"2020-08-25T18:24:24","modified_gmt":"2020-08-26T01:24:24","slug":"checking-other-peoples-accessibility","status":"publish","type":"post","link":"https:\/\/idwerkz.com\/blog\/accessibility\/checking-other-peoples-accessibility\/","title":{"rendered":"Checking Other People&#8217;s Accessibility"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/national-cancer-institute-kCXvthZgtvA-unsplash.jpg\" alt=\"Woman in white lab coat points at a screen of test results as a crowd of people watch approvingly.\" class=\"wp-image-398\"\/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@nci?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">National Cancer Institute<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/testing-accessibility?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>It is hard to imagine an online course without any links to other sources of content on the Internet.<\/p>\n\n\n\n<p>Talk about a wasted opportunity \u2013 to have the whole world wide web at your disposal as an instructional resource, and to not tap into that power?<\/p>\n\n\n\n<p>Again, hard to imagine.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What We Know Now<\/h2>\n\n\n\n<p>We\u2019ve covered the basic aspects of web accessibility this month, and if you\u2019ve followed along, you should have a pretty good grasp on what it is we should be hoping to find in any accessible web content:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Headings with logical structure<\/li><li>Resizable text<\/li><li>Alternate text descriptions for imaged<\/li><li>Text transcripts for audio files<\/li><li>Captioned video in accessible video players<\/li><li>Color Contrast that ensures easy readability<\/li><li>Forms with labels and keyboard control<\/li><li>Page title and language \u2013 meta information matters<\/li><li>Visual focus and keyboard access<\/li><li>Strobing animations and blinking text<\/li><\/ul>\n\n\n\n<p>These are all simple aspects of web design that carry a significant impact on the accessibility of the content. There is more to consider before a web page can be considered completely accessible, but satisfying these criteria puts the web content into pretty good standing for being usable if not completely technically accessible.<\/p>\n\n\n\n<p>So let\u2019s look at some of the considerations for checking other people\u2019s web content for accessibility.<\/p>\n\n\n\n<p>We will be making good use of the WAVE tool for today&#8217;s activity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"222\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/wave-start.png\" alt=\"The WAVE accessibility evaluation tool.\" class=\"wp-image-399\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/wave-start.png 512w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/wave-start-300x130.png 300w\" sizes=\"auto, (max-width: 512px) 100vw, 512px\" \/><figcaption>The WAVE accessibility evaluation tool is available at wave. webaim.org<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Headings with Logical Structure<\/h2>\n\n\n\n<p>Of course we want to have headings in the web pages, but that is not enough. We also want those headings to be used properly in terms of their structure.<\/p>\n\n\n\n<p>One of the quickest ways to evaluate the structure of headings in a web page is to run the page through the <a href=\"http:\/\/wave.webaim.org\">WAVE accessibility evaluation tool from WebAIM<\/a>. <\/p>\n\n\n\n<p>Paste the URL of the webpage you want to include in your course into the Web page address field and press ENTER.<\/p>\n\n\n\n<p>When the WAVE report loads, click on the Structure tab to review the heading structure.<\/p>\n\n\n\n<p>The report will provide an outline comprised of the headings.<\/p>\n\n\n\n<p>If the results don\u2019t look like a proper outline, you know there is a problem with the content.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resizable Text<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/marten-newhall-uAFjFsMS3YY-unsplash-1024x683.jpg\" alt=\"person holding a magnifying glass up to their eyes, which are covered with blue sunglasses.\" class=\"wp-image-403\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/marten-newhall-uAFjFsMS3YY-unsplash-1024x683.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/marten-newhall-uAFjFsMS3YY-unsplash-300x200.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/marten-newhall-uAFjFsMS3YY-unsplash-768x512.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/marten-newhall-uAFjFsMS3YY-unsplash-1536x1024.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/marten-newhall-uAFjFsMS3YY-unsplash-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@laughayette?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Marten Newhall<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/magnifier?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>Another issue that is commonly found in problematic content is that of text that does not gracefully change size.<\/p>\n\n\n\n<p>When people with visual disabilities enlarge the web content to make it easier to see, poorly formatted text will present problems. Sometimes parts of sentences become invisible, or text will wrap on top of other text, or text can grow beyond the size of the layout and disappear.<\/p>\n\n\n\n<p>There are two primary ways to enlarge web page content.<\/p>\n\n\n\n<p>Page magnification enlarges everything, including images and layout elements like space between lines and paragraphs.<\/p>\n\n\n\n<p>Text enlargement only increases the size of the text. It is with text enlargement where you tend to find the most egregious problems.<\/p>\n\n\n\n<p>The specific instructions for text and page zoom vary from browser to browser. Consult your browser help section for guidance in adjusting your settings.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alternate Text Descriptions for Images<\/h2>\n\n\n\n<p>There are two aspects to checking for alternate text descriptions for images.<\/p>\n\n\n\n<p>First is the simple verification that there is any kind of alternate text present in the \u201calt\u201d tag for the image.<\/p>\n\n\n\n<p>Second is to make sure that if there is a description provided, that it is appropriate and effectively describes the image.<\/p>\n\n\n\n<p>To check a webpage for alternate text descriptions, copy and paste the page URL into the WAVE accessibility checker.<\/p>\n\n\n\n<p>Use the icons generated by the WAVE report to assess the status of the document\u2019s alt text descriptions.<\/p>\n\n\n\n<p>If there are images with missing alt text, WAVE will indicate this with a big red Alt icon, bearing a white stripe down at a diagonal.<\/p>\n\n\n\n<p>If there are images with alt text present, WAVE identifies them with a big green Alt icon, with the word \u201cAlt\u201d written in white. For these results, check the description and make sure that it is accurate and effectively describes the image it refers to.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Visual Focus and Keyboard Access<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/scottishstoater-mD9Aug7CBmc-unsplash-1024x683.jpg\" alt=\"Gray keyboard with red CONTROL key, Green ALT key, and blue COMMAND key.\" class=\"wp-image-404\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/scottishstoater-mD9Aug7CBmc-unsplash-1024x683.jpg 1024w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/scottishstoater-mD9Aug7CBmc-unsplash-300x200.jpg 300w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/scottishstoater-mD9Aug7CBmc-unsplash-768x512.jpg 768w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/scottishstoater-mD9Aug7CBmc-unsplash-1536x1024.jpg 1536w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/scottishstoater-mD9Aug7CBmc-unsplash-2048x1365.jpg 2048w\" sizes=\"auto, (max-width: 767px) 89vw, (max-width: 1000px) 54vw, (max-width: 1071px) 543px, 580px\" \/><figcaption>Photo by <a href=\"https:\/\/unsplash.com\/@scottishstoater?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">scottishstoater<\/a> on <a href=\"https:\/\/unsplash.com\/s\/photos\/virtual-keyboard?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText\">Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n<p>When you review third-party content to include in your course, always check for the visual focus indicator and do a keyboard check of the basic accessibility of the interactive elements of the page.<\/p>\n\n\n\n<p><strong>TAB<\/strong> between different interactive elements.<\/p>\n\n\n\n<p>Use the <strong>ARROW KEYS <\/strong>to explore different options for menus and forms.<\/p>\n\n\n\n<p><strong>SPACEBAR<\/strong> will engage with most form fields that can be checked or activated, and allow you to select an option.<\/p>\n\n\n\n<p><strong>ENTER<\/strong> will activate the interactive element under your focus.<\/p>\n\n\n\n<p><strong>ESCAPE<\/strong> will cancel form entry for the currently focused form field.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Text Transcripts for Audio Files<\/h2>\n\n\n\n<p>If you find any audio files included in the content, check for the presence of a text transcript.<\/p>\n\n\n\n<p>Depending on the audio file format, a transcript could be provided through an associated text file, or embedded into the Lyrics meta-information field.<\/p>\n\n\n\n<p>At a minimum the audio should be accurately represented by the text file.<\/p>\n\n\n\n<p>It is not required for accessibility, but usability is greatly enhanced when the transcript is provided as interactive timed text.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Captioned Video in Accessible Video Players<\/h2>\n\n\n\n<p>With digital video, you need to have proper captions that effectively describe the audio content via text.<\/p>\n\n\n\n<p>Play any videos contained within the page and ,make sure there are captions available, and that they are actually representing the audio information accurately.<\/p>\n\n\n\n<p>It is optimal for the captions to be capable of being toggled on or off, but it is acceptable to have captions that are always displayed.<\/p>\n\n\n\n<p>In addition to the presence of captions, ensure that the video is presented through an accessible video player that is keyboard controllable.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Color Contrast for Easy Readability<\/h2>\n\n\n\n<p>Color contrast is one of those issues that can have a surprisingly large impact on a lot of different visual disabilities.<\/p>\n\n\n\n<p>The WAVE tool provides a wonderful contrast check as part of it\u2019s accessibility assessment.<\/p>\n\n\n\n<p>Enter the page URL into the WAVE tool and click the Contrast tab to evaluate the color contrast ratio.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"372\" height=\"908\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/contrast.png\" alt=\"WAVE tool showing contrast results.\" class=\"wp-image-400\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/contrast.png 372w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/contrast-123x300.png 123w\" sizes=\"auto, (max-width: 372px) 100vw, 372px\" \/><figcaption>WAVE tool showing contrast results.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Forms with Labels and Keyboard Control<\/h2>\n\n\n\n<p>Form fields are interactive elements, and as such they must be operable via the keyboard.<\/p>\n\n\n\n<p>Using the <strong>TAB<\/strong> key, you should be able to navigate to any form elements contained in the page.<\/p>\n\n\n\n<p>Using the <strong>ARROW<\/strong> Keys, <strong>SPACEBAR<\/strong>, <strong>ENTER<\/strong>, and <strong>ESCAPE<\/strong>, you should be able to verify that the forms are in fact keyboard controllable.<\/p>\n\n\n\n<p>In addition to being keyboard controllable, each form field needs to have a text label that describes the form field.<\/p>\n\n\n\n<p>Sometimes it is possible to have a visual label appear next to a form without actually being associated with the form field. This is an accessibility problem, as someone without sight could end up not knowing what kind of data the form is expecting in that field.<\/p>\n\n\n\n<p>Use the WAVE tool to reveal any forms that are missing labels.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Page Title and Language \u2013 Meta Information Matters<\/h2>\n\n\n\n<p>One of the invisible aspects of a web page that you need to verify is the presence of a page title and a declared language.<\/p>\n\n\n\n<p>Once again, the WAVE tool makes it easy to find out if either of these elements is missing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"473\" height=\"267\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/no-title.png\" alt=\"WAVE tool showing a page with missing title.\" class=\"wp-image-401\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/no-title.png 473w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/no-title-300x169.png 300w\" sizes=\"auto, (max-width: 473px) 100vw, 473px\" \/><figcaption>WAVE tool showing a page with missing title.<\/figcaption><\/figure>\n\n\n\n<p>Look for a big red square with a white T in it for a missing page Title.<\/p>\n\n\n\n<p>Missing Language will be indicated with a big red square containing a white globe icon.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"410\" height=\"242\" src=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/language-and-aria-missing.png\" alt=\"WAVE tool showing a missing language error explanation.\" class=\"wp-image-402\" srcset=\"https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/language-and-aria-missing.png 410w, https:\/\/idwerkz.com\/blog\/wp-content\/uploads\/2020\/08\/language-and-aria-missing-300x177.png 300w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><figcaption>WAVE tool showing a missing language error explanation.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Strobing Animations and Blinking Text<\/h2>\n\n\n\n<p>There is an unfortunate response to certain frequencies of animation that can cause seizures and narcoleptic reactions. It is important that you do not include any content that has blinking text, flashing text, or animations that create any kind of repetitive or strobe-like effects.<\/p>\n\n\n\n<p>By ensuring the above accessibility concerns are addressed in the third party content you include as part of your online course, you help ensure that your students with disabilities are able to complete the assignments and gain the same educational opportunities as their non-disabled peers.<\/p>\n\n\n\n<p>Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is hard to imagine an online course without any links to other sources of content on the Internet. Talk about a wasted opportunity \u2013 to have the whole world wide web at your disposal as an instructional resource, and to not tap into that power? Again, hard to imagine. What We Know Now We\u2019ve &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/idwerkz.com\/blog\/accessibility\/checking-other-peoples-accessibility\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Checking Other People&#8217;s Accessibility&#8221;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,5],"tags":[9,87,29],"class_list":["post-397","post","type-post","status-publish","format-standard","hentry","category-31-days-to-a11y","category-accessibility","tag-a11y","tag-third-party","tag-web-a11y"],"_links":{"self":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":1,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"predecessor-version":[{"id":405,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions\/405"}],"wp:attachment":[{"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/idwerkz.com\/blog\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}