Eye-tracking devices (also called eye trackers) are an assistive technology developed for people with mobility conditions, neurocognitive conditions, and other disabilities. The technology typically uses a low-powered infrared light-emitting diode (LED) to illuminate the user’s eye. A camera tracks the reflections from the LED, and software processes eye movements.
By looking at specific parts of the screen, users can interact with on-screen keyboards, mouse simulators, and other input fields. The technology addresses many of the challenges that people with disabilities encounter when using a mouse: Users are less likely to become fatigued or make accidental clicks.
When properly calibrated, eye trackers provide a comfortable, intuitive way to browse the internet. However, all assistive technologies work more effectively on well-designed websites. The Web Content Accessibility Guidelines (WCAG) provide the best framework for designing content that works for all users — including people with disabilities who use assistive technology.
Below, we’ll discuss a few design and development decisions that could impact people who use eye-tracking technology to access websites or mobile apps. For each entry, we’ll also identify WCAG 2.1 Success Criteria (SC) that could help content creators prevent (and fix) accessibility barriers.
For expert guidance on this article, we reached out to two of the leading eye-tracking developers: Tobii Dynavox and Eyegaze, Inc.
Provide space between buttons, links, and other targets
Eye-tracking systems often have screen magnifiers, which enable users to activate links, drop-down menus, and other interactive targets. However, small targets can still create barriers for users.
“There are many ways to handle actionable target elements such as buttons, banners, and text links,” says Jaén Cantor, UX designer of Tobii Dynavox. “You need to allow as much space and size as possible when determining your placements to help the eye tracking user select those targets without accidentally selecting something else nearby.”
Websites can address this barrier by conforming with WCAG 2.1 SC 2.5.8, “Pointer Target Spacing,” which reads:
For each target, there is an area with a width and height of at least 44 CSS pixels that includes it, and no other targets.
WCAG outlines several exceptions for this guideline. For example, websites can provide users with a mechanism to change the CSS pixel size of each target or its spacing. However, developers should understand the intent of the rule: When targets are close together, real-world users may be unable to navigate comfortably.
“Accidental selection can be incredibly frustrating,” Cantor explains. “When it comes to text elements like hyperlinks in a paragraph, you want to allow breathing room in your line spacing because it can be very challenging to click on only one word or phase within a paragraph.”
Related: Understanding Target Size Under WCAG 2.2 and How It Affects People with Disabilities
Use generic HTML5 elements and attributes
When developing your content, use generic HTML wherever possible. HTML is interpretable by most assistive technologies, including eye-tracking systems, and helps to accurately identify on-page elements. Accessible names and labels are essential for eye-trackers, screen readers, and other assistive tech.
“Sometimes, developers make a new component that looks familiar, like a button that is actually not a button, with a hyperlink behind it,” says Jeramey Kwan, marketing & communications manager at Eyegaze, Inc. “Things like that can be tricky. When using a hand-mouse, it functions the same, but when using an eye tracker, it may not always work.”
Using HTML helps to ensure that your website works predictably, regardless of the methods people use to access your content. For dynamic content, the Web Accessibility Initiative’s Accessible Rich Internet Applications suite of web standards (ARIA, or WAI-ARIA) may be more appropriate, but work closely with an accessibility partner when using ARIA.
Related: How Accessible Names Can Help (Or Frustrate) Your Users
Avoid using pop-ups, autoplay, and other distracting elements
Developers should avoid autoplay media, pop-ups, and any other features that unexpectedly change the user’s experience.
“Pop-up modules are very bad user experiences for eye trackers, as it takes the focus away from the main goal and usually requires some sort of click to exit out of them. An example of this is ‘push this to continue’ or ‘you'll be signed out in 15 minutes due to inactivity.’ These can be difficult because the popups can be hidden in the corner of the screen or behind something. "
Audio-based media can also frustrate people who use eye-tracking systems. WCAG 2.1 SC 1.4.2, “Audio Control,” addresses this issue:
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Autoplay media can be a frustrating annoyance. If the user can’t easily find the controls, they won’t be able to stop playback — and as we’ve discussed on this blog, autoplay creates serious accessibility barriers for assistive technology users.
Use appropriate color contrast settings
“Bright colors and screens can quickly fatigue an Eyegaze user,” says Kwan. “ We recommend design with dark backgrounds [or a] night mode, minimizing visual distractions, and making screen brightness adjustable.”
Sophisticated visual effects can be disorienting, even when the rest of a website is relatively accessible.
“On Apple's website, when you scroll down, the iPhone animation changes and the phone comes together,” Kwan notes. “This visual animation is cool for mouse users, but it can be very distracting for an Eyegaze user.”
Consider offering an HTML-only version of complex content, which can give eye-tracking users a more comfortable browsing experience. Make sure all content conforms with WCAG’s standards for color contrast, and avoid using color alone to convey information.
Think about accessibility when building your content
“When people start to discover eye tracking, they tend to think that the technology is either just like a second mouse and assume it works similarly — or they assume that it is too complicated and out of reach for them to learn,” says Pawan Kumar, front end developer & UX designer of Tobii Dynavox. “The reality is that it’s neither.”
Brittney Norris, digital director of Tobii Dynavox, explains that you should always remember that assistive technology has a human factor: While eye-tracking systems are both precise and customizable, most websites don’t prioritize digital accessibility. Unlike when using a mouse, all clicks and motions are done with the user’s eyes. Avoiding web designs that involve the need for complex movements or intricate thought processes will naturally help the user navigate with less frustration and eye fatigue.
When websites follow the best practices outlined in the WCAG framework, all users benefit — and people who use assistive technologies can browse the internet more efficiently and comfortably.
