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
    • Aria states:
      • read-only, disabled, enabled,

Relevant Resources

Notes: