Accessibility Matters: How to Build Apps for Everyone with Miranda Limonczenko

About Miranda

Miranda is a Senior Technical Writer at VMware, a front-end developer, and a user experience advocate. Miranda chronicles her coding journey at BooksonCode.com.

Presentation Outline and Transcript

My name is Miranda Limonczenko. I am a senior technical writer at VMware and a front-end web developer. Today I'm going to be talking to you about web accessibility, why it matters, and my experience building a website for Guide Dogs for the Blind with a team. And also what we did for web accessibility.

Why Web Accessibility?

Really, it's in the name: access. Web accessibility allows anyone to use web apps and software without restriction. It's vitally important because of how much we rely on software. Our ability to work, learn, and live depends on our ability to use software and web apps.

When we build sites that are not accessible, even though we have all of the tools to make it accessible, we are excluding people from a job, from an education, or from a product. That is why there is such a good case for lawsuits.

Today, I'm not talking about lawsuits, but what's positive in web accessibility, which is creating experiences for users.

Which is why it was so exciting to work with Guide Dogs for the Blind building their website.

Our Goal

Our goal for building their website was to create a delightful experience for those who are blind or visually impaired.

People going to the site, maybe those who just recently had an injury, who may those have been suffering for years -- creating a delightful experience on the site is offering some sort of relief or comfort so that hopefully they will seek out services.

Key Areas of Focus for the Blind and Visually Impaired

We broke it up into two user groups: the blind and the visually impaired.

For the visually impaired, we focused on high color contrast, dramatic hoverstates, and an option to raise contrast among many other things, but we're focusing on these today.

For the blind who are using screenreader software listening to an HTML document being read, we focused on menu architecture, grounding elements in context, and alt text to enrich the experience with images.

High color contrast

With high color contrast, we used this contrast tool, which was fantastic. We tested all of our brand colors: black text and white text on top of all of the brand colors. I recommend that anyone do this.

So some things we discovered:
We had all of our brand colors in a spreadsheet. We discovered white text worked best on the brand color pink, but also for all of the other brand colors, black text worked best. For me as a web developer, it was important for me to remember this and to make an exception for white text on a pink background. In this case, there is an exception instead of consistency between brand colors.

But we also learned that black text on orange, which is another brand color, is better contrast even though visually to some of us it felt like it was higher contrast. It's important to keep in mind color blindness, which is why it's important to use software. We can see contrast when it's different for different people.

Dramatic Hoverstates

This one is not that intuitive for a lot of people. It's definitely something we all need to learn -- myself included.

This is true not just for hoverstates but for diagrams or status indicators. Color should not be the only indicator for a change. Just changing something from green to orange to red as status indicators is not enough to signal state.

So this can be movement and this can be an icon or an outline or just something visually different that is color based.

I have a couple of examples. There's the white on pink and the black on orange. For before you hover, it's a pink background and white text. After you hover, the text color changes, the background color changes, and there is a border. If you imagine that the color difference is not there, you can still see there is a difference. But also I think it's important to note that it really does look beautiful. When we think of hoverstates, so often the trend is to show slightly less opacity or to go from black to gray. Even though it may seem like these subtleties are beautiful, it's also beautiful to have high color contrast and it serves more people.

Here is another example: the color changes but also the icon flips the negative so that the arrow is colored in and the dot disappears.

Contrast Toolbar

Finally, I say it's a 'bonus' -- we added a toolbar to raise contrast and text size. This was something that we did because we wanted to show that we valued people coming to the site. We know that there are people who use magnification software or they use contrast software. But for people who don't have the software or don't know about it, we wanted to give them this option to raise contrast and text size across the site and that will stay saved so that every time they look at the site, it is configured to their settings.

I had feedback from one of the users. She used magnification software and color contrast software, but when she was using the site, she said "the site is so beautiful, I don't need the software". It just made me so happy.

Menu Architecture

Now we're talking about people who primarily use screen reader software. These are people who can still be looking at the site when they use screenreader software, but primarily they are using the screenreader software.

One thing we focused on was the menu architecture. This is something a lot of us don't think about: the main body of the page stands out to sighted users. There's advertisements, there's call to action, there's all this stuff. But when you use a screenreader, what you experience first is the menu architecture. A lot of the time, you don't get to the body. If you hear the place you want to go, you navigate to it.

That's why it's important to focus on the experience of main menu architecture. We did research for this. We used a tool called Optimal Sort. We took content, put it on a bunch of cards, sent it to various users and had them group the content into buckets. Funny story: I felt like I did a great job. When I organized the content, I thought it was perfect. But when I saw how other people organized it, I was definitely an outlier. People percept things differently, which is why it's important to do research.

Grounding Elements in Context

Next, we focused on elements and grounding them in context. With this, I think it's so important for a web developer to use screenreader software. Voiceover software is built-in for Mac. You can navigate your web app with a screenreader so that you can optimize it.

One of the things you can do with a screenreader is to jump from header to heade or link to link. They are not read with the paragraph in mind. You might hear "click here". You might think "What's here?" and you don't know.

With links, you should say where they are going.

If it doesn't make sense visually, you can override with an aria-label. For example, an aria-label can say "you are currently on page one" when the actual text just shows "1".

Images Enrich the Experience with Alt Text

Last thing we focused on (in this presentation anyway) is "images enrich the experience with alt text". Alt text is something I'm passionate because it's so easy to get wrong.

There's so many times I see "diagram about" but it doesn't say what's in the diagram. That alt text is leaving out the information that someone needs to learn. It's important to have empathy, to imagine what the intent is, and to deliver on the intent. Context matters. If the exact information is redundant, then you don't need to repeat it.

Here's another example from the Guide Dogs website: there's hero images all over the site. They're beautiful and they take up most of the page. Me, I thought that they should be left blank because they are decorative. But, I got the feedback from users that they can see this big, colorful, beautiful image taking up the majority of the page, but they couldn't see what the image was. We ended up going through the site and adding alt text to the big hero images.

For example, a hero image says, "A female GDB graduate hikes along a rail with her black lab guide dog next to her."

Final Thoughts

Really, I wanted to emphasize how much fun it was to build a thoughtful, good site for the blind and visually impaired. It really helped me see that it's just good design, good development, and it should be at the heart of everything we do. It's about being empathetic, curious, and building the best experience for users.

Link to Presentation

Here is a download link to the talk slides (PDF)

This talk will be presented as part of CodeLand:Distributed on July 23. After the talk is streamed as part of the conference, it will be added to this post as a recorded video.