Skip to content

Instantly share code, notes, and snippets.

@lauraturk

lauraturk/pahlka_haccessibility-spike.md

Last active April 20, 2017 21:25
Show Gist options
  • Save lauraturk/d6efea9624b9ac90f7fd0dac6d55a98c to your computer and use it in GitHub Desktop.
Save lauraturk/d6efea9624b9ac90f7fd0dac6d55a98c to your computer and use it in GitHub Desktop.
Download ZIP
Haccessiblity-thon
Raw
pahlka_haccessibility-spike.md

Pahlka Spike for Accessibility

The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. Tim Berners-Lee, W3C Director and inventor of the World Wide Web

Agenda:

Video

With a partner: Find Contact Information with a Screen Reader

1. Install these tools:

2. Choose a Website

The BBC

Checkout the BBC Website

Try navigating to select another language or find the accessibility help link without using the mouse. If you couldn't find it, you can use This Link to actually checkout their acessibility help page.

Apple

Checkout the Apple Website

Try navigating to find your closest store without using the mouse.

Craigslist

Checkout the Craigslist Website

Try navigating to look for an apartment.

3. 'Blindfold' one partner and try to find contact information or accessibility settings on the website you chose using ChromeVox

4. Discuss. What was surprising? What worked well? How hard was it to find the information you were looking for?

Chris: Talking to us about his experience working with an accessibility consultant on the Connect for Health Colorado site.

Let's get Hacking!

  1. Clone down one of these repos * number guesser game * static website * static website * static website
  2. With a partner or team add accessibility features to the project

Things to consider from Pahlka alumnus Matt K : focus is making sure things are “tabbable” or navigable by keyboard in a logical order, and all buttons that can be clicked can also be “clicked” with enter or space. Also important is that someone using a screen reader will have a coherent experience, so all content that is readable has the correct tags for it to be read with the reader (aria-label and role tags are what I use most)

  1. Use these docs: * Three Common Fails * WAI-ARIA * WAI-ARIA Roles * W3 Checklist * Color Contrast Checker

Wrap Up Discussion

* How does this inform your coding practice? 
* What was surprising? 
* What other templates are out there? How do you evaluate templates for accessibility?

More Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment