Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Designer’s Guide to Documenting Accessibility & User Interactions

A Designer’s Guide to Documenting Accessibility & User Interactions

Full presentation here: https://stephaniewalter.design/blog/a-designers-guide-to-documenting-accessibility-user-interactions/

Accessibility is unfortunately still an afterthought on many projects. User interaction and accessibility requirements are poorly documented, at best. Or forgotten, when handing over designs to developer teams. And fixing it later costs a LOT more than building it right to begin with. Great documentation helps teams implement accessibility requirements the right way. I will tell you why, what and how designers can document different aspects of accessibility and user interactions requirements, to build better more inclusive products.

Stéphanie Walter

August 30, 2023
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. Text resizing designer guidelines ๏ Avoid fixed height buttons ๏

    Avoid fixed height text boxes with overflow: hidden ๏ Adapt layout at larger font size if necessary (multiple columns might become one, secondary text on the right might go to the next line, etc.) ๏ Maintain hierarchy even with bigger fonts (H1 titles should be bigger than H2, etc.)
  2. Link identification ๏ Check that color is not the only

    way to identify a link in a block of text from its surrounding. The easiest way is to underline links in text. ๏ If the color is the only way to identify it, it must have a 3:1 contrast ratio with adjacent non link text and provide additional visual cues on hover
  3. Link / button purpose & consistency ๏ “Does the user

    understand what will happen if they click/tap/interact with it?” ๏ Avoid “click here” ๏ Use direct action verbs (open, cancel, close)
  4. Form guidelines ๏ Each field has a label ๏ The

    label is clear and helps understand how to fill the field ๏ Help users prevent errors (expected format, instructions, mandatory fields, etc.) ๏ Help to recover from errors (errors are marked, clear messages, etc.) 3.3
  5. Form elements Text fields Value Label Value Label Message Value

    Label Label | Label Message Value Label Placeholder Label Message Value Label Placeholder Large Medium Small Default Focus Filled Readonly Error Success Info Label Value Label Value Label Message Value Label | Label Message Value Label Message Value Label Placeholder Label Message Value Label Message Value Label Placeh… Label | Label Value Label Value Label Message Value Label Label Value / Placeholder 16px Label 12px Value / Placeholder 14px Label 12px Value / Placeholder 12px Label 10px Info / error / warning / success 12px Info / error / warning / success 12px Info / error / warning / success 10px Status of form elements: error, success, etc. + the color rules!
  6. Value Label Value Label Message Value Label Label | Label

    Message Value Label Component Usage in the search result page to filter out by year range Error case: if user enters something that is not a year with 4 digits and if users enters letters in that field Default Focus Filled Readonly Error Success Value 16px Label 12px Info / error / warning / success 12px 201n From Please enter a year number (for example 2022) YYYY To Apply Reset YYYY From YYYY To Apply Reset Signature Year Signature Year Document detail cases for error recovery
  7. Users can navigate and interact with all components using different

    pointing and interaction devices (mouse, keyboard, etc.)
  8. Archive email Complex gesture — swipe right to archive Alternative:

    Alternative: - open the mail details - press the “archive” icon at the top - long press to show the toolbar - then press the “archive” icon at the top Alternatives for complex gestures 2.5.1
  9. A good page <title> ๏ Is unique for each page

    ๏ Is short and descriptive ๏ Helps users know where there are and what they can expect to find on that page ๏ Is NOT SEO keyword stuffing Image source: Accessiblity Annotation Kit Indeed
  10. Headings ๏ The label of the heading is is descriptive,

    clear and accurately describes the content the follows ๏ Don’t have illogical order (a h2 after a h3) ๏ Don’t use paragraphs with bigger font, use Hns instead. Image source: Accessiblity Annoation Kit Indeed
  11. Keyboard navigation: focus order at page level Figma template by

    the Fluent Design System team of Microsoft
  12. It’s our job as a designer that the tools we

    design offer a place for the alternative text
  13. All of those features need to be part of the

    product roadmap and be designed. 
 
 As designers, you can push for those to get implemented, from the start.
  14. I usually document at component level Checkboxlist with search filter

    Checkboxlist Filters Interaction flow We use the checkbox list with no filter at the top where there are seven or less items in the list We use the checkbox list with a search filter at the top where there are height or more items in the list DDDDDDD CCCCCCC BBBBBBB BBBBBBA AAAAABB AAAAAAB Apply Reset DDDDDDD CCCCCCC BBBBBBB BBBBBBA AAAAABB AAAAAAB Apply Reset DDDDDDD CCCCCCC BBBBBBB BBBBBBA AAAAABB AAAAAAB Apply Reset DDDDDDD CCCCCCC BBBBBBB BBBBBBA AAAAABB AAAAAAB Apply Reset DDDDDDD CCCCCCC BBBBBBB BBBBBBA AAAAABB AAAAAAB Apply Reset DDDDDDD CCCCCCC BBBBBBB BBBBBBA AAAAABB AAAAAAB Apply Reset Filtered results Status (2) Status Status Status Status Status (2) User can open the filter menu when: - they click on it - they put the keyboard focus on it and hit <enter> / <space> The reset button becomes active once the user checked any box. Once user hits the apply button (click or tab to focus + enter) the filter closes. The filter button changes to the active filter style. The number of active filters is shown (N) next to the filter name. The filter is also added to the active filter list next to the title <keydown>: the next element is highlighted. <keyup>: the previous element is highlighted. If the user hits <space>, this element is checked. It still keeps the focus highlight untill the user focuses another element. Label here that goes on 3 lines because it is too long Label here 16px 16px 32px Label here Label here Label here Label here Label here Label here
  15. ๏ Ask the team for the best format and the

    best place to store this. ๏ I currently document with annotations and detailed specs in separate design system Sketch pages Sometimes I also document directly at page level when needed
  16. Determine the best format 
 for and with YOUR team:

    Jira? Confluence? Word Document? Mockup annotations?
  17. Devs / Accessibility experts Content - UX writers / SEO

    QA / Testing Design teams Product / Project Management
  18. It forces me to think about different interactions, beyond the

    “static” pixels I am working on. 2.
  19. All of this is about communication to build better accessible

    products. You don’t need to / can’t document everything.
  20. Where to find good examples of accessible components ๏ The

    ARIA Patterns: example of complex accessible components using ARIA ๏ Gov.uk design system is public and its components are supposed to be accessible, so it’s a nice place to check for inspiration ๏ Inclusive Components is a blog trying to be a pattern library. All about designing inclusive web interfaces, piece by piece. There is also the book Inclusive Components ๏ A Complete Guide To Accessible Front-End Components, a big article with tonnes on information to make your components more accessible
  21. Ressources and links ๏ Links in the slides ๏ Accessibility

    Annotation Examples from Karen Hawkins ๏ Color ratio Matrix tool ๏ Figma - Contrast Grid plugin ๏ WCAG for designers ๏ A11y - Focus Orderer — Plugin for Figma ๏ Fluent Accessibility Notation — Figma ๏ Include—Accessibility Annotations | Figma Community ๏ ARIA Example: One Main Landmark ๏ Reduced motion example on stephaniewalter.design ๏ A11y Annotation Kit — Figma ๏ Accessibility bluelines — Figma ๏ Accessibility Bluelines (Sketch, Adobe XD, Invision Studio) ๏ Authoring Tool Accessibility Guidelines (ATAG) 
 ๏ More links to help you build and document better accessible designs: ๏ Text Resizer - Accessibility Checker ๏ Firefox Accessibility Inspector ๏ Color accessibility: tools and resources to help you design inclusive products ๏ Inclusive Components ๏ browsing with a desktop screen reader ๏ browsing with a mobile screen reader ๏ browsing with a keyboard ๏ browsing with speech recognition ๏ How to document the screen reader user experience