Accessibility Guidelines

• ‍All Non-Text Content: Must have a text alternative that serves the same purpose.‍
• Controls and Input: If the non-text content is a control (e.g., a button) or accepts user input, it must have a name describing its purpose.‍
• Time-Based Media: For audio or video content, the text alternative should at least identify the content.‍
• Sensory Content: For content meant to create a sensory experience, provide a descriptive identification.‍
• CAPTCHA: Provide text alternatives describing the CAPTCHA’s purpose and offer different types of CAPTCHA for various sensory perceptions.‍
• Decoration and Formatting: If the content is decorative or used for formatting, it should be implemented in a way that assistive technology can ignore it.

• Prerecorded Audio-Only: Provide a text alternative that conveys the same information as the audio.

• Prerecorded Video-Only: Provide either a text alternative or an audio description that conveys the same information as the video.

‍

• Captions Required: Provide captions for all prerecorded video content that includes audio.

• Audio Description: Provide an audio track that describes the visual content of the video.

• Media Alternative: Offer an alternative form of media that conveys the same information as the video.

• Exceptions: An audio description or media alternative is not required if the video is a media alternative for text and is clearly labeled as such.

• Live Captions: Provide real-time captions for all live audio content in synchronized media.

• Scope: Captions should be available for all live audio broadcasts, including webcasts and live streams.

• Audio Description Required: Provide an audio description for all prerecorded video content.

• Synchronized Media: The audio description should be synchronized with the video, describing visual elements and actions as they occur.

• Sign Language Interpretation Required: Provide a sign language interpretation for all prerecorded audio content in synchronized media.

• Scope: Sign language interpretation should be available for all prerecorded audio in time-based media.

• Extended Audio Description Required: Provide extended audio descriptions for prerecorded videos where regular pauses in the audio are insufficient to describe the visual content adequately.

• Alternative Version: Offer an alternative version of the video that includes extended audio descriptions. This version should temporarily pause the main audio (and video) to allow detailed descriptions to be provided between dialogue.

‍

• Text Alternative Required: Offer a text equivalent for all prerecorded synchronized media and prerecorded video-only content.

• Scope: The text alternative must be different from captions or a transcript and should fully convey the information presented in the video.

• Text Alternative Required: Provide a text equivalent for all live audio-only content.

• Scope: The text alternative should deliver the same information as the live audio, making it accessible for individuals who cannot hear or understand the audio.

‍

• Programmatic Structure: Use the correct HTML elements (e.g., headings, lists, tables) to define the content’s structure and relationships.

• Consistent Meaning: Ensure that the meaning and relationships of content are preserved even when visual styling changes.

• Assistive Technology: Screen readers and other assistive technologies should be able to determine the content’s structure and relationships accurately without relying on visual presentation.

‍

• Correct Reading Sequence: The sequence in which content is presented should reflect its logical and meaningful order.

• Programmatic Determination: The correct reading order can be programmatically determined and should be preserved even when visual styling changes.

• Assistive Technology: Screen readers and other assistive technologies should present content in the intended order, regardless of how it is styled or arranged visually.

• Descriptive Instructions: Provide instructions for using controls and components based on their function or name, not just on their visual or sensory attributes.

• Non-Visual Guidance: Instructions should be understandable without relying on sensory characteristics such as color, shape, size, position, or sound.

• Flexible Orientation: Content should not be restricted to a single display orientation (portrait or landscape) unless a specific orientation is essential for functionality.

• Orientation Adaptability: The content should remain accessible and functional when the device is rotated between portrait and landscape orientations.

• Programmatic Identification: Ensure that the purpose of each input field can be programmatically determined using appropriate HTML elements or attributes.

• Field Types and Labels: Use clear labels and input types that specify what information is expected and enable features like autocomplete when appropriate.

• Programmatic Identification: Ensure that the purpose of user interface components, icons, and regions can be programmatically determined using appropriate code or attributes.

• Clear Meaning: Use ARIA roles, landmarks, or other markup techniques to describe the purpose and function of key elements on the page.

• Multimodal Communication: Use more than just color to convey information, indicate actions, or differentiate elements.

• Complementary Methods: Provide additional cues, such as text labels, patterns, or shapes, to ensure that information is accessible to those who may have color vision deficiencies or other visual impairments.

‍

• Vertical Scrolling: Content must fit within a width of 320 CSS pixels without horizontal scrolling.

• Horizontal Scrolling: Content must fit within a height of 256 CSS pixels without vertical scrolling.

• Exceptions: Content requiring two-dimensional scrolling, like maps, diagrams, presentations, data tables, and games, is not subject to this requirement.

‍

• Contrast Ratio: Visual elements must have a contrast ratio of at least 3:1 against adjacent colors.

• User Interface Components: Contrast is required for elements necessary for understanding the interface, excluding inactive components or those whose appearance is not controlled by the author.

• Graphical Objects: Contrast is required for parts of graphics essential for understanding the content, except when specific presentation is crucial to convey information.

• Line Height: At least 1.5 times the font size.

• Paragraph Spacing: At least 2 times the font size.

• Letter Spacing: At least 0.12 times the font size.

• Word Spacing: At least 0.16 times the font size.

• No Loss of Content: Content or functionality must not be lost when users adjust these settings.

• Dismissible: Users can dismiss additional content without changing hover or focus, unless it’s an input error or doesn’t obscure or replace other content.

• Hoverable: Additional content triggered by hover remains visible if the pointer moves over it.

• Persistent: Content remains visible until the trigger is removed, the user dismisses it, or the content is no longer valid.

• Control Mechanism: If audio plays automatically for more than 3 seconds, provide a control mechanism to pause or stop the audio.

• Volume Control: Alternatively, provide a way to adjust the audio volume independently from the system volume.

• Contrast Ratio: Text and images of text must have a minimum contrast ratio of 4.5:1 against their background.

• Large Text: For large text (18px or larger), the contrast ratio should be at least 3:1.

• Incidental Text: Text or images of text that are purely decorative, part of inactive user interface components, or not visible do not need to meet contrast requirements.

• Logotypes: Text that is part of a logo or brand name is exempt from contrast ratio requirements.

• Resizing Capability: Text can be resized up to 200% from its original size without the need for assistive technology.

• Content and Functionality: When text is resized, all content and functionality must remain accessible and usable.

Text vs. Images: Use text to convey information instead of using images of text, unless:

• Customizable: The image of text can be customized to meet user requirements.

• Essential: The specific presentation of the text is crucial to conveying the intended information (e.g., logotypes or brand names).

• Contrast Ratio: Text and images of text must have a contrast ratio of at least 7:1 against their background.

• Large Text: Large-scale text (18px or larger) must have a contrast ratio of at least 4.5:1.

• Incidental Text: Text or images of text that are decorative, part of inactive UI components, not visible, or part of a picture with significant other visual content are exempt from contrast requirements.

• Logotypes: Text within logos or brand names does not need to meet the enhanced contrast ratio.

‍

For prerecorded audio-only content that features primarily speech (excluding audio CAPTCHAs, audio logos, or musical vocalizations), one of the following must apply:

• No Background: The audio does not contain any background sounds.

• Turn Off: Background sounds can be turned off by the user.

• 20 dB Lower: Background sounds are at least 20 decibels lower than the foreground speech, except for brief, occasional sounds lasting only 1-2 seconds.

‍

For blocks of text, one or more of the following must be possible:

• Color Customization: Users can select foreground and background colors.

• Width Limitation: Text width is limited to no more than 80 characters or glyphs per line (40 characters for CJK languages).

• Text Alignment: Text is not justified (aligned to both left and right margins).

• Line and Paragraph Spacing:

• Line spacing (leading) is at least 1.5 times the font size within paragraphs.

• Paragraph spacing is at least 1.5 times larger than the line spacing.

• Text Resizing: Text can be resized up to 200% without requiring horizontal scrolling.

Use Images of Text only when:

• Decorative: The text is used purely for decoration and does not convey critical information.

• Essential Presentation: The specific presentation of text is essential for conveying meaning (e.g., logotypes or certain branding elements).

• Keyboard Accessibility: All features must be accessible through keyboard navigation.

• No Timing Restrictions: Keyboard actions should not require specific timing or sequences unless the function inherently needs user movement paths.

• Keyboard Navigation: Users must be able to move focus away from any component using only the keyboard.

• Guidance for Non-Standard Methods: If non-standard keyboard methods are needed to exit a component, users should be informed.

• Keyboard Operation: All functionalities must be operable using a keyboard.

• No Timing Requirements: Functions should not require specific timing or sequences of keystrokes.

• Turn Off: Provide a mechanism to disable the shortcut.

• Remap: Allow remapping the shortcut to include non-printable keys (e.g., Ctrl, Alt).

• Active on Focus: Ensure shortcuts are active only when the relevant component has focus.

• Turn Off: Users can turn off the time limit before it starts.

• Adjust: Users can adjust the time limit to be at least ten times the default setting.

• Extend: Users are warned before time expires, given at least 20 seconds to extend the time limit with a simple action, and can extend it at least ten times.

• Exceptions: Time limits that are essential for real-time events, longer than 20 hours, or are crucial for the activity are exempt.

• Moving, Blinking, Scrolling: Provide a way to pause, stop, or hide content that moves, blinks, or scrolls automatically for more than 5 seconds when presented with other content.

• Auto-Updating: Provide a way to pause, stop, hide, or control the update frequency of auto-updating content that starts automatically when presented with other content.

• No time limits are imposed for tasks or interactions, except for synchronized media (e.g., video) or real-time events.

• Users can delay or turn off interruptions, except in emergencies.

• Users can continue their activity and retain their data after re-authenticating if their session expires.

• Users are warned about the duration of inactivity that could lead to data loss, unless data is preserved for more than 20 hours.

• Content does not flash more than three times per second.

• Flashes must be below the general flash and red flash thresholds.

• Content flashes no more than three times per second.

• Users can disable animations triggered by interactions unless the animation is essential for functionality or conveying information.

Users can skip repetitive content blocks that appear on multiple pages.

• Headings are used to separate and organize content into distinct sections.

• Headings can be titles or other forms of content labels.

• Any element that receives keyboard focus must not be completely obscured by other content or off-screen.

• If content can be moved or repositioned by the user, ensure the initial position of the focusable component is not hidden.

• No part of the component that receives keyboard focus should be covered by other content or be out of view.

• Ensure that the component is fully visible within the viewport, without requiring the user to scroll or adjust the view to see it.

• The focus indicator is at least as wide as a 2 CSS pixel thick border of the unfocused component.

• The focus indicator has a contrast ratio of at least 3:1 between its focused and unfocused states.

Web pages must have titles that clearly describe the content or purpose of the page.

Focusable components must follow a logical order that preserves the intended meaning and functionality during keyboard navigation.

The purpose of each link is understandable from its text or from the context provided by nearby content.

At least two methods are available to locate a web page within a set of pages, unless the page is a necessary step in a process or results from a specific action.

Headings and labels accurately describe the content or functionality they represent.

All keyboard-focusable elements display a visible indicator when in focus.

Users can always identify their current location within the site’s structure through visible navigational aids.

The purpose of each link can be determined from the link text alone. The text should be clear and informative, avoiding ambiguity.

• Any function that is activated by multi-touch or path-based gestures must also be operable with a single touch or pointer gesture, unless the complex gesture is essential to the functionality.

For functionality operated by a single pointer, at least one of the following must be true:

• No Down-Event: The action is not executed until the pointer is released.

• Abort or Undo: The function is completed on the up-event, and users have a way to cancel the action before completion or undo it afterward.

• Up Reversal: The up-event reverses any outcome of the preceding down-event.

• Essential: The function requires completion on the down-event due to its nature (e.g., emulating a keyboard key press).

For user interface components with visual labels (text or images of text):

• The name in the code must include the text presented visually.

• Ideally, the text of the label should appear at the beginning of the accessibility name.

• Functionality operable by device motion must also be operable through a non-motion-based interface.

• Users must be able to disable motion-based interactions to prevent accidental activation, unless:

• Supported Interface: The motion-based functionality is supported by an accessible interface.

• Essential: The motion-based functionality is crucial and cannot be replaced by another method without affecting the activity’s purpose.

• Interactive targets must be at least 44 by 44 CSS pixels in size.

‍

• Users can switch between different input methods (like mouse, keyboard, touch, or voice) without restrictions.

• Input methods should not be limited unless it is necessary for security reasons, to follow user settings, or if the restriction is essential for specific functionality.

• All features that involve dragging can be operated using a simple pointer action without dragging.
• Dragging should only be used if it is essential for the function or if it is determined by the user agent and cannot be changed by the content author.

• Targets must be at least 24 by 24 CSS pixels.

• If targets are smaller than 24 by 24 pixels, they should be spaced so that they do not overlap when a 24-pixel diameter circle is centered on each.

• Alternatives are provided if targets are smaller than the minimum size.

• The default human language of the page is specified in the code.

• The language of each passage or phrase within the content is specified, except for proper names, technical terms, indeterminate words, and adopted vernacular phrases.

• A clear mechanism is provided to access definitions for words or phrases that are used in an unusual way, including technical jargon, idioms, or specialized terms.

A clear method is available to view the expanded form or full meaning of any abbreviations used in the content.

• When text exceeds the reading level of lower secondary education (approximately 9 years of schooling), provide an alternative version that is easier to understand.

• Alternatively, offer supplemental content such as audio, illustrations, or a summary that conveys the same information in a simpler form.

• Provide a clear mechanism for users to learn the pronunciation of words when it is necessary to understand their meaning.

When a user interface element gains focus, the context or page does not change unexpectedly.

• Changes to a user interface component should not automatically result in a context change unless the user has been informed beforehand.

• Navigation elements that appear on multiple pages should have a consistent order and location unless the user explicitly changes it.

• Components with identical functions should have consistent labels, icons, and accessibility attributes across all pages.

• Major content or context changes should only occur in response to a user action or request.

• Provide a mechanism to turn off automatic changes if they are triggered by user actions.

‍

• Help mechanisms (such as contact details, self-help options, and automated contact methods) should be in the same position on every page where they appear.

• The order of these help mechanisms relative to other page content should remain consistent unless the user initiates a change.

• When an error is detected in user input, the affected item must be highlighted or indicated.

• A descriptive error message must be provided to explain what went wrong and how to correct it.

• Every input field, dropdown, or interactive element must have a descriptive label or instruction indicating what information is required.

• Instructions should be provided where the purpose of the input or action is not immediately clear.

• When an error is detected, provide specific suggestions on how to fix the issue.

• Suggestions should be clear, actionable, and relevant to the error encountered.

• Avoid providing suggestions if it compromises security or the purpose of the content.

For actions that involve legal commitments, financial transactions, or data changes, implement at least one of the following measures:

• Reversible: Allow users to undo or reverse their actions.

• Checked: Validate user input for errors and provide options to correct them.

• Confirmed: Provide a mechanism to review, confirm, and correct information before finalizing the submission.

‍

• Context-sensitive help is available for users while they are performing tasks, offering relevant information or guidance.

At least one of the following mechanisms must be available for pages where users submit information:

• Reversible: Submissions can be undone.

• Checked: Data entered by the user is validated for errors, and users can correct these errors.

• Confirmed: Users can review and confirm their information before finalizing the submission.

Information that has already been provided should be:

• Auto-Populated: Automatically filled in when needed again.

• Available for Selection: Presented to the user as an option to select from previously entered data.

‍

Authentication processes must not require users to solve puzzles, remember passwords, or transcribe codes unless:

• Alternative Method: An alternative authentication method is provided that does not rely on cognitive tasks.

• Assistance Mechanism: There is a mechanism to assist users in completing the cognitive task.

• Object Recognition: The cognitive task involves recognizing objects.

• Personal Content: The task involves identifying non-text content that the user has previously provided.

• Authentication methods must not require users to recognize objects, images, or non-text media.

‍

If cognitive function tests (CAPTCHA's for example) are used, they must be accompanied by:‍

• ‍Alternative Method: An alternative authentication method that does not rely on cognitive tasks.‍
• Assistance Mechanism: A mechanism to assist users in completing any cognitive tasks if used.

• Name and Role: All user interface components must have a clear and correct name and role that can be programmatically determined.

• States and Values: User-set states, properties, and values must be programmatically accessible and update notifications must be provided.

• Notification: Assistive technologies should receive updates when component states or values change.

• Programmatically Determined: Status messages must be programmatically detectable through roles or properties.

• Assistive Technology Notification: Status updates should be announced to users by assistive technologies without requiring focus to be shifted.