Inclusive design

We all differ in our abilities to see, perceive colors, hear, control our motions, concentrate, and understand concepts. Inclusive design makes room for as many people as possible.

Illustration of five people in profile, in conversation with each other. Blue background and highlights of yellow, gray, and blue, with circle and square shapes around each of the figures.Illustration of five people in profile, in conversation with each other. Blue background and highlights of yellow, gray, and blue, with circle and square shapes around each of the figures.

Inclusive design at Adobe#

Inclusive design is part of Adobe’s mission. Designers, engineers, and product builders are invested in learning how to think more broadly, seeking out more voices, and working together to make better experiences.

Spectrum also builds for the widest audience possible. Our system is designed to be clearly readable, intuitive to use, and mindful of those who use assistive technology. From how components function to language and internationalization, we consider inclusion to be a top priority.

Learn more about inclusive design at Adobe

Best practices#

Assume nothing is perfect#

Provide context-sensitive help to ensure that people can be supported throughout many kinds of interactions.

Prevent error conditions wherever possible, and highlight error conditions when they exist. When an error occurs, provide clear guidance about what someone can do to resolve the error by using clear and helpful messaging.

Make room to adapt#

Provide targets large enough to see and interact with. Label and describe all objects.

Ensure that designs can be interacted with by mouse, keyboard, pen, fingertips, voice, accessibility API, or other methods.

When designing for the web, embrace responsiveness. Accommodate web page size down to 320 px.

Give people a choice#

Allow for someone to customize their experiences within a product, and respect system-wide user preferences such as captions, large fonts, and high contrast.

Ensure that every task can be completed in a logical order using only a keyboard.

Avoid distractions#

Don’t place animations near paragraphs of text. Allow users to turn off unnecessary animation.

Be consistent#

Use common components for well-defined tasks and interaction patterns, instead of new or custom-built ones.

Use common shortcuts across experiences, and especially within products that accomplish similar tasks.

Involve marginalized users#

Include people with diverse ranges of ability in user testing, and co-design whenever possible. Seek feedback from historically underinvested communities.

Make documentation a priority#

Document all accessibility features and workflows (keyboard shortcuts, support for operating system features, etc.), and make it easy to find the information in your product’s help content.

#

Checkpoints#

Structure#

Ensure that complex components — such as lists, forms, and panels — have a logical reading order. Check that the keyboard tab order has been defined in a logical progression.

do
Key example of correct usage of structure, with a form in a logical reading order. 3 form fields. First form field, label Name. Help text, Enter your full name. Second form field, label Email. Help text, wilson@adobe.com. Third form field, Password. Help text, Create a password with at least 8 characters.
dont
Key example of incorrect usage of structure, with a form not in a logical order. 3 form fields. First form field, label Email. Placeholder text, Type email… . Second form filed, label Password. Placeholder text, Type password… . Third form field, label Name. Placeholder text, Type name… .

Color#

Use the Adobe Color set of tools to test your interface. You can also use the soft-proofing settings for colorblindness in Photoshop and Illustrator. (See View > Proof Setup > Color blindness – (Protanopia/Deuteranopia)-type)

Avoid referring to objects by color (or by location) alone. Instead, refer to these by their names or by the grouping in which they belong.

do
Key example of how to avoid referring to objects by color or location alone. An alert dialog describing a potentially destructive action. Title, Delete 3 documents. Description, Select Delete to delete these 3 documents. This action can’t be undone. 2 buttons, Cancel and Delete. Cancel is in the color grey and Delete is in the color red.
dont
Key example of incorrectly referring to an interface object by color and location. An alert dialog describing a potentially destructive action. Title, Delete 3 documents. Description, Click the red button to the right to delete the 3 selected documents. 2 buttons, Cancel and Delete. Cancel is in the color grey and Delete is in the color red.

High contrast mode in Windows#

Windows high contrast mode is a setting that replaces all colors in the operating system to a simplified high contrast color palette. It includes preset color theme options and allows users to create their own color themes. This is an important feature for users with low vision, contrast sensitivity, and other needs, and should be supported by all Adobe web-based and Windows applications.

Spectrum component documentation will include visual references for what the component should look like in Windows high contrast mode. These examples will all be shown in the default Windows high contrast black theme.

Example of Windows “high contrast black” theme with colors labelled by semantic names “background”, “hyperlinks," “disabled text," “selected text," “button text," and “text." Examples illustrating each usage for example link, disabled text in text field, selected text, button, and normal text.

Animation#

Avoid making parts of a screen flash more then 3 times per second, to help prevent photo-epileptic seizures. Also, don’t create content that moves or blinks for more than a couple of seconds, to help prevent people from getting distracted.

#

Interactions#

Avoid “clear”/”reset” actions on forms, since someone could select these by accident and erase a lot of painstaking work. Let people save forms so that they can leave and come back.

Provide keywords before or inside of links.

#

Text alternatives#

Include a textual label for all elements. There may be a few exceptions, when the context is sufficient (e.g., document zoom level “100%”). Use the label element in HTML where possible. If not, use ARIA to set the label (depending on the context, “aria-label” or “aria-labelledby”).

Make sure labels are concise and have a clear association with objects. For objects in a table or a list, make sure that they can be identified by the structure around them (e.g., using a table header).

Label all images when possible, and in all cases, include a short, meaningful text alternative. Exceptions are for decorative images as outlined in Guideline 1.1 Text Alternatives in the WCAG 2.1 standards. Provide a long description for any object that requires more information for understanding or operating it (e.g., tooltips and coach marks), so that those using assistive technology can read it in context.

Learn more about creating text alternatives in Spectrum’s Inclusive UX writing guide.

do
Key example of a text field that has been correctly labeled above the field, and 2 icon-only action buttons with a tooltip to show the label upon hover. Text field label, Full name. Input text, Lisa Wilson. Icon-only action buttons with icons for a piece of paper and a gear. The "gear" icon tooltip label reads "Settings."
dont
Key example of a text field that has been incorrectly left unlabeled. Only input text, Lisa Wilson.

Fonts and text#

Use Spectrum typography and colors to ensure proper type scale, line height, weight, and contrast for blocks of text. Use one column per page, with a width no longer than 80 characters (or 40 CJK characters) wide. Have line lengths at a maximum of 50-75 characters.

Organize writing for comprehension. In layouts, left-align running text (this will be mirrored along with the UI for right-to-left languages). Fully-justified text creates text rivers, or irregular alignment of spaces that creates running gaps throughout the text; this makes it more difficult for readers with dyslexia. Avoid switching alignments in a single view.

Whenever possible, provide options for people to adjust font size, color themes, and contrast, either manually, in-app, or through operating system preferences.

do
Key example of a block of text that is left aligned to ensure proper readability. Title, For everyone. Body text, We believe in building for the widest audience possible. Spectrum is designed to be clearly readable, intuitive to use, and mindful of those who require alternative input peripherals or screen readers. Everything in our system — from color and type to interaction and language — is built to be compliant with industry standards.
dont
Key example of a block of text that is incorrectly fully-justified, to create spaces between words, which diminishes readability. Title, For everyone. Body text, We believe in building for the widest audience possible. Spectrum is designed to be clearly readable, intuitive to use, and mindful of those who require alternative input peripherals or screen readers. Everything in our system — from color and type to interaction and language — is built to be compliant with industry standards.

Error prevention and correction#

Avoid the need for error messages by designing workflows that prevent an error state from even happening in the first place. When there is an error, associate it with the field or element that needs to be corrected or addressed. Make errors visually and semantically different from other messages (e.g., including icons, colors, placement), and write error messaging in a helpful and guiding way.

Use appropriate click/touch zones to leave enough space between elements. Doing this minimizes click/touch target errors.

Anticipate spelling mistakes in search queries, and accommodate multiple spellings of words in search results.

do
Key example of a text field, correctly communicating an error with both red color, an alert icon, and an in-line text alert. Text field label, Email address. Input text, wilson@adobe. Error message, Enter a valid email address.
dont
Key example of a text field, incorrectly communicating an error with only red color and no context about the nature of the error. Text field label, Email address. Input text, wilson@adobe.

Keyboard equivalents#

Use the built-in keyboard focus states that are defined in Spectrum components. Ensure that people can complete any action using a keyboard and keyboard equivalents, including on mobile (e.g., iPad Smart Keyboard). Set a tab order so that people can move back and forth within a view by using the Tab key.

Key example of three components showing their keyboard focus states. Keyboard focus is typically shown with a 2 px blue border around the focused component. Example components, tabs, picker, and tabs. 3 tabs, labels Section 1, Section 2, Section 3. Section 2 in keyboard focus. Picker, label Label. Select an option... prompt in picker menu in keyboard focus. Group of 5 tags, labels Traveling, Hiking, Camping, Biking, Running. Hiking tag in keyboard focus.