loading...
Play Button Pause Button

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

mlimonczenko profile image Miranda ・6 min read

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.

Discussion

pic
Editor guide
Collapse
joshpuetz profile image
Josh Puetz

This talk should be mandatory viewing for all web developers!

I'm curious: do you Have specific recommendations for accessibility when designing for mobile?

Collapse
mlimonczenko profile image
Miranda Author

Everything in the talk definitely applies to mobile users. A mobile user is also using screenreader software, holding their fingers on elements while they are read aloud or using voice features. Particularly for design, it's important for elements to be large, well spaced, and clear.

Try turning on accessibility modes on your phone and learn to use them with your app. My Pixel accessibility settings has Select to Speak and Talk Back. It also has magnification, color contrast tools, and font size tools. I think you can learn a lot just by testing your app with these settings.

Collapse
prchase919 profile image
Patty Chase

Excellent talk, all the points are so important. I am passionate about accessibility and inclusive/universal design. Yes, it should be at the heart and the beginning of all we do--keep advocating (and I will too!) and someday the web development world WILL change!

Collapse
mlimonczenko profile image
Miranda Author

Thank you so much, Patty! Saron read this in my panel and it just made my day.

Let's make change happen! 💪

Collapse
prchase919 profile image
Patty Chase

I was excited to hear her read out my comment! Thanks again & I'm sure we'll cross paths again somehow. :-)

Collapse
lindakatcodes profile image
Linda Thompson

Question if you have a thought on this! When using JS frameworks, it can be very easy to end up with a bunch of nested divs or not as semantically perfect HTML. Are there things to think of or look into that can make sites built with frameworks better for accessibility?

Collapse
mlimonczenko profile image
Miranda Author

Thanks for this! I don't know if I can give a one-size-fits-all answer. It depends on the framework and the setup. Not all divs are evil, though. The absence of context is. 🙂

Collapse
lindakatcodes profile image
Linda Thompson

Oh, very good point! I do what I can to use semantic tags when possible, but will definitely make sure I try to ensure the context makes sense too. :) Thanks!

Collapse
adnanmostafa profile image
Adnan Mostafa

This is super important, we should create a standard committee or resource of accessibility standards for developers. Besides accessibility, are there any other things we should be cognizant of when designing websites and software?

Collapse
mlimonczenko profile image
Miranda Author

There are so many things to be cognizant of! Internationalization and localization is definitely another topic. Naomi's talk shed light on this topic. 😊

Collapse
maestromac profile image
Mac Siri

Thank you for this talk! I've learned a lot of useful things, especially dramatic hover-start! I'm also guilty of getting alt-text wrong all the time.

Would it be a good idea for web developer to try out these accessibility tool such as screen-reader to understand what the experience is like? Or is that a bit too extreme and we should just rely on linting tools and automatic test?

Collapse
mlimonczenko profile image
Miranda Author

Absolutely use a screenreader tool! It's always valuable, builds empathy, and gives insight in a way nothing else can.

My original talk included a screenreader tutorial, but I cut it for time. Most operating systems have screenreader software built in. For Mac, it's Voiceover.

Collapse
vaidehijoshi profile image
Vaidehi Joshi

I really liked the case study app presented in this talk! I'm curious to know if you have recommendations around how to "think" with accessibility in mind. Something that I have noticed in all the companies/products that I have worked on is that we often realize later on that our app isn't accessible, and then we realize we should have been thinking about accessibility from the very beginning, rather than as an afterthought. Do you have any ideas on how to change the way you approach building something so that accessibility is part of the building process (rather than an afterthought)?

Collapse
mlimonczenko profile image
Miranda Author

Hi Vaidehi! So cool seeing your comment. I've been following your Tweets through my booksoncode handle.

I honestly think it's helpful to think about your site through access needs. So, try accessing your web app using only a keyboard, or using keyboard paired with screenreader, paired with voice commands or with other assistive technologies.

There's also a book I highly recommend, Practical Web Inclusion and Accessibility, which is organized into different groups of users and their access needs. I think taking a user-centric approach is important.

Collapse
molly_struve profile image
Molly Struve (she/her)

This talk is 🔥🔥🔥!

When we talk about accessibility, I feel like there is a lot of focus on the frontend and design aspect of websites. As a backend focused engineer are there any accessibility strategies and things we should keep in mind as we are designing the backend of a website and delivering data to the front end?

Thanks for the incredible talk!

Collapse
mlimonczenko profile image
Miranda Author

Thank you so much, Molly!

This is a great question. Likely you'd have to collaborate closely with your team to identify these areas. For example, making sure that you expose fields like alt text or aria labels.

Collapse
ben profile image
Ben Halpern

This has been enlightening, love the case study approach.

Collapse
mlimonczenko profile image
Miranda Author

Thanks so much, Ben! I think it's so valuable to put our work in the context of serving real people. I'm so grateful for these experiences. 😊

Collapse
mccurcio profile image
Matt Curcio

Miranda, Wow, I am blown away! Excellent content. Your talk really showed how important some simple ideas for wed dev are pertinent to all. Loved; using contrast graphics with color changes, block outlines, movement. Regarding content ordering, Who would have thought, 'Polling is brilliant!'

Question: Do you think that incorporating bold into your contrast toolbar would be useful? Now that I need glasses (and am getting old, lol) I use bold text so much more?
'Doffs my hat,'

Collapse
mlimonczenko profile image
Miranda Author

Thank you so much, Matt! Bolding text certainly helps with readability. It is a good suggestion. 🙂

Collapse
fdoxyz profile image
Fernando

Really enjoyed the talk, thank you Miranda! Things like color contrast are things I barely ever think about and it has such a big impact on some people

Collapse
mlimonczenko profile image
Miranda Author

Yes! Thank you. It impacts so many people -- I think more than we might think -- people who don't know they are impacted until they see a more readable design.

I have worked on sites with low contrast and small text sizes. Boosting contrast and base text size just makes a perceptible difference for everyone. It feels like walking into an air-conditioned room on a hot day. Ahhh 😌

Collapse
caseyfhendrix profile image
caseyfhendrix

In regards to colorblindness, where many may not use any additional tools to read their screens, do you find it's better to avoid certain colors, or to make modifications as discussed?

Collapse
mlimonczenko profile image
Miranda Author

I don't think we need to avoid colors. As long as we are indicating state and changes in state in multiple ways, we can serve everyone.

Also, colorblindness varies by shade. For example, for red/green color blindness, I believe a light red and a dark green look more distinct from each other than a light red paired with a light green.

Collapse
nadatanasovska profile image
Nadica Atanasovska

Love this talk! I'm curious about the options to control the contrast and text size on websites and how to go about building them?

Collapse
mlimonczenko profile image
Miranda Author

One way of going about it:

Use HTML classes consistently to indicate certain color variations. Do not bind CSS color rules to components but to these classes.

Then, when a button is clicked for the contrast tool, you can add a class to body that allows you to change the skin easily in CSS with only a handful of CSS rules. 😁

Collapse
lindakatcodes profile image
Linda Thompson

Really loved this! Being able to see the specific examples your team went through to make these changes and why they're important was really nice!

Collapse
mlimonczenko profile image
Miranda Author

Thank you! Project-driven environments can be the most powerful learning experiences since they deal with real people and situations.

Collapse
fsodic profile image
Collapse
mlimonczenko profile image
Miranda Author

Hello, Fajar!