1. What do Web Developers Need
To Know About User Experience,
Aging and Assistive Technology?
Sassy Outwater-Wright, Executive Director
Massachusetts Association for the Blind and Visually impaired
Twitter.com/SassyOutwater

2. Intro
“Get Off My Lawn, you useless stereotype!”
MABVI’s VIBRANT Assistive Technology Training program teaches
seniors with age-related vision loss to use assistive technology
Here’s what we’ve learned we need web developers to do
Twitter.com/SassyOutwater

3. Inclusive Design is Not Inclusive If You Can’t
Access It!
Setup, Maintenance, security, updating and upgrading are often access barriers
Twitter.com/SassyOutwater

4. User Centered Accessibility Tests
Twitter.com/SassyOutwater
I cannot access this
I need help to access this
This is accessible to me

5. I am Sixty Percent Therapist and Forty Percent
Nerd
• Assistive tech instruction for seniors must deal with the trauma of late
onset disability and/or traumatic change in user experience with
technology.
Twitter.com/SassyOutwater

6. Assistive technology Training Best Practices
for seniors
• Tell me every step of making a peanut butter and jelly sandwich
• Step-by-Step instruction and task-based training: teach the teacher.
Twitter.com/SassyOutwater

7. “Design me a good website.”
• So, what have we learned makes a better user experience for an elderly
end user?
• Obvious ones we all know:
• Text size
• Color and contrast
• Text style and layout
• UI and navigation: streamlined and easy-to-remember navigation and
location reference points
• Mouse and keyboard use both accounted for
• Clean style sheet
Twitter.com/SassyOutwater

8. Don’t be that guy: Don’t Miss The easy fixes
• Distractions
• Multimedia interaction
• Refresh or timeout control
• Robust code
Twitter.com/SassyOutwater

9. Distraction
• What catches the wondering attention of someone with spotty vision loss,
dementia, mental illness or traumatic brain injury? (see next slide)
• Not enough time to complete the task before page times out!
• “Don’t make me hunt down my mouse in a mass of text.”
• Multi-media: always Allow the user control. Play/pause from anywhere on the
site.
• Providing user with means to stop moving content
• Consistent navigation and labeling: Don’t make the aging brain invent the wheel
with every refresh or change of multimedia content
• Make the location on page easy to find after distractions
• 3 seconds for auto-audio, 5 seconds or less for flashing content, better yet, don’t
do auto, please.
Twitter.com/SassyOutwater

10. Content
• Navigation
• Plain language
• Limit distractions
• Save-and-continue-later feature for forms
• Control of refresh
Twitter.com/SassyOutwater

11. Navigation
Be thorough and use more than one method.
• Titles: Display topic/purpose of page
• Indicate current location within navigation bar
• Use breadcrumbs
• Highlight where mouse hovers (future link)
• Check your titles and labels by testing with a
screen reader: there is no excuse to put out
unlabeled stuff anymore
• Focus indicator
• Associate text labels with form controls
• Resizable text (captain obvious)
• Add an accessibility help page and mission statement
Twitter.com/SassyOutwater

12. “Are you still there?”
• Sufficient time: Don’t just time out the page, take a note from Netflix:
“Are you still there?”
• Allow reactivation if possible, or option to save
Twitter.com/SassyOutwater
Bartlet for President!

13. Errors, popups, changing windows, and
interruption of task: returning mental focus
• Make moving from window to window or page to page easy and
intuitive.
• Highlight how to return to the task.
• Popups must contain concise reason for popup as well as instructions
for how to make it go away.
https://www.youtube.com/watch?v=OgniTfa27Zw
Twitter.com/SassyOutwater

14. Error prevention and correction
• Give clear form instructions, labels and interactions the first time and I
won’t have to submit 12 times!
• Give at least 2 demonstrations of data error and correction methods, one is
not enough!
• Example:
• Highlight form field error
and
• Give clear written instructions to correct: “date of birth must be
mm/dd/yyyy)
• List at the top of the form, and in the form element with the problem
Twitter.com/SassyOutwater

15. Plain Language Guidelines: some basic rules
Developers need to watch for and flag content that does not adhere to WCAG’s language
guidelines. Prevent inaccessible text content! If you see a content author do this, here are
some suggestions:
• Sentences should not be longer than 25 words
• Sentences should contain no more than 2 conjunctions
• Remove redundancies
• Use bulleted lists rather than long blocks of text
• Use active voice
• Use vertical rather than in-line lists
• Organize by headings and maintain organizational structure and navigation when
possible throughout site
• Don’t use big words.
Twitter.com/SassyOutwater

16. WcAG2.1
Principle 4: Robust
• WCAG
• Worldwide Web Consortium
• Principle 4: Robust
• Assume you will have older users using older systems who do not want to
upgrade.
• Parsing: Don’t design just for latest and greatest. In content implemented
using markup languages, code clean please.
• Start and end tags
• Nest
• don’t duplicate attributes.
Twitter.com/SassyOutwater

17. Personas
• When developing testing personas, things to consider
Test with:
• various short-term memory lengths when checking style sheets, navigation and layout
• Distractions
• Lack of knowledge of technical jargon
• For each persona, does it pass the stoplight accessibility scale UX test?
• Lack of knowledge of various complex elements, attributes and interactive systems
• Sample: if you are having trouble navigating this page, please contact us
• Email:
• Phone number”
• Provide alternatives to each procedure, even if it’s just a clear “contact us” in the page
footer
Twitter.com/SassyOutwater

18. Now What?
Twitter.com/SassyOutwater
Fear of failure
Courage to wonder?