a man covers his eyes with his hands

Seeing Through Someone Else’s Eyes

Have you ever wondered what it would be like to see through someone else’s eyes? What do cataracts look like? What about diabetic retinopathy, or macular degeneration? How do colour blind people experience flashy websites that rely on complementing and contrasting colours? With the help of simple developer tools, you can see how different eye conditions would impact your experience of the web, and why good design must consider screen readers.

 

Accessibility and Why It’s Important

an elderly woman reading with a magnifying glass

The internet is an amazing tool that offers a convenient way to shop, research, and book events. In some ways, the web levels the playing field for access; and yet, in so many other ways, the internet provides frustrating barriers for users with vision issues. From uninformative code that screen readers don’t understand, to flashy themes that people with reduced contrast or colour deficiencies can’t see, the web often lets users with disabilities down.

Although we try to make it as user friendly as possible, our own website relies on plugins and themes that other people have developed. While many developers try to keep accessibility in mind, some don’t consider the experience of users with disabilities. It’s especially difficult for visually impaired users to navigate a 2 dimensional space like the web, and many people rely on the help of screen readers. But without code to support screen readers, a website can be confusing to navigate.

 

ARIA

In order to function well, screen readers get help from something called ARIA, which stands for Accessible Rich Internet Applications; this is a set of specifications that can be added to HTML code. ARIA is basically a note to screen readers telling them the function of an object; screen readers then tell the user what to do with that object. Your website uses a combination of HTML and CSS (Cascading Style Sheets) to make your experience both informative and visually interesting. CSS is the fancy decoration that makes a website pop, but without ARIA in the HTML, the code is assuming that you can see for yourself what objects do.

an example of aria code for required form fields.

For example, online forms usually have styled labels to tell you where to put your name, address, and other information; but a screen reader doesn’t recognize those labels without a little help. If a form didn’t have labels, would you know where to fill in your information? When you fill it in wrong, the form usually shows you where the problem is; but if you couldn’t see the highlighted area, how would you find your error? Required form fields have a little red star next to them; what if you couldn’t see that star? You would need ARIA to explain what information goes in each field, which fields are required, and where the error is if one occurs.

ARIA specifications make it possible for visually impaired users to understand how a website is set up. A screen reader has no trouble reading out straight HTML, but it needs ARIA to interpret interactive elements like buttons, images, and form fields. Screen readers and other accessibility tools are only as good as the website that they’re visiting; if the developer has not considered accessibility, the user’s experience will not be as good.

 

Wave

an example of the WAVE developer tool open on the Google home page.With accessibility browser extensions, such as a tool called Wave, a web developer can check their website for errors and try to improve the online experience of people using screen readers. Wave crawls a website and alerts you to major and minor problems. For example, if you’re using a small font, Wave will flag it as a problem for low vision users. If your form doesn’t use ARIA specifications, Wave will tell you that a screen reader won’t understand the form fields. Piece by piece, you can go through your website and fix the code, sizing, and contrast issues to make it more usable.

As a non-developer, you can use Wave to see how a user with disabilities may struggle to understand content. If a website comes up with multiple red flags it indicates that a screen reader, or a user who relies on large font or high contrast, may have trouble. This tool can give you some insight into another person’s challenges online, but it doesn’t quite give you their experience.

 

NoCoffee

the nocoffee extension toolbarWhen we talk about vision issues, it can be difficult to truly understand unless you can see it for yourself. It’s easy to picture clouds or splotches obscuring your vision for a moment; it’s harder to imagine another user’s daily struggles without trying to navigate through them yourself. With that in mind, the Google Chrome extension called NoCoffee shows you what the web is like for people with various vision issues, and why they may need screen readers to participate online.

NoCoffee offers a range of colour deficiency options to try out; you may find your browsing experience changes in ways you didn’t expect. You may notice some flashy website themes become inaccessible for colour deficient users when contrasting colours become too similar. If you have colour deficiency turned on and low contrast enabled, you can see that some functions may disappear entirely.

an example of nocoffee with cataracts enabledNoCoffee also offers a look into life with eye diseases like cataracts, diabetic retinopathy, glaucoma, and macular degeneration; the extension allows you to adjust the severity of these conditions with a slider bar. Once you’ve selected any combination of vision issues, you can surf the web with this tool engaged; in this way you can see for yourself the challenges that someone with these issues might face.

 

Closing Thoughts

If you run an independent optical, chances are you have a website of your own; how does your website look? Can you make any changes to your page layout to create an easier experience for someone with a visual disability? As eye health professionals, it’s likely that many of your clients have one or more of the demonstrated vision issues. It is worth considering the needs and experiences of those patients.

an example of nocoffee with macular degeneration enabledWhat can your experience seeing through different eyes teach you about how your own office environment is laid out? Are there obstacles or hazards that someone with central or peripheral vision loss may trip over? Using NoCoffee may have also got you thinking about the challenges of optimizing your patients’ most important field of vision. For example, someone with macular degeneration doesn’t use their central vision much, and can’t afford distortion in their peripheral vision; does your choice of lenses and frames change to suit the individual?

It’s easy to forget that people quite literally see the world in different ways, but by making a website as inclusive as possible for people who rely on screen readers, magnifiers, and other tools, ease and accessibility can be for everyone.