Accessibility

[reboottime]

Accessibility focuses on making web applications and websites usable by people with various disabilities or impairments.

Accessibility topics include:

1. Web Content Accessibility Guidelines (WCAG)
2. Semantic HTML
3. ARIA (Accessible Rich Internet Applications) attributes
4. Keyboard Navigation
5. Color contrast and visual design
6. Screen reader compatibility
7. Accessible forms and error handling
8. Testing tools for accessibility

(Credit goes to claude.ai and critical thinking training)

[reboottime]

ARIA (Accessible Rich Internet Applications) attributes

The Purpose: ARIA roles define the type and functionality of an element, especially when HTML5 semantic elements aren't sufficient.

Basic Example

<div role="button" tabIndex="0">Click Me</div>

Common Roles

• button: Interactive element users can click
• link: Navigational element
• checkbox: Toggleable element
• radiogroup and radio: Group of mutually exclusive options
• tablist, tab, and tabpanel: Interface with selectable views
• list and listitem: Group of items
• menu and menuitem: Set of actions or functions
• dialog: Modal or non-modal window
• alert: Important, time-sensitive information
• progressbar: Progress indicator
• slider: User-adjustable value in a range
• search: Search functionality
• banner: Site header content
• main: Main content of the document
• navigation: Collection of navigational elements
• complementary: Supporting content for the main content
• status:
  • a type of live region that contains advisory information for the user that is not important enough to justify an alert
  • usage:
    • It's for non critical updates on the page content
    • screen readers typiecally announce status message without interrupting the current task
    • by default, the aria-live value is polite
    • it should be used for information that changes dynamically but doesn't requires immediate attention

ARIA (Accessible Rich Internet Applications) attributes

• aria-selected: primarily used in interactive widgets patterns where users can select one or more items from a group of options.
• aria-hidden: To hide content from assistive technologies (like screen readers) while keeping it visually visible.
• aria-description: is an ARIA (Accessible Rich Internet Applications) attribute used to provide additional descriptive information about an element to users of assistive technologies, such as screen readers.
  • To offer supplementary information about an element that is not essential for understanding its basic purpose or functionality, but provides useful context.
  • Behavior:
    • Screen readers typically read the aria-description content after announcing the element's role, name, and state.
    • It's usually read with a slight pause or change in voice to differentiate it from the main label or content.
  • Best practices:
    • Keep descriptions concise and informative.
    • Don't repeat information already provided by other attributes or content.
    • Use it for supplementary details, not critical information.
    • Ensure the description adds value and doesn't state the obvious.

[reboottime]

Keyboard Navigation

Keyboard navigation is a crucial aspect of web accessibility, allowing users who can't or prefer not to use a mouse to interact with web content.

Key aspects of keyboard navigation include:

1. Focus management:

   • Ensure all interactive elements can receive keyboard focus
   • Provide a visible focus indicator
   • Maintain a logical tab order
     • tabIndex='0'
     • keydown.enter
     • focus-visible, focus-within

2. Keyboard shortcuts:

   • Implement common shortcuts (e.g., Esc to close modals)
   • Document custom shortcuts for users

3. Skip links:

   • Allow users to bypass repetitive content (e.g., navigation menus)

4. Keyboard traps:

   • Avoid situations where keyboard users can't exit a component or page section

5. Off-screen content:

   • Ensure hidden content isn't accidentally focusable

6. ARIA for complex widgets:

   • Use appropriate ARIA roles and properties for custom interactive elements

7. Testing:

   • Regularly test your site using only a keyboard to identify issues