WCAG: Common/regular tasks

[muratcakir]

• Apply aria-* attributes where applicable
• Apply aria-labelledby & aria-label where applicable
• Apply aria-orientation where applicable
• Use nav tag for all navigatable elements
• Close all dropdowns/popups on ESC press
• Review, test and fix all component focus states & handling
• Review and fix HTML semantics (especially ordered h-tags)
• Implement pause & resume in sliders
• Apply alt/title to unlabeled, icon-only buttons

[muratcakir]

Alt Text Best Practices (WCAG 2.1 – Success Criterion 1.1.1)

• Convey the image’s purpose:
  The alt attribute should convey the image’s purpose or contextual meaning, rather than describing its visual appearance, unless that appearance is essential to understanding the content.
• Be concise:
  Use clear and brief descriptions, typically a few words or a short sentence.
• Avoid redundancy:
  Don’t repeat information already conveyed by surrounding text or captions. Provide alt text even if a title attribute exists.
• Don’t say “image of” or “photo of”:
  Screen readers already indicate that it’s an image. Only describe what’s meaningful in context.
• Decorative images should have empty alt text:
  Use alt="" and optionally role="presentation" if the image conveys no important information.
• Functional images need functional alt text:
  If an image acts as a link or button, describe its function (e.g., alt="Search" for a magnifying glass icon).
• As short as possible, as informative as necessary.

[muratcakir]

State attributes:

• expanded
• hidden
• pressed
• readonly
• disabled
• selected
• required
• invalid
• haspopup
• valuemax
• valuemin
• valuenow
• valuetext
• errormessage (in conjunction with invalid)
• describedby

Structure roles:

• toolbar
• tooltip
• feed
• math
• note

Widget roles:

• scrollbar
• searchbox
• separator (when focusable)
• slider
• spinbutton
• switch
• tab
• tabpanel
• treeitem
• alertdialog
• dialog

Composite widget roles:

• combobox
• menu
• menubar
• tablist
• tree
• treegrid

Landmark roles (tags):

• header
• aside
• footer
• main
• nav
• section
• search
• group

Live region roles:

• alert
• status

More info: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles