{ "source": "https://github.com/w3c/wcag", "understanding": "https://www.w3.org/WAI/WCAG22/Understanding/", "license": "W3C Document License (code samples: W3C Software License)", "fetchedAt": "2026-08-31", "criteria": { "1.1.1": { "slug": "non-text-content", "brief": { "goal": "Non-text information is available to more people.", "whattodo": "Create a text alternative for visual and auditory content.", "whyitsimportant": "People who can’t fully see or hear content can understand it." }, "good": { "id": "H2", "title": "Combining adjacent image and text links for the same resource", "lang": "html", "code": "\n \"\"Products page\n", "note": "The icon and text are contained in the same a element." }, "bad": { "id": "F3", "title": "Failure of Success Criterion 1.1.1 due to conveying information exclusively using CSS background images", "lang": "css", "code": "ul#booklist li {\n padding-left: 20px;\n }\n \n ul#booklist li.new {\n background: transparent url(new.png) no-repeat top left; \n }\n \n ul#booklist li.limited {\n background: transparent url(limited.png) no-repeat top left; \n }\n \n ul#booklist li.instock {\n background: transparent url(instock.png) no-repeat top left; \n }\n \n ul#booklist li.outstock {\n background: transparent url(outstock.png) no-repeat top left; \n }\n\n \n

It is used in this excerpt:

\n \n
",
        "note": "A book distributor uses background images to provide icons against a list of book titles to indicate whether they are new, limited, in-stock, or out of stock. The CSS contains:"
      }
    },
    "1.2.1": {
      "slug": "audio-only-and-video-only-prerecorded",
      "brief": {
        "goal": "Audio and video-only content can be understood by more people.",
        "whattodo": "Provide an alternative when content is perceivable with only one sense.",
        "whyitsimportant": "People who can’t fully see or hear content can understand it."
      },
      "good": {
        "id": "G166",
        "title": "Providing audio that describes the important video content and describing it as such",
        "lang": "html",
        "code": "\n  \"Mars\n\n
Audio description of \"Mars Landing\"
",
        "note": "A web page has a link to a video-only presentation of a spaceship landing on Mars. The link to the video is a picture of a spaceship. Near the video is a link to an audio file of a person describing the video. This would look something like the following code example in HTML."
      }
    },
    "1.2.2": {
      "slug": "captions-prerecorded",
      "brief": {
        "goal": "Videos can be played with captions.",
        "whattodo": "Provide synchronized text for audio content in existing videos.",
        "whyitsimportant": "People who are deaf or hard of hearing can understand audio in videos."
      },
      "good": {
        "id": "H95",
        "title": "Using the track element to provide captions",
        "lang": "html",
        "code": "",
        "note": "Captions in one language A video element for a video in the English language with an English caption track. The captions are provided in the WebVTT format."
      }
    },
    "1.2.3": {
      "slug": "audio-description-or-media-alternative-prerecorded",
      "brief": {
        "goal": "Prerecorded videos can be understood by more people.",
        "whattodo": "Provide a description of the visual content in videos.",
        "whyitsimportant": "People who are blind or who cannot understand the visual content can have it described."
      },
      "good": {
        "id": "H53",
        "title": "Using the body of the object element",
        "lang": "html",
        "code": "\n  
Here is some text that describes the object and its operation.
\n",
        "note": "An object includes a long description that describes it"
      }
    },
    "1.2.4": {
      "slug": "captions-live",
      "brief": {
        "goal": "Live videos have captions.",
        "whattodo": "Provide synchronized text for audio content in real-time videos.",
        "whyitsimportant": "People who are deaf or hard of hearing can understand audio in real-time video content."
      }
    },
    "1.2.5": {
      "slug": "audio-description-prerecorded",
      "brief": {
        "goal": "Videos can be played with audio descriptions.",
        "whattodo": "Provide a synchronized spoken description of the visual content in videos.",
        "whyitsimportant": "People who cannot see or understand the visual content can hear about it while playing videos."
      }
    },
    "1.3.1": {
      "slug": "info-and-relationships",
      "brief": {
        "goal": "Information about content structure is available to more people.",
        "whattodo": "Use code to reinforce relationships and information conveyed through presentation.",
        "whyitsimportant": "People can adapt the presentation to suit their needs while preserving the original meaning."
      },
      "good": {
        "id": "H49",
        "title": "Using semantic markup to mark emphasized or special text",
        "lang": "html",
        "code": "... What she really meant to say was, "This is not OK, \n it is excellent"! ...",
        "note": "Using the em and strong elements to emphasize text The em and strong elements are designed to indicate structural emphasis that may be rendered in a variety of ways (font style changes, speech inflection changes, etc.)."
      },
      "bad": {
        "id": "F2",
        "title": "Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text",
        "lang": "html",
        "code": "",
        "note": "Using CSS to style the p element to look like a heading The author intended to make a heading but didn't want the look of the default HTML heading. So they used CSS to style the P element to look like a heading and they called it a heading. But they failed to use the proper HTML heading element. Therefore, the Assistive Technology could not distinguish it as a heading."
      }
    },
    "1.3.2": {
      "slug": "meaningful-sequence",
      "brief": {
        "goal": "The order of content can be understood by more people.",
        "whattodo": "Use code to preserve meaningful content order.",
        "whyitsimportant": "Assistive technology can present content to users in the proper order."
      },
      "good": {
        "id": "H56",
        "title": "Using the dir attribute on an inline element to resolve problems with nested directional runs",
        "lang": "html",
        "code": "
The title says \"פעילות הבינאום, W3C\" in Hebrew.
",
        "note": "Defining the text direction of a nested, mixed-direction phrase, in Hebrew and English, to be right-to-left Because the whole quote is in Hebrew, and therefore runs right to left, the text \"W3C\" and the comma should appear to the left of (i.e., after) the Hebrew text, like this: The title is \" פעילות הבינאום, W3C \" in Hebrew. Visually-ordered ASCII version ( RTL text in uppercase, LTR in lower): the title is \"w3c ,YTIVITCA NOITAZILANOITANRETNI\" in Hebrew. The Unicode bidirectional algorithm alone is insufficient to achieve the right result, and leaves the text \"W3C\" on the right side of the quote: The title is \" פעילות הבינאום , W3C\" in Hebrew. Visually-ordered ASCII version: the title is \"YTIVITCA NOITAZILANOITANRETNI, w3c\" in hebrew. The following markup will produce the expected result:"
      },
      "bad": {
        "id": "F32",
        "title": "Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word",
        "lang": "html",
        "code": "
W e l c o m e
\n
\n\n

  can also be used to add white space, producing similar failures:

\n\n
H E L L O
",
        "note": "Failure due to adding white space in the middle of a word This example has white spaces within a word to space out the letters in a heading. Screen readers may read each letter individually instead of the word \"Welcome.\""
      }
    },
    "1.3.3": {
      "slug": "sensory-characteristics",
      "brief": {
        "goal": "Instructions are understandable by more people.",
        "whattodo": "Describe controls by name, not just by appearance or location.",
        "whyitsimportant": "People who are blind or have low vision need non-visual instructions."
      },
      "good": {
        "id": "G96",
        "title": "Providing textual identification of items that otherwise rely only on sensory information to be understood",
        "lang": "html",
        "code": "
\n  
Sign up to our mailing list
\n    
\n      Complete the form and then press the lower-right (sign up) button.\n    
\n  
\n    \n    \n  
\n  
\n    \n    \n  
\n  \n  \n
",
        "note": "Button referenced by position and accessible name The following layout places a button in the lower right corner and indicates it by position. An indication of the text label clarifies which button to use for users for which the position is not meaningful. The HTML"
      }
    },
    "1.3.4": {
      "slug": "orientation",
      "brief": {
        "goal": "Devices can be used in any orientation.",
        "whattodo": "Don't lock content to either portrait or landscape presentation.",
        "whyitsimportant": "Wheelchair users and others may have devices mounted in a fixed orientation."
      },
      "bad": {
        "id": "F100",
        "title": "Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device",
        "lang": "html",
        "code": "",
        "note": "Block an orientation (\"door slam\") by using HTML and CSS The following example uses HTML and CSS to show a message asking to reorient the device if in landscape . The message will disappear if the orientation is changed to portrait . When the portrait property matches the viewport space defined via media queries, the message will disappear or vice versa. This particular example uses the CSS landscape , portrait media query properties."
      }
    },
    "1.3.5": {
      "slug": "identify-input-purpose",
      "brief": {
        "goal": "It is easier to fill out forms.",
        "whattodo": "Use code to indicate the purpose of common inputs, where technology allows.",
        "whyitsimportant": "Some people with cognitive disabilities may not understand the input's purpose from the label alone."
      },
      "good": {
        "id": "H98",
        "title": "Using HTML autocomplete attributes",
        "lang": "html",
        "code": "
\n  
\n    \n    \n  
\n  
\n    \n    \n  
\n  
\n    \n    \n  
\n  
\n    \n    \n  
\n  
\n    \n  
\n
",
        "note": "A user's credit card information This is a simple form that collects contact and credit card information from the user."
      }
    },
    "1.4.1": {
      "slug": "use-of-color",
      "brief": {
        "goal": "Color is not the only way of distinguishing information.",
        "whattodo": "Use information in addition to color, such as shape or text, to convey meaning.",
        "whyitsimportant": "Not everyone sees colors or sees them the same way."
      },
      "good": {
        "id": "G205",
        "title": "Including a text cue for colored form control labels",
        "lang": "html",
        "code": "\n\n",
        "note": "Required fields in an HTML form The instructions for an online form say, \"Required fields are shown in red and marked with (required).\" The cue \"(required)\" is included within the label element."
      },
      "bad": {
        "id": "F73",
        "title": "Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision",
        "lang": "html",
        "code": "\n  \n\n\n  
There are many resources to find out more about the \n     rain in Spain.\n  
\n",
        "note": "Removing the underline from a link in a sentence or paragraph without providing another visual cue besides color"
      }
    },
    "1.4.2": {
      "slug": "audio-control",
      "brief": {
        "goal": "A page that plays music or sounds doesn't disrupt people.",
        "whattodo": "If you play audio content automatically, let people turn it down or off.",
        "whyitsimportant": "Sound distracts some people, and also interferes with screen readers."
      }
    },
    "1.4.3": {
      "slug": "contrast-minimum",
      "brief": {
        "goal": "Text can be seen by more people.",
        "whattodo": "Provide sufficient contrast between text and its background.",
        "whyitsimportant": "Some people cannot read faint text."
      },
      "bad": {
        "id": "F24",
        "title": "Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa",
        "lang": "html",
        "code": "\n  \n  \n    Setting the canvas background\n    \n  \n  \n    
My background is white.
\n  \n",
        "note": "Specifying only background color with CSS In the example below the background color is defined on the CSS stylesheet, however the foreground color is not defined. Therefore, the example fails the Success Criterion."
      }
    },
    "1.4.4": {
      "slug": "resize-text",
      "brief": {
        "goal": "Text can be enlarged.",
        "whattodo": "Ensure text can be doubled in size.",
        "whyitsimportant": "Some people can only read text when it is bigger."
      },
      "good": {
        "id": "C28",
        "title": "Specifying the size of text containers using em units",
        "lang": "css",
        "code": "#nav_menu { width: 20em; height: 100em; }\n#nav_list { font-size: 100%; }",
        "note": "em units for sizes for layout container containing text In this example, a div element, with id value of \"nav_menu\" , is used to position the navigation menu along the left-hand side of the main content area of the web page. The navigation menu consists of a list of text links, with id value of \"nav_list\" . The text size for the navigation links and the width of the container are specified in em units."
      },
      "bad": {
        "id": "F69",
        "title": "Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured",
        "lang": "html",
        "code": "
 \n  Now is the time for all good men to come to the aid of their country. \n
\n
The quick brown fox jumps over the lazy dog.
",
        "note": "Overflowing text The font size is set in a scalable way, but the container is set to a fixed pixel size. A gray border shows the boundaries of the text container. When the text is resized, it spills out of its container, and obscures the next paragraph."
      }
    },
    "1.4.5": {
      "slug": "images-of-text",
      "brief": {
        "goal": "Users can adjust how text is presented.",
        "whattodo": "Use text instead of pictures of text.",
        "whyitsimportant": "People cannot alter how text looks in images."
      },
      "good": {
        "id": "C22",
        "title": "Using CSS to control visual presentation of text",
        "lang": "html",
        "code": "
The JavaScript method to convert a string to uppercase is toUpperCase().
",
        "note": "Using CSS font-family to control the font family for text The HTML component"
      }
    },
    "1.4.10": {
      "slug": "reflow",
      "brief": {
        "goal": "Content can be enlarged without increasing line length.",
        "whattodo": "Make lines of text reflow within the viewport.",
        "whyitsimportant": "People who need bigger text find it difficult if they must scroll to read long lines."
      },
      "good": {
        "id": "C32",
        "title": "Using media queries and grid CSS to reflow columns",
        "lang": "html",
        "code": "\n    \n      \n        \n        CSS: Using media queries and grid CSS to reflow columns\n        \n\n      \n\n      \n\n        
\n          ...\n        
\n\n        
        \n          ...\n          ...\n          
\n            
\n              ...\n            
\n            
\n              ...\n            
\n          
\n        
\n\n        \n\n        
\n          ...\n        
\n\n      \n    ",
        "note": "Grid layout in HTML and CSS - Medium complexity The following medium complexity example uses HTML and CSS to create a grid layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa. The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses fr units as a fraction of the free space of the grid container for the grid items by using the \"grid-template-columns\" property and are laid out in source order."
      }
    },
    "1.4.11": {
      "slug": "non-text-contrast",
      "brief": {
        "goal": "Important visual information meets the same minimum contrast required for larger text.",
        "whattodo": "Ensure meaningful visual cues achieve 3:1 against the background.",
        "whyitsimportant": "Some people cannot see elements with low contrast."
      },
      "good": {
        "id": "C40",
        "title": "Creating a two-color focus indicator to ensure sufficient contrast with all components",
        "lang": "css",
        "code": "*:focus {\n\t/* inner indicator */\n\toutline: 2px #F9F9F9 solid;\n\toutline-offset: 0;\n\t/* outer indicator */\n\tbox-shadow: 0 0 0 4px #193146;\n}",
        "note": "A thick two-color indicator In this example, the indicator consists of two solid bands of color. Because each color band is 2 CSS pixels thick, either color band is large enough to meet the minimum indicator size requirement on its own. As long as one of the two colors has 3:1 change contrast with the pixels behind and around the focus indicator, the indicator will satisfy both the Focus Appearance and Non-Text Contrast success criteria."
      },
      "bad": {
        "id": "F78",
        "title": "Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator",
        "lang": "css",
        "code": ":focus {outline: none}",
        "note": "The focus indicator is turned off with CSS The following CSS example will remove the default focus indicator, which fails the requirement to provide a visible focus indicator."
      }
    },
    "1.4.12": {
      "slug": "text-spacing",
      "brief": {
        "goal": "Users can adjust text spacing to make it easier to read.",
        "authortask": "Ensure content adapts to user-defined text settings.",
        "whyitsimportant": "Some people need text with different spacing or font characteristics."
      },
      "good": {
        "id": "C36",
        "title": "Allowing for text spacing override",
        "lang": "html",
        "code": "",
        "note": "A paragraph expands vertically within container The CSS"
      },
      "bad": {
        "id": "F104",
        "title": "Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted",
        "lang": "html",
        "code": "
\n  
Now is the time for all good men to come to \n   the aid of their country.
\n
\n
The quick brown fox jumps over the lazy dog.
",
        "note": "Text inside a box overflows and overlaps text below it when text spacing is implemented. The code below is what is implemented in the DOM before the user implements any CSS test spacing overrides. The text renders correctly in the box and doesn't interfere with the next paragraph."
      }
    },
    "1.4.13": {
      "slug": "content-on-hover-or-focus",
      "brief": {
        "goal": "More users can perceive and dismiss non-persistent content.",
        "whattodo": "If hover or focus causes content changes, ensure interaction is predictable.",
        "whyitsimportant": "Unpredictable temporary content can be hard for some to consume and may disrupt others."
      },
      "good": {
        "id": "SCR39",
        "title": "Making content on focus or hover hoverable, dismissible, and persistent",
        "lang": "html",
        "code": "
This is the \n   trigger\n   And this additional text \n    gives additional context on the trigger term\n   \n  .\n   Text and popup are in one link (a) element.\n
",
        "note": "Content preview for links When hovering over or focusing on a link, a content preview for the link appears just above or below that link. Users can move the pointer over the additional content (pop-up) so that they can fully read the additional content. Pressing the Esc key dismisses (closes) the additional content. HTML of example 1"
      }
    },
    "2.1.1": {
      "slug": "keyboard",
      "brief": {
        "goal": "Everything can be done with a keyboard except freehand movements.",
        "whattodo": "Ensure pointer actions have a keyboard equivalent.",
        "whyitsimportant": "Many people rely on the keyboard interface, including blind and some mobility impaired people."
      },
      "good": {
        "id": "H91",
        "title": "Using HTML form controls and links",
        "lang": "html",
        "code": "Example Site",
        "note": "Links User agents provide mechanisms to navigate to and select links. In each of the following examples, the role is \"link\" because the a element has an href attribute. An a element without an href isn't a link. The link's value is the URI in the href attribute. Link example A In example A, the name is the text inside the link, in this case \"Example Site\"."
      },
      "bad": {
        "id": "F54",
        "title": "Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function",
        "lang": "html",
        "code": "
\"Go
",
        "note": "An image that responds to a mouse click to go to another page This is a failure because the keyboard cannot be used to move to the next page."
      }
    },
    "2.1.2": {
      "slug": "no-keyboard-trap",
      "brief": {
        "goal": "Keyboard users don't get stuck.",
        "whattodo": "Ensure users always know how to navigate away from components.",
        "whyitsimportant": "People who rely on the keyboard often have no other means to navigate."
      }
    },
    "2.1.4": {
      "slug": "character-key-shortcuts",
      "brief": {
        "goal": "Reduce accidental activation of keyboard shortcuts.",
        "whattodo": "Ensure character-only shortcut keys can be turned off or modified.",
        "whyitsimportant": "Character-key shortcuts are easy to accidentally trigger, especially with speech input."
      }
    },
    "2.2.1": {
      "slug": "timing-adjustable",
      "brief": {
        "goal": "Users have adequate time to complete tasks.",
        "whattodo": "Let users turn off, adjust, or extend time limits.",
        "whyitsimportant": "People with disabilities may need more time to complete activities."
      },
      "good": {
        "id": "SCR16",
        "title": "Providing a script that warns the user a time limit is about to expire",
        "lang": "html",
        "code": "\n\n\n   \n   Stock Market Quotes\n   \n\n\n   
Stock Market Quotes
\n   ...\n\n",
        "note": "A page of stock market quotes uses script to refresh the page every five minutes in order to ensure the latest statistics remain available. 20 seconds before the five minute period expires, a confirm dialog appears asking if the user needs more time before the page refreshes. This allows the user to be aware of the impending refresh and to avoid it if desired."
      },
      "bad": {
        "id": "F40",
        "title": "Failure due to using meta redirect with a time limit",
        "lang": "html",
        "code": "\n\n\n  Do not use this!     \n  \n   \n     \n  
\n    If your browser supports Refresh, you'll be transported to our\n    new site in 5 seconds,\n    otherwise select the link manually.     \n  
   \n \n",
        "note": "The page below is a failure because it will redirect to the URI https://www.example.com/newpage after a time limit of 5 seconds."
      }
    },
    "2.2.2": {
      "slug": "pause-stop-hide",
      "brief": {
        "goal": "Fewer users are distracted by content that updates or moves.",
        "whattodo": "Let users control content changes that occur in parallel with other content.",
        "whyitsimportant": "Some people with cognitive disabilities and attention deficits are distracted by continuous movement."
      },
      "good": {
        "id": "SCR33",
        "title": "Using script to scroll content, and providing a mechanism to pause it",
        "lang": "html",
        "code": "...\n
\n  
This text will scroll and a Pause/Scroll link will be present \n  when JavaScript and CSS are supported and active.
\n
\n...",
        "note": "In this example CSS and JavaScript are used to visually present some text in a scrolling format. A link is included to pause the scrolling movement. This implementation will display the full text and omit the link when JavaScript or CSS are unsupported or inactive. The HTML component"
      },
      "bad": {
        "id": "F50",
        "title": "Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less",
        "lang": "html",
        "code": "",
        "note": "The following example uses script to blink content, but the blink continues indefinitely rather than stopping after five seconds."
      }
    },
    "2.3.1": {
      "slug": "three-flashes-or-below-threshold",
      "brief": {
        "goal": "Content does not trigger seizures.",
        "whattodo": "Avoid content that flashes, or keep it under thresholds.",
        "whyitsimportant": "Flashing content can cause migraines, dizziness, nausea, and seizures."
      }
    },
    "2.4.1": {
      "slug": "bypass-blocks",
      "brief": {
        "goal": "Users can more easily navigate by keyboard.",
        "whattodo": "Provide a means of skipping repeating content.",
        "whyitsimportant": "Users reliant on the keyboard interface can move around pages efficiently."
      },
      "good": {
        "id": "H69",
        "title": "Providing heading elements at the beginning of each section of content",
        "lang": "html",
        "code": "
Search Technical Periodicals
\n 
Search
\n 
\n  \n  \n  \n 
\n 
\n   
Available Periodicals
\n   \n 
\n 
\n   
Search Results
\n   ... search results are returned in this section ...\n 
",
        "note": "Organizing the sections of a search page This example marks up each section heading using h2 elements."
      }
    },
    "2.4.2": {
      "slug": "page-titled",
      "brief": {
        "goal": "Each web page has a meaningful title.",
        "whattodo": "Provide a descriptive page title using appropriate technology.",
        "whyitsimportant": "Page titles help users identify and distinguish different pages."
      },
      "good": {
        "id": "H25",
        "title": "Providing a title using the title element",
        "lang": "html",
        "code": "\n\n  \n    The World Wide Web Consortium     \n  \n  \n      ...   \n   \n",
        "note": "This example defines a document's title."
      }
    },
    "2.4.3": {
      "slug": "focus-order",
      "brief": {
        "goal": "Keyboard users navigate content in a correct order.",
        "whattodo": "Elements receive focus in an order that preserves meaning.",
        "whyitsimportant": "Navigating a site or application with only the keyboard will make sense."
      },
      "good": {
        "id": "H102",
        "title": "Creating modal dialogs with the HTML dialog element",
        "lang": "html",
        "code": "\n\n  \n    \n    \n    Turbo Encabulator News\n  \n  \n    
\n      
All The News About Turbo Encabulators
\n      \n    
\n    \n      
Sign up to our mailing list
\n      
\n        
All form fields are required.
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        
\n          \n          \n        
\n        \n      
\n     
\n        \n      
\n    \n  \n",
        "note": "A dialog to sign up to a mailing list This is an example of using a modal dialog element to show a mailing-list sign-up form to a user. The main part of the page contains a button element that, when activated, invokes the modal dialog . The button uses the type attribute to tell the browser that this isn't a submit button . When the modal dialog is opened, the browser will treat all content outside of the modal dialog as inert, rendering it inoperable and hiding the content from assistive technology. For example, a screen reader will not be able to reach or announce any of the inert content. Additionally, because the page content is inert, keyboard focus will only be able to reach focusable elements within the dialog element, and the browser's controls. When invoked, the browser automatically sets focus to the first focusable element in the dialog's DOM . In this example the h1 element will receive focus because it has a tabindex=\"-1\" attribute. Note that, although the dialog 's close button is visibly before the h1 , it is the last item in the dialog 's DOM. If the button was first, it would receive focus when dialog was opened. The HTML"
      },
      "bad": {
        "id": "F44",
        "title": "Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability",
        "lang": "html",
        "code": "
    \n  
  1. Homepage
    2. \n  
  2. Chapter 1
    3. \n  
  3. Chapter 2
    4. \n  
  4. Chapter 3
    5. \n
",
        "note": "The following example incorrectly uses tabindex to specify an alternative tab order:"
      }
    },
    "2.4.4": {
      "slug": "link-purpose-in-context",
      "brief": {
        "goal": "Users understand what each link will do.",
        "whattodo": "Provide descriptive names or context for all links.",
        "whyitsimportant": "People with visual and cognitive disabilities can navigate more easily."
      },
      "good": {
        "id": "H30",
        "title": "Providing link text that describes the purpose of a link for anchor elements",
        "lang": "html",
        "code": "\n  Current routes at Boulders Climbing Gym\n",
        "note": "Describing the purpose of a link in HTML in the text content of the a element."
      },
      "bad": {
        "id": "F63",
        "title": "Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link",
        "lang": "html",
        "code": "
A British businessman has racked up 2 million flyer miles and plans to \n   travel on the world's first commercial tourism flights to space.
\n
Read More...
",
        "note": "A Link in an Adjacent Paragraph A news service lists the first few sentences of an article in a paragraph. The next paragraph contains the link \"Read More...\". Because the link is not in the same paragraph as the lead sentence, the user cannot easily discover what the link will let the user read more about."
      }
    },
    "2.4.5": {
      "slug": "multiple-ways",
      "brief": {
        "goal": "Users can get to content in multiple ways.",
        "whattodo": "Provide at least two options for reaching the same content.",
        "whyitsimportant": "Not everyone can navigate content in the same way."
      }
    },
    "2.4.6": {
      "slug": "headings-and-labels",
      "brief": {
        "goal": "A page's content is described in headings and labels",
        "whattodo": "Provide descriptive headings and labels",
        "whyitsimportant": "People can orient themselves, especially those with cognitive or visual disabilities."
      },
      "good": {
        "id": "G130",
        "title": "Providing descriptive headings",
        "lang": "html",
        "code": "
Disaster preparation
\n
Flood preparation
\n
Fire preparation
",
        "note": "An HTML page that describes the range of tasks for disaster preparation"
      }
    },
    "2.4.7": {
      "slug": "focus-visible",
      "brief": {
        "goal": "Users know which element has keyboard focus.",
        "whattodo": "Ensure each item receiving focus has a visible indicator.",
        "whyitsimportant": "Without a focus indicator, sighted keyboard users cannot operate the page."
      },
      "good": {
        "id": "C15",
        "title": "Using CSS to change the presentation of a user interface component when it receives focus",
        "lang": "html",
        "code": "