Classic UI should support Accessibility (a11y)

[chessbyte]

This is the execution plan:

• Convert all forms to DDF - this will enable us to leverage the Carbon Mapper - Forms covers 80% of the UI
  • DDF componentMapper for Carbon - Carbon is already a11y compliant.
• Create a dummy form containing every control currently in use - This will enable verify and address compliance in a single place
• Add APIs as needed (Many forms will need new APIs)
  • Features dependency for an API-driven UI
• Address a11y in menus, toolbars, and other non-form UIs
  • Main menu - a11y: Make the main menu accessible #7358
  • Toolbars - a11y: Make the toolbars accessible #7360
  • Listviews (ex-GTLs) - a11y: Make the list views accessible #7359
  • Summary screens - a11y: Make the textual summary screens accessible #7361
  • Tabbed views - a11y: Make the tabbed views accessible #7362
  • Non-summary info screens - a11y: Make the non-summary info screens accessible #7363
  • Expression editor / advanced search - Missing react component: expression editor #6835
  • Compare screens - a11y: Make the compare screens accessible #7364
  • Dashboards - a11y: Make the overview dashboard accessible. #7365
  • Charts - a11y: Make the UI charts accessible #7625
  • Treeviews - a11y: Make the treeviews accessible #7366
  • Notification drawer - a11y: Make the notification drawer accessible #7367

**Completed items (in strike-through) per release:

• Kasparov
• Lasker

Some background information on accessibility can be found at w3.org, a11yproject and usability.gov. One can find a community-driven accessibility checklist here.

We use a Ruby gem called tota11y to assist with identifying accessibility issues. The Classic UI is already enabled for tota11y in development mode.

The following checklist is derived from the IBM Accessibility Checklist

Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

• Non-text Content

Time-based Media: Provide alternatives for time-based media.

ManageIQ does not have Audio/Video content

• Audio-only and Video-only (Prerecorded)
• Captions (Prerecorded)
• Audio Description or Media Alternative (Prerecorded)
• Captions (Live)
• Audio Description (Prerecorded)

Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

• Info and Relationships
• Meaningful Sequence
• Sensory Characteristics
• Orientation
• Identify Input Purpose

Distinguishable: Make it easier for users to see and hear content including separating foreground from background.

• Use of Color
• Audio Control
• Contrast (Minimum)
• Resize Text
• Images of Text
• Reflow
• Non-text Contrast
• Text Spacing
• Content on Hover or Focus

Keyboard Accessible: Make all functionality available from a keyboard.

• Keyboard
• No Keyboard Trap
• Character Key Shortcuts

Enough Time: Provide users enough time to read and use content.

ManageIQ does not have UI content that disappears after a certain amount of time without user input

• Timing Adjustable
• Pause, Stop, Hide

Seizures: Do not design content in a way that is known to cause seizures.

• Three Flashes or Below Threshold
  • ManageIQ does not have UI content that flashes

Navigable: Provide ways to help users navigate, find content, and determine where they are.

• Bypass Blocks
• Page Titled
• Focus Order
• Link Purpose (In Context)
• Multiple Ways
• Headings and Labels
• Focus Visible

Input Modalities: Make it easier for users to operate functionality through various inputs beyond keyboard.

• Pointer Gestures
• Pointer Cancellation
• Label in Name
• Motion Actuation

Readable: Make text content readable and understandable.

• Language of Page
• Language of Parts

Predictable: Make Web pages appear and operate in predictable ways.

• On Focus
• On Input
• Consistent Navigation
• Consistent Identification

Input Assistance: Help users avoid and correct mistakes.

• Error Identification
• Labels or Instructions
• Error Suggestion
• Error Prevention (Legal, Financial, Data)

Compatible: Maximize compatibility with current and future user agents, including assistive technologies.

• Parsing
• Name, Role, Value
• Status Messages
• Accessibility-supported Technologies Only

[miq-bot]

This issue has been automatically marked as stale because it has not been updated for at least 3 months.

If you can still reproduce this issue on the current release or on master, please reply with all of the information you have about it in order to keep the issue open.

Thank you for all your contributions! More information about the ManageIQ triage process can be found in the triage process documentation.

[Fryguy]

Removed tota11y in #3406

[Fryguy]

Another tool for a11y is IBM Accessibilty Checker