Girl Develop It

Intro to Web Accessibility

Class 1

Welcome!

Girl Develop It is here to provide affordable and accessible programs to learn software through mentorship and hands-on instruction.

Some "rules"

  • We are here for you!
  • Every question is important
  • Help each other
  • Have fun

Introductions

Tell 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?

Happy iPhone users

Photo credit: DeafTech News opens in a new window

What is accessibility?

  • Accessibility is about making your sites useful to as many people as possible.
  • Accessibility is about overcoming barriers.
  • Accessibility is about helping your users.

Why worry?

Dogs outside door, captioned 'We R UR community, beggin fer access'

Photo credit: circulating opens in a new window cc opens in a new window

Why make your sites accessible?

  • Expand your potential audience! 54 million people in the US have a disability, 1.8 million are unable to see printed words, and 16.1 million have a cognitive or mental illness that impedes daily functioning (source opens in a new window).
  • Be in compliance with legal guidelines, like Section 504/508 and WCAG 2.0.
  • Avoid potential lawsuits opens in a new window.
  • Do the right thing.

Accessibility is for everyone!

Curb cut on sidewalk

Photo credit: Sylvia Pellicore cc opens in a new window

Benefits of Accessibility

  • Curb cuts were designed for wheelchairs, but others use them. Similarly, accessibility features end up helping everyone.
  • Many times, good design practices create accessibility as a side effect.
  • Accessibility features, like good alt text, can improve your search engine placement.

What are barriers to access?

Traffic barriers

Photo credit: sciencesque opens in a new window cc opens in a new window

Types of Disability

  • Visual disabilities: blind or low-sight, color blind
  • Hearing disabilities: deaf or hard-of-hearing
  • Physical disabilities: MS, paraplegic/quadriplegic, epilepsy
  • Cognitive disabilities: dyslexia, low literacy, learning disabilities

Accessibility is a continuum, not a checkbox

Checkmark with word 'chk' on blackboard

Photo credit: Matt Carman opens in a new window cc opens in a new window

Visual disabilities

Blind pedestrians with white canes

Photo credit: Braille Institute opens in a new window cc opens in a new window

What assitive technology do people use?

  • Browser zoom
  • Screen magnification
  • High contrast displays
  • Screen readers

Demo

Let's try it

Screen reader simulation opens in a new window

http://bit.ly/p3JmJ2

Provide an alternate path

Signs pointing to handicap-accessible routes

Photo credit: Linh H. Nguyen opens in a new window cc opens in a new window

Alt text

  • Alternate text describes pictorial content in words.
  • Pay attention to context.
  • Describe the function, not the content.
  • If an image is purely decorative, use alt="" to instruct a screen reader to skip it.
  • Instead of using "longdesc," provide a caption or link. Consider HTML5 figure and figcaption.
<img src="location.jpg" alt="brief description">

<figure>
  <img src="location.jpg">
  <figcaption>brief description</figcaption>
</figure>

Let's try it

Provide alt text for the images on your handout.

Other tips for screen readers

  • Headings skip-nav links and landmark roles give users a way to navigate through a page.
  • Content is more than just visual.
  • External link indicators prevent unexpected page changes.
  • Tables can be hard to navigate, so only use them for tabular data.
  • Many users are switching to touch-screen based readers like VoiceOver on iOS opens in a new window.

Provide contrast

Crosswalk with contrasting colors

Photo credit: antifluor opens in a new window cc opens in a new window

More on visual disabilities

  • If you use color to indicate something, also use another indicator. For example, underline links on hover or mark a required field with an asterisk.
  • Red/green color blindness is the most common, so avoid green on red.
  • Include color names in product descriptions and show examples (article opens in a new window)
  • Have a minimum of contrast ratio of 4.5:1 for normal text and 3:1 for large text. (Checker opens in a new window)
  • Try zooming in on your designs, to see how they look when enlarged. It is a good idea to use ems and percentages instead of pixels when you can.

Provide good captions

Stick figure attaching captions to cats. Dialog- Man: Oh hi; I'm here from the internet; Man 2: What are you doing!?; Man: Gluing captions to your cats.

Credit: Randall Munroe opens in a new window cc opens in a new window

No, automatic captions don't count

YouTube video with nonsense captions: Look at your help literally now you can link your data from hell

Credit: Sylvia Pellicore, from YouTube

Hearing Disabilities

  • Most deaf or hard-of-hearing people have limited difficulty with web accessibility.
  • Provide captions or transcripts for multimedia elements.
  • Don't rely on sounds to convey information, like an "alert" noise. Even hearing users often have their computers muted.
  • Be especially careful if your site targets older users, as hearing loss is common.

Lose the Mouse

Cat steals mouse

Photo credit: The IP Kat opens in a new window

Demo

Physical Disabilities

  • Many users with limited mobility interact with the screen via keyboard.
  • Other users use a mouse, but have trouble with fine motor control.
  • Make clickable elements large, and put space between them.
  • Avoid clickable page elements that move.
  • Animations with rapid flickers are not only annoying, they can trigger epileptic seizures.
  • These guidelines also help children and touchscreen users!

Don't overwhelm

Sign post with multiple signs

Photo credit: Thomas Hawk opens in a new window cc opens in a new window

Provide plenty of time

Alarm clock

Photo credit: Bethan opens in a new window cc opens in a new window

CAPTCHAs don't just catch robots

Confused robot

Photo credit: baboon opens in a new window cc opens in a new window

Dealing with cognitive disabilities

  • This is a less-researched area of web accessibility. Here is a Cognitive 101.
  • Minimize cognitive load--don't overwhelm the user.
  • Use common icons to mark important tasks and consider text labels.
  • If you have timed content (forms, image galleries, etc.) provide controls or allow users to extend time.
  • CAPTCHAs aren't blind-friendly, are very difficult for users with learning disabilities like dyslexia, and annoy everyone. Consider an alternative method opens in a new window.
Screenshot of a Captcha

Let's try it

Visit a site you use frequently. Identify one accessibility feature that is part of the site and one feature you would change.

Show your users some love!

Disabled parking symbol with a heart

Photo credit: Sam Felder opens in a new window cc opens in a new window

Resources