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

March 16, 2022
Tweet

More Decks by Stéphanie Walter

Other Decks in Design

Transcript

  1. AA 1 2 Stéphanie Walter - 2022 A Designer’s Guide

    to Documenting Accessibility & User Interactions
  2. stephaniewalter.design @WalterStephanie ! User Researcher & UX Designer Mobile expert.

    Pixel & CSS Lover
  3. Why fix it, when you could design and build it

    right to start with?
  4. How and where do I document accessibility and interactions?

  5. Jira ticket Component documentation 1 Pages documentation 2 Used in

  6. I document using a lot of annotations

  7. Detailed component documentation with annotations 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 1
  8. Page documentation: annotation directly at page level when needed 2

  9. Another example of detailed annotations using numbers and margin comments

    Image from Karen Hawkins
  10. Determine the best format for and with YOUR team: Jira?

    Confluence? Word Document? Mockup annotations?
  11. This is NOT a substitute for communicating with people!

  12. What exactly can or should be documented?

  13. Visual Design Content & Markup Wayfinding Interactions

  14. Visual Design

  15. Color Palette & Contrast Visual Design

  16. A contrast grid matrix to help define color combinations Visual

    Design
  17. Don’t forget to explain the ratios (3:1, 4.5:1), what AA,

    AAA, large and small text mean to the design team somewhere! Visual Design
  18. Interactions

  19. Value Value Value Value Value Value Value Value Value Value

    Value Value Value Value Value Value Value Value Value Value Value Value Value Value Disabled checked Disabled Indeterminate Disabled checked Disabled Indeterminate Default Focus Default Focus Checked Checked Disabled Checkboxes Use checkboxes when users can select multiple options in a list Use checkboxes when there’s a on/off state The checkbox icon is 20x20 px Use radio buttons when user can only select one option in a list of options The radio button icon is 20x20 px Radio buttons Default Hover Focus Active Disable The default state of the button when there’s no current user action. The state when the user’s mouse hovers the element The state when the button gets the focus state (for example via keyboard navigation) The state when the user presses the button Default browser outline focus (design depends on the browser) The state when it is disabled and the user can’t click on it Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb rgba(181,67,0,1); #B54300 palette.primary.dark rgba(181,67,0,1); #B54300 palette.primary.dark rgba(181,67,0,1); #B54300 palette.primary.dark rgba(231,173,139,1); #E7AD8B palette.primary.light rgba(199,83,15,1); #C7530F palette.primary.main Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Action Verb Interactive states (buttons, form elements, etc.), especially :focus state Interactions
  20. Value Label Value Label Message Value Label Label | Label

    Message Value 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 Info 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 Status of form elements: error, success, etc. Interactions 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
  21. 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 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 MOUSE: When the user clicks on the trigger (button or carret for tables), it opens the filter box. The style of the list item changes on hover 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 Interactive flows: how should this component work Interactions
  22. 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 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 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 Status Status Status MOUSE: When the user clicks on the trigger (button or carret for tables), it opens the filter box. The style of the list item changes on hover 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 KEYBOARD: If the user hits <enter> / <space> on the trigger (button or carret for tables) <escape> closes the box The first element in the list gets the focus when the list is open via space/enter If the user hits <space>, this element is checked. It still keeps the focus highlight untill the user focuses another element. <keydown>: the next element is highlighted (focus) <keyup>: the previous element is highlighted (focus) If the user hits <tab> it gives the focus to the “Reset” then “Apply” button. Then they can press <enter> / <space> to apply the filter <enter> <esc> <space> <space> <tab> How should it work with keyboard navigation? Interactions
  23. 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 Interactions
  24. Zoom behavior Image from Goulven Baron - Lead Designer, MAIF

    Interactions
  25. Reduced motion and animation Interactions

  26. Flows to document interactions between pages / views User Flows

    Screen flow Interactions
  27. Wayfinding

  28. HTML <title> of the page Wayfinding

  29. Skip links Wayfinding

  30. ARIA Landmarks Wayfinding

  31. Headings in the page Wayfinding

  32. Focus order at page level Wayfinding Figma template by the

    Fluent Design System team of microsoft
  33. Focus order in form elements Wayfinding

  34. Content & Markup

  35. What should the assistive technology announce for those images? Content

    & Markup
  36. Is this content going to be generated by a CMS

    / WYSIWYG tool? Authoring Tool Accessibility Guidelines (ATAG) Content & Markup
  37. Announced text for “icon buttons” Content & Markup

  38. Announced (HTML) content order vs Visual order (be careful with

    this one) Content & Markup
  39. Documenting links if needed Content & Markup

  40. Navigation states Navigation Icons Accessibility Guidelines for Notifications Docs 5

    Default :hover :focus :active Current page The default color is #ffffff with 0.8 of opacity On the notification number, role=presentation to avoid reading it twice On the notification number, role=presentation to avoid reading it twice Screen reader should read: “5 new documents in my documents” Screen reader should read: “No new documents in my documents” Screen reader should read: “5 new tasks in my tasks” Screen reader should read: “No new tasks in my tasks” When users hover the item, the color is #fffffff with no opacity (1) The background changes for a #303030 10% opacity If the page that is currently displayed is in the navigation, the color is #ffffff, no opacity with a 2px bottom border on the current page item We use the material UI ripple effect for :focus (when users tabs) the link We use the material UI ripple effect for :active (when users click) on the link Docs Docs Docs Docs Docs 5 Tasks Tasks Docs Docs 5 5 Extra content for assistive technologies Content & Markup
  41. With help from Developers & Accessibility Experts ๏ Correct HTML

    semantic elements ๏ ARIA Roles ๏ ARIA states and properties Content & Markup
  42. ๏ Correct HTML5 type ๏ Autocomplete, autofill, etc. ๏ Legends

    and field grouping markup, etc. Form documentation accessibility experts can help with: We use native HTML option when it opens Select Date range filter Filter with search Order Order Most relevant Most recent Least recent HTML5 date picker. Note that the calendar icon might change depending on browser. We can’t change its color (that color is not in the styleguide but this is okay) HTML5 search input. Note that the x style might change depending on browser DD.MM.YYYY From DD.MM.YYYY To Apply Reset DD.MM.YYYY From DD.MM.YYYY To Apply Reset BBBBBBA AAAAABB CCCCCCC BBBBBBB AAAAAAB Apply Reset Search… AAAAABB AAAAAAB Apply Reset Value HTML <option> type=date type=search Content & Markup
  43. ๏ Audio transcripts ๏ Caption for videos Access to external

    documentation for Content & Markup
  44. Who should document all of this and when?

  45. It’s a team effort! It depends…

  46. Devs / Accessibility experts Content - UX writers / SEO

    QA / Testing Design teams Product / Project Management
  47. Start with what you, your team members are comfortable with.

    Then build upon this base!
  48. Mapping “who can document what?”

  49. I document final & tested components / pages, after discussion

    with devs about technical feasibility.
  50. What are the benefits of such documentation (aka how do

    I convince my team now)?
  51. Benefits for myself, as designer

  52. To learn more about accessibility. 1.

  53. It forces me to think about different interactions, beyond the

    “static” pixels I am working on. 2.
  54. Benefits for the design-developer collaboration

  55. Design documentation helps gain time and avoids misinterpretations. 3.

  56. It helps bring consistency to future pages and interactions. 4.

  57. Benefits for fellow designers

  58. A good onboarding tool for new designers, especially if they

    don’t know about accessibility. 5.
  59. Prior documentation helps set standards for what is expected for

    the next designs. 6.
  60. Benefits for everyone else in the team

  61. Start conversations about accessibility within the company, encourages them to

    dig further. 7.
  62. All of this is about communication to build better accessible

    products. You don’t need to / can’t document everything.
  63. Resources

  64. None
  65. Some nice toolkits to help you document

  66. Ressources and links ๏ Links in the slides ๏ Accessibility

    Annotation Examples from Karen Hawkins ๏ Color ratio Matrix tool ๏ WCAG for designers ๏ A11y - Focus Orderer — Plugin for Figma ๏ Fluent Accessibility Notation — Figma ๏ 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