INTRO TO WEBACCESSIBILITY

Web Accessibility ~ Girl Develop It ~

WELCOME!Girl Develop It is here to provide affordable andaccessible programs to learn software throughmentorship and hands-on instruction.

Some "rules"

We are here for you!Every question is importantHelp each otherHave fun

INTRODUCTIONSTell us about yourself.

Who are you?What do you hope to get out of the class?What is your favorite 80's song?

WHO CAN USE YOUR SITES?

Photo credit: bob the lomond cc

WHAT IS ACCESSIBILITY?Accessibility is about making your sites useful toas many people as possible.Accessibility is about overcoming barriers.Accessibility is about helping your users.

WHY WORRY?

Photo credit: circulating cc

WHY MAKE YOUR SITES ACCESSIBLE?Expand your potential audience! 54 millionpeople in the US have a disability, 1.8 million areunable to see printed words, and 16.1 million havea cognitive or mental illness that impedes dailyfunctioning (source).Be in compliance with legal guidelines, likeSection 504/508 and WCAG 2.0.Avoid potential lawsuits.Do the right thing.

ACCESSIBILITY IS FOR EVERYONE!

Photo credit: Sylvia Richardson cc

BENEFITS OF ACCESSIBILITYCurb cuts were designed for wheelchairs, butothers use them. Similarly, accessibility featuresend up helping everyone.Many times, good design practices createaccessibility as a side effect.Accessibility features, like good alt text, canimprove your search engine placement.

WHAT ARE BARRIERS TO ACCESS?

Photo credit: sciencesque cc

TYPES OF DISABILITYVisual disabilities: blind or low-sight, color blindHearing disabilities: deaf or hard-of-hearingPhysical disabilities: MS, paraplegic/quadriplegic,epilepsyCognitive disabilities: dyslexia, low literacy,learning disabilities

ACCESSIBILITY IS A CONTINUUM,NOT A CHECKBOX

Photo credit: Matt Carman cc

VISUAL DISABILITIES

Photo credit: Braille Institute cc

LET'S TRY ITScreenreader simulation

http://bit.ly/p3JmJ2

PROVIDE AN ALTERNATE PATH

Photo credit: Linh H. Nguyen cc

ALT TEXTAlternate text describes pictorial content inwords.Pay attention to context.Describe the function, not the content.If an image is purely decorative, use "" to instructa screen reader to skip it.Instead of using "longdesc," provide a caption orlink.

<img src="location" alt="brief description">

OTHER TIPS FOR SCREEN READERSHeadings and skip-nav links give users a way tonavigate through a page.Content is more than just visual.External link indicators prevent unexpected pagechanges.Tables can be hard to navigate, so only use themfor tabular data.Many users are switching to touch-screen basedreaders like VoiceOver.

PROVIDE CONTRAST

Photo credit: antifluor cc

MORE ON VISUAL DISABILITIESIf you use color to indicate something, also useanother indicator. For example, underline links onhover or mark a required field with an asterisk.Red/green color blindness is the most common,so avoid green on red.Include color names and show examples (article)Have a minimum of contrast ratio of 4.5:1 fornormal text and 3:1 for large text. (Checker)Try zooming in on your designs, to see how theylook when enlarged. It is a good idea to use emsand percentages instead of pixels when you can.

PROVIDE GOOD CAPTIONS

Credit: Randall Munroe cc

HEARING DISABILITIESMost deaf or hard-of-hearing people have limiteddifficulty with web accessibility.Provide captions or transcripts for multimediaelements.Don't rely on sounds to convey information, likean "alert" noise. Even hearing users often havetheir computers muted.Be especially careful if your site targets olderusers, as hearing loss is common.

LOSE THE MOUSE

Photo credit: The IP Kat

PHYSICAL DISABILITIESMany users with limited mobility interact with thescreen via keyboard.Other users use a mouse, but have trouble withfine motor control.Make clickable elements large, and put spacebetween them.Avoid clickable page elements that move.Animations with rapid flickers are not onlyannoying, they can trigger epileptic seizures.These guidelines also help children andtouchscreen users!

DON'T OVERWHELM

Photo credit: Thomas Hawk cc

PROVIDE PLENTY OF TIME

Photo credit: Bethan cc

CAPTCHAS DON'T JUSTCATCH ROBOTS

Photo credit: baboon cc

DEALING WITH COGNITIVEDISABILITIES

Unfortunately, there is not a lot of research in thisarea.Minimize cognitive load--don't overwhelm theuser.Use common icons to mark important tasks.If you have timed content (forms, image galleries,etc.) allow users to control extend time.CAPTCHAs aren't blind-friendly, are very difficultfor users with learning disabilities like dyslexia,and annoy everyone. Consider an alternativemethod.

SHOW YOUR USERS SOMELOVE!

Photo credit: Sam Felder cc

RESOURCESWeb Accessibility for DesignersWAVE toolbar, a Firefox extension that does in-browser checksWeb Developer toolbar, a Firefox extension withhelpful toolsNonVisual Desktop Access (NVDA),a free andopen source screen reader for WindowsW3C Web Accessibility Initiative (WAI)WebAIM, an accessibility-focused organizationwith great information