Guideline:
Select a Guideline
1: Informative and grouped images must contain alternative text describing the purpose or meaning of the image(s).
2: Decorative images must have empty alternative text or be otherwise hidden from assistive technology.
3: Functional images must have alternative text describing the input's purpose.
4: Complex images (graphs, maps, charts) must have a text description of all relevant information.
5: CAPTCHAs must be identified with alternative text
6: CAPTCHAs which require user input offer at least two different modalities (e.g. visual and auditory)
7: Adjacent text and images which navigate to the same destination should be presented and announced as one link.
8: Audio-only content must supply a basic text transcript. The location must be referenced in the accessible name of the audio content.
9: Video-only content supplies either a descriptive text transcript or audio description. The location must be referenced in the accessible name of the video content.
10: Multimedia content must have caption support for audio. Captions must be accurate, must include dialogue, the individual speaking, and any relevant audio information.
11: Multimedia content must supply a text transcript OR an audio description.
12: Live multimedia content must be captioned. Captions must be accurate, must include dialogue, the individual speaking, and any relevant audio information.
13: Multimedia content must supply an audio description, which accurately informs the user of any important visual information not already conveyed through audio.
14: Landmarks present on the page are used to organize the correct type of content.
15: Wherever text appearance (i.e., bold, italics, underline, size) is used to convey information, that information must also be presented in text alone.
16: Headings must follow appropriate relative hierarchy to other headings on the same page.
17: Page structure is implemented with HTML. Visual appearance is implemented with CSS. Meaningful HTML is not used to solely achieve a visual effect or appearance.
18: Form inputs must have labels which are readable (programmatically determinable) by assistive technology.
19: Form input groupings (i.e., related radio buttons, related checkboxes, related text inputs like First/Last name) are grouped semantically.
20: Data tables may only be used to present tabular data. Data tables must include table headers, which are associated with the correct table cells. Descriptive text for data tables must be programmatically associated.
21: Layout tables must not include table headers, captions, or summaries. They should be marked with role="presentation".
22: All elements with semantic roles contain all required parent and child elements. (e.g., a "list" must contain "listitem").
23: Element IDs do not repeat more than once per page.
24: All content is available to (readable by) assistive technology.
25: The order in which content is presented in DOM must be logical.
26: Whitespace is not utilized to create text spacing within a word. Whitespace is not utilized to create columns or tables visually in plain text.
27: Instructions for operating web-based content and cues for identifying content does not rely exclusively on color, shape, size, position, or sound. (Above/Below references allowed)
28: Content is viewable in portrait and landscape device orientations, and the user is not prompted to switch orientation unless a specific orientation is essential.
29: The purpose of any form input about the user is identified in code when the purpose is defined in HTML.
30: Color may not exclusively distinguish between plain text and interactive text or distinguish one type of content from another without a 3:1 color contrast difference.
31: Color may not exclusively identify content or distinguish differences in any content (e.g. Red items are invalid, Green items are valid)
32: Auto-playing audio that lasts longer than 3 seconds must be pausable OR have an independent volume control.
33: Large-scale (24px or 19px bold) text must have a color contrast ratio of 3:1. Logos, inactive components, and pure decoration excluded.
34: Non Large-scale text must have a color contrast ratio of 4.5:1. Logos, inactive components, and pure decoration excluded.
35: Text can be resized up to 200% without page content disappearing or losing functionality
36: Text can be resized up to 200% without text clipping through other elements.
37: Images of text are not used when the same presentation can be made with native HTML/CSS. Logos and branding are excluded.
38: Content may only scroll in one dimension (horizontal or vertical) at a width and height equivalent of 320x256 pixels or larger. Excluded is content where a two-dimensional layout is necessary (video, data tables, maps, diagrams)
39: Active user interface components must meet a 3:1 color contrast ratio. (This includes buttons, inputs, custom focus indicators, dropdowns, checkboxes, and radio buttons.)
40: Graphical objects that describe important content must meet a 3:1 color contrast ratio; except flags, real-life imagery, branding, reference screencaps, and heatmaps.
41: No content or functionality may be lost when text is set to: Line spacing of 1.5x font size, Letter Spacing at 0.12x font size, Word spacing at 0.16x font size, and paragraph spacing 2x the font size.
42: Content generated by hover or focus can be dismissed without moving hover or focus.
43: Content generated by hover or focus of an element can be hovered over without the content disappearing.
44: Content generated by hover or focus of an element does not disappear until dismissed, is no longer valid, or hover or focus is removed.
45: All interactive elements must be able to be navigated to and interacted with using a Keyboard only.
46: Timing of keystrokes must not be required for interacting with any functionality.
47: Functionality available when hovering with a cursor must be available to keyboard input.
48: Focus that enters any element must be able to leave that element. If the method requires more than ESC, Arrow Keys, or Tab, the user must be informed of the method.
49: If any keyboard shortcut only requires letter, number, punctuation, or symbol characters, an option exists to turn it off, remap to include CTRL or ALT modifiers, OR be active on focus only.
50: Any time limit may be disabled, extended (with a 20 second warning), or adjusted; unless it is part of a current real-life event, it is essential, or has a time limit of 20 hours or more.
51: Any moving, blinking, or scrolling information that starts automatically, lasts over 5 seconds, and is part of other content must include a pause, stop, or hide mechanism.
52: Any automatically updating content that starts automatically and is part of other content must include a pause, stop, or hide mechanism.
53: No content may flash more than 3 times per any 1-second period.
54: Content which repeats on multiple webpages has a mechanism of skipping over it.
55: All pages have a title, which details the topic or purpose of the page. Titles should be organized from most-specific to least-specific.
56: Focus order must follow a logical sequence. Tabindex values must not interfere with the proper tab sequence of the page.
57: Dialog content must gain focus immediately or as the next press of TAB once activated. Dismissing dialog content returns focus to the trigger or to the next element in DOM after the trigger.
58: Link destination is described by link text on its own or by link text programmatically associated with other text on the page (except where the destination is ambiguous to all users).
59: Two or more mechanisms of finding a webpage are available, unless the page is accessed as part of a step in a process.
60: Headings that exist describe the topic or purpose of the content following after.
61: Labels describe the purpose of the inputs they are associated with.
62: Every focusable element has a focus indicator present.
63: Elements that currently have focus may never be hidden by other elements (such as a sticky header).
64: All functionality that uses multipoint, or path-based gestures can be operated with a single pointer without a path-based gesture, unless essential.
65: Functionality operated with a single pointer must: Not fire on the down event, fire on the up-event along with a way to abort or undo, reverse the function on the up-event, or completing the function on the down event is essential.
66: For user interface components with labels that include text or images of text, the accessible name contains the text that is presented visually.
67: Any functionality which is activated by device motion can be performed with a User interface component that does not require motion.
68: Any functionality which is activated by device motion can be disabled.
69: Any functionality that can be achieved by dragging (click and hold then move) must be operable without the need for dragging (unless essential).
70: All elements must have a clickable target size of at least 24x24 pixels unless the element is inline, controlled by the browser, or the "target offset" to all adjacent clickable elements is at least 24px.
71: The default language of each page must be defined in the html tag.
72: Text in a different language than the page default must be identified in HTML; aside from proper names, technical terms, words without a defined language, and words that are part of the vernacular of the immediately surrounding text.
73: When a user interface component gains focus, it may not trigger a change of context. (Submission of a form, new window launch, immediate change of focus, changing content on the page where such that the purpose is different)
74: When the setting or value of a User Interface component is changed, that does not trigger a change of context unless the user is informed of the behavior beforehand.
75: Navigations which are utilized on multiple pages keep the same relative order on all pages, unless the user initiates the change. (Items can be removed or added, but they must maintain the same order relative to each other)
76: Any components with similar functionality used on multiple pages must be labeled identically and function identically. (e.g. a header Search field must be labeled the same on all pages)
77: Help mechanisms such as contact details, messaging, chat, or self-help options must be in the same relative order on all pages where the information is present.
78: Whenever an input error is detected through validation, the user is informed of the error, and what was incorrect in the input.
79: Visible labels or instructions are available for all inputs and input groupings.
80: Labels describe any required fields or required formatting requirements. (e.g. If a MM/DD/YYYY format is required)
81: If an input error was detected due to a blank input on a required field, the user is informed of the fields which were left blank in the error message.
82: If an input error was detected due to an input that did not follow required formatting, the user is informed of the proper formatting in the error message.
83: If an input error was detected that was outside of the allowable range of values, the user is informed of the proper range in the error message.
84: Any legal or financial data input must be reversible, validated for input errors, or include a mechanism for reviewing, confirming, or correcting information before submission.
85: Users are not required to refill the same information in the same process unless it is available as a selection, is essential, is ensuring security, or the original information is no longer valid.
86: Login processes must not solely rely on cognitive tests. All steps in a login process must support some method that does not rely on memory or knowledge.
87: All elements have appropriate accessible names and roles assigned.
88: Iframes which present user-readable content require a title or description.
89: All custom functionality utilizes the appropriate ARIA features for states, properties, and values. (e.g. aria-expanded, aria-haspopup)
90: Status messages which change without a page reload notify users of assistive technologies without requiring the user to send focus to the message.
