Accessible Word Document Training

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 interactive items look “clickable” and underline links

only• Use unique and descriptive links to help users understand

where a link will take them

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

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• Google will find your information easier if it is correctly marked up

for accessibility

• 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.

Headings Navigation

• Navigate and edit a document through the Headings Navigation Panel

• Whole section editing

• Drag and drop entire sections

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

Columns

• Create columns in Word rather than creating column-like sections

• Adds structure to page

• Influences reading order

Images

• Alternative Text • Captions• Use of descriptive text surrounding the image • Tips: Insert images using the inline function

Do not use Word Art – No alt text

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”.

Surrounding 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 Page• Include what the link is for when creating hyperlinks

Visit the Universal Design Center for more information about accessibility.

• 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 ExamplesBad 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 free

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

Resources

Past Training and Presentations:http://www.csun.edu/universaldesigncenter/past-training-and-presentations

Document Accessibility Guides:

http://www.csun.edu/universaldesigncenter/document-accessibility