Widgets – Additional Resources & Videos

“Go beyond…” Resource Links

This page contains all of the “Go beyond” resource links, as well as all links to all video content, that you encountered during the “Widgets” training module.

Native Widgets

• Quick A11Y Tip: Fieldset & Legend CodePen

Custom Widgets

• Quick A11Y Tip: Custom Radio Buttons CodePen

Keyboard Interaction

WAI-ARIA documentation

Disclosure Buttons

ARIA Disclosure Button Design Pattern

Tabs

ARIA Tab Design Pattern

Collapsible Dropdown Listbox

• aria-posinset
• aria-setsize
• ARIA Listbox design pattern

Combo Box

ARIA Combobox Design Pattern

Carousel

ARIA Carousel Design Pattern

Slider

ARIA Slider Design Pattern

Labels

WCAG success criterion 2.5.3: Label in Name

Labels: Functional Images

Quick A11Y Tip: Functional Images CodePen

Labels: aria-labelledby Attribute

Quick A11Y Tip: Using the aria-labelledby Attribute

Labels: aria-label Attribute

Quick A11Y Tips: Labeling Form Fields CodePen

Required, Disabled and Read-Only Fields

• Quick A11Y Tips: Building a Better Required Field CodePen
• MDN Docs – accessibility tree
• Quick A11Y Tips: Disabled and Read-Only Fields and Elements CodePen
• Quick A11Y Tips: Disabled and Read-Only Fields and Elements CodePen