Component Library

Component Name
Examples / Notes
Alerts
WAI-ARIA Live Regions

Ensure that alert text uses the <role="alert"> Move user focus to the element that fails validation or prompts the error.

ALL CAPS

Avoid using all caps as fully capitalized text can be difficult for some readers, such as those with dyslexia

Animation
2.2.2 – Pause, Stop, Hide (Level A) – Wuhcag

For any moving, blinking or scrolling information that:

  • Starts automatically
  • Lasts more than five seconds
  • Is presented in parallel with other content

Provide 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;

Auto-updating:

For any auto-updating information that:

  • starts automatically
  • is presented in parallel with other content

Provide 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.

Decorative video with stop button (WCAG 2.2.2) - YouTube
aria-describedby
Paciello Group - Aria-describedby

Associate the items with its respective label using aria-describedby.

a11y aria describedby - YouTube
aria-label
Aditus - Aria-label

Add aria-label to the link or element

Accessibility: labeling links - YouTube
Audio providing visual description of video elements
Understanding SC 1.2.5 Audio Description (Prerecorded) • Digital A11y

Provide audio description for content which is not described by it's audio track.

Audio description can either be an audio track enabled in a media player that supports the feature, or as an alternative version entirely.

Include details such as scene changes, action, and any other visual information that is not conveyed via a speech or dialog.

Auto Complete
Halters Web - Autocomplete

When implementing online form fields for user input, include the predefined taxonomy and HTML autocomplete to simplify the user input process. This will make it easier for people to complete input fields.

People with mobility, dexterity, and even cognitive issues sometimes have difficulty entering data into form fields. If inputs lack labels or context, it can be difficult to know what is required.

"Provide autocomplete="on" to the <form>"

Autocomplete suggestion box
Auto rotate / Orientation
Deque University 1.3.4 Orientation (AA)

Use CSS to set the orientation to allow both landscape and portrait. Use of show/hide controls to allow access to content in different orientations.

Breadcrumb
Buttons

For buttons without visible labels, like icon buttons, use the aria-label attribute to clearly describe the action to anyone using an assistive technology.

Just use button -- A11ycasts #05 - YouTube
Buttons with the same name
Exploring WCAG 2.1 — 2.5.3 Label in Name — Knowbility

Use labels that visually identify elements.

For user interface components with labels that include text or images of text, the name contains the text that is presented visually.

The label element identifies the control to all users. It is generally visible text. The label is often used as the name, such as the word Search preceding a search text entry field, or the text of a link.

Speech input users benefit from intuitive and proper labels that can be discerned from the visible presentation, and confusion results when the labels and visual presentation do not match.

Carousel
W3C Carousel Working Example

Include a method to stop the widget, add pause and play controls.

All functionality, including navigating between carousel items, must be operable by keyboard. Changes to carousel items must be communicated to all users, including screen reader users. The keyboard position (“focus”) is managed in a reasonable and comprehensible fashion.

Building Accessible Carousels - AbilityNet Webinar 23 March 2017 - YouTube
Character Count
Design System - Character-count

Ensure the the characters remaining are announced to screen reader users.

Chat
Close Button

Close button should have meaningful label

Accessible names for buttons with Chrome and Voiceover - YouTube
Code Errors
4.1.1 – Parsing (Level A) – Wuhcag

In content implemented using markup languages, elements have complete start and end tags, elements are nested according to their specifications, elements do not contain duplicate attributes, and any IDs are unique, except where the specifications allow these features.

Ensure HTML elements have complete start ( < > ) and end ( </ > ) tags where needed.

Nest all HTML elements correctly (for example, list objects within an ordered or unordered list).

Ensure that elements have unique IDs.

Check that HTML elements don’t contain duplicate attributes.

Use an HTML validator tool to check code before publishing live.

Code Validation

Run each page in the workflow using the https://validator.w3.org/nu/ and fix the errors

Validation of HTML document using validator.w3.org - YouTube
Color Alone
Accessibility at Penn State | Color Coding

For each item where a color difference is used to convey information include the information in text also.

Examples:
If a button is greyed-out to indicate action is required before activating the button, that should not be done only by the color of the button.
If input in a text entry field is required with a red asterisk, also use the word "Required" in or near that form field, as well as with initial instructions to user on the page.
If data is presented in a complex graphic that relies on color to differentiate between elements, use clear labels, or present that data in a table or another format with the visual representation.

Color Contrast Minimum
WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements

Make sure there is sufficient contrast between elements which provide information or meaning (4.5:1 for normal text, 3:1 for large text).

Replace low-contrast color combinations with high-contrast combinations, change the background color to <#XXXXXX> or text color to <#YYYYYY>.

Colour Contrast Analyser
Color Contrast Modes
WebAIM: Contrast and Color Accessibility - Understanding WCAG 2 Contrast and Color Requirements

Ensure that there are high contrast options in the user interface, or that contrast can be set by the user at the operating system level.

Combo-box
Evinced - Creating-accessible-combo-boxes

The combobox should be opened and the user can move up and down within the options available without losing focus.

Accessible Drop Down Menus with a Screen Reader - YouTube
Count Down
Date Picker
Deque Date picker example

There are 2 options to fix this issue,

  • Add the date format to the label and insert a calendar icon right next to the label, but should not set tab focus. This way calendar is only visible and available for mouse users.
  • Replace the datepicker with an accessible widget.
How to create Custom Date-Picker with Web Component - Accessibility and Multi-language support
Disable Buttons

When the button is disabled make sure to add aria-disabled="true" inside the button and set aria-disabled="false" when it is active. This will help a blind user to understand the status of the button

a11y aria-disabled buttons - YouTube
Download
Webaim - hypertext

Make sure that link text effectively describes it's target with context, indicate in the link text what is being downloaded (e.g. "Download Course PDF") in the link text.

<a href="/installer.exe" target="_blank">Download the Course PDF</a>

Link and Text Accessibility - YouTube
Drag & Drop 1
Drag & Drop 2
Drop Down
Orange - Drop Down

Ensure the dropdown is identified by Screen Reader user.

Accessible Drop Down Menus with a Screen Reader - YouTube
Dynamic Updates
Deque - Live Region

To announce the update to the screen reader users set <aria-live="polite" aria-atomic="true">.

Introducing ARIA Live - YouTube
Email and Telephone

When phone numbers are marked up as tel links, it reduces the number of steps a user has to go through to be able to contact your organization. This is especially helpful for individuals with limited mobility or those who use touch-to-dial on their tablets or touchscreen computers. Mark this up as a tel link. Be sure to use the E.164 format for the phone number in the href attribute. E.164 numbers are formatted in the following manner: [+] [country code] [phone number including area code]. For example, <a href="tel:+16128675309">612-867-5309</a>.

When email addresses are marked up as mailto links, it reduces the number of steps a user has to go through to be able to contact your organization. This is especially helpful for individuals with limited mobility or touchscreen users. Mark this up as a mailto link.

Enlarged content pushed offscreen
Exploring WCAG 2.1 — 1.4.10 Reflow — Knowbility

Ensure that web content is responsive to the needs of the low vision users and the devices they use. Layouts should change based on the size and capabilities of the device. Use CSS media query to adjust the position, height and width of the elements.

Specify dimensions of containers with dynamic units like '%', 'em', 'vh' and 'vw'.

Horizontal scroll bar should not appear while zooming the browser up to 200%.

Ensure that no fixed header or footer is visible at 400%. Elements should remain visible when user increases zoom from 200% to 400%.

Error Messages

Ensure that alert text uses the <role="alert">

Accessible Forms with a Screen Reader - YouTube
Error suggestion
Web Aim Form Validation

Your forms identify input errors. When the error is missing a required field, communicate this to the user with a text suggestion.

If the error is in the format of the input, the suggestion shows the correct format (for example, 'The date must be in the form DD/MM/YYYY').

If the error is because the input needed to be from a limited list of values, provide these values and explain them.

Expand Collapse
Technique: Expandable sections | Harvard Online Accessibility

When a menu is opened, it's expanded state should change to true, it's hidden state changes to false, and focus should move to the first menu option that isn't disabled. Expandable sections should be labeled as interactive elements using ARIA markup to instruct users to click to expand and collapse.

When the state of expandable content is toggled, it should be announced via assistive technology.

Use the state to indicate whether regions of the content are collapsible.

Hide collapsed content with <aria-hidden>, toggling it's state with JavaScript.

Announce displayed content when it is displayed visually to AT using <aria-live="polite">. Announce only content toggled using <aria-atomic="true">, rather than reading the entire page again.

Accessible Drop Down Menus with a Screen Reader - YouTube
Focus - change of context
Focus Indicator Visible
Providing Visible Focus for Keyboard Users | Accessible Technology

A focus indicator should always be visible, and have sufficient contrast. It is best to intentionally style the focus indicator for all links, buttons, fields, etc. reachable by the tab key (mouseless).

Some browsers (e.g., Chrome, Safari) show an easy-to-see blue outline around the element that currently has focus.

However, other browsers (e.g., Internet Explorer, Firefox) show a thin dotted line. The latter can be very difficult to see.

In order to provide users with an easy-to-see focus indicator that is consistent across all browsers, use the :focus selector in CSS to define a style change that happens when an element has focus.

We encourage you to change the shape somehow (add a border, box, underline, etc.) as well as choose a color that has sufficient contrast, and test each element with the tab key to make sure a focus indicator is always visible for each focusable element.

Accessibility: focus styles - YouTube
Focus on top of the page
Focus moved to AJAX content

If initial focus on similar pages or a series of pages in a workflow is inconsistent, set initial focus on the page's first heading or page content.

Set the initial focus with <tabindex="-1"> on the page's first <h1> heading to move keyboard focus to the first page heading.

If user attention by design needs to be drawn to a specific element when a page loads, such as a username field on a login page, set initial focus on that element with <tabindex="-1">.

Focus Order
Ensuring Proper Tab and Read Order | Accessible Technology

Specify a tab order that follows relationships in the content without following the order of the interactive elements in the code, an alternative order can be specified using the <tabindex> attribute of the interactive element.

To include an element in the tab order (in addition to links and form elements), specify a tabindex value of "0".

To hide a keyboard-accessible element from assistive technology, specify a tabindex value of "-1".

Focus Order - Inital Focus on edit field
Initial focus to a text field – good or bad? - Robert's talk

Initial focus should land at page top or the first instance of <h1>.

Focus Order - Unexpected Behavior
3.2.2 – On Input (Level A) | Wuhcag

For each form, check that it has a submit button (input type="submit", input type="image", or button type="submit"), only submit form data when a user chooses to click a submit button.

If changing the setting of a form control results in a change of context, include an explanation of what will happen when the control is changed.

Example explanation: A 50 question online survey displays one question at a time. Instructions appear at the beginning of the survey explaining that users will be taken to the next question of the survey upon selecting an answer to each question.

Form validation 1
Forms Labels
WebAIM: Creating Accessible Forms - Accessible Form Controls

Give all controls a <label>. This allows all users to understand the type of information expected in the field. Form controls should have unique labels, and should be implemented using native HTML for style and assistive technology access whenever possible.

Labels precede the elements which they describe and provide context, and require unique, matching <for> and <id> attributes, not relying on page content for context.

Labels can contain the elements they describe, which precludes the need for <for> and <id> attributes.

If an element contains both heading and link attributes remove the heading tags.

Designing Accessible Forms for Everyone - YouTube
Forms Validation 2
3.3.4 – Error Prevention (Legal, Financial, Data) (Level AA)

Data, test responses and changes to user controlled data are reversible.

Data, test responses and changes to user controlled data are checked for input errors and the user is given a chance to correct any mistakes.

Add a confirmation page to the data input submission process that summarises the input and the outcome, with an option to correct or discontinue.

This page has an input field (for example, a confirm button or checkbox) that acts as confirmation of the submission.

Glossary Item
W3C - Glossary

For any set of words and their definitions that are meant to serve as a glossary:

  • Check that the head section of the Web page that contains words, phrases or abbreviations defined in a glossary contains a link element.
  • Check that the link element has attribute rel="glossary"
  • Check that the href attribute of the link element refers to the glossary page.
Headings
Headings - WCAG Tutorials - W3C

Ensure that headings are used to create a logical structure on a page, but not used to convey only visual style.

Pages should display the heading structure from h1, h2, h3, h4, etc. skipping no levels, with only one h1 per page. Like page titles, headings should be brief, clear, informative, and unique.

Remove links from headings to avoid confusion for screen reader users.

Why headings and landmarks are so important -- A11ycasts #18 - YouTube
Headings and labels are inaccurate
Headings • Page Structure • WAI Web Accessibility Tutorials

If text is meant to be a heading in style or function, use heading markup. Doing so will add semantic value to this text, which will let users understand the content's structure.

Heading tags should not be used to create visual style, it creates confusion for those who cannot see the visual style if the heading structure is irregular.

Hidden items

Hidden items may cause confusion to keyboard users and blind users. Content that is not meaningful should be hidden from screen reader users. Either remove the unnecessary content or hide them using aria-hidden="true"

Hiding Elements from Screen Readers with aria-hidden [WAI-ARIA] - YouTube
Highlight Text

You may use sr-only text to indicate the text has highlight.

Hover or focus triggers additional content
Content on Hover or Focus

If hovering or moving focus to an element results in added content being displayed, or if added content appears without intentional user action, the user must be able to dismiss that content without moving the mouse or changing focus (such as pressing the escape key to dismiss the added content). Consider adding an info "i" button with a <label="info"> attribute following the element needing additional description. This avoids forcing users to read the tooltips unless they explicitly activate the info button.

Image - Decorative

Hide all decorative or layout images from assistive technology. Add alternative text in the form of a null (empty) alt tag <alt=""> to an image to hide it from assistive technology.

Using images: alt attributes - YouTube
Image - Informative
Alternative Text for Images - Oregon State University

All informative non-text content (images) must provide text alternatives that provide equivalent information, context, and purpose to the user. Each image element (<a>, <img>) must either contain text or an image with alt text <alt="image description">.

Use the alt attribute for brief descriptions under 150 characters.

Image ALT Text in HTML Image Tags - YouTube
Image and Link
Accessibility.psu.edu - Images

Combining Link with Text Together

Images of text
1.4.5 – Images of Text (Level AA) – Wuhcag

Images of text should be avoided except in special cases, such as in logos. Review the images to assess whether images of text is used and should be avoided. If images of text can’t be avoided, the <alt> attribute should contain the same text as the image.

Inconsistent element labels
Using labels, names, and text alternatives consistently for content that has the same functionality

Check that each component is associated with text that identifies it (i.e., label, name, or text alternative). Check that this associated text is identical for each user interface component with the same function.

Inconsistent navigation
Presenting repeated components in the same relative order each time they appear

List components that are repeated on each Web page in a set of Web pages (for example, on each page in a Web site).

For each component, check that it appears in the same relative order with regard to other repeated components on each Web page where it appears.

For each navigational component, check that the links or programmatic references are always in the same relative order.

Keyboard
WebAIM: Keyboard Accessibility

Ensure all functionality is operable via keyboard, but mouse or other methods are not restricted.

All functionality of the content should be 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.

Keyboard Trap
User focus is not accidentally trapped in a region

Map the escape key to the function to close the modal window.

Map the enter key to the submit function of the modal window.

Identify the title of the modal dialog through the aria-labelledby attribute.

Include an <h1> at the beginning of the modal.

Include offscreen instructions, using aria-describedby, that describe the modal dialog and how to interact with it.

Keyboard traps: Example of a modal - YouTube
Label in Name
https://knowbility.org/blog/2018/WCAG21-253LabelInName/

Consider changing the Edit buttons name as unique buttons.

Ex: Edit Profile, Edit Description, Edit Filters

Landmark Regions
WAI-aria-practices - Landmark Regions

Use "Region" landmark role to identify an area in the document that the author has identified as significant but unable to define it using common landmark roles.

Multiple instances of the same region types should use ARIA labels to differentiate.

Landmarks
Landmarks - WAI ARIA Cheatsheet · mcdlr

For each distinct section in the page, contain content within landmark regions. This allows screen reader users to navigate by section, similarly to navigating by heading, creating a simple page structure to organize content. Navigating a web page is far simpler for screen reader users if the content splits between multiple high-level sections. Use landmarks as bypass blocks to allow users additional navigation options.

Use native HTML5 landmark elements instead of ARIA roles where possible.

Use aria landmarks when remediating non-native HTML methods.

Banner landmark must not be contained in another landmark.

Why headings and landmarks are so important -- A11ycasts #18 - YouTube
Landmarks with multiple navigations
Multiple Navigation Landmarks

Multiple instances of the same region types should use ARIA labels to differentiate.

Lang
Accessibility at Penn State | Language Tags in HTML

Add a language tag after the doctype declaration to the html tags of each page:

For XHTML, both <lang> and <xml:lang> must be set.

Language
H58: Using language attributes to identify changes in the human language | Techniques for WCAG 2.0

When content changes languages, clearly identify any changes in language on a page by using the <lang> or <xml:lang> attribute, as appropriate for the HTML or XHTML version you use (e.g. any blocks of text that are not in the language specified in the <doctype> attribute).

In language selection menus, make sure that each language option is coded with appropriate <lang> attributes.

Programming Tip Of The Day #9: Lang Attribute in HTML in Hindi | Why Lang Attr. is so Important? - YouTube
Language not specified in <doctype>
Using language attributes

When content changes languages, clearly identify any changes in language on a page by using the <lang> or <xml:lang> attribute, as appropriate for the HTML or XHTML version you use (e.g. any blocks of text that are not in the language specified in the <doctype> attribute).

In language selection menus, make sure that each language option is coded with appropriate <lang> attributes.

Link - Underline
Creating links that are not visually evident without color vision

The link must present a "non-color designator" (typically the introduction of the underline) on both mouse hover and keyboard focus.

Make links visually identifiable by using underlines, bold, italics, or sufficient difference in lightness.

Link color contrast
Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them

Ensure that active user interface components (i.e., controls) and meaningful graphics are distinguishable by people with moderately low vision.

Link names
WebAIM: Links and Hypertext - Introduction to Links and Hypertext

Avoid vague link text, such as <click here>, , or <more info> for links.

Provide context within the link text.

Include additional descriptive info as a tooltip.

Do not use alt text for anything but describing images.

Do not override with ARIA roles when native semantics exist.

Ensure a valid target for <aria-labelledby> attributes.

Append link description with <aria-hidden> text.

Accessibility: labeling links - YouTube
Links for same item

Suggested to combile the Multiple Adjacent links into one link

OR

Remove focus from the {@item name} by setting tabindex="-1" and hide the {@item name} from the screen reader user by setting aria-hidden="true"

Lists

Items that visually display together should be placed inside an unordered list <ul> followed by <li> for each item.

HTML List - YouTube
Media - Audio and Video only (Pre-recorded)
1.2.1 – Audio-only and Video-only (Pre-recorded) (Level A)

For prerecorded audio-only content, provide a text-based transcript alternative.

For prerecorded video-only content, provide a text-based transcript, as well as an audio description track when there is visual or other descriptions (such as speaker identification and scene descriptions) when more than just the verbatim spoken content is not sufficient.

Ensure that transcripts are accessible and easily discovered (such as placing a link immediately before or after the embedded video).

Media - Audio Control
WCAG 2.1 - SC 1.4.2 Audio Control

If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.

Media - Live video captions
1.2.4 – Captions (Live) (Level AA) – Wuhcag

When streaming live video with audio, ensure that live captions are available.

Menu
lightningdesignsystem - Menu

Make sure menu is keyboard accessible.

Modal
W3C-dialog-modal

If a popup dialogue box appears on the web page users should have the ability to navigate to it and be able to exit the dialogue box using a keyboard only. You may add a close button to the dialog and make sure "Esc" can exit the dialog.

Multiple Ways
2.4.5 – Multiple Ways (Level AA) - Wuhcag

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. Alt text can also be used to provide additional information non visually.

Notifications
Page Title
Indiana University - Page titles

Provide sufficient context in repetitive page titles to help orient assistive technology users

Quick accessibility test: Page titles - YouTube
Pagination
Ebay - pagination

Make sure pagination links are meaningful to screen reader user.

Reflow
Web Accessibility 101: Screen Magnification & Reflow in Adobe Acrobat - YouTube

Ensure that web content responds to the needs of the low vision users and the devices they use. Layouts should change based on the size and capabilities of the device.

Use CSS media query to adjust the position, height and width of the elements.

Also ensure that the height and width of containers of the content should be specified using dynamic units like '%', 'em', 'vh' and 'vw'.

Also the horizontal scroll bar should not appear, while zooming the browser to 200%.

Ensure that no fixed header or footer should be there while zooming the browser to 400%.

Also ensure that each element should be visible for the user while zooming the browser to 200% and 400% zoom.

Required Fields
Accessible Forms 2: Required Fields and Extra Information | Web Usability

In Addition to the `required` attribute, use aria-required="true" attribute inside the <input> field.

Also include instructions at the top of the page indicating that an asterisk means that a form field is required.

When validation fails, ensure that focus is taken to the form fields that fail validation.

Designing Accessible Forms for Everyone - YouTube
Same Link Twice on the Same Page
The Same Link Twice on the Same Page: Do Duplicates Help or Hurt?

Consider displaying only one instance of the same link text or target to reduce cognitive load and simplify the user experience.

Add an <aria-label> to elements that are otherwise identical to assistive technology.

Describe the purpose of a link in HTML in the text content of the <a> element.

Use the <alt> attribute to describe the link purpose when a graphic is used for a link.

Screen Reader only text

It is recommended to add screen reader only hidden text as an alternative

.sr-only {
      border: 0;
      clip: rect(0 0 0 0);
      height: 1px; 
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
}
Discover the difference between ARIA-label and Sr-only. | Digital Accessibility Tutorial - YouTube
Selected Status
W3C - Tab Selection

Make sure the selected status is announced for Screen Reader user.

Sensory Characteristics
Use Color and Other Sensory Characteristics Plus Text to Convey Meaning | Section508.gov

In addition to location, color, shape or position add the element's label name to the instructions.

Example:
"Use the search box on the right" is not perceivable. Replace with, Use the search box, labelled "Search" on the right.

Search by using the green rectangular box labelled at the top right of the page is not perceivable. Replace with, Use the search box, labelled ‘Search’ outlined in green, at the top right of the page.

Site Navigation
2.4.5 – Multiple Ways (Level AA) - Wuhcag

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. Alt text can also be used to provide additional information non visually.

Skip Link
Skip Navigation Links

Add a "Skip to Content" link at the start of the document hidden offscreen by CSS, and made visible on focus, so it's available to keyboard and screen reader users: <a class="accessible" href="#main">[Skip to Content]</a>

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

Provide a way to skip repetitive navigation links. Without skip links, keyboard users must tab through the navigation links to get to page content. Headings and landmarks allow screen reader users to skip navigation, but don't work for other keyboard users.

Ensure that the target for the link exists and that the link is not hidden with CSS display:none or visibility:hidden.

Quick accessibility test: Skip links - YouTube
Status Messages
Exploring WCAG 2.1 — 4.1.3 Status Messages — Knowbility

Ensure dynamic content is announced to assistive technology with a <role="status"> attribute.

Ensure that when search results are loading or new page load, screen readers notify the status as "loading".

Add a new message with role="status" to indicate the record has been removed/ added.

Examples:
<p role="status">Record has been removed</p>

Tab Order

Ensure that content is presented in the correct reading order, both visually and to assistive technology. Set the <tabindex> of each of these elements to either -1, for elements that should not be keyboard navigable, or 0, for elements that should. If you need an element to appear earlier in the tab order, consider moving it earlier in the DOM. Do not set the tabindex value greater than 0.

Controlling focus with tabindex -- A11ycasts #04 - YouTube
Tab Panel
Tab panel example

Tabs panel should create tabbed navigation components that allow users to switch between each tabs on the same plane. Screen reader should announce the tab count as well. Example: "tab 1 of 2".

Screen Reader & Javascript Tabs - Tab panel without WAI-ARIA roles - YouTube
Table (Decorative)

Do not use tables purely for visual presentation. Add <table role="presentation"> to for a layout table.

Why Use Accessible Tables? - YouTube
Table (Informative)
W3C - Tables

Data tables are used to organize data with a logical relationship. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to navigate within a data table and provide context to users. Navigating tables without this information makes all but the simplest tables significantly more difficult.

Data tables must be identified for screen readers by including the "title" of the table using a <caption>, caption needs to be visually hidden with CSS <class="sr-only">.

Data tables must use concise table headers with <th>

Table should not include empty headers.

Column headers must be marked as <th scope="col">

Row headers must be marked as <th scope="row">

Do not use tables for visual style unless adding the <role="presentation"> attribute.

Table Accessibility with a Screen Reader - YouTube
Text Scaling
What Does Responsive Web Design Have to do with Accessibility?

Ensure that web content responds to the needs of the users and the devices they're using. Layouts should change based on the size and capabilities of the device. Browser zoom should be responsive up to 200%.

Ensure that, when enlarged, text doesn't become illegible when zoomed because it overlaps with adjacent text or truncated altogether.

  • A <user-scalable="no"> attribute on the page's <meta name="viewport"> element, disabling zooming. When enlarging content in the browser to 200%, content should be responsive and not overlap other page elements.
  • The document must not use the user-scalable="no" parameter in the <meta name="viewport"> element because it disables text scaling and zooming which is essential to users with low vision.
Text Spacing
Deque - Text Spacing
  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;
  • Word spacing to at least 0.16 times the font size.

Use following bookmarklet (save it as a bookmark) to test the Text Spacing: https://codepen.io/stevef/full/YLMqbo

Toggle / Switch Button
Switch example

Ensure that toggle switch is keyboard accessible

Tooltips
Deque - Tooltips

Please note the following on tooltip implementation:

  • A Tooltip must have a focusable, interactive trigger
  • A Tooltip should show on mouse hover and keyboard focus
  • A Tooltip must not contain focusable or interactive content
  • Tabbing to the element displays the tooltip
  • Escape hides the tooltip
  • Focus always stays on the trigger element
How to Make Tooltips Accessible ♿ UX Accessibility - YouTube
Trap Focus

Make sure that tab focus gets trap only within the modal when it's opened and its keyboard accessible.

Accessible Modal Dialogs -- A11ycasts #19 - YouTube
Tree
Visual Focus Indicator
Washington.edu - Visual Focus

A focus indicator should always be visible, and have sufficient contrast. It is best to intentionally style the focus indicator for all links, buttons, fields, etc. reachable by the tab key (mouseless).

Ensure the focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.

Ensure color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.

Ensure the focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.

Web Accessibility 101: Visual Focus Indication - YouTube
Zoom
What Does Responsive Web Design Have to do with Accessibility?
Ensure that web content responds to the needs of the users and the devices they're using. Layouts should change based on the size and capabilities of the device. Browser zoom should be responsive up to 200%. Ensure that, when enlarged, text doesn't become illegible when zoomed because it overlaps with adjacent text or truncated altogether. A attribute on the page's element, disabling zooming. When enlarging content in the browser to 200%, content should be responsive and not overlap other page elements. The document must not use the user-scalable="no" parameter in the element because it disables text scaling and zooming which is essential to users with low vision. Web Accessibility 101: ZoomText Demo - YouTube