DEV Community

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

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

Miranda on July 23, 2020

About Miranda Miranda is a Senior Technical Writer at VMware, a front-end developer, and a user experience advocate. Miranda chronicles ...
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 • Edited

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

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

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

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

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 • Edited

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 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

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 • Edited

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 • Edited

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

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

Collapse
 
fdocr 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

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
 
data_queen profile image
Casey Lynette

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

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 • Edited

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

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

Collapse
 
fsodic profile image
Fajar Sodik

Hi

Collapse
 
mlimonczenko profile image
Miranda

Hello, Fajar!