{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "Accessibility for visual designers |Digital.gov",
    "description": "Accessibility for visual designers",
    "home_page_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/","feed_url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/accessibility-for-teams/visual-design/index.json","item" : [
    {"title" :"Accessibility for visual designers","deck" : "","summary" : "","date" : "2018-07-09T09:00:00-05:00","date_modified" : "2025-01-27T19:42:55-05:00","topics" : {
        
            "accessibility" : "Accessibility",
            "product-and-project-management" : "Product and project management",
            "user-experience" : "User experience"
            },"primary_image" : { "uid" : "accessibility-for-teams-guide", "alt" :
  "Illustration of seven people in a meeting in office. One is standing, six, using laptops, are seated at a conference table. One employee is in a wheelchair.", "width" :
  "5800", "height" :
  "3379", "credit" :
  "", "caption" :
  "Color_life/iStock via Getty Images", "format" :
  "jpg" },"branch" : "bc-archive-content-3",
      "filename" :"visual-design.md",
      
      "filepath" :"guides/accessibility-for-teams/visual-design.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/accessibility-for-teams/visual-design.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/accessibility-for-teams/visual-design.md","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/accessibility-for-teams/visual-design/","content" :"\u003ch2 id=\"getting-started\"\u003eGetting started\u003c/h2\u003e\n\u003cp\u003eEveryone benefits from designs that are easier to see. People with different visual abilities see your designs in varying ways—the diverse nature of impairments creates a wide variation in how your designs are perceived. A clean and clear visual presentation helps everyone make sense of a website\u0026rsquo;s information and functionality.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eHow to use this guide:\u003c/strong\u003e\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eWe recommend planning for accessibility in your design process and regularly conducting accessibility testing throughout the design and development processes.\u003c/li\u003e\n\u003cli\u003eIf you have project-specific questions, ask your agency’s accessibility team.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"color-and-contrast\"\u003eColor and Contrast\u003c/h2\u003e\n\u003ch3 id=\"is-there-enough-contrast-between-text-and-its-background-color\"\u003eIs there enough contrast between text and its background color?\u003c/h3\u003e\n\u003ch4 id=\"why-its-important\"\u003eWhy it’s important\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eEsther has low vision and needs content to have enough contrast to read it.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"steps-to-take\"\u003eSteps to take\u003c/h4\u003e\n\u003col\u003e\n\u003cli\u003eProvide good contrast. Make sure the contrast between the text and background is greater than or equal to 4.5:1 for small text and 3:1 for large text.\n\u003cul\u003e\n\u003cli\u003eTest your color palette for accessible combinations with \u003ca href=\"https://toolness.github.io/accessible-color-matrix/\"\u003eAccessible Color Palette Builder\u003c/a\u003e or \u003ca href=\"http://contrast-grid.eightshapes.com/\"\u003eContrast Grid\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eMeasure the contrast between text and backgound colors with tools like \u003ca href=\"http://webaim.org/resources/contrastchecker/\"\u003eWebAIM\u0026rsquo;s Color Contrast Checker\u003c/a\u003e or a \u003ca href=\"https://github.com/getflourish/Sketch-Color-Contrast-Analyser\"\u003eSketch plugin\u003c/a\u003e.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eExceptions:\n\u003cul\u003e\n\u003cli\u003eColor contrast ratio requirements apply to text and graphics that are essential for understanding the content or functionality. You don’t need to meet color contrast requirements for logos or incidental graphic elements.\u003c/li\u003e\n\u003cli\u003eText that is part of a disabled control\u0026rsquo;s state or disabled buttons does not need to meet the minimum contrast ratio.\u003c/li\u003e\n\u003cli\u003eText that is part of a logo has no minimum contrast requirement.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eSlightly temper the contrast between your text and background color. For example: don’t use pure black text on a pure white background. Stark contrast can result in blurred or moving text for people with Irlen syndrome.\u003c/li\u003e\n\u003cli\u003eTo use text over images, add a solid background behind the text or a dark overlay to the image.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch4 id=\"resources\"\u003eResources\u003c/h4\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=128%2C14\u0026amp;currentsidebar=%23col_overview#visual-audio-contrast-contrast\"\u003eGuideline 1.4.3 – Contrast (Minimum)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eVideo tutorials:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eMeeting contrast requirements\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n\n\n\u003cdiv\n  class=\"video\"\n  style=\"position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;\"\n\u003e\n  \n  \u003ciframe src=\"https://www.youtube.com/embed/gH1JieTZQ1k\" title=\"Meeting Contrast Requirements\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" frameborder=\"0\" \u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\u003cul\u003e\n\u003cli\u003eHow I do an accessibility check (contrast)\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n\n\n\u003cdiv\n  class=\"video\"\n  style=\"position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;\"\n\u003e\n  \n  \u003ciframe src=\"https://www.youtube.com/embed/cOmehxAU_4s\" title=\"How I do an accessibility check\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" frameborder=\"0\" \u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\u003ch3 id=\"can-you-still-understand-everything-the-design-is-communicating-without-depending-on-color\"\u003eCan you still understand everything the design is communicating without depending on color?\u003c/h3\u003e\n\u003ch4 id=\"why-its-important-1\"\u003eWhy it’s important\u003c/h4\u003e\n\u003cul\u003e\n\u003cli\u003eJoel is red-green colorblind and can’t reliably make sense of information conveyed with color alone.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch4 id=\"steps-to-take-1\"\u003eSteps to take\u003c/h4\u003e\n\u003col\u003e\n\u003cli\u003eDon’t use color alone to convey meaning. Use icons, written content, and other visual elements to reinforce clear communication of the content.\u003c/li\u003e\n\u003cli\u003eTest what it’s like to view your designs through a \u003ca href=\"http://www.color-blindness.com/coblis-color-blindness-simulator/\"\u003ecolor blindness simulator\u003c/a\u003e.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch4 id=\"resources-1\"\u003eResources\u003c/h4\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cp\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=128%2C14\u0026amp;currentsidebar=%23col_overview#visual-audio-contrast-without-color\"\u003e1.4.1 Use of Color\u003c/a\u003e\u003c/p\u003e\n\u003ch2 id=\"layout-and-hierarchy\"\u003eLayout and Hierarchy\u003c/h2\u003e\n\u003cp\u003eCan you quickly understand the meaning of the page and complete your task?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-2\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eAvi is distracted and needs to fill out an important web form\u003c/li\u003e\n\u003cli\u003eBenny has attention deficit disorder and has trouble staying focused on busy pages\u003c/li\u003e\n\u003cli\u003eJuanita doesn’t feel confident about using technology because she previously wasn’t able to find what she was looking for.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-2\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eMake sure key information is discernable at a glance. Design minimally and intentionally so that the user can get as much info as quickly as possible.\u003c/li\u003e\n\u003cli\u003eCreate a clear hierarchy of importance by placing items on the screen according to their relative level of importance. For example, place important actions at the top or bottom of the screen (reachable with shortcuts).\u003c/li\u003e\n\u003cli\u003ePlan heading structure early. Ensure all content and design fits into a logical heading structure.\u003c/li\u003e\n\u003cli\u003eConsider reading order. The reading order should be the same as the visual order.\u003c/li\u003e\n\u003cli\u003eGroup related items in proximity to one another to help those who have low vision or trouble focusing on the screen.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-2\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://m2.material.io/design/usability/accessibility.html\"\u003eAccessibility - Material Design\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://webaim.org/resources/designers/\"\u003eWebAIM: Web Accessibility for Designers\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-sequence\"\u003e1.3.2 Meaningful Sequence\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=128%2C14\u0026amp;currentsidebar=%23col_overview#navigation-mechanisms-descriptive\"\u003e2.4.6 Headings and Labels\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"typography\"\u003eTypography\u003c/h2\u003e\n\u003cp\u003eCan you easily read and comprehend textual information on the page?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-3\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eZelda has low vision and has trouble reading small text.\u003c/li\u003e\n\u003cli\u003eYulia’s eyes are strained after a long day of working on a computer.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-3\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eUse a large enough font size for body text so that people can comfortably read.\u003c/strong\u003e Use at least an effective size of 16px, but this can vary depending on the design of the font.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMaintain a line length that promotes comfortable reading.\u003c/strong\u003e Don’t make lines too long or too short: 45-75 characters per line is acceptable and approximately 66 characters per line is comfortable. Shorter pieces of text are fine for captions, marginal text, and forms.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eChoose a typeface that emphasizes clarity and legibility.\u003c/strong\u003e\n\u003cul\u003e\n\u003cli\u003eFactors to consider:\n\u003cul\u003e\n\u003cli\u003eIt performs well when it’s small or large.\u003c/li\u003e\n\u003cli\u003eIt has a large x-height.\u003c/li\u003e\n\u003cli\u003eThe character is large for its point size.\u003c/li\u003e\n\u003cli\u003eThe metrics (such as x-height) are consistent between letterforms.\u003c/li\u003e\n\u003cli\u003eIndividual letterforms are distinct in shape and can’t they be confused with others. For example: I, l, and 1 are distinct. 0 and O are distinct.\u003c/li\u003e\n\u003cli\u003eThe typeface supports all of the characters and font styles that are needed.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eSome designers recommend sans-serif faces for UIs and serif faces for longform reading, but these are not hard-and-fast rules.\u003c/li\u003e\n\u003cli\u003eFor an easy place to get started, the \u003ca href=\"https://designsystem.digital.gov/\"\u003eU.S. Web Design Standards\u003c/a\u003e (USWDS) \u003ca href=\"https://designsystem.digital.gov/components/typography/\"\u003eTypography page\u003c/a\u003e includes a set of \u003ca href=\"https://designsystem.digital.gov/components/typography/#included-typefaces\"\u003eopen source typeface recommendations\u003c/a\u003e that emphasize legibility.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eUse headings to communicate hierarchy.\u003c/strong\u003e Ensure heading styles differ from paragraph text by some combination of size, weight, face, or color. This ensures they’re distinct from paragraph text but are related to each other with some consistency, which helps with scanning.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eUse your type size and line width to determine a line height that people can comfortably read.\u003c/strong\u003e The larger the type size and line width, the larger the line height should be. For running/body text, that’s usually around 1.4-1.65, headings at around 1-1.3, and captions or short lines at around 1.3. Lines that are leaded too tightly or loosely can diminish readability by making it harder for the eye to know where to return to when the line breaks.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-3\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/together/\"\u003eU.S. Web Design System (USWDS) research report: Inclusive design patterns\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://betterwebtype.com/\"\u003eBetter Web Type by Matej Latin\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://material.io/design/color/text-legibility.html\"\u003eText legibility - Material Design\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#visual-audio-contrast-visual-presentation\"\u003e1.4.8 Visual Presentation\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"graphics-and-images\"\u003eGraphics and images\u003c/h2\u003e\n\u003cp\u003eCan you easily understand content associated with graphics, icons, and images?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-4\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eMarisa primarily uses her mobile device to browse websites and has trouble interpreting visualizations with small text.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-4\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eMake sure all graphics have descriptive captions written in plain language.\u003c/li\u003e\n\u003cli\u003eAvoid using graphics when written content could communicate the same thing.\u003c/li\u003e\n\u003cli\u003eUse icons as helpful visual cues to connect to concepts. Only use icons purposefully and not for decoration. Use familiar icons that people are accustomed to associating with common actions, like a trash can to represent deleting something.\u003c/li\u003e\n\u003cli\u003eTo use text over images, add a solid background behind the text or a dark overlay to the image.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-4\"\u003eResources\u003c/h3\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=14%2C128\u0026amp;currentsidebar=%23col_overview\u0026amp;tags=images%2Cimages-of-text%2Ctext-alternatives#text-equiv\"\u003e1.1 Text Alternatives (Guideline)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=14%2C128\u0026amp;currentsidebar=%23col_overview#text-equiv-all\"\u003e1.1.1 Non-text Content\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-text-presentation\"\u003e1.4.5 Images of Text\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"data-visualizations\"\u003eData visualizations\u003c/h2\u003e\n\u003cp\u003eCan you understand the overall trend of the graph? Can you quickly grasp the relationship between parts of the data?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-5\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eKwame has trouble reading graphs with small text.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-5\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eFollow data visualization best practices: allow the data and your communication goals for the visualization to dictate the format and visual style, instead of the latest aesthetic trend.\u003c/li\u003e\n\u003cli\u003eSupport the visuals with a brief description of the overall trend that’s generated by the chart to give context.\u003c/li\u003e\n\u003cli\u003eEnsure the data and variables are clearly labeled.\u003c/li\u003e\n\u003cli\u003eMake sure there’s sufficient contrast between graph colors so people with color blindness can distinguish the colors.\u003c/li\u003e\n\u003cli\u003eConsider complementing the graph with a table of information so that it can be read more easily by screen reader users and when compressed to mobile.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-5\"\u003eResources\u003c/h3\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=11%2C111#text-equiv\"\u003e1.1 Text Alternatives (Guideline)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=14%2C128\u0026amp;currentsidebar=%23col_overview#text-equiv-all\"\u003e1.1.1 Non-text Content\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic\"\u003e1.3.1 Info and Relationships\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=128%2C14\u0026amp;currentsidebar=%23col_overview#visual-audio-contrast-without-color\"\u003e1.4.1 Use of Color\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"forms\"\u003eForms\u003c/h2\u003e\n\u003cp\u003eAre forms as simple as possible and only ask what’s needed to complete the task? Can you successfully complete the form?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-6\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eMateo is in a hurry to fill out a medical insurance form for his sick daughter.\u003c/li\u003e\n\u003cli\u003eJanet has dementia and needs to validate her identification to request a new social security card.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-6\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003ePresent fields in a single-column layout.\u003c/strong\u003e This keeps visual momentum moving down the page so users don’t have to reorient themselves with multiple columns. (Exceptions to this rule are short, logical fields that may be presented on the same row like \u003cem\u003eCity\u003c/em\u003e, \u003cem\u003eState\u003c/em\u003e, and \u003cem\u003eZip code\u003c/em\u003e.)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eEnsure form fields are visibly labeled.\u003c/strong\u003e\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eMake sure form fields have clearly defined boundaries\u003c/strong\u003e or outlines so that people with cognitive disabilities know the size and location of the click target.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eDo not use placeholder text in form fields.\u003c/strong\u003e Placeholder text causes usability issues because it disappears when content is entered into the form field. Hints and instructions should be persistent and placed outside of the field.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eProvide highly visible and specific error states.\u003c/strong\u003e Use multiple cues like color, icons, bold font weight, heavy border or outline, and helpful text to make sure users don’t overlook this critical information.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-6\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/components/form/\"\u003eUSWDS - Form component\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://designsystem.digital.gov/templates/form-templates/\"\u003eUSWDS - Form templates\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.nngroup.com/articles/web-form-design/\"\u003eNielsen Norman Group: Website Forms Usability: Top 10 Recommendations\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#text-equiv-all\"\u003e1.1.1 Non-text Content\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#content-structure-separation-programmatic\"\u003e1.3.1 Info and Relationships\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=128%2C14\u0026amp;currentsidebar=%23col_overview#consistent-behavior-receive-focus\"\u003e3.2.1 On Focus\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#minimize-error-cues\"\u003e3.3.2 Labels or Instructions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#ensure-compat-rsv\"\u003e4.1.2 Name, Role, Value\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"mobile\"\u003eMobile\u003c/h2\u003e\n\u003cp\u003eCan you understand key information and perform critical tasks on a mobile device?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-7\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eMiyako just lost her job and canceled her home internet to stretch her budget. She only uses her cell phone to browse the internet.\u003c/li\u003e\n\u003cli\u003eReza is recovering from a stroke and slowly relearning how to use his arm. He uses his phone to help him find information on the web.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-7\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eMake sure you can reach primary actions easily with either right or left thumbs.\u003c/li\u003e\n\u003cli\u003eMake touch targets at least 48px. This will allow the target to be tapped by the average adult finger pad, which measures 10mm. The icons may be smaller and you can work with your developer to extend padding past the icon.\u003c/li\u003e\n\u003cli\u003eIn most cases, touch targets are separated by 8px of space or more to ensure users don\u0026rsquo;t select the wrong action.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-7\"\u003eResources\u003c/h3\u003e\n\u003cp\u003eMobile Accessibility: How WCAG 2.0 and Other World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI) Guidelines Apply to Mobile:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/TR/mobile-accessibility-mapping/#touch-target-size-and-spacing\"\u003e3.2 Touch Target Size and Spacing\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/TR/mobile-accessibility-mapping/#placing-buttons-where-they-are-easy-to-access\"\u003e3.5 Placing buttons where they are easy to access\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"keyboard-access\"\u003eKeyboard access\u003c/h2\u003e\n\u003cp\u003eCan you reach anything that’s interactive using the tab key?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-8\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eMaria has tendonitis and is unable to use a mouse; instead, she uses the keyboard to navigate the web.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-8\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eUsing only your keyboard, navigate through the page using the \u003ccode\u003etab\u003c/code\u003e key.\u003c/li\u003e\n\u003cli\u003eMake sure you can reach all interactive elements and trigger them with the \u003ccode\u003espacebar\u003c/code\u003e, \u003ccode\u003eenter\u003c/code\u003e key, or arrow keys, and ensure that you have designed intentional styles for these states: focus, hover, active, and visited.\u003c/li\u003e\n\u003cli\u003eCheck to see that focus is always visible and that interactive items on the page appear  in logical order. Make sure that no content gets focused offscreen or is hidden from view.\u003c/li\u003e\n\u003cli\u003eCheck to see that the page includes a skip navigation link (if navigation is present before the main content). This will allow users to skip past navigation to reach the page’s main content.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-8\"\u003eResources\u003c/h3\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-keyboard-operable\"\u003e2.1.1 Keyboard\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#keyboard-operation-trapping\"\u003e2.1.2 No Keyboard Trap\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-order\"\u003e2.4.3 Focus Order| WCAG 2.0\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/#navigation-mechanisms-focus-visible\"\u003e2.4.7 Focus Visible\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eVideo tutorial:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eHow I do an accessibility check\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n\n\n\u003cdiv\n  class=\"video\"\n  style=\"position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;\"\n\u003e\n  \n  \u003ciframe src=\"https://www.youtube.com/embed/cOmehxAU_4s\" title=\"How I do an accessibility check\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" frameborder=\"0\" \u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\u003ch2 id=\"screen-reader\"\u003eScreen reader\u003c/h2\u003e\n\u003cp\u003eCan you use a screen reader to access the page content?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-9\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eAisha is blind and uses a screen reader to navigate the web.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-9\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eUse a screen reader to make sure you can land on controls and that they’re announcing content in the appropriate order and context (i.e. labels before form fields, headers before content, etc.).\u003c/li\u003e\n\u003cli\u003eIf forms are present, make sure the screen reader reads labels and instructions.\u003c/li\u003e\n\u003cli\u003eMake sure that all links are properly descriptive. For example, the link text “Read More” provides no context about where the user will go if they click it, while “Read more about dinosaurs” describes what’s on the other side of the link.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"use-voiceover-screen-reader-on-mac\"\u003eUse VoiceOver screen reader on Mac\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eTurn VoiceOver on\u003c/strong\u003e: command (⌘) + F5\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eGo into web area\u003c/strong\u003e: control + alt + shift + down arrow (⬇)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eNavigate right\u003c/strong\u003e: control + alt + right arrow (➡️️)\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eNavigate by heading\u003c/strong\u003e: control + alt + command (⌘) + H\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eClick\u003c/strong\u003e: control + alt + spacebar\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eUse rotor to browse pages. The rotor lists common elements like \u003ci\u003eheadings\u003c/i\u003e, \u003ci\u003elinks\u003c/i\u003e, and \u003ci\u003eimages\u003c/i\u003e, and lets you navigate directly to the element of your choosing.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eTurn on rotor\u003c/strong\u003e: control + alt + U\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eNavigate rotor\u003c/strong\u003e: left and right, up and down arrows\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"resources-9\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.nvaccess.org/download/\"\u003eDownload NVDA screen reader (NV Access)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eWeb Content Accessibility Guidelines (WCAG) 2.0 references:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=128%2C14\u0026amp;currentsidebar=%23col_overview#content-structure-separation-programmatic\"\u003e1.3.1 Info and Relationships\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eVideo tutorials:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eScreen Reader Basics: VoiceOver\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n\n\n\u003cdiv\n  class=\"video\"\n  style=\"position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;\"\n\u003e\n  \n  \u003ciframe src=\"https://www.youtube.com/embed/5R-6WvAihms\" title=\"Screen Reader Basics: VoiceOver\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" frameborder=\"0\" \u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\u003cul\u003e\n\u003cli\u003eHow I do an accessibility check (screen reader)\u003c/li\u003e\n\u003c/ul\u003e\n\n\n\n\n\n\n\u003cdiv\n  class=\"video\"\n  style=\"position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;\"\n\u003e\n  \n  \u003ciframe src=\"https://www.youtube.com/embed/cOmehxAU_4s\" title=\"How I do an accessibility check\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" frameborder=\"0\" \u003e\u003c/iframe\u003e\n\u003c/div\u003e\n\n\u003chr\u003e\n\u003cp\u003e\u003cstrong\u003eDisclaimer\u003c/strong\u003e: All references to specific brands, products, and companies are used only for illustrative purposes and do not imply endorsement by the U.S. federal government or any federal government agency.\u003c/p\u003e\n"}
  ]
}