Ò»±¾µÀÎÞÂë

Your content should have a high color contrast ratio of 4:5:1 or greater. You don't have to figure this out yourself. Various free contrast checkers are available to verify your content meets the standards.

Color can be a powerful tool in conveying information, but it should be avoided as a sole identifier. Pair colors with text or symbols to ensure that all visitors to your site understand the meaning of your content. For example, required form fields can be denoted in red, but they should also be marked with an asterisk or other non-color indicator.

Forms without field labels may not be useable by screen readers or other assistive devices. Programmatic field labels are required to provide guidance on how to complete the form. It is important that each form field has an associated label to provide complete instructions to the screen reader user. 

Users should be able to navigate through the form with a keyboard in a logical order. Typically forms are completed left to right and top to bottom. Test the form yourself by navigating through the content with only a keyboard to determine if your form is functioning properly. 

Alternative text (i.e., alt text) for images is useful for people with vision disabilities, as it allows screen readers to speak the image content to those who may not be able to see your images. Provide alternative text for every image. Alt text should describe an image to a person as if they can’t see it.

Use this: Six students sitting around a table while working on individual laptops.

Not this: Students at a table.

Note: The university Content Management System (CMS) requires alt text. If an image is purely for decoration and the information is not dependent upon it, you can mark it as decorative.

ADD IMAGES

Screen readers can't read text that is part of an image. While screen captures can be helpful for visual learners, those with vision disabilities won’t be able to view your image, and important messages could be lost. 

Focus on creating text that describes the screen and includes keyboard shortcuts and screen capture images. Use clear consistent language so everyone gets the message. If you must use a picture of text, add alternative text with a complete image description. This includes header images with text in the design.

If you'd like to include a widget on your web page that pulls data from other applications, such as X (formerly Twitter), Instagram, or even the weather, check with the vendor to ensure the widget is accessible. If you need additional help determining the accessibility of an application, please contact the Digital Accessibility Office. 

When creating videos or recording web conferences, always create or enable captions.

• For videos, most applications, such as Adobe Premiere or Techsmith Camtasia, will require you to create captions manually. 
• Many web conferencing applications, such as Ò»±¾µÀÎÞÂë's instance, will automatically generate captions. Check your preferred software to ensure you don't need to enable captions in advance.
• If captions aren't an option, provide a  instead. Note: All pre-recorded video and audio files must have captions or a transcript.

When creating videos, always use descriptive titles and content descriptions. Even though this information is entered into your video editing software, you'll need to include these details and more when uploading to platforms such as YouTube or Vimeo.

If your content contains a complex table or infographic, consider recording an audio description to accompany it. For those with cognitive disabilities, this is a useful resource when interpreting data.

Avoid merging cells when working with tables. For those with vision disabilities, screen readers often interpret these incorrectly. By ensuring every piece of data is in a separate cell, you can guarantee it will be able to be read and interpreted by most software. 

Assign a header row for your table in the table properties. Then enter text headings into each column to identify its contents.

When creating tables for the web, identify any cases where tables are for layout purposes only. For example: 

<table role="presentation">

For complex tables, add a caption to identify the table. You'll find this in the table properties in most applications by right-clicking on the table. When creating tables for the web, add a caption element to your code. For example: 

<caption>Figure 1.3 </caption>

When large chunks of text are centered, right, or justified-aligned, the content is often challenging for people with reading disorders to consume. Stick to left-aligned text for the best experience. Bonus: It also makes it easier for your audience to view on mobile.

Some assistive technology separates links from the surrounding text for more efficient navigation. Always use descriptive, relevant text that is understandable even out of context.

Use This: Visit the Computing Services website.

Not This: To visit the Computing Services website, click here.

LINK BEST PRACTICES

Applying headings to your text establishes a hierarchy within your document and ensures screen readers and search engines can correctly interpret your content. Be sure to use heading styles in order and do not skip levels (e.g., jumping from h1 to h4 and skipping h2 and h3).

APPLY FORMATS

Dense and complex text is difficult to read on the web, especially for people with cognitive disabilities or those speaking English as a second language. Consider simplifying your message in the following ways:

• Break complex content into bullets or numbered steps whenever possible.
• Define acronyms. 
• Keep content clear and concise.
• Limit adverbs, words that often modify verbs
• Limit your word count in paragraphs to less than 80 words.
• Use active voice.

Scan documents to a Portable Document File (PDF) as opposed to taking a picture. Once your document is scanned, you can convert the text using Optical Character Recognition (OCR) to ensure the text can be interpreted for searching and read with screen readers.