Transcript Creating Accessible Content

Accessible Web Design
Carolyn Fiori
Assistive Technology Specialist, College of San Mateo
November 2011
Introduction



Difficulty accessing hard-copy print
documents or webpages.
Access issues may be encountered by
students with:
• Physical disability
• Visual disability
• Learning or cognitive disability
WebAim video
Assistive Technology

When the student has an
electronic text (e-text)
document, many of
these issues can be
remediated using
assistive computer
technology.

Voice-activated
software
Screen reader
Text-to-speech


Assistive Technology




Enlarge text on the
screen, change colors.
List Links on a page.
Read text on the
webpage.
Use voice commands
to access links and
scroll through pages.
Universal Access


The key to using all of this technology is
designing and formatting pages with accessibility
in mind.
Consider access and readability.
Page Layout


Easier to read and comprehend text in smaller blocks.
Present information in a manageable way - Make your
content easier to read and understand:
• “White space"
• Headings break up and organize the text
• Bullet points


Access links using the keyboard
Logical tab order
Contrast & Color
Screen Magnification





Don’t embed text within images
Clearly separate sections of the page
Use clear and descriptive headings
Avoid scrolling and flashing text
Web accessibility for screen magnifier
users
Heading Tags



Use heading tags to help with
navigation.
Format tables using <th>
tags.
Good resource: webaim.org
(see Resources section)
Headings &
Screen Readers
Hyperlinks



Identify the purpose or
function of the
hyperlink as part of the
name.
Avoid “Read More.”
Including file type is
helpful: Syllabus [PDF]
Alt Text for Images
Alternative text allows screen reader users to get the same
information as others who can see the image.
Alt text should:
 Be accurate and equivalent.
 Be succinct
 No need to include the phrase “image of…”
Example of Alt Text


Word: To add alt text,
right click on the image
and choose format
picture/object. This
various with different
versions of Word.
Most web design
software will prompt for
alt text.
Save As or Print to PDF





Format the document for
accessibility.
PC - Save As PDF (new
versions of Word)
Create PDF with Adobe
add-in on older versions
of Word
DO NOT PRINT TO PDF
MAC - PRINT AS PDF does
not make an accessible
document
Accessible Text

PDF with no text

PDF with text
Captioning

Students at CA School for the Deaf,
Fremont
Introduction to Online Class
Screencasts

Tools: YouTube, MAGpie, LecShare


Resources


WebAim – Expanding the web’s potential
for persons with disabilities
Tips for Making Your Website Accessible –
Iowa Department for the Blind
Resources - styles




Styles basics: Word 2007
Styles basics: Word 2010
Format text with styles – Mac
Musings on Microsoft Office: Alt Text,
Save as PDF, and More
Any questions?
Send email to:
Carolyn Fiori, [email protected]