Journey

Inclusive design is design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference. Inclusive Design Research Centre

Accessible and inclusive design is design meant to enable and empower anyone, no matter their background or abilities, for success. It is design that strives to acknowledge, represent, and respect people of all kinds. It is design for folks who may need additional consideration, whether temporarily or permanently. Most of all, it is kind, considerate, and intentional.

As humans making things for a diverse range of humans, nothing will ever be perfect. But inclusive designers strive to make the best experience possible for the broadest range of humans they can. And when they learn where their work fails, they improve it. Again and again.

Designing for inclusion #

Inclusive design looks through a broader lens than accessibility. It is not just designing for temporary or chronic disabilities, but also considers how people feel represented and respected by what they interact with. Inclusive design listens to a broad range of perspectives and seeks to find the best solutions that respect others.

Inclusive design principles #

Acknowledge biases and seek diverse perspectives #

Research with, listen to, and learn from a broad range of people. Understand and acknowledge where your own unintentional biases impact your work, and strive to rewire them for more inclusive alternatives. Actively seek out new viewpoints. Listen intently to understand how your work may fail them. Apologize when you create something harmful, even if unintentionally. Then iterate and improve to remove the harm.

Representation matters #

When writing examples, building personas, taking photos, creating illustrations, making videos, and more, the people in those should represent the diverse human community. Seeing someone from their own community can validate and encourage under-represented groups. It can also increase exposure and reduce prejudice for people outside of those groups. Diverse representation should consider a broad range of facets: race, gender, age, sexual preference, neurodivergence, ability, background, and more.

Be thoughtful in how you include diverse folks. Avoid stereotypes. Don‘t combine every diverse facet into a single token representative. Discover and encourage diversity, don‘t fake it. (Seriously, don‘t Photoshop or AI hallucinate someone into an image to make it seem more diverse.)

Words have meaning #

Consider the words you choose and the impact they may have on your audience. Favor clear, simple language. Avoid ableist, gendered, or racially charged words or phrases. Don‘t use acronyms, idioms, jargon, or slang without providing an explanation (or avoid them altogether). Deploy humor carefully.

Accessible design principles #

Use color appropriately #

Choose foreground and background colors that provide sufficient contrast for readability and improved perception.

Give other cues when using colors to convey meaning. Use shapes, icons, or additional text to further explain instead of only relying on color to show different statuses or values.

Provide text alternatives #

• Give alternate text to describe the information that an image conveys. For images that are solely used as decoration (such as background textures or visual flourishes), provide blank alternate text using alt="".
• Include transcripts, captions, or preferably both for audio and video content.
• Provide labels for icons.

Make interaction easy #

• Ensure interaction targets are large and easy to click or tap. Provide extra affordances for smaller elements.
• Don‘t show interactive elements only on hover.
• Reduce the number of steps, clicks, or interactions necessary to do things.

Use consistent controls #

Favor consistent, simple components and interactions over unique or complex variations. Unique, visually striking design concepts can be wonderful in print, ads, or other graphic design. But simple, common, and consistent components make for a better user experience that is easy to learn and use.

Accessible development principles #

Label form elements #

Always provide labels for form elements. Labels give context for what information is expected in the field. With fields like checkboxes and radio buttons, they also associate the related description with the control, making it easier to click, tap, or otherwise select the input.

In rare cases, the field layout and use case may be obvious visually. (For example, a search field with a search button directly beside it.) However, even in those cases, it may be less obvious for those using assistive technology like screen readers so a label is still helpful. We can use a visually hidden label that hides the label from rendering in the browser, but still leaves it accessible in screen readers. We do this by adding the visually-hidden class to the label.

<label for="search" class="visually-hidden">Search this site</label>
<input type="search" name="search" id="search">
<input type="submit" value="Search">

Organize well-structured content #

Use proper HTML structural tags to denote different parts of the page like <header>, <footer>, <nav>, and <main>. Organize headings in a logical progression from <h1> to <h6>. Prefer semantic HTML elements where appropriate to denote the type of content they contain. Using semantic, well-structured code for your content improves how users can understand and navigate your content using assistive tools.

Avoid using <div> or <span> when more descriptive and appropriate tags may exist for the content.