Design and Write for Easy Reading

Readers scan content, so make your content scannable.

• Help readers find what they need with ease.
• Remove information that distracts from completing key tasks.
• Simplify our language.
• Make use of bulleted lists, headings, and other semantic structrues.
• Break content into smaller, bite-sized chunks of content makes it easy for users to scan different topics on a page.
• Use keywords at the beginning of a paragraph or sentence.
• Use short paragraphs.

Semantic Structure

Semantic structure provides an organized hierarchy for your content. This makes it easier for users with assistive technologies, such as screen readers, to navigate and understand information. This applies to websites, documents, presentations, and applications.

Headings

The hierarchy should be established through headings, subheadings, and other organizational elements. Heading text should be clear and concise. You want to convey as much meaning as you can in as little text as possible.

Think of your document like an outline for an essay. Heading 1 (h1) should be the page title. There is only one title or Heading 1 on a page.

The next level down would be Heading 2 (h2). Under those headings, you would use H3, etc. Headings must go in sequential order. You can have multiple Headings 2-6.

Paragraphs

A paragraph’s semantic structure typically consists of a topic sentence, supporting sentences, and a concluding sentence. The topic sentence presents the main idea, supporting sentences provide details and evidence, and the concluding sentence summarizes or provides closure.

Lists

Lists are a great way to break up longer pieces of text. Example of a paragraph broken up into a list.

• Bulleted lists are used for lists with no important order.
• Numbered lists used are for specifically ordered lists.

Example:

Tables

• Use tables for tabular data only. Do not use a table to format non-tabular data.
• Include table titles, headings, and alt text.
• Do not combine separate tables.

Fonts and Characters

• Sans-serif fonts like Source Sans Pro, Arial, and Calibri are easier to read.
• Avoid using all caps and excessive italics or underlines.
• When possible, avoid special characters like the ampersand (&).
• Do not use excessive punctuation.
• Keep text at a reasonable size, no lower than 11 or 12 points (14 or 16 pixels, points to Pixels converter).
• Ensure perceivable differentiation between all heading and paragraph styles.
• Ensure sufficient line spacing. Use built-in paragraph-styling tools or CSS rather than extra line breaks.
• Underline hyperlinked text.
• Create bold/or larger headings for easier scanning.

Written Content Best Practices

• Think about the tasks users want to complete and the information they want to find.
• Put the most important information first.
• Start broad and get more specific.
• Consider and respect everyone who consumes your content.
• Communicate with empathy and purpose: Think about the questions readers might ask by putting ourselves in their shoes.
• Use clear calls to action.
• Use headings, lists, and other semantic structures to help readers navigate.
• List resources in order of importance.

Plain Language Benefits

Plain language is writing designed to be understood as quickly and clearly as possible

• Easier to understand.
• Readers make fewer mistakes.
• Readers find answers more quickly.
• Readers need less assistance.
• Improves accessibility, inclusivity, searchability, readability, and scaleability.

Guidelines

Be Clear and Concise

• Use short, meaningful headings.
• Stick to one idea per paragraph.
• Use keywords in the beginning of each paragraph.

• Use simple sentence structures and simpler language.
• Be concise, simple and clear – less is more. For example “Use” vs. “Utilize”; “If” vs. “In the event of”
• Avoid slang, jargon, clever, or humorous language.
• Avoid repetition.

• Be consistent.
• Write at an 8th-grade reading level (https://hemingwayapp.com).
• Aim for a Microsoft Word readability score of 70 or greater.

Be Conversational and Approachable

• Write in an informational, active voice
  Pro tip: if you can add “by zombies” to the end of a sentence, you’re using passive voice.
  Examples:
  Passive: The course was offered by the department of Animal Sciences in 2021.
  Active: We offered the class in 2021.
• Write positively.
• Use I, you, we, and us pronouns.
• Use “you” statements.
• Use inclusive language.
• Guide readers through the information.
• Write for your audience, not experts.
  Assume your audience is new to the subject, avoid jargon or overly technical terms.

Plain language guidelines

Tool: Hemingway app

Principles to Remember

• Put people first:
  It is essential to focus on the person, not their characteristics.(e.g., woman who is blind vs. blind woman.)
• We are more than our descriptors:
  Avoid generalizations and don’t assume someone’s identity unless relevant to the discussion, like inviting women students to meet your women in leadership at a STEM networking event.
• Use universal phrases:
  Idioms, industry jargon, and acronyms can exclude a candidate who may not have specialized knowledge of a particular subject and can lead to miscommunication. Plus, many idioms don’t translate well globally across languages or countries.
• Use gender-neutral language:
  Inclusive ways to address a group: e.g., folks, people, team.
  Inclusive verbs and adjectives: e.g., fireperson
• Recognize the impact of mental health language:
  “Bipolar,” “PTSD,” “OCD,” and “ADD” are real mental health diagnoses that people possess. Avoid other derogatory terms that stem from the context of mental health, like “schizo,” “paranoid,” “psycho,” “crazy” or “insane.
• Educate Yourself and Ask if you aren’t sure:
  Inclusive language is nuanced and is meant to reflect an individual’s or group’s personal style and preference. 

Source: Handshake.com

Resource: apstylebook.com

Whenever possible, provide link text that identifies the purpose of the link without needing additional context. Meaningful links help users choose which links to follow without requiring complicated strategies to understand the page.

Tips:

• Pretend someone is reading this to you and you can’t see it. Does the link text make sense?

• Put keywords at the beginning of the link phrase.
• Search your content for “Click Here” or “Learn More,” – You shouldn’t find these phrases.
• Don’t spell out full urls in your text unless:
  • you are trying to get the users to memorize a short url
    • you are using an email link, in which case, spell out the email address in addition to linking it.

Source: https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Color contrast is the difference between the color of text and the color of the background behind it. Certain color contrast ratios can result in the text of a graphic or image being difficult to read. Excluding logos or brand names, it is best to maintain a contrast ratio of 4.5:1 for regular text and 3:1 for large text. This ratio is the minimum required for federal content creators. Use a color contrast analyzer to determine the ratio of your graphic. There are various free versions of these tools available online.

Color contrast video

Tips

• Use high-contrast color schemes on opposite ends of the color spectrum for readability, such as white and black.
  • Avoid using color alone to convey meaning. Use color along with a secondary element, such as shape or text differences.
• Use color contrast checkers, such as this Color Checker.
• Check out University of Illinois brand accessible color combinations.
• For standard texts:
  size less than 24px: contrast of 4.5:1 minimum
  size greater than or equal to 24px: contrast of 3:1 minimum
• For bold texts:
  size less than 18.5px: contrast of 4.5:1 minimum
  size greater than or equal to 18.5px: contrast of 3:1 minimum
• For non-underlined links
  contrast of 3:1 minimum with the surrounding text and with the background color

Source: Color contrast guidelines

Source: https://www.section508.gov

Tool: Accessible web contrast checker for Chrome

Images are a great way to break up sections of text and enhance the design of an email. However, there are some image guidelines.

Always add alternative text:
Alternative text describes the contents of an image as it relates to the overall context of a document or webpage.

Avoid embedding text in images:

• Text in your content should be live text, not text embedded in an image as screen readers cannot detect it. Use short, descriptive alt text for the image.
• If you have embedded text in an image, be sure to write that text out elsewhere in your document.
• You can check if text is live or embedded by clicking on the graphic. If you can select the text, it’s probably live. If you can’t, it’s probably embeded.

Alt  text (short for alternative text) text is a hidden, descriptive text for search engines and screen readers, while a caption is visible text that appears near the image, providing context and additional information for all users. Alt text focuses on describing the image’s content for accessibility, while captions are a form of storytelling or supplemental information.

Examples of alternative text

Tips

• Describe how the contents of image relates to written content.
• Add alt text to all non-decorative images.
• If an image is purely decorative without contextual meaning, you can mark it as “decorative.”
• Don’t include “image of” or “photo of”.
• Complex alt text descriptions may be used to explain infographics, charts, or graphs, but a better practice is to present the information using a semantic element like a list or paragraph.
• For images that serve as links, alt text should be the link description.
• Hide or remove your image and read the alt text to see if it fits

Source: WebAIM.org

Captions, Transcripts, and Audio Descriptions

Captions and transcripts allow people with hearing impairments or other disabilities to access and understand the audio content in videos or other multimedia. Captions and transcripts can also help people with cognitive disabilities or those who are non-native speakers of the language of the video language.

• Captions provide a short text version of the audio while the video is playing. Example of captioned video
• Transcripts provide the full content script. Transcripts can be added as live text to a page or a downloadable file. Example of video transcript
• Audio Descriptions explain what is physically happening in the video. Example of audio descriptions

Tips for accessible multimedia

Creating accessible documents is crucial for ensuring all students can effectively engage with course materials. This includes students who are blind or low vision, use a keyboard to navigate, use screen readers, Braille displays, or other assistive technology. Documents like Word, PDF, PowerPoint, and Excel can be made accessible by applying the following basic design principles outlined above.

• MS Word Accessibility Assistant
• MS PowerPoint Accessibility Assistant
• PDF Accessibility Checker

Tips for accessible documents

Accessible email planning and design improves usability for everyone on your mailing list. Accessible email practices include writing, designing, and coding emails that people can easily understand and engage with regardless of their physical or mental constraints. This includes optimizing emails for assistive technology.

 As a university, we depend on emails with wide distribution to notify staff, faculty and students of upcoming events. These emails tend to include graphical elements, such as event flyers, that contain textual information. We must ensure that the messaging we send out can be read in multiple ways, including by assistive technologies such as screen reader software.

In 2024, more than 6000  students and employees on campus had an accommodation due to a disability, and it is estimated that the prevalence of disabilities on campus is nearly double that number. Some of these individuals have visual impairments that do not allow them to see images or to read image-based text, due to disabilities such as blindness, low-vision, colorblindness or difficulties processing text in a visual format. If not constructed properly, the content of many of the emails we distribute will not be available to those who are blind, who require software to assist them to read or to those who have configured their email clients not to download images.

Tips for accessible emails

Accessible social media content is crucial for fostering inclusivity and ensuring equal participation for all individuals, regardless of ability. By implementing accessibility features such as alt text for images and closed captions for videos, creators can make their content more accessible to people with disabilities.

• Emojis can help make social media posts more engaging for users. However, having too many emojis in one post can be confusing or annoying for users using screen readers, as these programs will individually describe each emoji, which can take a lot of time. Additionally, using several emojis in a row can cause the same problems. Therefore, it is best to limit your overall use of emojis and avoid using several emojis in a row.
• GIF stands for Graphics Interchange Format. It’s a type of file that can show still images or animations. GIFs are popular on social media for reactions without words, usually as continuously looping animations. As these animations don’t have user controls to pause, stop or hide the animation, and may include harmful flashing or blinking, we do not recommend using GIFs in social media. Also, if your GIF contains text, then check its color contrast ratio; if it is not accessible, then do not use the GIF.
• Hashtags are useful in directing users to your posts. However, hashtags containing multiple words can present accessibility issues for users of screen readers. These programs may see a multiword hashtag as being one word and they will read it as such, which can result in a confusing or unintelligible pronunciation. Therefore, always capitalize each word in a multiword hashtag. For example: #FourthOfJuly.

Source: https://www.section508.gov/create/social-media/