Accessible Word
Document Training
Microsoft Word 2010
Agenda-Word
• Defining
• Links
Accessibility
• Document
Headers
• Images
• 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 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 free
Word Accessibility Check
• Dynamic checker – Runs while you edit
• Error – Pertinent issues
• Warning – Precautionary steps
• Tip – Suggestions
Accessibility Check
Recap
• Accessibility
• Links
• Document
• Table Structure
Headers
• Images
• Color Contrast
• Accessibility
Checker
Resources
Past Training and Presentations:
http://www.csun.edu/universaldesigncenter/pasttraining-and-presentations
Document Accessibility Guides:
http://www.csun.edu/universaldesigncenter/docum
ent-accessibility