Design with Accessibility

Clear and readable text is fundamental for effective communication. Here's how to ensure your text is accessible: 

Choosing Accessible Fonts 

Selecting the right font significantly impacts readability. University fonts meet accessibility guidelines and are the best recommendations. View our University Fonts here.

Consider these recommendations: 

Acceptable Font Types: 

Sans-Serif: Generally, it offers higher readability due to its clean, block-like appearance. 

Serif: While many are accessible, the decorative "serifs" (small strokes at the ends of letters) can sometimes slightly reduce readability. 

Other Factors to Consider: 

Legibility: Look for fonts with good height, width, and letter thickness. 

Availability: Choose commonly available fonts to ensure most users can view them correctly. 

Highly Recommended Fonts: 

• Verdana (sans-serif) 
• Tahoma (sans-serif) 
• Arial (sans-serif) 
• Georgia (serif) 
• Palatino (serif) 
• Book Antiqua (serif) 
• Helvetica (sans-serif) 

Other Acceptable Accessible Fonts: 

• Sofia Pro (sans-serif) 
• Pluto Sans Heavy (sans-serif) 
• Andika (sans-serif) 
• Calibri (sans-serif) 
• Century Gothic (sans-serif) 
• Trebuchet MS (sans-serif) 
• Times New Roman (serif) 
• Garamond (sans-serif) 
• Bookman Old Style (serif) 

Using Real Text 

Always use actual typed text instead of images or graphics of text. While visual formatting like bolding, italics, or color helps sighted readers, screen readers won't announce these distinctions, meaning that information isn't accessible.

Real text offers these advantages: 

• Screen Reader Compatibility: Screen readers can easily read and interpret real text. 
• Magnification: Users with screen magnification software can enlarge real text without loss of clarity. 
• Selectable and Copyable: Real text can be highlighted, copied, and pasted. 

Text Size and Font Styles 

Readable Size: Aim for a minimum of 11-point font for documents and 18-point font for presentations. 

Limit Font Styles: Using no more than 2-3 font styles per document or webpage creates a more organized and coherent look. Consider using one font for headings and another for body text (e.g., Arial for headings and Georgia for text). 

Explaining Abbreviations and Acronyms 

Screen readers read abbreviations and acronyms letter by letter, which can be confusing.  

Ensure clarity by: 

• Spelling out on first reference: Include the abbreviation in parentheses (e.g., College of Business (COB)). 
• Avoiding unusual techniques: Don't add periods between letters or spell phonetically. 
• Creating a key: Useful for documents with many abbreviations.

Color plays a vital role in design, but it must be used thoughtfully to be accessible. 

Checking for Color Contrast 

Adequate color contrast ensures that text and images are distinguishable from their backgrounds. 

Why is it Important? Good contrast benefits everyone, especially individuals with low vision, color blindness, and other visual conditions. 

How-To Guide: 

1. Use a Color Picker 

Identify the hex codes of your text and background colors using tools like: 

• HTML Color Codes 
• ImageColorPicker.com  

Example: 

Text hex code is #000000
Background hex code is #FFFFFF 

Text hex code is #D958EF
Background hex code is #FFFD72 

2. Check Your Color Codes:  

Paste the hex codes into a contrast checker tool: WebAIM Color Checker 

3. Color Contrast Standards: 

• Text: Requires a contrast ratio of 4.5:1. 
• Large Text (18pt/24px and above): Requires a contrast ratio of 3:1. 
• Images: Require a contrast ratio of 3:1. 

4. Exemptions:  

Decorative images and inactive buttons are exempt from color contrast standards. 

Examples: 

Decorative image example

Inactive button example 

5. Adjust Colors:  

If the contrast fails, modify the colors until they meet the required ratios. 

Changing Colors in Software: 

Microsoft Office: Use the font color, highlight color, and page color icons in the toolbar. The Accessibility Checker doesn't check color contrast, so manual checks are necessary. 

Adobe Acrobat PDF: Manually check contrast. If poor, go to Tools > Accessibility > Adobe Acrobat Accessibility Setup Assistant and check "Use high-contrast colors for document text." If issues persist, edit the original document (e.g., Word). 

Color as a Conveyor of Information 

Crucially, never use color alone to convey important information. Always use a secondary method of emphasis, such as:

• Adding an icon or symbol 
• Using a text label 

Examples: 

• Inaccessible: Using only red text to indicate a missing assignment. 
• Accessible: Adding a column labeled "Status" with red text for "Missing" and green text for "Complete." 
• Inaccessible: A red circle indicating an error. 
• Accessible: A red circle with an "X" icon and the text "Error."
• Accessible: Putting text in red and bolding to notate an important deadline. Ex: The deadline to submit is May 23, 2023.

Avoiding Red and Green Combinations 

Individuals with color vision deficiencies often struggle to distinguish between red and green. Avoid using these colors as the sole means of conveying information or as foreground/background combinations.

Alternative text (alt text) is a brief text description of an image that is read aloud by screen readers. It provides context and meaning for visually impaired users. 

What is Alt Text? 

• It's the text equivalent of an image. 
• It describes the image and its relevance to the surrounding content. 
• It is not the file name. 

For complex images (charts, diagrams), provide a short alt text description and include a more detailed explanation in the surrounding text or link to a separate accessible document. 

How-To Guide for PowerPoint and Google Slides 

Both PowerPoint and Google Slides have built-in features for adding alt text. Right-click on the image and look for options like "Format Picture" or "Alt Text." 

Types of Images and Alt Text 

Decorative Images:  

Images that are purely for visual enhancement and don't convey meaning don't require alt text. 

• Redundant Alt Text: Avoid alt text for images directly associated with nearby descriptive link text. 
• Purely Decorative: Borders, design embellishments that have no connection to the content. 

Example (Decorative):  

A red bow on a Christmas party flyer that doesn't represent any information.  

Informative/Example Images:  

Images that visually represent information discussed in the text require concise alt text (under 150 characters) that provides a simple meaning.

Example (Informative):  

A picture of Senator Frank L. Madla in a biography section. Good alt text: "Senator Frank L. Madla." 

Example 2 (Informative):  

An image of a tourist at the Alamo was posted on social media. Good alt text: "Sunglasses tourist at Alamo." 

Complex Images:  

Determining the Right Alt Text 

Ask yourself: 

• What do I want the reader to learn from this image? 
• If the image were removed, would the meaning of the content be diminished? (If no, it might be decorative.) 
• Is the image a visual example of something discussed in the text? (If yes, it's likely informative.) 
• Is the image detailed and requires more than a short description? (If yes, it's likely complex.) 

Help with Creating Alt Text 

Here are several helpful resources for creating good, appropriate alt text for your images: 

• Poet Training Tools website, when, how, and practice generating alt text descriptions.
• Alt Text Decision Tree from the Web Accessibility Initiative.
• Write Helpful Alt Text to Describe Images from Harvard University.
• Examples of Long Descriptions for Complex Images from the National Center for Accessible Media.

Well-written hyperlink text is crucial for accessibility and usability. 

Best Practices 

• Concise: Use short, easy-to-read text. 
• Good Description: Clearly indicate where the link will lead. Avoid vague phrases like "Click here" or "Read more." 
• Readable Links, Not URLs: Use descriptive text instead of raw web addresses. Screen readers struggle to interpret URLs.

Examples:

• Instead of: Check out https://www.tamusa.edu/university-communications/
• Do this instead: Check out the TAMUSA University Marketing and Strategic Communications webpage.

Building on the principles of accessible text, color, and alt text, here are some additional tips for making your event flyers, presentations, and handouts accessible to all: 

• Structure Your Content: Use clear headings and a logical flow. 
  • Clear Headings and Subheadings: Just like on a webpage, using clear headings (e.g., "Event Details," "Speaker Information," "RSVP") in flyers, presentations, and handouts helps everyone, especially those using assistive technologies, understand the structure and quickly find information. 
  • Logical Reading Order: Screen readers read content in the order that it's layered on the page or slide. Ensure elements are arranged logically. 
  • White Space: Don't overcrowd your designs. Sufficient white space improves readability for everyone, including those with visual processing difficulties. 
• Make Images Meaningful: Ensure your images have purpose. 
  • Avoid Text in Images: As discussed earlier, real text is always better. If you must include text in an image (e.g., a logo), ensure the alt text accurately describes the text within the image. 
• Accessible Links: Use descriptive text for any links in digital materials 
  • As mentioned before, avoid "click here." Instead, use meaningful phrases like "Register for the event," "Download the flyer (PDF)," or "Visit the speaker's website." This is crucial in digital flyers or presentation slides shared online. 
• Keep Tables Simple: If using tables in handouts, ensure they are structured clearly. 
  • Avoid merged cells, split cells, or complex nesting, as these can be very difficult for screen readers to interpret.   
  • Ensure column and row headers are clearly defined so screen readers can correctly associate data points. To define headers, use the built-in table features in word processors or presentation software. 
• Use Clear Language: 
  • Use clear, concise language that is easy for a diverse student audience to understand. Avoid jargon or overly complex sentence structures. 
  • Maintain consistency in terminology and phrasing throughout the materials.