Inclusive Design

Most people have heard of inclusive design but most don’t really understand how it differs from making a site accessible. Building an inclusive design means thinking about how every design decision will impact every single human. Even if you don’t think someone with a hearing impairment will use your site you should still design as if they would.

I think the following from Inclusive Design Patterns by Heydon Pickering sums up why we should be practicing inclusive design.

We should be thinking about accessibility and inclusive design from the moment we start the designing process, not waiting until we’re ready to ship to make the required changes. If we practice inclusive design from the beginning we end up with a better product. In my experience you will also have more maintainable code when you finish.

This is like comparing apples to oranges. They can’t be compared at all. Instead accessibility goes hand in hand with inclusive design. By using inclusive design patterns you will make your site more accessible. I wouldn’t go as far as saying accessibility is a by product of inclusive design because it still takes some extra thought and work in most cases.

Examples of making something accessible:

Examples of inclusive design:

You’ll notice that I’ve included color contrast in both example lists. That’s because if done during the design process it would satisfy both inclusive design and accessibility.

If you work really hard and check off every item on the section 508 checklist your site will be accessible but not inclusively designed.

I would start the design process by checking what background colors can be used with what foreground colors. This can be the beginning of a style guide for the project.

When creating a component think about how that component will be used. It can help to think about what html tag would be appropriate. Should you use a section, article, or just a div. Also, will this component need a role to help with accessibility.

Will the component have something to interact with, like an accordion or tabs. If so, will you be using a library or building it from scratch. If a library will be used it will need to be checked for accessibility. If from scratch then there are aria attributes that will need to be used to give screen readers more information.

I think many designers and programmers fall into the “it works on my machine so it’s good” or “it works for me without any problems” mindset. I don’t think something has been inclusively designed until it has been tested in multiple major evergreen browsers, and run through an automated accessibility checker. Also some voice over or screen reader should be used so you know what will be announced to a user. No point in having it announce redundant information.

Let’s think about the quality of life for someone that isn’t able to use your product as easily as you. There are a few things that can make using your product better. Such as having some code that lets a visually impaired user know that the link is going to open in a new window or that they will be leaving your site. Another is to have some code for the menu item that lets the user know the current page or section, this doesn’t have to be displayed it can just be for screen readers. Using something other than color to signify something of importance will go a long way for someone who is color blind.

Semantics are also something to think about and here’s the one that is my pet peeve. The strong and em tags. These tags should not be used for everything that you want bold or to have italics. The b and i tag are still part of the html spec and for good reason. There are times when making something bold or italic are simply aesthetic but creating a class to use is just too much. There’s nothing wrong with using these older tags when you don’t want to apply emphasis to the text. In fact the b tag used to be the Boldface element but is now called Bring attention to element.

I hope this information has helped you understand that there’s more to accessibility than checking off items on a list. It’s about making your design work for every human. Inclusive Design and Accessibility go hand in hand and if approached in the right way you’ll end up with something you can really be proud of.

Related posts:

So after a few delays, we made it to Cali, the TRUE birthplace of dad. (Back story time: dad was born in Cali, moved to Chicago when he was 7, Jorge became George, it’s a whole thing, and the reason…

When we started building The Greatest Adventure on Earth 6 months ago, launching an adventure travel company in 2020 seemed like a great idea. Investors agreed. We raised our first $100,000 in less…

Phases take on aspects Abstract shapes and form Happiness and heartache Change appearance and transform. Some phases ease in gradually Then wind down when they’re done Only staying for a short time…