Accessibility Notes

Last Updated: 11/28/24

A developer-focused checklist based on Web Content Accessibility Guidelines 2.2

When referring to accessibility guidelines, I found the documents to be pretty overwhelming and verbose. I didn't want it to prevent me from developing with accessibility in mind, so I designed this page to be easier to look at and find the information I need more quickly. I hope you find it helpful as well.

  • Perceivable

    Content must be presentable to users in a way they can preceive.

  • Operable

    Info and operation of the interface must be understandable.

  • Understandable

    Components and Navigation must be operable.

  • Robust

    Content must be robust enough that it can be interpreted by assistive technologies.

Levels of Conformance

  • A - The minimum level of conformance, which focuses on making sure a site is navigable.
  • AA - A mid-range level, usually the level required by accessibility laws.
  • AAA - The highest level of conformance to ensure that the most amount of people can successfully use your site.

Perceivable

  • Text Alternatives

    • Alt tags must be on every image on the site. If the image is non essential to the context, the alt attribute should contain an empty string.

      <img src="/" alt="Image description goes here." />

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • If the image is non essential, ensure that the empty string does not include a space or other characters in between the quotes in order to effectively hide the image from assistive technologies.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

      Additional Info : Using null alt text and no title attribute on img elements for images that assistive technology should ignore

    • Alt image descriptions should not include words like “image”, “icon”, or “picture”. This is because screen readers will already announce the presence of an image.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • All alt tag descriptions should be short and descriptive and convey the “why” of the image as it relates to the content. (Consider if the page still makes sense if the images were replaced by their text alternatives.)

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • Images being used as links should describe what will happen when the user clicks the image (rather than describing what it looks like) ie Logos. Do not include the words "link to (page name)" as screen readers will already announce that it is a link. Simply include the name of the page.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • Alt tag descriptions should have the first letter capitalized.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • Alt tag descriptions should contain whole sentences that end with a period.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • Alt tag descriptions should use correct grammar.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • If non-text content is a control or accepts user input, then it has a name that describes its purpose.

      <label for="firstname">First name:</label><input type="text" name="firstname" id="firstname"><br>

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

    • If non-text content is intended to create a specific sensory experience, then text alternatives should describe the experience.

      (A) - WCAG 1.1.1 Non-text Content "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed. Controls, Input, Time-Based Media, Test, Sensory, CAPTCHA, Decoration, Formatting, Invisible."

  • Time Based Media

    • Additional text support should describe audio or visual media in a more descriptive manner.
    • Captions should be provided for live audio.
    • Captions should be provided for all prerecorded audio content except when the media is a media alternative for text and is clearly labeled as such.
    • There should be a way to increase/decrease the volume on videos.
    • There should be a method provided to pause, stop, or mute any media content that begins playing automatically and which lasts 5 seconds or more.
  • Contrast

  • Responsiveness

    • Content is not restricted to portrait or landscape orientation.
    • All text can be resized up to 200% without loss of content, functionality or severely changing the design. To test, go to browser settings and change the base font size.
    • All font sizes should be in rem and not px.
  • Text

    • There should only be one one semantic H1 tag per page.
    • The width of the main text content should not be more than 80 characters.
    • Text alignment should not be justified.
  • Animations

    • All animations are written under @media(prefers-reduced-motion: no-preference).

Operable

  • Keyboard Accessible

    • Users should be able to reach all links and buttons by tabbing on the keyboard.

      (A) - WCAG 2.1.1 Keyboard "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints."

      (AAA) - WCAG 2.1.3 Keyboard (No Exception) "All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes."

    • Users should be able to navigate in and out of sections using only the TAB/SHIFT TAB.

      (A) - WCAG 2.1.2 Not Keyboard Trap "If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away."

    • If a keyboard shortcut is used, there should be a way to turn the shortcut off.

      (A) - WCAG 2.1.4 Character Key Shortcuts "If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true: A mechanism is available to turn the shortcut off; A mechanism is available to remap the shortcut to include one or more non-printable keyboard keys (e.g., Ctrl, Alt); The keyboard shortcut for a user interface component is only active when that component has focus."

  • Enough Time

    • There should be a way to turn off or extend time limited visual content. Users should be able to complete tasks without unexpected changes in content or context that are a result of a time limit.

      (A) - WCAG 2.2.1 Timing Adjustable "For each time limit that is set by the content, at least one of the following is true: The user is allowed to turn off the time limit before encountering it; or the user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or the user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or the time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or The time limit is essential and extending it would invalidate the activity; or the time limit is longer than 20 hours."

      (AAA) - WCAG 2.2.3 No Timing "Timing is not an essential part of the event or activity presented by the content, except for non-interactive synchronized media and real-time events."

    • For content that is moving/blinking/scrolling that starts automatically, is longer than 5 seconds and is shown alongside other content, controls should be provided.

      (A) - WCAG 2.2.2 Pause, Stop, Hide "For moving, blinking, scrolling, or auto-updating information, all of the following are true: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and for any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential."

    • Interruptions should be able to be suppressed or postponed by the user.

      (AAA) - WCAG 2.2.4 Interruptions "Interruptions can be postponed or suppressed by the user, except interruptions involving an emergency."

    • When an authenticated session expires during usage of a web app, a user should be able to continue the activity without loss of data after re-authenticating.

      (AAA) - WCAG 2.2.5 Re-authenticating "When an authenticated session expires, the user can continue the activity without loss of data after re-authenticating."

    • Users are warned of any user inactivity that could cause data loss.

      (AAA) - WCAG 2.2.6 2.2.6 Timeouts "Users are warned of the duration of any user inactivity that could cause data loss, unless the data is preserved for more than 20 hours when the user does not take any actions."

  • Seizures and Physical Reactions

    • Web pages should not contain anything that flashes more than 3 times in any 1 second.

      (A) - WCAG 2.3.1 Three Flashes or Below Threshold "Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds."

      (AAA) - WCAG 2.3.2 Three Flashes "Web pages do not contain anything that flashes more than three times in any one second period."

    • Animations can be disabled

      (AAA) - WCAG 2.3.3 Animation from Interactions "Motion animation triggered by interaction can be disabled, unless the animation is essential to the functionality or the information being conveyed."

  • Navigable

    • There should be a way to bypass repeated content For example, navigation menus should contain a skip link.

      (A) - WCAG 2.4.1 Bypass Blocks "A mechanism is available to bypass blocks of content that are repeated on multiple Web pages."

    • All web pages should have a <title> element that describes it’s topic or purpose.

      (A) - WCAG 2.4.2 Page Titled "Web pages have titles that describe topic or purpose."

    • Focusable components should receive focus in an order that preserves meaning focus in an order that preserves meaning.

      (A) - WCAG 2.4.3 Focus Order "If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability."

    • The purpose of each link can be determined from the link text or from the link text together with its link context, except where readers without disabilities would not know what a link would do until they activated it.

      (A) - WCAG 2.4.4 Link Purpose (In Context) "The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general."

      (AAA) - WCAG 2.4.9 Link Purpose (Link Only) "A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general."

    • There should be at least two general navigation mechanisms to find pages on your website; for example, navigation menu, breadcrumb trail, site search, site map, list of related links, etc.

      (AA) - WCAG 2.4.5 Multiple Ways "More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process."

    • Headings and labels should describe the topic or purpose.

      (AA) - WCAG 2.4.6 Headings and Labels "Headings and labels describe topic or purpose."

    • The keyboard focus indicator should be visible when used.

      (AA) - WCAG 2.4.7 Focus Visible "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible."

    • Information about the user's location should be availiable to the user. For example, a breadcrumb trail or sitemap.

      (AAA) - WCAG 2.4.8 Location "Information about the user's location within a set of Web pages is available."

    • Section headings should be used to organize the content.

      (AAA) - WCAG 2.4.10 Section Headings "Section headings are used to organize the content."

    • Focus should not be hidden due to author-created content.

      (AA) - WCAG 2.4.11 Focus Not Obscured (Minimum) "When a user interface component receives keyboard focus, the component is not entirely hidden due to author-created content."

      (AAA) - WCAG 2.4.12 Focus Not Obscured (Enhanced) "When a user interface component receives keyboard focus, no part of the component is hidden by author-created content."

    • Focus Indicators should be at least 2px thick and 3:1 contrast ratio.

      (AAA) - WCAG 2.4.13 Focus Appearance "When the keyboard focus indicator is visible, an area of the focus indicator meets all the following: is at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component or sub-component, and has a contrast ratio of at least 3:1 between the same pixels in the focused and unfocused states. Exceptions include: The focus indicator is determined by the user agent and cannot be adjusted by the author, or the focus indicator and the indicator's background color are not modified by the author."

  • Input Modalities

    • Maps that support pinch gestures to zoom into the map content, should also offer controls to operate the zoom in and out.

      (A) - WCAG 2.5.1 Pointer Gestures "All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential."

    • Content should be able to be operated with 1 finger.

      (A) - WCAG 2.5.1 Pointer Gestures "All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture, unless a multipoint or path-based gesture is essential."

    • Interactivity should happen on the up event of a mouse click and not on the down click.

      (A) - WCAG 2.5.2 Pointer Cancellation "For functionality that can be operated using a single pointer, at least one of the following is true: The down-event of the pointer is not used to execute any part of the function; Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion; The up-event reverses any outcome of the preceding down-event; Completing the function on the down-event is essential."

    • For form inputs and button controls that include a visible text label, the accessible name should match (or include) that same text.

      <button aria-label="Search this site">Search</button>

      (A) - WCAG 2.5.3 Label in Name "For user interface components with labels that include text or images of text, the name contains the text that is presented visually."

    • Content should not be dependent on a user's ability to move a device.

      (A) - WCAG 2.5.4 Motion Actuation "Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when: The motion is used to operate functionality through an accessibility supported interface; The motion is essential for the function and doing so would invalidate the activity."

    • The size of buttons should be at least be 44px by 44px.

      (AA) - WCAG 2.5.8 Target Size (Minimum) "The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target; The function can be achieved through a different control on the same page that meets this criterion; The target is in a sentence or its size is otherwise constrained by the line-height of non-target text; The size of the target is determined by the user agent and is not modified by the author; A particular presentation of the target is essential or is legally required for the information being conveyed."

      (AAA) - WCAG 2.5.5 Target Size (Enhanced) "The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels; The target is in a sentence or block of text; The size of the target is determined by the user agent and is not modified by the author; A particular presentation of the target is essential to the information being conveyed."

    • Users should be able to use and switch between different modes of input when interacting with web content. For example, switching between the mouse, stylus, keyboard and touchscreen.

      (AAA) - WCAG 2.5.6 Concurrent Input Mechanisms "Web content does not restrict use of input modalities available on a platform except where the restriction is essential, required to ensure the security of the content, or required to respect user settings."

    • For any action that involves dragging, provide a simple pointer alternative.

      (AA) - WCAG 2.5.7 Dragging Movements "All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging, unless dragging is essential or the functionality is determined by the user agent and not modified by the author."

Understandable

  • Readable

    • The main language of each web page should be stated in the lang attribute.

      <html lang="en">...</html>

      (A) - WCAG 3.1.1 Language of Page "The default human language of each Web page can be programmatically determined."

    • Words or phrases in a different language should be indicated using the lang atrribute.

      <p lang="en-GB">This paragraph is defined as British English.</p>

      <ul>
      <li><a href="..." lang="de">Deutsch</a></li>
      <li><a href="..." lang="it">Italiano</a></li>
      <li><a href="..." lang="fr">Français</a></li>
      </ul>

      (AA) - WCAG 3.1.2 Language of Parts "The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text."

    • Non common words should be given a definition and wrapped with the <dfn></dfn> tag.

      developer.mozilla.org - dfn

      <p>A <dfn>validator</dfn> is a program that checks for syntax errors in code or documents.</p>

      (AAA) - WCAG 3.1.3 Unusual Words "A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon."

    • Use the <abbr> tag to define acronyms and abbreviations.
      <abbr title='World Wide Web'>WWW</abbr>

      (AAA) - WCAG 3.1.4 Abbreviations "A mechanism for identifying the expanded form or meaning of abbreviations is available."

    • If the content contains complex information, there should be a simplified version provided as well.

      (AAA) - WCAG 3.1.5 Reading Level "When text requires reading ability more advanced than the lower secondary education level after removal of proper names and titles, supplemental content, or a version that does not require reading ability more advanced than the lower secondary education level, is available."

    • Users should be able to identify the pronunciation of ambiguous words.Options include providing the pronunciation immediately after the word and wrapped in paratheses or linking to the pronunciation.

      (AAA) - WCAG 3.1.6 Pronunciation "A mechanism is available for identifying specific pronunciation of words where meaning of the words, in context, is ambiguous without knowing the pronunciation."

  • Predictable

    • When any user interface component receives focus, should not initiate a change of context.
    • Page navigation should be consistent across the site.
  • Input Assistance

    • Labels or instructions should be provided when content requires user input.
    • If an input error is automatically detected, the item that is in error should be identified and the error is described to the user in text.

Robust

  • Parsing

    • All IDs should be unique.
    • Elements should have complete start and end tags.
    • Elements should not contain duplicate attributes
  • User Interface Components

    • Form controls should have an associated label element or title attribute
    • Iframes should have a title attribute.
  • Status Messages

    • Inputs should provide success feedback when data is submitted successfully.

Accessibilty by Component

  • Headings
    • The order of Heading tags should be correct in the DOM tree; Heading Levels should only increase by 1. dequeuniversity.com heading-order
      A code example of heading order.
    • There should be an h1 tag on every page
    • There should only be one H1 tag per page

Resources

This is a work in progress, more to come!