{"id":5899,"date":"2021-02-12T18:38:46","date_gmt":"2021-02-12T18:38:46","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=5899"},"modified":"2021-08-23T16:04:10","modified_gmt":"2021-08-23T16:04:10","slug":"web-accessibility-standards","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2021\/02\/12\/web-accessibility-standards\/","title":{"rendered":"Web Design | Web Accessibility Standards"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/06\/Artboard-1.png\" alt=\"\" class=\"wp-image-7089\" width=\"95\" height=\"19\"\/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/web-accessibility-01-1024x341.jpg\" alt=\"\" class=\"wp-image-6181\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/web-accessibility-01-1024x341.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/web-accessibility-01-300x100.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/web-accessibility-01-768x256.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/web-accessibility-01-1536x512.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/03\/web-accessibility-01-2048x683.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>Awareness and understanding of disability has certainly deepened in recent years but there is still a great deal of work to be done. Disabilities span the realms of physical, mental, cognitive, and developmental, just to name a few. People with disabilities are a diverse group and there is no one size fits all approach when it comes to accommodation or accessibility standards. Broadly speaking, disability makes certain tasks that we take for granted fundamentally more challenging. <\/p>\n\n\n\n<p>It&#8217;s important to stay aware as possible of web standards in order to make our content accessible for all. Accessibility and aesthetics can and should go hand in hand.<\/p>\n\n\n\n<p>Moreover, if you need further motivation to abide by accessibility standards, it&#8217;s <strong>required by law<\/strong> that publicly funded institutions like UT to make their campuses and online resources accessible to everyone. <\/p>\n\n\n\n<p>Understanding web accessibility isn&#8217;t the icing on the cake as a designer or web developer\u2014 it&#8217;s an essential skill. <\/p>\n\n\n\n<p><strong>By the end of this training you will:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Learn the history of web accessibility and why it is important for designers to understand<\/li><li>Review ways websites can be made accessible through design and code<\/li><li>Choose 1 good example and 1 bad example of accessible sites <\/li><li>Review a Figma site design&#8217;s accessibility<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">A Brief History of Web Accessibility<\/h3>\n\n\n\n<p>In 1999, nearly 10 years after the Americans with Disabilities Act was passed, the first Web Content Accessibility Guidelines (WCAG) were published by the World Wide Web Consortium (W3C). <\/p>\n\n\n\n<p>As of 2021, the next update to the WCAG is set to release this year, and aims to increase accessibility standards for people with learning and cognitive disabilities.<\/p>\n\n\n\n<p>You can read the full WCAG <a href=\"https:\/\/www.w3.org\/TR\/WCAG21\/\">here<\/a>. A greatly condensed version is rendered in a table below.<\/p>\n\n\n\n<p><strong>By the end of this training, you&#8217;ll be able to: <\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Understand basic accessibility rules and why we need them<\/li><li>Identify what about an inaccessible website makes it inaccessible<\/li><\/ul>\n\n\n\n<h2 class=\"has-text-align-center wp-block-heading\"><strong>Accessibility Standards Table<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-table is-style-stripes\"><table class=\"has-subtle-pale-blue-background-color has-background\"><tbody><tr><td><strong>Category<\/strong><\/td><td><strong>Principle<\/strong><\/td><td><strong>Concern<\/strong><\/td><\/tr><tr><td>Code<\/td><td>\u2022  Clear, logical h1, h2, h3 hierarchy<br><br>\u2022  Ensure that <a href=\"https:\/\/webaim.org\/techniques\/keyboard\/\">keyboard navigation<\/a> is enabled.<br><br>\u2022  Use labels to tell screen readers what a button is for<br><br>\u2022  Use relevant font sizing (em), not absolute font sizing (px)<br><br>\u2022 Links should have clear :focus and :active states.<\/td><td>Screen readers, physical disabilities with mouse use, different screen dimensions<\/td><\/tr><tr><td>Design<\/td><td><br>\u2022 Use <a href=\"https:\/\/css-tricks.com\/accessible-font-sizing-explained\/\">appropriate and responsive font sizes<\/a><br><br>\u2022  High contrast color scheme (<a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">test here<\/a>)<br><br>\u2022 Don&#8217;t use colors as the sole indicator (use underlining or icons to accompany color signals)<br><br>\u2022  Slow down animations and get rid of strobing. Consider using click interactions instead of hover<br><br>\u2022  Understand how your site works with a screen magnifier, and on tablet or mobile view<br><br>\u2022  Use descriptive link text (not &#8220;click here&#8221;)<br><br>\u2022  For text-dominant pages (like an article), use wide margins to make the text more narrow &#8211; <a href=\"https:\/\/kickpoint.ca\/the-readability-formula-making-your-website-easy-to-read\/\">45 to 80 characters\/line of text<\/a><br><br>\u2022  Add alt text to all pictures on site (what the image is, not what it looks like) \u2014 but keep it succinct. If the image already has a caption, alt text may not be necessary.<br><br>\u2022  Get rid of autoplay multimedia and constant animations<br><br>\u2022  Add transcript below audio elements and closed captions for video elements<br><br>\u2022 Create a dark mode option excluding images<\/td><td>Attention disorders, photosensitivity, color blindness or vision problems, epilepsy, screen readers, sensory overload, deafness and hardness of hearing<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Also refer to <a href=\"http:\/\/accessibility.voxmedia.com\/\">this<\/a> helpful checklist for a more comprehensive listing. <\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Some examples:<\/h4>\n\n\n\n<p><strong>Descriptive link text<\/strong><br><img loading=\"lazy\" decoding=\"async\" width=\"982\" height=\"332\" class=\"wp-image-5906\" style=\"width: 500px\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.49.19-PM.png\" alt=\"\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.49.19-PM.png 982w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.49.19-PM-300x101.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.49.19-PM-768x260.png 768w\" sizes=\"auto, (max-width: 982px) 100vw, 982px\" \/><\/p>\n\n\n\n<p>The image above uses &#8220;click here&#8221; as its link text. If I were using assistance tech that focuses on links, I would only read &#8220;click here&#8221; and it would be hard to know what, exactly, I&#8217;m clicking on. <\/p>\n\n\n\n<p>A better version:<\/p>\n\n\n\n<p> <img loading=\"lazy\" decoding=\"async\" width=\"1028\" height=\"402\" class=\"wp-image-5908\" style=\"width: 500px\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.56.03-PM.png\" alt=\"\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.56.03-PM.png 1028w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.56.03-PM-300x117.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.56.03-PM-1024x400.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-02-12-at-1.56.03-PM-768x300.png 768w\" sizes=\"auto, (max-width: 1028px) 100vw, 1028px\" \/><\/p>\n\n\n\n<p><strong>Alt text:<\/strong><br>Here&#8217;s an example of alt text: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"pupdanceparty.gif\" alt=\"Puppies dancing\"><\/code><\/pre>\n\n\n\n<p>Here, the image we&#8217;re supposed to see is a GIF of puppies dancing. If the image doesn&#8217;t load properly \u2014 or we&#8217;re using a screen reader \u2014 then we read the alt text, or text that describes the image: &#8220;puppies dancing.&#8221; <\/p>\n\n\n\n<p>Why is this necessary? Users with low vision will often utilize a screen reader in order to understand the contents of any given site. Imagine hearing just &#8220;image&#8221; read back to you, with no information as to how the image relates to the website&#8217;s content. Avoid leaving some users in the dark by including alt text for captionless images.<\/p>\n\n\n\n<p>Here&#8217;s a helpful <a href=\"https:\/\/moz.com\/learn\/seo\/alt-text\">article<\/a> on alt text. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Inspect Tool<\/h2>\n\n\n\n<p>You can use the inspect tool to see a site&#8217;s code and check for certain accessibility standards that can&#8217;t be seen by the naked eye.<\/p>\n\n\n\n<p>In Chrome, you can access the Inspect tool by right clicking anywhere on any website.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"870\" height=\"228\" class=\"wp-image-6095\" style=\"width: 300px\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.38.08-PM.png\" alt=\"\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.38.08-PM.png 870w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.38.08-PM-300x79.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.38.08-PM-768x201.png 768w\" sizes=\"auto, (max-width: 870px) 100vw, 870px\" \/><\/p>\n\n\n\n<p>Once you click Inspect, a window will pop on the right. You can resize it how you&#8217;d like. You&#8217;ll see the HTML and CSS code in the window. Hovering your mouse over HTML code elements will highlight the corresponding element on the webpage.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"2264\" height=\"1222\" class=\"wp-image-6096\" style=\"width: 600px\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM.png\" alt=\"\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM.png 2264w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM-300x162.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM-1024x553.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM-768x415.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM-1536x829.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.39.59-PM-2048x1105.png 2048w\" sizes=\"auto, (max-width: 2264px) 100vw, 2264px\" \/><\/p>\n\n\n\n<p>Let&#8217;s test if these images have alt text. By default, you can really only see bucket &lt;div&gt; elements, but using the arrow to the left, you can narrow elements down further into their subelements. After some narrowing, we can see that the image does, in fact, use alt text. <\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" width=\"2294\" height=\"566\" class=\"wp-image-6097\" style=\"width: 600px\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM.png\" alt=\"\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM.png 2294w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM-300x74.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM-1024x253.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM-768x189.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM-1536x379.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/Screen-Shot-2021-03-03-at-3.42.20-PM-2048x505.png 2048w\" sizes=\"auto, (max-width: 2294px) 100vw, 2294px\" \/><\/p>\n\n\n\n<p><a href=\"https:\/\/sites.la.utexas.edu\/kb\/2021\/08\/23\/web-dev-basics-how-to-use-the-browser-inspect-tool\/\"><em>Learn more about Inspect Tool on the KB<\/em><\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Additional Resources:<\/strong><\/h3>\n\n\n\n<p><a href=\"http:\/\/colorsafe.co\/\">Color Safe<\/a>: a site that generates beautiful (and accessible!) color palettes accordant with WCAG guidelines for background and text contrast ratios<\/p>\n\n\n\n<p><a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Google Lighthouse<\/a>: a resource available directly through Chrome DevTools for developers to check accessibility alongside SEO and performance.<\/p>\n\n\n\n<p><a href=\"https:\/\/wave.webaim.org\/extension\/\">WAVE<\/a>: a free accessibility checker with extensions available in both Chrome and Mozilla Firefox<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Activity: Accessibility in Action<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Part 1: Analyze two sites<\/h4>\n\n\n\n<p>For the first part of this training, find <strong>one accessible web page<\/strong> and <strong>one inaccessible web page<\/strong>. Use the chart above to determine how many accessibility standards it meets and how consistent it is. To look at the website&#8217;s code, use the Inspect feature. It can be anything \u2014 from a mommy blog to a national newspaper to a Twilight-meets-Batman fanfiction to a forum for capybara photographers.<\/p>\n\n\n\n<p>When you&#8217;re done, post each URL and a few screenshots of each site on Basecamp. Explain why you chose the sites and why it does or doesn&#8217;t meet the accessibility standards. Apply the standards in the table to assess how accessible the site is. Remember, an inaccessible site can still be visually appealing.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Part 2: Review Figma site<\/h4>\n\n\n\n<p>We created <a href=\"https:\/\/www.figma.com\/proto\/IxhZQF8WjJ0CNxm0mwYnLf\/Web-Accessibility-Training-Example?node-id=0%3A3&amp;scaling=min-zoom&amp;page-id=0%3A1&amp;starting-point-node-id=0%3A3\">an inaccessible site<\/a> in Figma. Your job is to list what about the site makes it so unusable. Because it&#8217;s in Figma, the site&#8217;s interactions are at a minimum, so coding accessibility standards (like tab index) won&#8217;t apply here.<\/p>\n\n\n\n<p>Once you figure out what&#8217;s wrong with it, think about how you could improve it to be accessible for everyone. After you&#8217;re done, check yourself against <a href=\"https:\/\/utexas.box.com\/shared\/static\/b4aculo0tvjjdzenvz67xzksvzhaspjk.pdf\">this<\/a> key on Box. <\/p>\n\n\n\n<p>What did you miss, if anything? Is there anything additional you feel like should have been altered? Be sure to share your thoughts and use this activity as a springboard rather than as an endpoint for thinking about web accessibility. <\/p>\n\n\n\n<p>Be sure to share your thoughts on Basecamp.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/basic-training-last-steps-1024x341.png\" alt=\"\" class=\"wp-image-5903\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/basic-training-last-steps-1024x341.png 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/basic-training-last-steps-300x100.png 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/basic-training-last-steps-768x256.png 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/basic-training-last-steps-1536x512.png 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2021\/02\/basic-training-last-steps-2048x683.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Awareness and understanding of disability has certainly deepened in recent years but there is still a great deal of work to be done. Disabilities span the realms of physical, mental, cognitive, and developmental, just to name a few. People with &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/02\/12\/web-accessibility-standards\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":755,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200711,200714,200721,1],"tags":[200710],"class_list":["post-5899","post","type-post","status-publish","format-standard","hentry","category-basic-trainings","category-coding","category-design-fundamentals","category-uncategorized","tag-basic-training"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/5899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/users\/755"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=5899"}],"version-history":[{"count":31,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/5899\/revisions"}],"predecessor-version":[{"id":7365,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/5899\/revisions\/7365"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=5899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=5899"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=5899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}