All articles

Are you designing with equity in mind?

Illustration showing a designer with speech bubble over their head and user interface iconography in the background. The speech bubble contains a question mark.

If someone asked me, “do you design with equity in mind?”, I might just respond with “of course I do, I’m a pretty great human being”.

But when you take the ego out of it for a second, there are very concrete ways to make designs equitable which are easy to forget. About 40 years ago, a group of architects, product designers, engineers and environmental design researchers came up with seven universal design principles. The first of these principles is focused on making design more equitable — it contains four simple but powerful tenets:

  1. Provide the same means of use for all users: identical whenever possible; equivalent when not.
  2. Avoid segregating or stigmatizing any users.
  3. Provisions for privacy, security, and safety should be equally available to all users.
  4. Make the design appealing to all users.

While a lot has changed over the past 40 years, these tenets are still incredibly relevant. I recommend using them as a checklist to refer to as you’re designing any web project. They can help you evaluate the millions of design decisions that are part of any process.

How can you be sure if you’re achieving each of these tenets?

A house with no lights

Imagine you’re asked to design the interior design for a house. At the end of the project the client lets you know that every room has to work without lights. You probably would’ve designed a very different house had you known that from the beginning.

To truly design with equity in mind, you can’t treat it as an afterthought. It needs to be an active part of your process. Building on the web and not regularly considering and testing your design for equity would be like inviting your client to the house you designed after it’s built with the lights off — and letting them find out if it is functional and enjoyable.

How can you pay attention to the equity of your design decisions throughout the project?

Empathy exercise

Illustration of a person holding up a large magnifying glass to a computer screen. The screen has a speech bubble, to indicate that it is reading text out loud.

One of the best ways to design ethically is to make sure everyone who works on a project, from designers to coders to executives, has a visceral understanding of how their product serves people across a full spectrum of abilities.

A first step to achieve this is to have everyone on the team practice navigating websites with a screen reader. This exercise helps everyone develop a deeper understanding of how to provide the same means of use to all users, identical whenever possible and equivalent when not — our first tenet of equitable use. It will also help everyone avoid segregation of your users and make sure the design is appealing and useable to everyone.

In this article, I’m going to explain what a screen reader is, why it’s important and how to use one. Knowing how to use a screen reader will help you and your team understand how to design for people who use screen readers. That’s empathy, one of the most important tools in someone’s belt.

What is a screen reader?

Illustration showing a user interacting with a screen. The screen contains an “accessibility” icon, indicating a screenreader.

Simply put, a screen reader reads things on a screen out loud. It’s particularly helpful for people who are blind, since they can’t see words on a computer screen. Developers can code a website to give a screen reader hints about what kind of content is on the page, like whether something is a heading or not.

There are three main ways that people navigate a page with screen readers.

Navigating a page element by element

Navigating a page element by element is actually kind of an exhausting experience because it goes through each and every part of the page. It’s not the main way that people navigate a page using a screen reader, however it is the most basic way and important to understand as a basis.

Navigating a page by headings

Headings should give you a document outline of a page, with higher numbered headings following lower numbered headings. For example h2s should follow the h1, and h3s should follow an h2. It should feel like a classic outline that you learned how to write in middle school. Here is a great article on how to structure headings by Amani Ali.

Navigating a page by a links

Links are elements on a page that take you to other pages. Link text needs to work out of context since it can exist in a list without any supporting text. Here’s an article from Harvard about writing good link text.

How to use a screen reader?

For the rest of this article I’ll provide as detailed instructions as I can for how to actually use a screen reader, by navigating in those three basic ways. While there are many different screen readers, to get you going as fast as possible, I’ll be providing instructions for Narrator on Windows and Voiceover on Mac OS. I chose these because they are already installed on your computer, and do not require additional setup.

You may not hear exactly what we have in this article, but it should be pretty close. So if it looks or sounds a little different, don’t worry — you’re probably fine.

Using Narrator on Windows

Turn on Narrator

  1. Open Microsoft Edge web browser
  2. Go to boldium.com
  3. To turn on Narrator press the Windows key + control + Enter at the same time.
  4. If a Narrator settings menu opens, you can close it and click the window and click on Microsoft Edge.

When you are on Microsoft Edge you should hear Narrator say something close to:

“Boldium personal microsoft edge window microsoft edge boldium”

Turning off Narrator is the same as turning it on, you can press Windows key + control + enter at the same time.

  1. Open Microsoft Edge web browser
  2. Go to boldium.com
  3. Press ⇪caps lock + space bar at the same time to enter scan mode.
  4. Follow the instructions above on to turn on Narrator on Windows
  5. Press ⇪caps lock + ▶right arrow. Pressing it again will move you to the next element on the page.
  6. To move to a previous element press ⇪caps lock + ◀left arrow.

These are the first few elements you should hear:

  • We use cookies to analyze traffic on our website. We never share or sell information. See our link Cookies Policy period
  • No thanks button
  • I’m ok with that button
  • Header banner landmark
  • Group
  • Image
  • Image
  • Boldium
  • Link contact
  • Open menu button
  • Main landmark
  • Get bold. For your audience. For our world heading one.

Go ahead and turn off Narrator.

  1. Open Microsoft Edge web browser
  2. Go to boldium.com
  3. Follow the instructions above on to turn on Narrator on Windows
  4. You are probably already in scan mode, but if not you can press ⇪caps lock + space bar at the same time to enter scan mode.
  5. Then press ⇪caps lock + F6. This should bring up the headings menu, you can click enter on any of these headings to move to those sections.
  6. Once you move to a heading you can use the instructions above to navigate element by element.

Navigating the page by headings should sound something like this:

  • Featured Projects 1 of 8 selected
  • Driving a revolution in manufacturing 2 of 8 selected
  • Reinventing how we browse on mobile 3 of 8 selected
  • Transforming the way diabetics manage health 4 of 8 selected
  • Inspiring seniors to embrace life 5 of 8 selected
  • Helping people quickly find jobs they love 6 of 8 selected
  • It’s time for deeper more sustainable success 7 of 8 selected
  • Subscribe to our newsletter 8 of 8 selected

Go ahead and turn off Narrator.

  1. Open Microsoft Edge web browser
  2. Go to boldium.com
  3. Follow the instructions above on to turn on Narrator on Windows
  4. You are probably already in scan mode, but if not you can press ⇪caps lock + space bar key at the same time to enter scan mode.
  5. Then press ⇪caps lock + F7 This should bring up the Search Links menu, you can click enter on any of these links to move to those sections.
  6. Once you move to a link you can use the instructions above to navigate element by element or press enter to follow the link.

Navigating the page by links should sound something like this:

  • Cookies Policy link 1 of 17 selected
  • Contact link 2 of 17 selected
  • Driving a revolution in manufacturing link 3 of 17 selected
  • Reinventing how we browse on mobile link 4 of 17 selected.
  • …And so on.

Narrator cheatsheet for Windows

  • Open Narrator: Windows + control + enter
  • Close Narrator: Windows + control + enter
  • Navigate element by element:
    1. Press ⇪caps lock + space bar to open scan mode.
    2. Press ⇪caps lock + ▶ right arrow or◀left arrow to move to the next or previous item.
  • Navigate element by headings:
    1. Press ⇪caps lock + space bar to open scan mode.
    2. Press ⇪caps lock + F6 to open the headings menu.
    3. Press enter on the link you’d like to move to.
  • Navigate element by links:
    1. First open scan mode by pressing ⇪caps lock + space bar.
    2. Then press ⇪caps lock + F7 to open the links menu.
    3. Press enter on the link you’d like to move to.

Using Voiceover for Mac OS

Turn on Voiceover

  1. Open Safari web browser
  2. Go to boldium.com
  3. To turn on Voiceover by pressing ⌘Command + F5 at the same time.

You should hear something like “Boldium window toolbar. You are currently on a toolbar. To interact with the items on this toolbar press control option shift down arrow.” But you might hear something slightly different.

To turn off voiceover, you can pres ⌘Command and F5 at the same time again, and voiceover will turn off.

  1. Open Safari web browser
  2. Go to boldium.com
  3. Follow the instructions above on how to turn on Voiceover on Mac OS
  4. Once Voiceover is turned on, press ^control, ⌥ option + ▶right arrow at the same time, repeat 1. this until voiceover says “Boldium Web Content”
  5. Once you hear “Boldium Web Content”, press shift + ^control + ⌥ option + down arrow at the same time. Once you do that you should hear “In Boldium web content banner”
  6. You’re now on the webpage, you can move forward to the next element by pressing ^control + ⌥ 1. option + ▶ right arrow.
  7. To move to a previous element press ^control + ⌥ option + ◀left arrow.

These are the first few elements you should hear

  • Boldium clickable
  • Link Contact
  • Open menu button
  • End of banner, Main you are currently on a main inside of web content
  • Heading level one, Get bold. For your audience. For your world.
  1. Open Safari web browser
  2. Go to boldium.com
  3. Follow the instructions above on how to turn on Voiceover on Mac OS
  4. Once Voiceover is turned on, press ^ control ⌥ option, and the u key at the same
  5. Press the left arrow or right arrow key until you find the Headings menu
  6. Once you find the headings menu, press the down key to navigate the menu
  7. Press enter on: “2: Featured Projects”, which should move you to that heading, and close the Headings menu
  8. Now there you’re on that heading you can use the instructions above where we learned how to navigate element by element.

Navigating the Headings menu should sound something like this:

  • Headings menu.
  • Heading level one Get bold. For your audience. For our world.
  • Heading level two feature projects.
  • Heading level three link driving a revolution manufacturing
  • Heading level three link reinventing how we browse on mobile.
  • Heading level three link transforming the way diabetics manage health
  • Heading level three link inspiring seniors to embrace life
  • Heading level three link helping people quickly find jobs, they love
  • Heading level two it’s time for a deeper more sustainable success
  • Heading level two subscribe to our newsletter.
  1. Open Safari web browser
  2. Go to boldium.com
  3. Follow the instructions above on how to turn on Voiceover on Mac OS
  4. Once Voiceover is turned on, press ^ control, ⌥ option, and the u key at the same
  5. Press the left arrow or right ▶ arrow key until you find the Links menu
  6. Once you find the Links menu, press the down key to navigate the menu
  7. Press enter on: “2: Featured Projects”, which should move you to that heading, and close the Headings menu
  8. Now there you’re on that heading you can use the instructions we have above to move element by element.

Navigating the links menu should sound something like this:

  • Links menu.
  • Link contact
  • Link driving a revolution manufacturing
  • Link reinventing how we browse on mobile
  • Link transforming the way diabetics manage health
  • Link inspiring seniors to embrace life visit
  • Link helping people quickly find jobs, they love
  • Link see our workout icon
  • Link. Hello. Hello at b o l d i u m.com
  • Link plus one point five hundred ten point nine hundred sixty, two point five thousand five - hundred fifty nine
  • Link cookies policy
  • Link home
  • Link work.
  • Link about
  • Link jobs
  • Link blog
  • Link contact

You can move between links by hitting the up & down arrows, and you can move the link in the content by hitting enter (or return).

Voiceover cheatsheet for Mac OS

  • Open Voiceover: ⌘Command and F5
  • Close Voiceover: ⌘Command and F5
  • Open Headings menu (after Voice over is open): Press ^ control + ⌥ option, + u + ▶ right arrow or ◀ left arrow until you get to the headings menu. Use the up and down arrows to move to the heading you want to move to
  • Open Links menu (after Voice over is open): Press ^ control + ⌥ option + u + ▶ right arrow or ◀ left arrow arrow until the find the list labeled links. Then press enter on the link you want to move to.

Keep learning about equitable design

If you’re looking for more reading on accessibility and what you can do, here are some great links on common problems.

Previous

Reimagining Gifts

Next

Reimagining how we work