Embed Size (px)
Citation preview
Accessible Web Design
Carolyn FioriAssistive 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 succinctNo 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
