a11yTOConf2020

How We Can Begin To Design For Cognitive Disabilities

Speaker: Tolu Adegbite
Twitter: @tolu_xyz

What’s cognitive disability?

• It’s a term used to group a large group of disabilities.

Terms

• Neurotypical: describe individuals of typical developmental, intellectual, and cognitive abilitie
• Neurodivergent: ADHD, Asperger, Alzheimer, Medication usage, brain fog

Cognitive disability

• It’s the most common disability
• It’s often overlooked
• 1 Billion people on the world, deal with this disability

Current State of WCAG

• What is simple language?
• What is simple layout?
• Guidelines are typically Level AAA

What do to today?

• Language
  • Use Descriptive Page Tiles Define what’s on the page. Sets the stage
  • What’s a page title?
  • Use Page Title - Website name. Example:
  • Define what you mean when it’s not possible to keep things simple.
    • Use tooltips
    • Add definition or more description text.
    • Add access to the definition of the terms.
• Cognitive Load
  • how much memory should a user have to use a page.
  • Do not require users to remember information
    • Example: use placeholder text on input fields instead of labels (Facebook login page)
    • As the forms become larger, this requires users to remember more information
  • Add hints to indicate what fields are required
  • Add hints to indicate password rules
• Give users access to Copy & Paste
  • Typically not kept in mind when testing products
  • Allow autocomplete
  • Requires less memorization
• Don’t force users to do unnecessary tasks
  • Example: ask users to use double security checks (user needs to jump to another app or email)
  • Allow users to copy / paste
  • Disclose what’s going to happen before hand
• Avoid Infinite Scroll
  • Encourage users to keep scrolling, it’s adictive
  • Instead, include pagination, include load more button
• Avoid page refresh
• Use common patterns & existing mental models
  • For example use the typical video player, instead of reinventing the wheel
• Use accessibility videos & images
  • don’t autoplay
  • close captions
  • allow forward & rewind
  • include alt text
• Label your icons
  • Some designers believe they shouldn’t do this
  • it doesn’t hurt your users
  • consider more than just the aesthetics
• Layouts
  • use whitespace liberally
    • Means: use it as a tool
    • Use it to draw attention to certain spaces on the page
    • Use it to group content
    • Use it to separate content
  • divide complex tasks into shorter, easier steps
    • use progressive disclousure
  • Example: https://www.wealthsimple.com/en-ca/
• Testing
  • with a variety of users
  • consider to test with neurodivergent users
• Hire people with neurodivergency