{"id":8313,"date":"2022-02-18T19:20:17","date_gmt":"2022-02-18T19:20:17","guid":{"rendered":"http:\/\/sites.la.utexas.edu\/kb\/?p=8313"},"modified":"2022-03-02T14:30:58","modified_gmt":"2022-03-02T14:30:58","slug":"accessibility-in-ux-and-graphic-design","status":"publish","type":"post","link":"http:\/\/sites.la.utexas.edu\/kb\/2022\/02\/18\/accessibility-in-ux-and-graphic-design\/","title":{"rendered":"Accessibility in UX and Graphic Design"},"content":{"rendered":"\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\/2022\/03\/accessibilitykbbanner-1024x341.jpg\" alt=\"\" class=\"wp-image-8323\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/03\/accessibilitykbbanner-1024x341.jpg 1024w, http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/03\/accessibilitykbbanner-300x100.jpg 300w, http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/03\/accessibilitykbbanner-768x256.jpg 768w, http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/03\/accessibilitykbbanner-1536x512.jpg 1536w, http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/03\/accessibilitykbbanner-2048x683.jpg 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<p><strong><strong><em>\u201cBut consider for a second that all design is fundamentally assistive.\u201d \u2014 Margaret Andersen<\/em><\/strong><\/strong><\/p>\n\n\n\n<p>Good design provides for its users. Every step of the visual design process considers how best to make its content both beautiful and understandable. On a basic level, accessibility just involves enriching the skills you already possess with the knowledge that there are users that may not have the same abilities you do. You already can design beautiful things, you just need to keep some things in mind.&nbsp;<\/p>\n\n\n\n<p>In this training, you will learn:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>The basics of accessibility laws and guidelines and how they pertain to your work here<\/li><li>How and when to implement resources to check your design&nbsp;<\/li><li>How to write alt text<\/li><li>Strategies to incorporate accessibility into all phases of the design process<\/li><li>Concrete ways to improve accessibility in your designs<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>At-a-Glance<\/strong><\/h1>\n\n\n\n<p><em>For more detailed explanations and background, read this full article.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table class=\"has-subtle-pale-green-background-color has-background\"><tbody><tr><td>Graphic Design<\/td><td>\u2022 Captions, descriptions, alt text where applicable<br>\u2022 Color contrast of 4.5:1 for regular sized text (non logos or purely decorative text) or 3:1 for large text<br>\u2022 Clear, easy to follow hierarchy<br>\u2022 For infographics, don&#8217;t use color as the sole signifier of information<br>\u2022 Keep animations to a minimum<\/td><\/tr><tr><td>UI\/UX Design<\/td><td>\u2022 Clear page hierarchy, both visually and in the markup<br>\u2022 Consider responsiveness<br>\u2022 Alt text<br>\u2022 Descriptive link text <br>\u2022 Color contrast applies here, too<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>WHY ACCESSIBILITY MATTERS<\/strong><\/h1>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Overview of Laws &amp; Regulations<\/strong><\/h2>\n\n\n\n<p>For many organizations, compliance is a chief concern as well. In this context, compliance means according with all applicable laws set out for your organization.&nbsp; Applicable laws include the American Disabilities Act of 1990 (commonly referred to ADA) and Section 508 of the Rehabilitation Act of 1973.&nbsp;<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Laws at a Glance<\/strong><\/h1>\n\n\n\n<p><strong>Section 508:&nbsp;<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Pertains specifically to digital content (or ICT, information and communications technology as they are called by the Department of Homeland Security)<\/li><li>Applies to agencies of the federal government as well as any institutions that work with or receive funding from the federal government <strong>(this includes UT!)<\/strong><\/li><\/ul>\n\n\n\n<p><strong>ADA:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Most expansive law protecting people with disabilities from discrimination<\/li><li>Applies to all members of public &amp; private industry<\/li><\/ul>\n\n\n\n<p>Compliance is very real, and data shows there are a growing number of lawsuits pertaining to digital accessibility. Recent defendants include <a href=\"https:\/\/www.yahoo.com\/now\/department-justice-settlement-rite-aid-142100837.html?guccounter=1&amp;guce_referrer=aHR0cHM6Ly93d3cuZ29vZ2xlLmNvbS8&amp;guce_referrer_sig=AQAAAEfsWNF9zaJyEnaAo90gVSSw7b4CF3Y5fC7moTLjY088cuZmJzGTjiSd0S2uq8A6DyRfOupBHRaD80SSPHMibXgKAFkFxzO7S63_xHQyhi-a0SAWrlkFlOius6ZEY2IZF2YLBh8BsTP2TbQY2Q_A89riIS_45nhiKSFe2vki4gTQ\">Rite Aid<\/a>, whose portal for accessing COVID vaccine appointments was reported inaccessible for screen reader users. <a href=\"https:\/\/f.hubspotusercontent30.net\/hubfs\/3280432\/Remediated%20-%202021_MidYear_UsableNet_WebAccessibilityLawsuit_Report_FINAL_06292021%20(5).pdf\">This 2021 report from UsableNet<\/a> shows some of the data behind accessibility lawsuits. Almost three quarters of Fortune 500 ecommerce companies were sued for noncompliance last year alone.<\/p>\n\n\n\n<p><strong>WCAG Guidelines<\/strong><br>The Web Content Accessibility Guidelines for Level AA Conformance, although not written into US law, are also regularly referenced by plaintiffs.&nbsp;<\/p>\n\n\n\n<p>The <strong>Web Content Accessibility Guidelines (WCAG)<\/strong> are developed by the World-Wide Web Consortium (W3C), a group of industry professionals that create guidelines for various people working in the digital content sphere, including designers!&nbsp;<\/p>\n\n\n\n<p>You can view the current working standards checklist <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\">here<\/a>.<\/p>\n\n\n\n<p>These standards are a great starting point for emerging designers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.la.utexas.edu\/kb\/files\/2022\/02\/Screen-Shot-2022-02-18-at-11.49.12-AM-489x1024.png\" alt=\"\" class=\"wp-image-8314\" width=\"435\" height=\"910\" srcset=\"http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/02\/Screen-Shot-2022-02-18-at-11.49.12-AM-489x1024.png 489w, http:\/\/sites.la.utexas.edu\/kb\/files\/2022\/02\/Screen-Shot-2022-02-18-at-11.49.12-AM-143x300.png 143w\" sizes=\"auto, (max-width: 435px) 100vw, 435px\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>Accessibility Principles<\/strong><\/h1>\n\n\n\n<p>This all may seem especially complicated, but we can basically divide accessibility into four important principles:&nbsp;<\/p>\n\n\n\n<p><strong>Perceivable:<\/strong><\/p>\n\n\n\n<p>Designs should have options for people to perceive in whatever way they are able<\/p>\n\n\n\n<p><strong>Operable:<\/strong><\/p>\n\n\n\n<p>UI designs should be keyboard accessible and designs should not cause seizures<\/p>\n\n\n\n<p><strong>Understandable<\/strong>:&nbsp;<\/p>\n\n\n\n<p>Designs should be readable and structured in a way that makes sense<\/p>\n\n\n\n<p><strong>Robust:<\/strong><\/p>\n\n\n\n<p>Designs should be compatible with all devices + assistive technologies<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Types of Disability<\/strong><\/h2>\n\n\n\n<p>What comes to mind when you imagine a disabled user?&nbsp;<\/p>\n\n\n\n<p>This training won\u2019t serve to enumerate all kinds of disabilities, especially in the ways we might like to delineate them in a medical sense (e.g. physical, cognitive, etc.). Instead, the following demarcations will assist us in beginning to understand the differing abilities of users, and how we might prevent ourselves from excluding any of them in our designs.<\/p>\n\n\n\n<p><strong>Permanent:<\/strong>&nbsp;<\/p>\n\n\n\n<p>A person has one arm.&nbsp;<\/p>\n\n\n\n<p><strong>Temporary:<\/strong><\/p>\n\n\n\n<p>A person\u2019s arm is injured.<\/p>\n\n\n\n<p><strong>Situational:&nbsp;<\/strong><\/p>\n\n\n\n<p>A person is working from home and has to hold their infant in one arm.<\/p>\n\n\n\n<p>When considered in this way, ensuring accessibility doesn\u2019t just make life a little bit easier for the millions of people in the US alone with a federally recognized disability, but also the vast majority of us who have been situationally disabled at some time. Not only this, but many of the things we will discuss (e.g. good color contrast, clear hierarchy) make things more usable for <strong>all<\/strong> users. <\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>RESOURCES FOR DESIGNERS<\/strong><\/h1>\n\n\n\n<p>In a perfect world, all web designs would undergo accessibility testing and reviews; however, this is not always possible. This is where automated accessibility checkers come in handy.&nbsp;<\/p>\n\n\n\n<p>Please note that you should always check your content manually first, as these tools tend to detect only about a third of possible accessibility issues.<\/p>\n\n\n\n<p>It may be a good idea to bookmark some of the most useful sites<\/p>\n\n\n\n<p><strong>Browser Tools<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/wave.webaim.org\/\">WAVE Web Accessibility Tool<\/a>: Best for web designers, this site allows you to input a URL for any public site and see errors related to things like contrast, alt text, and hierarchy.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/9D-hxFl1_R43F1Xje2Tj6p1mAlXvHZNUwwdtWmDMFuGbyzYZ84_vCloFISbl812X1geF0YhXukvNgxQJgHXJyOgeWTq7SS3PtP5MeqxacJYgiXA4Dp2M5-qimpthq0GyC2F6q1uS\" alt=\"\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/coolors.co\/contrast-checker\/112a46-acc8e5\">Coolors Color Contrast Checker:<\/a> there are several good contrast checkers available online that allow you to input foreground and background colors to see if it meets WCAG color contrast guidelines.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/5cVo8w6CDgQUqKQPfQcRq2_YYM0sTEPZW_hF5DsYRy86hJ4bBHK-mee5twuukKiuRHxtRimvq8L0M0g8a0hsQHVOhzn_YiArE7_SFUDrg6uu7-6Rw5DEUAIILwJgh3xDgYvEuPsj\" alt=\"\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.brandwood.com\/a11y\/\">Text on Background Image Checker:<\/a> for times when you are designing for web and overlaying text over an image, use this online checker to see if your design has sufficient contrast. It\u2019s best to go by AA standards and make sure your design passes.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/q_XCMeaYQiGcyStQZjfMPD_y2UCkKtGIhY9DZ4UHlPszfFyKMp7YBycLB03WDmQKNH_iKnVA-jc2yIwgxftkzHTo_34Grkf2aFtJJsEUi9qK0JoVHjxUoaf5reOVtiSXFVgrWzH4\" alt=\"\" \/><\/figure>\n\n\n\n<p><strong>Apps&nbsp;<\/strong><\/p>\n\n\n\n<p><a href=\"https:\/\/support.microsoft.com\/en-us\/office\/improve-accessibility-with-the-accessibility-checker-a16f6de0-2f39-4a2b-8bd8-5ad801426c7f\">Microsoft Office Accessibility Checker<\/a>: all of Microsoft 365 apps have an internal accessibility checker. Utilize this when you\u2019re deciding word documents, Powerpoints, or other content.<\/p>\n\n\n\n<p>Color Proofing in Adobe CC: For Photoshop and Illustrator, you can see how your designs look for users with color blindness by proofing the colors (View &gt; Proof Setup &gt; Color Blindness). For any colors that are hard to see or appear significantly different, adjust accordingly.<\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/ztXokRcOQMKNB_CFyYWN_wkZm9MmjWUv7TLKu33B2ANst01d678upcRmoIhmRlzihz0gjFebrP-m_eiyOYd-7apO8gKB12gERWALbna6uZRva5sJaXvX11oxmOvrXyYAVb6iFPZx\" alt=\"\" width=\"192\" height=\"167\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/C2QjlSYUDsWMwdaqQiaPyyiu2D7W3T0R7ZXj0t_cJNGCazEyjc6gBSPLCiP65QhJyv2Dl0zWpoS_x8dwVuhc0r8QcoSEI19YqwRablwocc1K9Es7CrLWGBh5PfvAwjVuptafwGjY\" alt=\"\" width=\"189\" height=\"183\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>ALT TEXT<\/strong><\/h1>\n\n\n\n<p>First, watch this video of a user using a screen reader to understand why non-visual elements like alternative text and other markup are useful:<\/p>\n\n\n\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=dEbl5jvLKGQ\">Screen Reader Demo for Digital Accessibility<\/a><\/p>\n\n\n\n<figure class=\"wp-block-embed-twitter wp-block-embed is-type-rich is-provider-twitter\"><div class=\"wp-block-embed__wrapper\">\nhttps:\/\/twitter.com\/kentcdodds\/status\/1083073242330361856?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1083073242330361856%7Ctwgr%5E%7Ctwcon%5Es1_&#038;ref_url=https%3A%2F%2Fblog.hootsuite.com%2Finclusive-design-social-media%2F\n<\/div><\/figure>\n\n\n\n<p>You may be asked to write alternative (alt) text in your tenure as an STA.&nbsp;<\/p>\n\n\n\n<p>Alt text, as it\u2019s usually called, or alternative text, is text included as an alternative to any images on a site. They are usually short descriptions of any relevant information than an image conveys.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why is alt text used?&nbsp;<\/h2>\n\n\n\n<p>Images are often some of the most widely used components on websites. If people cannot access these images, this can create major barriers. Alt text can:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Help orient people with disabilities who are using screen readers or dictation software to orient themselves on the page<\/li><li>Display information for an image that might be blocked due to internet connectivity or various software<\/li><li>To improve search engine optimization (SEO)&nbsp;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How do I write alt text?&nbsp;<\/h2>\n\n\n\n<p>Is an image decorative (a banner, for instance, or a stock image with no real informative purpose) or includes information already found in the text content of the page? If so, no need to include alt text! Logos are also not recommended to have alt text.&nbsp;<\/p>\n\n\n\n<p>Although alt text is sometimes needed, too much alt text can actually <em>impede<\/em> accessibility improvement as it may clutter users\u2019 screen readers.&nbsp;<\/p>\n\n\n\n<p>Quick reference for cases you should <strong>not<\/strong> use alt text:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Logos (branding)&nbsp;<\/li><li>Decorative images (<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/decorative\/\">What are decorative images?<\/a>)<\/li><li>Complex charts or graphs (<a href=\"https:\/\/www.w3.org\/WAI\/tutorials\/images\/complex\/\">How should I handle these?<\/a>)<\/li><li>It already has a caption&nbsp;<\/li><\/ul>\n\n\n\n<p>If it includes information not otherwise found, such as an image that demonstrates or supplements something found in the text, it might be best to add some alt text.&nbsp;<\/p>\n\n\n\n<p>The key for writing good alt text is to <strong>keep things concise and clear<\/strong>. Never begin your alt text with \u201cimage of\u201d or make assumptions about what\u2019s in the image.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/fy_wdACKiB25TWSRlnk1-x1MutgVNEYX7AwCAg6phxaU1qzIAluliqeIGp40hmz2BaoFp4cc48Y-0mRTB8Vs-y2JhMO624UDt6wHGo3RS-ePZ-04Jjk6J7Diq4wEBYNplW8pV8yH\" alt=\"\" \/><\/figure>\n\n\n\n<p>Does this image need alt text? It\u2019s not a graph or a painting; however, <strong>it does add supplemental meaning to the page<\/strong>. If this was simply a color overlay image with the page title, \u201cLA 101,\u201d this would qualify as a decorative image.<\/p>\n\n\n\n<p>Therefore, it should have alt text. Click on the image and, navigating to the sidebar where the gear icon is highlighted, click into the \u201calt text\u201d field.<\/p>\n\n\n\n<p><strong>First attempt:&nbsp;<\/strong><\/p>\n\n\n\n<p><code>Students in LA 101P classroom learning and collaborating with one another, a collage<\/code><\/p>\n\n\n\n<p>Although this alt text is well-intentioned, it\u2019s pretty verbose. Let\u2019s try to condense it. Also, notice how it\u2019s not one image, but 4 in a collage. Let\u2019s take note of this format to try to convey this to the user.<\/p>\n\n\n\n<p><strong>Second attempt:<\/strong><\/p>\n\n\n\n<p><code>A collage of LA 101P students working together in the classroom.<\/code><\/p>\n\n\n\n<p>This is a little better, but still makes some assumptions. Are these LA 101P students? Likely, maybe, but we have no way of knowing for certain; there\u2019s no sign or information in these images to suggest these aren\u2019t just a collage of ordinary classroom shots. Also, are they working together? Maybe, that\u2019s a pretty sweet thought, but it shows interpretation.&nbsp;<\/p>\n\n\n\n<p><strong>Best attempt:<\/strong><\/p>\n\n\n\n<p><code>Collage of students in class<\/code><\/p>\n\n\n\n<p>It\u2019s short, succinct, and doesn\u2019t suggest that these are students in any particular class with any particular collaborative aspect.<\/p>\n\n\n\n<p>Alt text isn\u2019t just used in web editing. You can add alt text to images in Powerpoints, InDesign flyers, and on most social media platforms.&nbsp;<\/p>\n\n\n\n<p>Here\u2019s an example of where you add alt text in WordPress:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/Orqo9wvNROJKtDeGyO38pB7wtaOO6KqEQ14bJqwMGH6yYQvKLX3Gg26fC1yzpbzSd_iqcUc2ESRfCJ57EIkWx7NmPes-vSH6R1Y3mV1aXqM25E5qWvk1US2rAiJOdJxya2BEEh7b\" alt=\"\" \/><\/figure>\n\n\n\n<p>Also, here\u2019s an example of what alt text looks like when you inspect element:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/tF-gjs8xQZg3yAM4Wb8F0GyL3QDpx83_cNDatODb_0Vm8YDoAQi2R2AUyyvZPz-hoLKPLXT8RBUiA_Zjc9WlbXSOgctgQoXVMSuDbkxTfiXmG2kVqV9-zWshgxAbntsQ4iXyBTcY\" alt=\"\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>VISUAL + GRAPHIC DESIGN<\/strong><\/h1>\n\n\n\n<p>We\u2019ve already indicated that design can be beautiful &amp; accessible. It can also be transformative. Consider the <a href=\"https:\/\/accessibleicon.org\">Accessible Icon Project<\/a>, a design activism project that is inspired by past design activism projects during the AIDS crisis. Beginning as a street art group trying to shine a spotlight on marginalization of disabled groups, they created a markedly different version of an icon we\u2019re probably all accustomed to seeing on parking spaces, signs, and in other public spaces.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/_d7KjHC97a6WNIcEauRvz93bny0wALEPa4T3-sILDAJfHxv7VvrHzv_n2g00TQsSVY9Ib763lb27Z_1K6yOH3m60ZQ0eODJdK0hL21yxABNUaMRQueSuo0oyvXSa1Ng0Xm431ctx\" alt=\"international symbol of access next to new accessible icon\" \/><\/figure>\n\n\n\n<p>It may just be an icon, but how does this change affect our conception of people with disabilities?<\/p>\n\n\n\n<p>Another example of the intersections graphic design can have with accessibility is evident in Uno\u2019s recent release of a colorblind exclusive deck.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/www.theverge.com\/2017\/9\/6\/16262046\/uno-colorblind-accessibility-inclusiveness-46-years\">https:\/\/www.theverge.com\/2017\/9\/6\/16262046\/uno-colorblind-accessibility-inclusiveness-46-years<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/PrynUV0ycoRoHYE9wgp3--CQyWExVsUhUlVS9VcJlTxlP_DTQvSJ7dPPmOd5R-GR7dTXBNNCXG7lCuwBALG_9WlIx_T67cZkwMxF1YJY5vuPEYRPRGsubX26Fezd-HtF6x9PYtkD\" alt=\"uno\" \/><\/figure>\n\n\n\n<p>Uno has long been known as an extremely difficult game for colorblind people, so this realization of a colorblind-friendly version is another example of the power of graphic (packaging) design in action!&nbsp;<\/p>\n\n\n\n<p>Here are some concrete examples of steps one can take in order to make graphic design content more accessible:<\/p>\n\n\n\n<p><strong>For informative graphics, use more than one signifier.<\/strong> For instance, if you are using color, also use numbers or words.&nbsp;<\/p>\n\n\n\n<p>Know the difference between informative and decorative images and follow the corresponding guidelines. Either way, your graphic is important and matters :~) but as we clarified above, informative images add or supplement text-based information or meaning, so it\u2019s extra important to make sure that informative graphics are accessible. What does this mean?<\/p>\n\n\n\n<p>Informative graphics need:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>captions, descriptions, alt text where applicable<\/li><li><a href=\"https:\/\/coolors.co\/contrast-checker\/112a46-acc8e5\">sufficient color contrast<\/a><\/li><li>to not rely slowly on color as a signifier<ul><li>Use other signifiers like an underline, italic, bold, uppercase, size, border\/background box, etc.<\/li><\/ul><\/li><li>a clear hierarchy that can easily be followed<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/uDvEoYGb-0DdDvm3b3YwuVQHcVBEEykil_Q88eRcxHxacTSFfingNLPL7MTXLdQYUK4LdQISDbcxNBSt4fEH225UOlUxREfEBXDF5dY9d9JK4FO95_XRmFX6FBuBUj54J638r3Pw\" alt=\"inaccessible graph that just uses color\" \/><\/figure>\n\n\n\n<p>Some people wouldn&#8217;t be able to interpret this graph above based solely on color.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/L6EvKH-_zoU36B177yn7-tC9u7OMBpkBf-bV26KXZRM3blFXqopvFyFsliHysdm2jk19acmplBZ7FpSlLuKZG7WZ2N1G1eNh8U5Jv0pFgbVzjD5s1ihmAJN3YoT2glko5dZx4_Kp\" alt=\"accessible graphic with shapes and words as well as color\" \/><\/figure>\n\n\n\n<p>This is better: using shapes to mark different lines, as well as color (multiple modes).&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Activity 1:<\/strong><\/h2>\n\n\n\n<p>Find 2-3 infographics. Pinterest, Instagram, as well as Google are good starting points.&nbsp;<\/p>\n\n\n\n<p>How well do they abide by the directives above, as well as any other considerations you think should be important? There is no real objective way to analyze this, but note if there\u2019s anything you would have changed\/remediated (low contrast colors, confusing layout, tiny text?). If they seem pretty accessible, explain why.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/vkPPqG_qa7aRgWYqfA_c-gn0YOeNk0PHSIl8yHVd7P-1cMuyf02TiUoALC8aSyji2FVwsb7PpUBVK6f-KeKtbM9XEaqw6Qs7-RhguqcRFqnvHQKgK0ww4eOGWgfosn1yUtewpuYp\" alt=\"coffee infographic as example\" width=\"352\" height=\"352\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/a1PCBlq48S4ZUVmT77r2XkWy-iZFZTRHi5c_Rh3z4oZGtYF92NDUTZBR_WYfHDhjNEM0apf82ptuiRQvrTBRcmACtweFZd5pgHjRVdJuN_I0K1oDOyGLxBshQwXdWRtDp1buzpF3\" alt=\"sea glass infographic as example\" width=\"333\" height=\"449\" \/><\/figure>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>UX DESIGN<\/strong><\/h1>\n\n\n\n<p>As a reminder, UX design refers to the design of user interfaces, such as websites or apps. It\u2019s also probably the ripest area for success (or failure) in accessibility, and is thus a critically important area for designers in focusing web accessibility efforts. In user interface design, the final product of your design is, by definition, interactive.&nbsp;<\/p>\n\n\n\n<p>As a reaction to decorative web design, one software engineer outlined what he calls <a href=\"https:\/\/brutalist-web.design\/#performance\">Brutalist Web Design<\/a>. While this may seem like an extreme response, it also makes an interesting point, that our desire to beautify the web or decorate it can sometimes come at the cost of accessibility. This does not, however, mean that a beautiful site cannot be accessible. However, ease of use and accessibility should always be considered imperative. This also relates to ideas of access in a grander, more global sense, and making sure we create sites that can be accessed with even basic technology.&nbsp;<\/p>\n\n\n\n<p>So how can we guarantee accessible sites? You may remember <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/01\/29\/learning-the-principles-and-elements-of-design\/\">the principles of design<\/a> from a previous design KB, and one way to start is to simply make sure you are enacting these principles as best as you can. What do I mean?<\/p>\n\n\n\n<p><strong>Hierarchy<\/strong><\/p>\n\n\n\n<p>Hierarchy is how you organize content elements to draw the eye. So to keep your design accessible, have a clear hierarchy. <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2021\/01\/29\/learning-the-principles-and-elements-of-design\/\">HackerNews<\/a>, for example, is an incredibly simple HTML based site that is still inaccessible, one of these reasons being poor hierarchy.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/OlLXVguMVCWzdpD5QBwDX_hxU4O42tpax7y56YQj2IJe4SyRmlqVIhV5GGsdEToRYJmoBfwR2RE4ltRoKM3ITPOogAl_R7HJjy54grqH-8LA76pZDa4yF1yAkkNnipy96Md395Ut\" alt=\"screenshot of HackerNews homepage\" \/><\/figure>\n\n\n\n<p>Consider also <a href=\"https:\/\/accessibility.digital.gov\/ux\/tab-order\/\">tab order<\/a>, which ensures that people who have to use a keyboard rather than a mouse can navigate your page. This usually means ordering things roughly from left to right and top to bottom.<\/p>\n\n\n\n<p><strong>Font Size<\/strong><\/p>\n\n\n\n<p>Minimum font size should be 16px.&nbsp;<\/p>\n\n\n\n<p><strong>Color Contrast<\/strong><\/p>\n\n\n\n<p>Again, color contrast is very important! Please use a checker like the Coolors one linked in the RESOURCES section.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/M8RnZeylnXsJzMPCNYHxxdxqdOdJJa6Zgo0WCItRA_Z1-lEETEwz3b3_AHn21l4N5vuWGCgPRiUaGNb3wlk3vIOjpV8rcGkr0SPgXtgKT4zTd0d0h7z5tuHSGBrp2l240LGzsyrj\" alt=\"Craiglist Austin homepage\" \/><\/figure>\n\n\n\n<p>This screenshot of Craigslist showcases the very low contrast between text and background, a lime green on white background, that does not pass WCAG contrast checks (see below).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/cgqkjMKQYTc0q4S3jGLymk57d6lZ1BucIVCwaKH6hVD2D4uBemqSXwCya_A8Hm9_WBH6SgyN2tq8v_ZYYcPL2mX6G0ERU9s_hSCGB2gj-N61aXDw4gMpSkU0qTy-C5yBFrftYRQf\" alt=\"Failed color contrast check for Craiglist\" \/><\/figure>\n\n\n\n<p>If you\u2019re running usability tests, consider swapping out \u201cnormal\u201d users with users from <a href=\"https:\/\/www.perpendicularangel.com\/portfolio\/publications\/published-on-the-pastry-box\/an-alphabet-of-accessibility-issues\/\">this alphabet of disability<\/a>.&nbsp;<\/p>\n\n\n\n<p><strong>Meaningful Links<\/strong><\/p>\n\n\n\n<p>For interactive content, like buttons or links, avoid meaningless signifiers \u201cCLICK HERE\u201d. Instead, for hyperlinked text or a button, have a preview of what to expect, such as hyperlinked text that reads \u201cview more information about onboarding here\u201d or even, \u201conboarding information\u201d. Incorporating subtle hover functionalities, such as underlining or bolding of text upon mouse hover, can also be a great signifier.&nbsp;<\/p>\n\n\n\n<p><strong>Activity 2:&nbsp;<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Download an accessibility extension like <a href=\"https:\/\/www.deque.com\/axe\/\">axe<\/a> or refer to WAVE, and visit some sites in your recent browser history to run one of these automated accessibility checkers to scan for especially salient issues. Jot some of these down and take screenshots, sharing any thoughts you have.<\/li><li>Pick a site to help remediate.<\/li><li>Go to Figma. If you don\u2019t have a Figma account yet, register with <a href=\"https:\/\/www.figma.com\/education\/\">Figma for students and educators<\/a>, which allows you to create a free account.<\/li><li>Once logged in, navigate to your profile icon in the upper right corner, click the dropdown and select \u201cplug-ins\u201d. Find and download the \u201cFigma to HTML, CSS\u201d plug-in from the browse community link.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/daDCgaf0UIEVVS-AtmIVcU3oO7SGfi5MUpxkrvAXqKpzALjtJhnop6E7WqpTWidgrN9yFAZSmTuIrOYaW4AdgTQbu7IHMHhHp4lCE66mjpuFG5feUz3hiNNX_ySC8fpNSlN6ePzh\" alt=\"Figma to HTML extension\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"5\"><li>Create a new design file and right click to select \u201cplug-in\u201d and click on the one you just downloaded. Paste the URL of the site you\u2019ve selected into the text box provided.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/NVgtlhDo5tp_X_cZ3IVBUT85R3UM8EEiSnKGUExokSNfSVuZtiW6C4G7UtRolMASm9YED6VNoizgcoy54eeEat0ea_ctxIWJX0BcByBNefiOzFCHhzihFvRApQKJWtIV8AAXj_2z\" alt=\"Hover options for plugins, figma to html\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/MT5RH0prTSkVMQK4cNZ0hrEVXVUMYVRjOdDtNKv_UEpZUGSfo-DM3nCSFDU18LxqXOBN6NjcRN_fHTqLQCZq5L4lxhReOHHhNJ_EWX6nX3NJI2avTxEwjm64KxzpIwau5KadsgHt\" alt=\"HTML page in Figma as blocks\" \/><\/figure>\n\n\n\n<ol class=\"wp-block-list\" start=\"6\"><li>The result won\u2019t be perfect, but should resemble the site fairly closely. Recall any errors you saw reported (e.g. color contrast, link text, etc.) that has to do with the design, and fix these!<\/li><li>Don\u2019t feel like you need to remediate everything, but feel free to play around a bit and post any screenshots to Basecamp.<\/li><\/ol>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/c0XF-lUtiJoCUPeKV1DTxtF_UHjDxeW2Ik-WVSxc1giarIoJmbGQZ4n4RClToWnXlA4n643KZXVF-m-y8GlIr6lhGX9e_FEaIKo-0vNTMm2wncMyJGsrHIB9u-dXQA5K2MXuRRAM\" alt=\"edited homepage using figma\" \/><\/figure>\n\n\n\n<p>For example, here I just added overlays to the images to create more sufficient contrast.<\/p>\n\n\n\n<h1 class=\"wp-block-heading\"><strong>CLOSING REMARKS<\/strong><\/h1>\n\n\n\n<p>Accessibility is a large and constantly growing field, growing in complexity as more kinds of disabilities are recognized, and designers and researchers refine approaches to web accessibility. We can\u2019t expect to make perfectly accessible content, graphics, or sites all the time, especially under time, money, and subject matter knowledge constraints. What matters ultimately, just like so many other things in life and work where the welfare of people is involved, is that you made an effort. \ud83d\ude42<\/p>\n\n\n\n<p>Thank you for looking at this training and I hope it helped you!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u201cBut consider for a second that all design is fundamentally assistive.\u201d \u2014 Margaret Andersen Good design provides for its users. Every step of the visual design process considers how best to make its content both beautiful and understandable. On a &hellip; <a href=\"http:\/\/sites.la.utexas.edu\/kb\/2022\/02\/18\/accessibility-in-ux-and-graphic-design\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":753,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[200711],"tags":[],"class_list":["post-8313","post","type-post","status-publish","format-standard","hentry","category-basic-trainings"],"_links":{"self":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/8313","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\/753"}],"replies":[{"embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/comments?post=8313"}],"version-history":[{"count":6,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/8313\/revisions"}],"predecessor-version":[{"id":8325,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/posts\/8313\/revisions\/8325"}],"wp:attachment":[{"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/media?parent=8313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/categories?post=8313"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/sites.la.utexas.edu\/kb\/wp-json\/wp\/v2\/tags?post=8313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}