{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "Accessibility for user experience designers |Digital.gov",
    "description": "Accessibility for user experience 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/ux-design/index.json","item" : [
    {"title" :"Accessibility for user experience 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" :"ux-design.md",
      
      "filepath" :"guides/accessibility-for-teams/ux-design.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/accessibility-for-teams/ux-design.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/accessibility-for-teams/ux-design.md","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/accessibility-for-teams/ux-design/","content" :"\u003ch2 id=\"getting-started\"\u003eGetting started\u003c/h2\u003e\n\u003cp\u003eAccessibility is usability for people who interact with products differently. Your role is to help the team approach accessibility as a facet of user experience rather than checklist of requirements.\u003c/p\u003e\n\u003cp\u003e\u003cstrong\u003eHow to use this guide:\u003c/strong\u003e\u003c/p\u003e\n\u003cul\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=\"inclusive-design\"\u003eInclusive design\u003c/h2\u003e\n\u003cp\u003eAdopt an inclusive design mentality\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003eCelebrate accessibility requirements as a set of design constraints that help you create a better product for all users.\u003c/li\u003e\n\u003cli\u003eGain a basic understanding of the main categories of disabilities, limitations, or constraints that affect how people use digital services:\n\u003cul\u003e\n\u003cli\u003eVision disabilities – such as blindness, low vision, or color blindness\u003c/li\u003e\n\u003cli\u003eHearing disabilities – such as deafness, low hearing, or tinnitus\u003c/li\u003e\n\u003cli\u003eMotor problems – such as hand tremors, physical deformities, or amputations\u003c/li\u003e\n\u003cli\u003eCognitive disorders – such as dyslexia, dementia, or being sleep deprived\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eUnderstand that almost everyone experiences some type of disability either permanently, temporarily, or situationally. For example: having only one arm is a permanent condition, having an arm in a cast is temporary, and holding a baby in one arm is situational – but in each case you’re restricted to completing tasks with one arm.\u003c/li\u003e\n\u003cli\u003eLook for ways that making your product easier to use for folks with disabilities also improves the experience for everyone.\u003c/li\u003e\n\u003cli\u003eDesign for progressive enhancement by making sure every person is able to use your product using the most basic technologies, while layering on better experiences for those who can use them.\u003c/li\u003e\n\u003cli\u003eWhen conducting user research, make sure the diversity of your participants reflects the diverse abilities, circumstances, and backgrounds of your actual users.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://www.microsoft.com/design/inclusive/\"\u003eMicrosoft’s Inclusive Design Manual\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://download.microsoft.com/download/b/0/d/b0d4bf87-09ce-4417-8f28-d60703d672ed/inclusive_toolkit_manual_final.pdf\"\u003eMicrosoft’s Inclusive Design Toolkit (PDF, 22 MB, 32 pages)\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://prod.rm.gfolkdev.net/a-web-for-everyone/personas-for-accessible-ux/\"\u003ePersonas for Accessible UX\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\"\u003e1.3 Adaptable (Guideline)\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#content-structure-separation-understanding\"\u003e1.3.3 Sensory Characteristics\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"assistive-technology\"\u003eAssistive technology\u003c/h2\u003e\n\u003cp\u003eGet familiar with the basic ways people use assistive technology (AT).\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eSome assistive technologies are likely only going to be used by people with specific, long-term disabilities. These include screen readers, switch devices, screen magnifiers, and others. Other kinds of assistive technologies may be more familiar to you and include voice control on your cell phone, ergonomic keyboards, or a browser’s native zoom function. People have different skill levels in how they use these technologies.\u003c/li\u003e\n\u003cli\u003eTo get a baseline knowledge of accessibility, take an \u0026ldquo;Accessibility 101\u0026rdquo; class, such as \u003ca href=\"https://www.udacity.com/course/web-accessibility--ud891\"\u003eUdacity’s Web Accessibility class\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003eLearn how to \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/accessibility-for-teams/front-end-development/\"\u003enavigate a webpage using only your keyboard\u003c/a\u003e and learn how to use a screen reader, \u003ca href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/accessibility-for-teams/front-end-development/#use-voiceover-screen-reader-on-mac\"\u003esuch as VoiceOver on your Mac\u003c/a\u003e so you can spot check new features when necessary. This can help you understand the technology itself, but keep in mind that folks who use it every day will often have their own strategies for using these tools.\u003c/li\u003e\n\u003cli\u003eObserve people using assistive technology (AT) on your product or others. In some cases you may be able to find videos demonstrating how people use different strategies to interact with digital products.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"resources-1\"\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=128%2C14\u0026amp;currentsidebar=%23col_overview#content-structure-separation\"\u003e1.3 Adaptable (Guideline)\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#content-structure-separation-programmatic\"\u003e1.3.1 Info and Relationships\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"humanize-accessibility\"\u003eHumanize accessibility\u003c/h2\u003e\n\u003cp\u003eHumanize accessibility for your team:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eCover accessibility and inclusive design issues when conducting user research. Consider the native language, \u003ca href=\"http://contentsmagazine.com/articles/the-audience-you-didnt-know-you-had/\"\u003eliteracy\u003c/a\u003e, digital literacy, and digital access of your users as well as potential visual, hearing, motor, and cognitive disabilities.\u003c/li\u003e\n\u003cli\u003eIncorporate accessibility considerations in your personas, user archetypes, or user stories. This could take the form of swapping out \u003ca href=\"https://www.perpendicularangel.com/portfolio/publications/published-on-the-pastry-box/an-alphabet-of-accessibility-issues/\"\u003eaccessibility issues in your personas\u003c/a\u003e or creating standalone user stories focused on accessibility.\u003c/li\u003e\n\u003cli\u003eHelp your team learn about the experience of using your product with assistive technology. (Keep in mind that the way a person with a disability uses assistive tools may be very different from your experience of the tools.) This could include:\n\u003cul\u003e\n\u003cli\u003eAsk each person on your team to turn off their mouse and trackpad and navigate the product using only their keyboard.\u003c/li\u003e\n\u003cli\u003eUnder your computer\u0026rsquo;s settings, look for the accessibility settings to change the display (Mac) or color filters (Windows) and switch to \u003ccode\u003egrayscale\u003c/code\u003e to explore your site without color to simulate color blindness.\u003c/li\u003e\n\u003cli\u003eFind an appropriate \u003ca href=\"https://empathyprompts.net/#diminished-problem-solving-skills\"\u003eempathy prompt\u003c/a\u003e and walk your team through it.\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eWhen possible, include users with disabilities in user research. During usability testing, make sure to allow them to use their own equipment (which has their own settings already in place).\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"resources-2\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://prod.rm.gfolkdev.net/a-web-for-everyone/personas-for-accessible-ux/\"\u003ePersonas for Accessible UX\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"tab-order\"\u003eTab order\u003c/h2\u003e\n\u003cp\u003eDo your wireframes or design mockups indicate a logical tab order for people using a keyboard, or other assistive technology, to navigate?\u003c/p\u003e\n\u003ch3 id=\"why-its-important\"\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. When focus jumps randomly around the page she gets confused.\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eHere are some other best practices for tab order.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eA user should be able to use the tab key to navigate to every interactive element on a page.\u003c/li\u003e\n\u003cli\u003eFor links, users should be able to activate them with the enter key.\u003c/li\u003e\n\u003cli\u003eFor buttons, users should be able to activate them with either the spacebar or the enter key.\u003c/li\u003e\n\u003cli\u003eUsers should be able to tab through interactive items in a logical order, usually from left to right and top to bottom. Sometimes a logical order will be obvious to your front end team based on a simple layout, but in more complicated layouts you may need to identify the tab order in your wireframes or mockups.\u003c/li\u003e\n\u003cli\u003eEach interactive element should have a visible focus state, work with your visual designer to make sure you’ve accounted for these.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"resources-3\"\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/#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=14%2C128\u0026amp;currentsidebar=%23col_overview#navigation-mechanisms-focus-order\"\u003e2.4.3 Focus Order\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#navigation-mechanisms-focus-visible\"\u003e2.4.7 Focus Visible\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"focus\"\u003eFocus\u003c/h2\u003e\n\u003cp\u003eHave you designed for logical focus behavior on interactive elements?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-1\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eJiang is blind and uses a screen reader to navigate the web. When a modal pops up and doesn’t receive focus, he may not even know it’s there.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take\"\u003eSteps to take\u003c/h3\u003e\n\u003cp\u003eWork with your front-end designer to identify any interactions on the page that require JavaScript or that can’t be created using default HTML elements. You should intentionally design how focus flows through these interactions.\u003c/p\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#navigation-mechanisms-focus-order\"\u003e2.4.3 Focus Order\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#navigation-mechanisms-focus-visible\"\u003e2.4.7 Focus Visible\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\u003c/ul\u003e\n\u003ch2 id=\"navigation-shortcuts\"\u003eNavigation shortcuts\u003c/h2\u003e\n\u003cp\u003eHave you included navigation shortcuts for screen reader and keyboard users?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-2\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eRasheed is blind and uses a screen reader to navigate the web; he uses landmark elements to quickly navigate through sections of a webpage.\u003c/li\u003e\n\u003cli\u003eLi’s vision is fine but has trouble using a mouse, so he navigates the web using only his keyboard – he hates having to tab through all the links in the header navigation to get to the main content of a page.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"steps-to-take-1\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eWork with your front end designer to identify the \u003ca href=\"https://www.w3.org/TR/wai-aria-practices/examples/landmarks/HTML5.html\"\u003ebasic landmark elements\u003c/a\u003e in your wireframes, particularly for complex layouts. Landmark elements are identified either through HTML5 semantic markers or through ARIA roles when HTML can’t identify something. You don’t need to be an expert on HTML or ARIA, as long as you know the basics.\n\u003cul\u003e\n\u003cli\u003eheader\u003c/li\u003e\n\u003cli\u003enav\u003c/li\u003e\n\u003cli\u003emain\u003c/li\u003e\n\u003cli\u003efooter\u003c/li\u003e\n\u003cli\u003esearch\u003c/li\u003e\n\u003cli\u003eform\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003cli\u003eInclude a “Skip to main content” link before the header for keyboard users. Keyboard users can’t take advantage of landmark navigation so a skip link helps them navigate more quickly. This link can be visually hidden but \u003ca href=\"http://webaim.org/techniques/skipnav/#hidden\"\u003eshould become visible when it has focus\u003c/a\u003e.\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=14%2C128\u0026amp;currentsidebar=%23col_overview#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=14%2C128\u0026amp;currentsidebar=%23col_overview#navigation-mechanisms-skip\"\u003e2.4.1 Bypass Blocks\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"forms\"\u003eForms\u003c/h2\u003e\n\u003cp\u003eCan all users understand and fill out forms?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-3\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eEsther is beginning to show signs of dementia and has trouble with short term memory loss, she needs context clues and instructions to stay visible on the screen or she loses her place.\u003c/li\u003e\n\u003cli\u003eJerome uses a screen magnifier and when validation messages are shown off to the side he can easily miss them.\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 all inputs have descriptive labels that remain visible even after a field has been filled in.\u003c/li\u003e\n\u003cli\u003eTry to use HTML form elements as much as possible, and test any custom interactions for use with screen readers and keyboard only.\u003c/li\u003e\n\u003cli\u003eUse a straw or make a narrow window with your fist and view the page through that, scanning vertically but not horizontally. This can help you discover if content is hidden from users using screen magnifiers.\u003c/li\u003e\n\u003cli\u003eMinimize the number of responses overall and that are displayed on a single page, but provide context clues throughout for people who might easily lose their place.\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.gov.uk/service-manual/design/form-structure\"\u003eUK.gov Government Digital Service (GDS) guidance on form structure\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=\"images\"\u003eImages\u003c/h2\u003e\n\u003cp\u003eHave you identified which images are meaningful and which images are decorative in mockups?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-4\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eCarmen’s page didn’t load all the way and didn’t get to download the images.\u003c/li\u003e\n\u003cli\u003eAmanda is blind and uses a braille reader to understand the content of images.\u003c/li\u003e\n\u003cli\u003eJohn is looking for information with a search engine and needs help being directed to the right content (descriptive alt tags will improve search).\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\u003eImages that are purely decorative shouldn’t be announced by the screenreader, work with your front-end developer to make sure they’re coded correctly.\u003c/li\u003e\n\u003cli\u003eImages that have meaning should include alt text and possibly a longer description, work with the content designer on your team to create these.\u003c/li\u003e\n\u003cli\u003eMaking sure any text in images of text is at least 14 points and has good contrast.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-7\"\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/#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=\"touch-targets\"\u003eTouch targets\u003c/h2\u003e\n\u003cp\u003eAre your touch targets large enough and easy to reach?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-5\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eHarold has gigantism due to a tumor on his pituitary gland during childhood. He has very large hands which makes small links, or links that are too close together difficult to tap on his phone.\u003c/li\u003e\n\u003cli\u003eRosa checks the latest news on her phone during her morning commute on a jostling bus, often while sipping from the coffee cup in her other hand.\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 you can reach primary actions easily with either right or left thumbs, even on larger phones. Items on the bottom of the screen tend to be easier to reach.\u003c/li\u003e\n\u003cli\u003eMake touch targets at least 44 px (pixels) or 10 mm (millimeters). This will allow the target to be tapped by the average adult finger pad, which measures 10 mm. The icons may be smaller and you can work with your developer to extend padding past the icon. Pay particular attention to how \u003ca href=\"https://digital.gov/guides/mobile-principles/tap-targets/\"\u003eline-height affects touch target size\u003c/a\u003e.\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/WCAG21/Understanding/target-size.html\"\u003e2.5.5 Touch Target (WCAG 2.1)\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\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/#h-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\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"}
  ]
}