Accessible Word Document Creation Using Microsoft Word 2010

Agenda-Word Defining Accessibility Document Headers Images Links Table Structure Color Contrast Accessibility Checker

What is Accessibility? Accessibility can be defined by whether or not a document or web application can be used effectively by people with disabilities Perceive Operable Understand Robust

Perceivable Provide captions and transcripts Do not use only color to express important information. Instead, change font, separate lists, and use tables Use headings and heading levels Provide alternative text that portrays the important concepts of an image like content and function rather than describing the image. Associate data cells with column/row headers

Operable Content is compatible with assistive technologies that do not utilize the mouse Make clickable items look clickable and underline links only Use unique and descriptive links to help users understand where a link will take them Google will find your information easier if it is correctly marked up for accessibility

Understandable Use semantic organization techniques such as headings, lists, etc. Be consistent and simplify content Make the reading level of your content low when possible Avoid using small text Do not use fully justified text – creates “rivers of light”

Robust Make sure your content works with different technologies, browsers, versions, etc. Use the most universal versions for your content PDF – Can be opened on multiple platforms Word – Most popular word processing file format Follow standards and accessibility best practices Ensure that file types are more compatible with past and future versions

Compatibility Mode & Document Properties

Headings Headings are styles used for titles of sections. Headings are announced Appearance Accessibility Mark-up Hierarchy

Bad Example of Headers

Good Example of Headers This document is properly structured and is marked up with headers. Marking headers is important not only for visual purposes, but for assistive technology users as well.

Styles Strong rather than Bold Ordered lists Unordered lists Serif or San Serif

Images Alternative Text Captions Use of descriptive text surrounding the image Tips: Insert images using the inline function No alt text for WordArt

Bad Example for Alternative Text There is no alternative text for the picture above. Users of assistive technology such as screen readers will not get any information from this image. When the screen reader selects the image it will just say “Image”.

Bad Example for Alternative Text There is alternative text for the picture above, however it is not very descriptive. If the purpose of the picture was to just represent a car, this would be fine, but if this were an ad highlighting the 2014 Chevy Camaro, this would be poor alternative text.

Good Example for Alternative Text The image above includes the alternative text “Red 2014 Chevy Camaro”. Users with assistive technology such as screen readers will hear “Image: Title – Camaro– Red 2014 Chevy Camaro”.

Null Alt Text Method It is preferred to include an explanation of the image in the surrounding body of text or caption. This way an image’s alternative text could be marked as null.

Links Link text should tell the user where they are about to go and match in a meaningful way the title of the webpage they are linking to. Link text should be descriptive enough to alert the user of where the link will take them For documents meant to be printed, use a URL Generator to shorten links but provide meaningful text around it to let users know where the link is going

Links Only View

Bad Example for Links The link text here is not informative. It does not tell the user where the target of the link is. It is preferred to make the link text more descriptive.

Good Example for Links To read more top stories go to the CSUN Home PageCSUN Home Page Include what the link is for when creating hyperlinks Visit the Universal Design Center for more information about accessibility.Universal Design Center Sentence structure lets the user know what info will be presented by selecting the link

Table Structure Visual Organization Appearance Important to included caption/description

Bad Example of Table Structure

Good Example of Table Structure

Color Contrast Examples Bad Color Contrast 1: White text on a turquoise background 2: Red text on green background 3: White text on pink background Good Color Contrast 4: White text on blue background 5: Black text on white background 6: Black text on yellow background Go to the Universal Design Center website to download tools to check color contrast for freeUniversal Design Center

Word Accessibility Check Dynamic checker – Runs while you edit Error – Pertinent issues Warning – Precautionary steps Tip – Suggestions

Accessibility Check

Recap Accessibility Document Headers Images Links Table Structure Color Contrast Accessibility Checker