Accessible Web Design Carolyn Fiori Assistive Technology Specialist, College of San Mateo November 2011

Introduction n Difficulty accessing hard-copy print documents or webpages. n Access issues may be encountered by students with: Physical disability Visual disability Learning or cognitive disability n WebAim videovideo

Assistive Technology n When the student has an electronic text (e-text) document, many of these issues can be remediated using assistive computer technology. n Voice-activated software n Screen reader n Text-to-speech

Assistive Technology n Enlarge text on the screen, change colors. n List Links on a page. n Read text on the webpage. n Use voice commands to access links and scroll through pages.

Universal Access n The key to using all of this technology is designing and formatting pages with accessibility in mind. n Consider access and readability.

Page Layout n Easier to read and comprehend text in smaller blocks. n 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 n Access links using the keyboard n Logical tab order

Contrast & Color

Screen Magnification n Don’t embed text within images n Clearly separate sections of the page n Use clear and descriptive headings n Avoid scrolling and flashing text n Web accessibility for screen magnifier users Web accessibility for screen magnifier users

Heading Tags n Use heading tags to help with navigation. n Format tables using tags. n Good resource: webaim.org (see Resources section)

Headings & Screen Readers

Hyperlinks n Identify the purpose or function of the hyperlink as part of the name. n Avoid “Read More.” n 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: n Be accurate and equivalent. n Be succinct n No need to include the phrase “image of…”

Example of Alt Text n Word: To add alt text, right click on the image and choose format picture/object. This various with different versions of Word. n Most web design software will prompt for alt text.

Save As or Print to PDF n Format the document for accessibility. n PC - Save As PDF (new versions of Word) n Create PDF with Adobe add-in on older versions of Word n D O NOT PRINT TO PDF n MAC - P RINT AS PDF does not make an accessible document

Accessible Text n PDF with no text PDF with no text n PDF with text PDF with text

Captioning n Students at CA School for the Deaf, Fremont Students at CA School for the Deaf, Fremont n Introduction to Online Class Introduction to Online Class n Screencasts Screencasts n Tools: YouTube, MAGpie, LecShareMAGpieLecShare

Resources n WebAim – Expanding the web’s potential for persons with disabilities WebAim n Tips for Making Your Website Accessible – Iowa Department for the Blind Tips for Making Your Website Accessible

Resources - styles n Styles basics: Word 2007 Styles basics: Word 2007 n Styles basics: Word 2010 Styles basics: Word 2010 n Format text with styles – Mac Format text with styles – Mac n Musings on Microsoft Office: Alt Text, Save as PDF, and More Musings on Microsoft Office: Alt Text, Save as PDF, and More

Any questions? Send to: Carolyn Fiori,