SlideShare una empresa de Scribd logo
1 de 18
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
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
Inclusive Design is Not Inclusive If You Can’t
Access It!
Setup, Maintenance, security, updating and upgrading are often access barriers
Twitter.com/SassyOutwater
User Centered Accessibility Tests
Twitter.com/SassyOutwater
I cannot access this
I need help to access this
This is accessible to me
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
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
“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
Don’t be that guy: Don’t Miss The easy fixes
• Distractions
• Multimedia interaction
• Refresh or timeout control
• Robust code
Twitter.com/SassyOutwater
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
Content
• Navigation
• Plain language
• Limit distractions
• Save-and-continue-later feature for forms
• Control of refresh
Twitter.com/SassyOutwater
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
“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!
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
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
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
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
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
Now What?
Twitter.com/SassyOutwater
Fear of failure
Courage to wonder?

Más contenido relacionado

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Último (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 

Destacado

Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Saba Software
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
Simplilearn
 

Destacado (20)

How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 
Barbie - Brand Strategy Presentation
Barbie - Brand Strategy PresentationBarbie - Brand Strategy Presentation
Barbie - Brand Strategy Presentation
 
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellGood Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
 
Introduction to C Programming Language
Introduction to C Programming LanguageIntroduction to C Programming Language
Introduction to C Programming Language
 

A11ytoConf talk: Assistive technology instruction, UX and Aging: What Web Devs need to know

  • 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?