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.
- knowing what something does in its context
- 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.
- Doesn't break - flexible, forgiving, recoverable
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,
- What is being communicated?
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/
- Discussion of label usage vs. placeholder usage: https://www.paciellogroup.com/blog/2011/02/html5-accessibility-chops-the-placeholder-attribute/
- NNGroup Placeholder text and Labels.
Notes: