Week 3: Testing for Accessibility
CSE493e, Fall 2023
Important Reminder
This is an important reminder
Make sure zoom is running and recording!!!
Make sure captioning is turned on
Announcements & Follow Up (1/3)
Small update to grading rubric (see Jesse's post)
Example of double negations (from NIU)
- "There is no way I cannot visit my mother this year."
Alternative "I must visit my mother."
"I miss not seeing him every day."
- Alternative "I miss seeing him every day"
Announcements & Follow Up (2/3)
You try it:
- "I wasn't unhappy with my grade."
Announcements & Follow Up (2/3)
You try it:
"I wasn't unhappy with my grade."
Alternative "I was lukewarm about my grade."
Announcements & Follow Up (2/3)
You try it:
"I wasn't unhappy with my grade."
Alternative "I was lukewarm about my grade."
- "The shopper did not have any energy left at the end of the day."
Announcements & Follow Up (2/3)
You try it:
"I wasn't unhappy with my grade."
Alternative "I was lukewarm about my grade."
"The shopper did not have any energy left at the end of the day."
Alternative "The shopper had no energy left at the end of the day."
Announcements & Follow Up (3/3)
Is simplified text still well written text?
- There are multiple grammatically correct ways to state something
- Which one to use may depend upon your audiences
Clarification about assignment: You should specify which plain language techniques you used to simplify your text.
Section is generally not recorded because it is very interactive. Please feel free to use office hours instead if you are remote and need the support.
Learning Goals for Today
- Get comfortable using existing freely available accessibility technology to manually support assessment
- How do we use automated tools?
Example Disabilities To Consider
Web browsing involves
- Color
- Text (with shape and size)
- Content (images, words, sounds, animation)
- Typing (e.g. input to forms)
- Mousing (e.g. clicking on links for navigation)
- Comprehension (e.g. reading level)
Example Disabilities To Consider
Web browsing involves
- Color
- Text (with shape and size)
- Content (images, words, sounds, animation)
- Typing (e.g. input to forms)
- Mousing (e.g. clicking on links for navigation)
- Comprehension (e.g. reading level)
Therefore…
- Visual impairments
- Difficulty understanding content
- Difficulty hearing
- Difficulty manipulating mouse or keyboard
all affect accessibility
What is the goal?
All users interact with the same website or app as anyone else
Users may use browser features or a specialized accessibility tool to customize their experience
What is the goal?
All users interact with the same website or app as anyone else
Users may use browser features or a specialized accessibility tool to customize their experience
This is Key
Website or app designer provides the right structure and information to support this
Most Websites and Apps not Accessible
- Over 60% of Android apps missing at least one label on a clickable element (out of 5721 apps tested) (Ross et al, 2020)
- Over 80% of fortune 500 websites not accessible (Loiacono et al, 2009)
- University websites are also partly to mostly inaccessible (Campoverde-Molina et al, 2021)
- Less than 1% of Twitter images had ALT text in 2019 (Gleason et al, 2019)
More study is needed, but overall, progress here is slow. Perhaps this is not surprising since only about 50% of universities in the US teach accessibility at all (Shinohara et al, 2018).
Best Practices for Testing Accessibility?
Automated Tools
- Review of many options
- Web: WebAIM's WAVE;
- Browser Extensions (Comparison Article): WAVE; Axe; Lighthouse; Siteimprove; & other browser extensions
- Phone apps: Google Accessibility Scanner and iOS.
Best Practices for Testing Accessibility?
Automated Tools
- Review of many options
- Web: WebAIM's WAVE;
- Browser Extensions (Comparison Article): WAVE; Axe; Lighthouse; Siteimprove; & other browser extensions
- Phone apps: Google Accessibility Scanner and iOS.
Design Guidelines (i.e. know them and apply them heuristically)
Simulation (Try it yourself using accessibility technologies or simulators such as aDesigner)
User Testing
Simulation -- Next Assignment
In this assignment we will use off-the-shelf, freely available accessibility technology for simulation
- Screen Readers
- Switch Control
- Magnification
- Anything else you want to try
Simulation Warning
Simulation tends to cause people to underestimate what is possible
Remind them about drone video
Don't fall into the trap of assuming that your ineptitude is the standard disability experience]
Screen Readers: Typical Bugs
- Reads the words on the screen
- Keystroke to move to next area
- Screen reader users, turn this on on your phone
Switch Control
- Switch users, turn this on, on your phone
Magnification
- Magnification users, turn this on, on your phone
Browser Settings
- Change font size
- Change color contrast
- Change from light to dark mode
Break up into groups
Decide who will
- use switch control
- use magnification
- browser settings
Open your phone's web browser and load seattleschools.org
In your groups
Visit Seattle Public Schools or UW Libraries
The tasks you are evaluating is
- Whether a student can easily learn about Seattle Public Schools or UW Libraries
- Whether a student can "Report a Concern" about how accessible the website is What are some problems you found? Try to separate out what is difficult for you as a beginner from what is a flaw in the website itself.
Wednesday's Assessment Homework
Identify 3 tasks
(Install and) run an automated Accessibility Checker (we'll try this next class)
Test it yourself with two accessibility technologies
Capture problems using a Usability Assessment Report
Usability Assessment Report
You may be familiar with this concept. Also called
- Usability Problem Report (UIM Ch11)
- Usability Aspect Report (CMU)
- Bug/Issue Report (Bugzilla, JIRA, Rational)
Audience: primarily developers
Content should be
- Specific and convincing
- Accessible
Example from the UW Library
- Name as "Minimal Image ALT Text";
- Evidence Guideline violated: 1.1 (Text Alternatives);
- Screen Shot as the image and URL (lib.washington.edu);
Example from the UW Library
- Name as "Missing Image ALT Text";
- Evidence Guideline violated: 1.1 (Text Alternatives);
- Explanation A screen reader description of this image will only say "fall update 2"
Example from the UW Library
- Name as "Missing Image ALT Text";
- Evidence Guideline violated: 1.1 (Text Alternatives);
- Explanation A screen reader description of this image will only say "fall update 2"
- Severity Justification in terms of:
– Frequency Is Problem common or rare? For which types of users?
- Impact – Is it hard or easy to overcome this?
- Persistence - Is there a way to avoid this problem?
What do you think? Discuss with your neighbor and post any questions on Ed
This is debatable, but frequency is low (it only occurs once on this site. If you are writing up all missing image alt text as a group, you might increase your estimate of frequency, but this site doesn't appear to have a lot of undescribed images); impact is low (it is possible to determine the purpose of this image by either clicking on it to see what it links to, or inferring some things from the external link and image file name (both unpleasant alternatives for a screen reader user); and persistence is high (it's not going to go away).
Example from the UW Library
- Name as "Missing Image ALT Text";
- Evidence Guideline violated: 1.1 (Text Alternatives);
- Explanation A screen reader won't be able to describe this image
- Severity 2. High persistence, middling frequency, impact is low (you can click through to learn more)
- Possible Solution Add ALT text: "A photo of trees on campus with yellow leaves with the words "Fall Update" and "what's new in 2023, Upcoming Events, Links to bookmark, more! " and improve practices to add better alt text consistently
- Relationship to other problems (TBD, probably other images with similar issues)
