1. CS 0134 (term 2181) Jarrett Billingsley
Accessibility
CS 0134 (term 2181)
Jarrett Billingsley

2. Class announcements How was YOUR break?
Next week: Useful info and review/practice for final
Two weeks: FINAL!
OMETs are open until 12/10
it's totally anonymous and I don't see the results until after the end of the term, so please be honest!
it helps me improve!!!! ostensibly!
if at least 2/3 of you respond, I'll make cookies for the final 😲
11/27/2017
CS term 2181

3. The internet is for everyone!
11/27/2017
CS term 2181

4. Does anyone even USE a phone book anymore?
It's everywhere!!!!!!
Good luck getting by without the internet these days.
Employee training!
Job applications!
Does anyone even USE a phone book anymore?
TV sucks!
Government forms!
THOSE
relatives!
11/27/2017
CS term 2181

5. NO ONE IS ACTUALLY LIKE THIS IN REAL LIFE
An impossible ideal
It's easy to fall into the trap of making things for the people who our culture decides are "normal."
Here's an opposite-sex couple of white, young, fit, able-bodied, conventionally attractive, upper-middle-class, well-dressed people looking at the internet on their expensive tablet and two phones.
NO ONE IS ACTUALLY LIKE THIS IN REAL LIFE
(well okay my cousin and her family are but whatever)
I'm sure they're American citizens with American names and addresses and have nothing to hide from anyone.
11/27/2017
CS term 2181

6. The true equalizer
Many kinds of people use the internet. Everyone has to.
Disabilities can make the internet a difficult place to navigate.
For some people, the internet is their window to the world.
It's hard to put people into neat little boxes.
foreign addresses
colorblindness
limited mobility
foreign phone numbers
poor eyesight
bedridden
differing naming customs
blindness
unusual names
chronic illness
name changes
hearing impairment
social anxiety
gender identity
age
deafness
sexual orientation
poor fine motor control
autism spectrum
socioeconomic class
quadriplegic
access to broadband
And something many sites have lost sight of: privacy and safety are paramount.
11/27/2017
CS term 2181

7. "If you don't have anything to hide…"
"…then you have nothing to fear."
⚠️ If someone says this to you, it's a huge warning sign. ⚠️
Privacy is mostly used for safety, rarely for wrongdoing.
illegal
wrong
unjust
yeah that's some bad shit
unfair
stalking
whistleblowing
abuse
harrassment by strangers
strict families who might disown you
angry mobs
Privacy is
SUPER important
for this stuff.
personal/professional separation
11/27/2017
CS term 2181

8. On the outside looking in
If you don't fit the mold that a site presents, it's… uncomfortable.
Title:
🔘 Mr.
⚪️ Mrs.
"I changed my name…
Name on your birth certificate:
First:
Last:
"I don't use either…"
"I don't have a birth certificate…"
"My name is José Eduardo Santos Tavares Melo Silva..."
Choose a security question:
Name of your oldest child
Color of your first house
Year you were baptized
Mother's maiden name
"In my culture, family name comes first…"
"I don't/can't have children…"
"I've only lived in apartments…"
"I'm not Christian/was never baptized…"
"I don't know who my mother is…"
"I come from a culture where women don't take their husband's name…"
11/27/2017
CS term 2181

9. Don't be paralyzed
It's easy to look at all the ways you might exclude, or offend, or upset someone and feel like you can't do anything.
But what you can do:
Try your best.
Only ask for things you really need to ask for.
Give a range of options so everyone can relate.
Ask people who aren't like you for their opinions on your page!
If someone gets upset:
Don't assume you're in the right. You can make mistakes too.
Apologize, even if you weren't trying to upset them.
And then try to do better!
But some people will never be satisfied, so uh, fuck them.
11/27/2017
CS term 2181

10. Accounting for Disabilities
11/27/2017
CS term 2181

11. Traffic light syndrome
We loooove using green, yellow, and red to indicate stuff like status, quality, availability etc etc etc.
But this is what those colors look like to some people.
1 in 6 people have some kind of color vision deficiency.
If you use these colors as the only way to distinguish important information, that information will be lost on some people!
With Protanopia…
11/27/2017
CS term 2181

12. Improving things for colorblind people
You can use a site like Paletton to come up with color schemes.
It lets you simulate what your color scheme might look like for any kind of colorblindness.
Try to come up with schemes that look good for everyone!
There are addons for every browser that you can use to simulate colorblindness while designing your page.
Find someone who's colorblind and ask for their opinion!
11/27/2017
CS term 2181

13. Switching things up .chocolate {background: blue; }
Maybe you color-code information.
In that case, you can come up with an alternate color scheme, and use JS to swap between them.
.chocolate {background: blue; }
.vanilla {background: green;}
.protanopia .chocolate {background: blue; }
.protanopia .vanilla {background: orange;}
"anything inside the protanopia class"
$('html').toggleClass('protanopia')
this JS code will change the whole page!
11/27/2017
CS term 2181

14. Improving things for people with poor vision
You can use a similar technique for things like:
High-contrast color schemes
Larger text
Less-fancy fonts
Aa Bb Cc Dd Ee Ff Gg
11/27/2017
CS term 2181

15. Improving things for the blind
Blind people use screen readers.
One way of helping them navigate is to use the proper HTML tags for parts of your page.
<header>, <main>, <footer>, <aside>, <nav>
These encode meaning into your page.
Use <section> and <article> to split up your page
Put proper <h1>, <h2>, <h3> etc on everything
With the W3C validator, check "show outline" and it'll… show you the outline!
11/27/2017
CS term 2181

16. alt="a fluffy white dog holds a ball.">
Going even further
The media queries we learned about last week can be used to totally change the layout of your page for screen readers.
@media only speech { ... }
Images' alt="" should have good descriptions.
<img src="doggo.jpg"
alt="a fluffy white dog holds a ball.">
Put lang="en" on your <body> tag (or whatever language it is).
Things to avoid:
Text and other important information inside images!
Large tables (can you imagine someone reading you a table?)
11/27/2017
CS term 2181

17. Do phones/tablets count as a disability?
No, but interaction is much more limited!
Login
Big inputs are good for tapping with fingers and thumbs!
Username
Avoid nested and hover menus.
Keyboard shortcuts are great, but should be optional!
11/27/2017
CS term 2181