I have a confession to make. I am really, really obsessed with beauty pageants.
Have I ever competed? No, and I will probably never because there’s an age limit. But I absolutely love following the Global Beauties “Grand Slam” competitions: Miss World, Miss Universe, Miss Supranational, Miss Grand International, and Miss International (don’t worry gentlemen, there’s a men’s equivalent of these events too).
Due to a year of a global pandemic, many beauty pageants were postponed and of the 5 pageants, only two sought for a very belated 2020 titleholder: Miss Grand International and Miss Universe. After 10 days of photoshoots, events, and interviews, on May 16, 2021, at Seminole Hard Rock Hotel & Casino in Hollywood, Florida, Andrea Meza of Mexico was crowned Miss Universe 2020.
As a die-heart fan, I was consuming everything I could about the events – following various Instagram accounts, watched the live stream on Youtube, and looked at the Miss Universe app and website… And that’s when my UX devil’s advocate kicked in: the Miss Universite website is an accessibility lawsuit waiting to happen.
Because missuniverse.com isn’t ADA compliant.
What does it mean to be ADA compliant?
Over 30 years ago, the Americans with Disabilities Act (ADA) was established. The gist of the ADA is if you aren’t making things accessible, then you’re discriminating against those with disabilities. At the time the law was established, websites and mobile apps didn’t exist. But now, they’re considered “places of public accommodation”. This makes many commercial websites (any site that does anything with money) potential targets for a lawsuit.
Beyoncé, Netflix, Nike, Amazon, Harvard, CVS, and Burger King are some big names that have faced lawsuits. In 2020, there was a notable increase in lawsuits due to COVID-19 presumably from the digital shift – online learning, eCommerce businesses, remote work, etc.
Okay, so how does one ensure that their website is ADA compliant?
As a designer, here are some basic steps (using the Miss Universe website as an example) to make sure the website you’re designing is visually ADA compliant.
Implement the minimum font size
It’s not an official WCAG font size standard but a general rule of thumb is to use at least 16px for your body font size on both web and mobile. Different fonts may differ in size but at least start with your screen set at 100% and try 16px. If you have a text-heavy page, consider bumping up your font size to 18px.
Maybe you’re thinking, what? 18px is huge for a webpage but if you look at the best-looking text-heavy site on the web, Medium.com, the default article text size of 21px. The font isn’t awkwardly large as expected and readers are not suffering eye strain.
Make it responsive
WCAG 2.0 requires that layouts fluidly adapt to screen sizes upwards from 320px. It also requires that the layout remains fluid even when the viewport, a framed area on a display screen for viewing information, is zoomed to 200% ensuring that text elements aren’t overflowing beyond the viewport accidentally. As you can see, as I resize the website, the images of the delegates no longer fit on the screen – this is overflow. The solution here would be to implement breakpoints so that as the screen is shrunk down, the images go from 3-columns to one. The images could also be resized smaller to not take up too much real estate.
Another discovery on the Miss Universe website is that they have two! The mobile site fits nicely to my phone with a hamburger menu. This is called adaptive design. Adaptive design is a common practice when retrofitting an existing website. It also technically allows for a page to load faster. The caveat to adaptive design is that you aren’t able to account for all screen sizes. I didn’t test the Miss Universe website on a tablet so I’m not sure if they have such a design.
Achieve optimal color contrast
I think color contrast is usually the easiest to fix but sometimes the hardest to realize because it may “look fine” if you don’t have trouble distinguishing colors. Color contrast is measured using numbers that can easily be tested with color contrast analyzers to check that it meets WCAG 2.0. Here’s a list of some of my favorite tools for checking color combinations:
- Contrast Checker: https://webaim.org/resources/contrastchecker/
- Color Contrast Accessibility Validator: https://color.a11y.com/
- Color Contrast Checker: https://coolors.co/contrast-checker/112a46-acc8e5
- Color Contrast Checker Figma Plugin: https://www.figma.com/community/plugin/733159460536249875/A11y—Color-Contrast-Checker
- Contrast Mac App: https://usecontrast.com/
- Stark Plugin for Figma, Adobe XD, and Sketch: https://www.getstark.co/
The color contrast was the first problem I ran into on the Miss Universe website. when I interacted with the cookies. The modal contains white text on an almost white background (it’s a very light grey if we’re being technical). This example doesn’t need a color checker because it’s obviously not legible.
At first, I didn’t realize there was text to read—I thought the modal didn’t load for me. But when I highlighted with a cursor, I found the words. The easy fix? Make the text the same dark blue (as the box) or black.
For other parts of the website that don’t meet color contrast, readability could be enhanced by increasing the font size greater than 14px or applying a heavier font weight. Because the Miss Universe organization seems to be branded by the greyish-purple with a mustard yellow, a new color palette might be harder to pull off.
Include an accessibility statement
Accessibility statements help organizations communicate to their users that they’re taking steps to improve digital accessibility. These statements are typically found at the bottom of each page in a website which provides users details on the level of digital accessibility of the website or app. It may contain contact or more information on where non-accessible content lives on the website.
- An open commitment to providing an accessible website
- An outline of key guidelines and standards the website follows
- Any known exceptions to the intended level of web accessibility
- Contact information for reporting difficulties with the website
Designing for accessibility: top recommendations
To recap, here are some universal (heh) accessibility recommendations that can help almost any website:
- Implement minimum body font sizes of at least 16px
- Make it responsive: use breakpoints to help content stay within the viewpoint
- Consider color contrast: use color contrast checkers to verify that your palette is legible
- Include an accessibility statement: acknowledge that you are working toward digital accessibility
While there are many more things to consider when designing for digital accessibility, these are great starting steps for implementation. Sometimes, we know the cobbler’s kids have no shoes—do you have an accessibility suggestion for UXBeginner? Reply and let us know!
[UX COURSE RECOMMENDATION]
If you’re an accessibility nerd like Kim, one of the best niche classes to take on the subject is InteractionDesign.org’s dedicated course on accessibility. Learn how to…
- Incorporate accessibility into your design and development processes
- Use advanced tools and techniques for validating your accessibility efforts
- Build an accessibility program and use it to increase your organization’s maturity
It’s the most updated & comprehensive course on the subject compared to our other fav educational partners Udemy and Skillshare (at the moment). Using our educational partner link, you’d also get your 3 months of your annual IDF membership for free. Happy learning!