Eye Tracking & Accessibility
Why eye tracking for low vision?
Eye tracking demonstrates in real time what participants are looking at as they navigate an interface. It can uncover behaviors, strategies, and other mental processes that other usability methods may not have access to. Using eye tracking for low vision users highlights usability issues that may not affect the performance of people with normal vision.
My role.
Lead UX Researcher a in team of two UX Researchers. UX Designer.
The problem.
97.4% of homepages contain features that do not conform to WCAG web accessibility guidelines (Web Aim, 2021), putting the burden on assistive technologies that are designed to work with accessible websites as opposed to assuming the burden for inaccessible content in an WCAG non-compliant site.
Low vision stats.
-
4.3 million are blind or are have low vision
-
217 million people globally have moderate to severe vision loss or low vision even with corrective eyewear
-
Low vision is primarily caused by macular degeneration, cataracts, diabetic retinopathy, glaucoma and other chronic conditions
-
Expected to increase; in 2014 the number of people with cataracts was 25.7 million and in 2050 is expected to rise to 45.6 million
-
Severe vision loss presents problems with reading, navigating, using assistive technology, and using the internet
Inaccessibility impact:
U.S. adults with a disability are 3x less likely to use the internet (Pew Research Center, 2017), are over 3x less likely to be employed (BLS, 2022), and report higher levels of social isolation compared to their abled counterparts (O'Sullivan & Bourgin, 2010).
Low vision user behavior:
What we already know.
Low vision users have a wide diversity of needs.
-
Low vision disability does not appear the same for all users
-
Some users may have peripheral blindness, blurry vision, central scotoma, issues with depth perception, or any combination of the above
-
Users may use a combination of technology types such as voice recognition software, magnification devices/software, screen readers
Low vision users have a similar mental model to abled users.
-
Impatient - trying to get as much information as quickly as possible from a page
-
Magnification software such as Zoom can occlude portions of the screen, making it difficult to capture information from a page
Ensure contrast is high enough.
-
Should be at least 4.5:1 except for large text.
-
Low contrast is inaccessible; it makes it very difficult for people with low vision to read.
Methods.
Hypothesis: If a website is not crafted around web accessibility principles, can assistive technology compensate for the lack of accessibility?
What we did.
I selected a website that was crafted from top to bottom with WCAG web accessibility principles and then created a website identical in information but with no accessibility principles. To simulate macular degeneration, I used a Chrome extension to simulate a central scotoma and blurred vision. I set up a Tobii eye tracker to track eye movements on both the accessible and inaccessible websites in order to observe the differences in behavior visually on the websites. I also put together Zoom magnification software as an assistive technology to be used as a tool for viewing the websites.
Participants.
Equipment.
Design.
-
Two websites were tested
-
Accessible
-
Inaccessible
-
-
Participants completed the same tasks in both website types
-
Participants looked through Chrome extension web disability simulator for both websites
-
Participants had access to Zoom magnifier for both sites
● 3 graduate students
● Normal or corrected-to-normal vision
● Within subjects
-
Tobi eye tracker
-
Silktide Chrome extension disability simulator
-
20% blurred vision
-
50% scotoma
-
-
NSW Government Website
-
Wix Website
-
Zoom (magnification software)
-
Recorder on iPhone
Websites: lights, camera, inaccessibility.
All of the information is the same. The way it is conveyed, however, is either accessible or inaccessible. Here I've highlighted some of the design differences between the accessible and inaccessible sites.
Homepages.
Accessible
-
Sufficient contrast, font, font size
-
Developed from WCAG guidelines
-
Multicolumn and row dropdown
-
Color of clickable areas changes when hovering
Inaccesssible
-
Insufficient contrast
-
Includes inaccessible font
-
Cursive
-
All caps
-
-
Single column dropdown
Dropdowns.
-
Multicolumn and row dropdown
-
Hovered items change color
-
Tab headers highlighted when hovered over/selected
Accessible
Inaccesssible
-
Single column dropdown
-
Hovered items do not change color
-
Tab headers stay the same when hovered over /selected
Columns.
-
Even single column
-
Easy to read in magnification lens
Accessible
Inaccesssible
-
Uneven/unnecessary columns
-
Difficult to read using a magnification lens
-
User testing: think aloud.
Procedure.
Participants arrived at the laboratory and agreed verbally to being recorded. Participants then sat at the desktop computer and calibrated their pupils with the Tobii eye tracker software. The software compiled screen recordings of their eye tracking locations on the website. Participants were shown the functionality of the Silktide disability simulator; the scotoma was attached to the mouse movements. Participants were instructed that the Zoom magnifier was at the top of the screen and the location of the mouse magnified the text at the top of the screen. The magnifier was at the top of the screen as to avoid screen occlusion. Participants were instructed to navigate and read as they normally would.
To combat order effects, 2 participants completed tasks initially on the accessible website and 1 participant completed tasks initially on the inaccessible website.
I took notes as the participants completed the tasks, recording their thoughts, reactions, and behaviors.
Tasks.
1. Find a place to get swabbed for COVID-19.
2. Look up regulations about COVID-19 in the area.
3. Find support for people with a disability in COVID-19.
Computer system and Tobii eye tracker.
System Usability Scale.
After participants completed all of the tasks for the corresponding website condition, participants completed a SUS. After completing the SUS, participants then completed the same tasks for the next website condition.
Quantitative analysis.
Although the t-test reveals that there was no significant difference between time differences in task completion rates due to the small sample size, there is a 6 minute mean difference between the accessible and inaccessible website.
Task completion rates.
All participants completed all three tasks in the accessible website condition.
2/3 participants did not complete at least one task in the inaccessible condition.
System usability scale.
Industry Average = 68
-
Accessible website scored 88.33 (above industry average)
-
Inaccessible website scored 64.17 (below the industry average)
Results: Accessible site is more usable than inaccessible site.
Qualitative analysis.
Tagging.
I filled in some of the gaps in my notes with the audio recordings I took of the participants and then I began to use the HyperResearch qualitative coding tool to tag the qualitative data.
Most used codes in this study presented in the HyperResearch software.
Participant behaviors.
Here are screen recordings from some of the participants' eye movements completing the tasks. The red dots indicate fixations (participants' eyes have stopped moving or are focusing on something on the website). The large black spot is the scotoma which is moved by mouse movements.
Reading behavior.
Accessible website.
Quotes from participants.
"Pretty easy."
"Clearer."
Behavior & analysis.
Behavior
-
Scotoma off to the side
-
Participant eyes' are scanning the text, not using the magnification reader
Analysis
-
An interesting and unintentional consequence of the scotoma: users in the inaccessible condition used the shadow of the scotoma to read
-
Indicates participant can read the text clearly without assistive tools
-
Participants are looking for information
-
Don't need to use assistive tech to read the site - website is easy to read
-
Text is large enough
-
Color contrast is sufficient
Inaccessible website.
Quotes from participants.
“ I’m using the shadow to see.”
"I’m not sure what this is so I would definitely need the magnification for this part. Which really doesn’t help considering that it’s still really small”.
Behavior & analysis.
Behavior
-
Using scotoma shadow to read
-
Participant is using magnification reader but still cannot read text
Analysis
-
Participants are coming up with strategies to try and mitigate the small text and low contrast
-
Participants prefer to read on the screen, not the magnification software
-
Not used to magnification software
-
Website does not work together with assistive technology
-
Assistive technology cannot make up for inaccessible components in the website
Dropdown behavior.
Accessible website.
Quote from a participant.
"Dropdown isn't flying around everywhere."
Behavior & analysis.
Behavior
-
Participant is scanning the dropdown options
-
Similar scanning patterns to previous example - is not using scotoma shadow to see text
Analysis
-
Aware of a dropdown field
-
Scotoma doesn't occlude all of the options - aware of different dropdown options
-
Contrast is sufficient to see
-
Does not need assistive technology equipment to understand website
Inaccessible website.
Quote from a participant.
“Dropdown was the same color as the background."
Behavior & analysis.
Behavior
-
Participant selects wrong options
-
Dropdown menu keeps disappearing
-
Scotoma obscures the dropdown menu options
-
Participant using shadow to read options
Analysis
-
Unaware of dropdown for the COVID-19 tab because it blends in with the background
-
Difficult for the participant to read, understand, and select dropdown menu options
-
Contrast is not sufficient
-
Dropdown menu is too small
Qualitative synthesis.
Accessible website.
Easy to read.
-
All participants reported that site is easy to read
-
Scotoma off to the side
-
Did not use the magnification reader
-
-
All participants reported they thought they completed the task
Inaccessible website.
Contrast is the main issue.
-
Affects ability to read and gather information
-
6 minute average difference between accessible and inaccessible site to complete tasks
-
Easy to fix
Dropdown formats.
-
Vision issues, especially scotomas, can hinder the effectiveness of dropdowns
-
Multicolumn/multirow is better than a single column
Avoid small graphics or fonts.
-
Not even magnification readers can clarify
Future directions.
-
Expand study to low vision users
-
More participants
-
Expand to other types of assistive technologies such as screen readers
-
Research additional low vision technological needs
-
Switch to Eyelink eye tracker from Tobii
-
Weblink software - able to select specific web pages and areas of interest
-