Noted
October 25, 2020

How We’ve Made Our Website More Accessible (How You Can, Too!)

Source: Pexels

October is National Disability Employment Awareness Month (NDEAM). This year also marks the 30th anniversary of the American Disabilities Act.

One of the best parts of building Dyversifi is being able to learn from the different perspectives our platform is looking to help. Earlier this month, we held an IG Live with John Samuel, the Co-Founder of Ablr 360 (formerly LCI Tech). Ironically, we had a lot of trouble getting on the IG Live because Instagram hasn’t made the process accessible to people that use screen readers. We eventually got the app to work properly, but it was such a glaring example of how technology often isn’t created with accessibility, and therefore inclusion, in mind.

Unfortunately, our own website was part of the problem.

Back in August, John’s team did an accessibility audit on our website. Led by Kevin Erickson, the Accessibility Services Manager at Ablr 360, they found 92 (!!) accessibility issues on our site. Admittedly, I was embarrassed when Kevin went through the issues with us. A platform focused on sharing the minority experience can’t be successful if it excludes a group of people that it’s designed to serve.

Fortunately for us, John, Kevin, and the rest of the Ablr 360 team were able to walk us through the changes that needed to be made to our site, and we’ve been able to get some the high-priority issues resolved.

Here’s a list of some of the larger issues that were found on our site and how we’ve changed them:

1. Color contrast

People with visual disabilities need color contrast to perceive content on a page. In general, text links should have a color contrast of 4:5:1. Non-text items on a page should have a minimum ratio of 3:1.

Use this link to check the color contrast on your favorite webpages: https://color.a11y.com. I did a quick search and found some issues with some of the biggest sites on the internet, including amazon.com, glassdoor.com (*sips tea*), and adidas.com/us.

2. Focus indicators

Focus indicators are visual markers that help people identify what item on a webpage they are currently focused on. The idea is that only one element on a page should be focused at a time, and it should be very clear what element that is.

A lot of internet users use the keyboard to navigate webpages. For people with low vision or cognitive disabilities and/or people that don’t have the motor ability to use a traditional computer mouse, screen readers help to better understand what content is on a page.

3. Form labels

The foundation of Dyversifi is the Story, and to submit a Story, our users have to fill out a form on our website.

People who are blind can’t see the headers on the different items in a form; instead, they often use screen readers to figure out what information the form field is asking for. For a screen reader to identify the ask of a form field, the field needs to have a label, otherwise known as an accessible name.

Try using a screen reader yourself! MacBook users can use VoiceOver to experience screen readers. Windows users should be able to use Narrator.

Diversity, equity, and inclusion should not and cannot be designed for only a certain group of minorities. It’s easy to overlook people with disabilities when thinking about new product launches or marketing campaigns because they might not match our pre-defined personas, but the truth is that 61 million adults in the US live with a disability, so every decision that a company makes needs to consider accessibility. We’re going to use this audit by our friends at Ablr 360 as a catalyst for change in our upcoming product launches, and we encourage you to do the same.

Continue reading

Our newsletter

Get great curated articles every week.

Combine sections from Ollie's vast component library and create beautiful, detailed pages.
No spam!