Information Design and Copywriting
Use Inclusive and Person-first Language
Avoid ableist words in copy.
Be intentional and sensitive in your word choice.
For example: You may often find instructions to “See the content below”
A more inclusive wording could be: “Please refer to the content below.” This instruction is not vision dependent.
Make Text Content Readable and Understandable
Not everyone finds text easy to read and understand.
Explain the meaning of unusual words or specialized terminology unique to the subject matter.
Use consistent wording and terminology.
Avoid jargon.
If using acronyms make sure they are defined the full expression is used with the acronym in parentheses before preceding to use the acronym in the body of content. Also make sure you repeat this process for every new page or viewing portal. For example graphic slides, alt text and comment sections.
Information Should Appear in Predictable Ways
Use common schemas and organize your information so that it is intuitive.
If you create a design schema, then use it consistently.
The most important information is listed first in the largest font size.
Copy is set for reading left to right and top to bottom.
Most people find content easier to use when it looks familiar and behaves consistently. For example, putting things like the logo and navigation in the same place on every page or design product helps screen magnification users orient themselves, and using the same labels for and naming convention for instructions or objects that do the same thing helps people with cognitive disabilities correctly identify them.
Use headings for information structure
Make sure that your typographic system supports communicating a clear and intuitive information hierarchy.
Like an essay outline, headers help scanners and screen readers get a clear sense of information hierarchy and what is most important.
A WebAIM screen reader survey asked people who used screen readers how they prefer to find information on a long page. Almost 70 percent of the respondents prefer headings.
Example of information organized into a clear hierarchy:
- Fruit
- Apples
- Gala
- Honeycrisp
- Oranges
- Apples
- Vegetables
Headers on web pages and associated typographic systems work the same way, except they use h1 to h6 like this:
<h1>Fruit</h1>
<h2>Apples</h2>
<h3>Gala</h3>
<h3>Honeycrisp</h3>
<h2>Oranges</h2>
<h1>Vegetables</h1>
When you use the same Heading Schema as part of a Design System, translating images to text and text to images becomes much easier and accessible for users as well as designers.
Using Images to Convey Information
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Use images with clear intention and attention to the specific information being conveyed.
Avoid using stock images. A person with disabilities may be looking to images to provide key information giving insight to what an article is talking about, especially if the type design and formatting are not optimized for cognitive easing. If a generic image is used that does not specifically reference the topic and message, then the overall message and meaning could be misunderstood or confused.
Apply the same concept to b-roll footage in videos and sound design and avoid using content that is decorative or filler.
At the same time be aware that repeating information can also turn into extra cognitive work.
Visual Design
Make it easier for users to see and understand visual content including separating foreground from background and following WCAG guidelines for distinguishable content for color and text in visual design.
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.