Unintentional Exclusion: – Web accessibility and how we’re failing our users – Links

View Github Repository Open presentation in a new window

leekinney

See all presentation from leekinney

Unintentional Exclusion: – Web accessibility and how we’re failing our users – Links

0 0

sassconf

My talk for Sass Conf 2015 in Austin TX.

On Github leekinney / sassconf

Unintentional Exclusion:

Web accessibility and how we’re failing our users

LeeAnn Kinney @_leekinney

Image source: Flickr
  • not going to talk so much about Sass today
  • fundamentals and building blocks
  • if we don't consider these things - may be creating a terrible experience for certain users
  • Users that
    • might not use a mouse
    • need to speak commands to navigate
    • users who may not be able to see at all
  • may be repeating things you already know inside and out
  • things you are already aware of and considering with every build and I hope that is the case for majority of room
  • important to take a step back and revisit; make sure we're providing a great experience for everyone using the web
  • next to impossible to perform daily tasks without using the web.
  • book a flight in minutes
  • sees a list of options to compare prices, duration, etc.
  • calling an airline to book or change a flight - sitting on hold, maybe being transfered to a bunch of different representatives and most likely not getting the friendliest service.
  • live in an urban location
  • don't like to take time out of your busy schedule
  • maybe time away from your kids
  • blind, elderly, limited mobility could benefit from a service like this
  • site is built in a way they are able to easily navigate and order
  • Phila public transportation accessibility
  • immediate access to test results or a patient portal, or refill a prescription online.
  • online banking - relieves need to travel to bank to deposit check
  • maybe more important than those conveniences is the endless amounts of information and educational resources on the web
  • allow someone to go back to school at night or learn a new skill (web development)
  • potentially helping them find better opportunities, a higher salary or the convenience of being able to work from home
  • As designers and developers, builders of the web, it is our responsibility to ensure we’re providing the same access to these necessary things to everyone

57 million people in the US living with a disability

2010 US Census Bureau

As of 2010 the US Census reported there were 57 million people living with a disability in the US, representing 19% of our population.

Of all US computer users

22 million have a mild visual difficulty 11 million being severe

(Source: Study Commissioned by Microsoft Corporation and Conducted by Forrester Research, Inc.) In 2003, over 12 years ago, Microsoft conducted a study that found of all US Computer users, 22 million have a mild visual difficulty with 11 million being severe.

Of all US computer users

24 million have a mild dexterity difficulty or impairment 7 million being severe

24 million have a mild dexterity difficulty or impairment with 7 million being severe. these are only people who self-identify. stats are probably much higher based off population growth.

Types of Disability

  • Visual: blind or low-sight, color blind
  • Hearing: deaf or hard-of-hearing
  • Physical: MS, ALS, paraplegic/quadriplegic
  • Cognitive: dyslexia, low literacy, learning disabilities, ESL
  • Seizures: photosensitive
What are some disabilities we should be keeping in mind when designing and developing websites?

Temporary or Situational Disabilities

  • Aging: dementia/Alzheimer’s, cataracts, low vision, mobility, loss of fine motor skills
  • Broken limbs
  • Sleep deprivation
  • Chemo brain
  • Migraines/headaches
A lot of times we only consider severe or long term disabilities but it's really important to also think about temporary or situational disabilities. abbreviated list of other users that can benefit from an accessible, inclusive and easy to use websites. Similar to curb cuts that are there for wheelchairs but benefit someone pushing a cart or stroller.

“By designing for someone with a permanent disability, someone with a situational disability can also benefit.” pic.twitter.com/H38S2Dw0LL

— David Storey (@dstorey) October 1, 2015

76 million baby boomers in the US

2014 US Census Bureau

with old age comes poor vision, cataracts, loss of fine motor control, memory loss, hearing loss, or maybe not wanting to adapt to new technologies at all.
So after looking at the staggering numbers of people who possibly can’t use our sites why isn’t everyone concerned about this? Why isn’t everyone creating accessible websites that can reach and benefit as many people as possible? Expanding the use of these sites to as many people as possible to sell more, educate more or help more?

Why are we excluding so many users?

  • It’s too hard
  • It’s too expensive
  • We're lazy
  • We don’t realize we’re doing it
Is it because we think creating accessible websites is hard. Because we think creating accessible websites is expensive? Because we’re lazy? Or because we just don’t realize that we’re excluding these people? Let's look at these arguments or excuses

It’s expensive

Not if it’s built in at the beginning

  • can be expensive if it wasn't a consideration in the beginning
  • refactoring a ton of code; needing to rebuild other functionality
  • buildings where the architect didn't consider accessibility in the beginning and the contractor now has to go back, maybe years later, add try to add in a ramp or an elevator

It’s hard

Here are a few easy steps to get started

Sometimes it can be a little difficult but there are 8 really easy things you can do to get started with the bare minimum.

8 Easy Tips

  • Alt text
  • Links
  • Navigation
  • Contrast & Color
  • Keyboard focus
  • Forms
  • Semantic HTML
  • Video captions

Alt Text

  • Provide the function, not the content
  • Make sure it's providing context
  • If image is purely decorative use “” to instruct screen reader to skip
<p><img src="img/twitter-logo.png" alt="follow us on twitter"></p>
Also helps with SEO

Links

  • Don’t use color alone to signify a link
  • Link text should make sense (and let a user know where it is taking them)
  • Don’t open in a new window (unless you let the user know first)
capital one 360 example

Navigation

  • Provide skip to main content
  • Make sure users can tab through navigation
WebAIM example

Color & Contrast

  • Don’t rely on color to indicate something
  • Use a minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text
red/green colorblindness most common; green for good red for error

Keyboard Focus

  • Don’t remove :focus
  • Style it to fit in with the look and feel of your site
provide example good vs. bad

Accessible Forms

  • Labels
  • Tab
  • Error Messages
  • Captchas
White House example

Semantic HTML

  • Gives the page meaning and structure
  • Use header tags in correct order
If creating static sites - Probably the easiest and hopefully something we're already doing

Video Captions

  • Provide captions if you have video on your site
  • Helps SEO
  • Helps users to scan content of video before watching

We’re lazy

But this can be a good thing!

  • back to some of our excuses
  • We're lazy
  • Two types of lazy
  • isn't always a bad thing
  • can create a better solution for something
  • avoid redundancy and repetitiveness
  • automated workflows

It's Unintentional

So let's make an intentional effort to fix it

  • Although hear a lot of excuses, also find that a lot of designers and developers just don't realize they're doing it
  • It's our responsibility to make accessibility a priority
  • Work it into our workflows and projects at the beginning
  • Advocate and be leaders
  • Good design and UX practices often go hand-in-hand with a11y

Accessibility Offline

  • Classes
  • Meetups
  • Conferences
  • really general talk on thinking differently about accessibility and inclusivity
  • one other thing I wanted to touch on quickly is keeping accessibility in mind offline
  • constantly learning and sharing knowledge - classes, Meetups or conferences
  • People with disabilities can be excluded from participation if the physical spaces can not accommodate them
  • If you’re scheduling an event, make sure the space is accessible
  • If you are presenting, make sure your slides are readable and can be seen from the last row
  • Don't overwhelm wih too much content on your slides or crazy animations
  • Small steps like these help to create a more inclusive and diverse community, which in the end everyone benefits from

Tools & extensions

  • quickly audit
  • won't catch everything
  • human testing
  • voiceover on a mac
  • Easily tab
  • zoom in on designs

Resources

Sass Specific Resources

These are just a few Sass specific things I came across that assist with making accessible sites that much easier.

Thank you!

@_leekinney

hi@leekinney.is

leekinney.github.io/sassconf

  • @_leekinney
  • leekinney.github.io/sassconf
Unintentional Exclusion: Web accessibility and how we’re failing our users LeeAnn Kinney @_leekinney