Design Crit - Disabled Elements and Accessibility Oct 4 Notes

"P.O.U.R."

• Perceivable
  • changes of state
  • awareness - know it's there
  • discoverability
  • legibility - no unpleasant side-effects (i.e. flashing)
  • modality independent
  • structures and relationships
• Operable
  • you can interact with it - you have full range of action to use something
  • modality independent - accomplishing the same function regardless of modality
  • if something is non-operable - it can't be "reached" accessed
  • timing
• Understandable
  • knowing what something does in its context
    • i.e. what is its scope? what does it act upon?
    • how would this be communicated in multiple modalities? Visually it may be "obvious".
  • issue of cognition - i.e. understanding the text
  • understand what the author intended to communicate
  • consider alternatives to content
  • understandable regardless of experience
  • learnable - something may not be previously experienced. Therefore it should be learnable.
  • as simple / complex as required. No more no less.
  • timing
  • communication of affordances.
• Robust
  • Doesn't break - flexible, forgiving, recoverable
    • Flexibility example: i.e. postal code or phone number inputs on forms
    • Example of a good implementation: Amazon address change
    • Use a suitable control for constrained input (i.e. use a date picker for dates, and not a text field). Reduce validation and validation errors.
  • Content and controls works across many platforms / technologies ~ "Graceful degradation"
  • States are communicated clearly (i.e. if an error occurs)
  • Survive environmental changes (i.e. changes to screen size, browsers etc.

Issues

• Placeholder text
  • placeholder should describe the text format
  • problem: placeholder text often used as labels or descriptions.
    • motivation to save some space
  • Proper usage of placeholder text?
    • Disappears after you start entering text
  • What is being communicated by the greyed-out text?
    • Differentiating from text the user entered vs. a prompt.
  • How do ATs handle placeholder text?
    • often gets lumped in with the label, or even substitutes for a label if label is absent.
• Disabled controls
  • What is being communicated?
    • state

Relevant Resources

• WCAG 1.4.1. Use of Color: Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
• WCAG 1.4.3 Contrast (minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
• ARIA for disabled buttons: https://webaccessibility.withgoogle.com/unit?unit=6&lesson=9
• Example of WCAG compliant disabled "Help" button: http://build.fluidproject.org/first-discovery/demos/

Notes: