{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "guides",
    "type" : "single",
    "title" : "Accessibility for front-end developers |Digital.gov",
    "description": "Accessibility for front-end developers",
    "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/front-end-development/index.json","item" : [
    {"title" :"Accessibility for front-end developers","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" :"front-end-development.md",
      
      "filepath" :"guides/accessibility-for-teams/front-end-development.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/bc-archive-content-3/content/guides/accessibility-for-teams/front-end-development.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/bc-archive-content-3/content/guides/accessibility-for-teams/front-end-development.md","url" : "/preview/gsa/digitalgov.gov/bc-archive-content-3/guides/accessibility-for-teams/front-end-development/","content" :"\u003ch2 id=\"getting-started\"\u003eGetting started\u003c/h2\u003e\n\u003cp\u003eAccessible front-end development ensures people with different abilities can access, understand, and navigate web content, regardless of how they\u0026rsquo;re accessing it. Front-end developers collaborate with other members of a cross-functional team to implement a robust user experience.\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 conducting accessibility testing throughout the design and development processes.\u003c/li\u003e\n\u003cli\u003eA good place to start testing is on high-touch pages, critical user paths, and site-wide templates.\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=\"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\"\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\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003eUse the keyboard to 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.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cul\u003e\n\u003cli\u003eUse semantic HTML elements that are accessible by default (For example: buttons, labeled inputs, etc.). If you must use divs for interactions, ensure they are focusable and labeled appropriately.\u003c/li\u003e\n\u003c/ul\u003e\n\u003col start=\"3\"\u003e\n\u003cli\u003eCheck to see that focus is always visible and appears in logical order.\u003c/li\u003e\n\u003cli\u003eMake 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\"\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#keyboard-operation\"\u003e2.1 Keyboard Accessible (Guideline)\u003c/a\u003e\u003c/li\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\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-1\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eDevonte is blind and uses a screen reader to navigate the web.\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\u003eUse a screen reader to make sure you can land on controls and that they’re announcing things as they should.\u003c/li\u003e\n\u003cli\u003eDetermine whether the HTML document has a language attribute so that screen readers will read it with the correct accent and pronunciation. For example: \u003ccode\u003e\u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt;\u003c/code\u003e.\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 \u0026ldquo;Read More\u0026rdquo; provides no context about where the user will go if they click it, while \u0026ldquo;Read more about dinosaurs\u0026rdquo; 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-1\"\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?start=145\" 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\u003eVideo tutorial: How 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?start=145\" title=\"How I do an accessibility check (screen reader)\" 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=\"headings\"\u003eHeadings\u003c/h2\u003e\n\u003cp\u003eAre you using accurate headings on your page?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-2\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eLalit is blind and uses a screen reader to navigate the web. She hears an outline of the page\u0026rsquo;s main ideas, then backtracks to read the parts she\u0026rsquo;s most interested in.\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\u003eHeadings briefly describe the section it introduces. Headings represent an outline of the content.\u003c/li\u003e\n\u003cli\u003eUse \u003ccode\u003eh1\u003c/code\u003e–\u003ccode\u003eh6\u003c/code\u003e to define your section headings, where \u003ccode\u003eh1\u003c/code\u003e is the highest section level and \u003ccode\u003eh6\u003c/code\u003e is the lowest.\u003c/li\u003e\n\u003cli\u003eAvoid skipping heading levels: Always start with \u003ccode\u003eh1\u003c/code\u003e, use \u003ccode\u003eh2\u003c/code\u003e next, and so on.\u003c/li\u003e\n\u003cli\u003eUse only one \u003ccode\u003eh1\u003c/code\u003e per page for the page title.\u003c/li\u003e\n\u003c/ol\u003e\n\n\n\n\u003carticle\n  class=\"dg-note \"\n\u003e\n  \u003ch4 class=\"dg-note__heading\"\u003e\n    \u003csvg\n      class=\"dg-note__icon usa-icon dg-icon dg-icon--large\"\n      aria-hidden=\"true\"\n      focusable=\"false\"\n    \u003e\n      \u003cuse xlink:href=\"/preview/gsa/digitalgov.gov/bc-archive-content-3/uswds/img/sprite.svg#notifications\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n    \n      Note\n    \n  \u003c/h4\u003e\n  While HTML5 allows you to reset headings to \u003ccode\u003eh1\u003c/code\u003e on new section elements, some screen reader users will have difficulty discerning the structure of pages with multiple h1s. For this reason, it’s best to include only one h1 per page.\n\u003c/article\u003e\n\n\u003ch3 id=\"resources-2\"\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#navigation-mechanisms-descriptive\"\u003e2.4.6 Headings and Labels\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eVideo tutorials:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eUsing headings\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/ZHWcs5d9IqA\" title=\"Using Headings\" 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 (page structure)\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?start=381\" title=\"How I do an accessibility check (screen reader)\" 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=\"page-structure\"\u003ePage structure\u003c/h2\u003e\n\u003cp\u003eAre you using semantic elements and roles?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-3\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003eCarlos is low-sighted and navigates pages by jumping to the page section he wants to get to.\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\u003eUse sectioning elements to create a broad outline of your page content; examples of these elements include \u003ccode\u003eheader\u003c/code\u003e, \u003ccode\u003enav\u003c/code\u003e, \u003ccode\u003emain\u003c/code\u003e, and \u003ccode\u003efooter\u003c/code\u003e. Use content sectioning elements like \u003ccode\u003esection\u003c/code\u003e, \u003ccode\u003earticle\u003c/code\u003e, and \u003ccode\u003easide\u003c/code\u003e to organize the document content into logical pieces.\u003c/li\u003e\n\u003cli\u003eAdd \u003ccode\u003erole=\u0026quot;banner\u0026quot;\u003c/code\u003e to your masthead and \u003ccode\u003erole=\u0026quot;contentinfo\u0026quot;\u003c/code\u003e to your page footer once per page to define landmark elements.\u003c/li\u003e\n\u003c/ol\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/?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\u003cp\u003eVideo tutorial:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eLandmarks\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/bww3IaktlRY?start=12\" title=\"Landmarks\" 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=\"images\"\u003eImages\u003c/h2\u003e\n\u003cp\u003eDo images have good alt text?\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 has to read the alt text to understand the contents of the image.\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 text will improve search).\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\u003eInclude meaningful information describing each image in the alt text.\u003c/li\u003e\n\u003cli\u003eUse null (empty) alt text when text describing the image is already on the page (\u003ccode\u003ealt=\u0026quot;\u0026quot;\u003c/code\u003e).\u003c/li\u003e\n\u003cli\u003eDon’t start the alt text with \u003cem\u003eImage of\u003c/em\u003e or \u003cem\u003ePhoto of\u003c/em\u003e – the screen reader already announces that images are images.\u003c/li\u003e\n\u003cli\u003eIf the image is decorative and you don’t want the screen reader to announce it at all, use null (empty) alt text (\u003ccode\u003ealt=\u0026quot;\u0026quot;\u003c/code\u003e) or CSS background images.\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=\"color-and-contrast\"\u003eColor and contrast\u003c/h2\u003e\n\u003ch3 id=\"why-its-important-5\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cp\u003eIs there enough contrast between text and its background color?\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eRohit has low vision and needs content to have enough contrast to read it.\u003c/li\u003e\n\u003cli\u003eEsther is red-green colorblind and can’t make sense of information conveyed with color alone.\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\u003eUse a \u003ca href=\"http://webaim.org/resources/contrastchecker/\"\u003ecolor contrast\u003c/a\u003e tool and test that the contrast between the text and background is greater than or equal to 4.5:1.\u003c/li\u003e\n\u003cli\u003eUse an \u003ca href=\"http://wave.webaim.org/\"\u003eautomated tool\u003c/a\u003e to quickly scan for color contrast problems.\u003c/li\u003e\n\u003cli\u003eDon’t use color alone to convey meaning. Use icons, text, and other visual elements to reinforce the meaning of the content.\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"resources-5\"\u003eResources\u003c/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://webaim.org/resources/contrastchecker/\"\u003eWebAIM Color Contrast Checker\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"http://accessible-colors.com/\"\u003eAccessible Colors\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#visual-audio-contrast-contrast\"\u003e1.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?start=516\" title=\"How I do an accessibility checks\" 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=\"automated-testing\"\u003eAutomated testing\u003c/h2\u003e\n\u003cp\u003eDid your accessibility testing tools provide accurate results?\u003c/p\u003e\n\u003ch3 id=\"why-its-important-6\"\u003eWhy it\u0026rsquo;s important\u003c/h3\u003e\n\u003cp\u003eIncluding automated accessibility testing throughout the development process can help quickly catch \u003ca href=\"https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/\"\u003emany accessibility errors\u003c/a\u003e, but can’t guarantee that your site is accessible.\u003c/p\u003e\n\u003cp\u003eAlways combine automated testing with ongoing manual testing. Manual testing is the most reliable method to assess accessibility.\u003c/p\u003e\n\u003ch3 id=\"steps-to-take-6\"\u003eSteps to take\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eQuick check\u003c/strong\u003e: Use a tool to quickly check for common errors in your browser. You can use \u003ca href=\"http://squizlabs.github.io/HTML_CodeSniffer/\"\u003eHTML CodeSniffer\u003c/a\u003e, \u003ca href=\"https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US\"\u003eaXe\u003c/a\u003e, \u003ca href=\"https://developers.google.com/web/tools/lighthouse/\"\u003eLighthouse Accessibility Audit\u003c/a\u003e, \u003ca href=\"https://accessibilityinsights.io/\"\u003eAccessibility Insights\u003c/a\u003e, or \u003ca href=\"http://wave.webaim.org/extension/\"\u003eWAVE\u003c/a\u003e.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eBuild process\u003c/strong\u003e: Integrate a tool like \u003ca href=\"https://github.com/dequelabs/axe-core\"\u003eaxe-core\u003c/a\u003e, \u003ca href=\"https://github.com/jsx-eslint/eslint-plugin-jsx-a11y\"\u003ejsx-a11y\u003c/a\u003e, \u003ca href=\"https://github.com/GoogleChrome/lighthouse/blob/master/docs/readme.md#using-programmatically\"\u003eLighthouse Audits\u003c/a\u003e, or \u003ca href=\"https://github.com/accesslint/accesslint.js/tree/master\"\u003eAccessLint.js\u003c/a\u003e into your project to programmatically add accessibility tests and catch errors as you build out your website.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eContinuous integration\u003c/strong\u003e: Use a tool like \u003ca href=\"https://www.accesslint.com/\"\u003eAccessLint\u003c/a\u003e to find accessibility issues in your GitHub pull requests.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSimulate impairments\u003c/strong\u003e: Use tools to simulate color blindness, low vision, zoom, low contrast, high contrast, and more.\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://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage/\"\u003eGOV.UK: What we found when we tested tools on the world’s least-accessible webpage\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 (tools and extensions)\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?start=537\" title=\"How I do an accessibility checks\" 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"}
  ]
}