WordCamp Notes: Accessibility, Beginning The Journey - Ben Byrne
Accessibility is...
The degree to which a product, device, to services or environment is available to as many people as possible
pertains to more than just websites - also apps, etc.
a11y
a11y issues are very common
1 in 5 people has an accessibility issue
(number may be inaccurate. hard to pin down a percentage)
don't focus on the NUMBERS, focus on the IDEAS
not just for PERMANENT disabilities
it affects us ALL, lots of different circumstances
visual impairment
blindness - the obvious one
also people just w/ poor vision, text zoomed WAY up
color blindness - can't tell where a button starts/stops b/c they can't see the colored background
temporary impairments:
screen glare when yr outside in the sun, etc
motor impairment
can come in lots of shapes/sizes
tremors
slowness
Parkinson’s, muscular dystrophy, etc.
stroke
drinking alchohol and not so precise w/ taps on the phones
exhaustion -- visiting the site late at night
auditory impairment
video / podcasts
deaf, hard of hearing, tinnitus, etc
Grandpa w/ the sleeping baby
^^^^ this is why you DON’T autoplay a video. User CAN'T listen to something at high volume right now
cognitive impairment
developmental disabilities
dyslexic
ADD, ADHD
just being distracted b/c too many things are happening at that moment
might just be really tired
why should you care?
humanity
audience
search engines
finances
humanity -
this is ethics, respecting a desire others have to experience your content and making it available in a way that they CAN experience it
don’t want to exclude someone b/c of something outside of their control
you're losing audience when you do this
any time something is inaccessible to a population, they're not experiencing it
why build a website that only people of a certain type/category/gender can use?
most of us want to reach as wide of an audience as possible
search engines -
are basically "suffer from impairments" humans
they're scraping the site in a sort of "impaired" way
lots of accessibility best practices have a nice side effect of boosting SEO
finances -
non profits get gov't grants
strings attached
if you build a website, it NEEDS to be accessible
they can get in trouble for that -- withdrawl of grant money, may be required to comply with ADA or subject to lawsuits
lots of lawsuits happen due to failing to follow ADA accessible website guidelines
a11y standards -
1. Section 508
provision of Fed Rehabilitation Act. says website content must be accessible to people w/ disabilities.
specific to US
2. WC3 WCAG 2.0
more general. not coming out of a "regulation" like 508
most people refer to this one. tho they'll say "508" but really they mean this one nowadays
"Web Content Accessibility Guidelines"
comes in 3 levels - A, AA, AAA
increasing levels of rigor
A has a really low bar to try and hit it
AA is the one everybody tends to focus on - accepted standard for most everyone
AAA even more stringent higher standard, but basically nobody feels compelled to meet that. people recognize being THAT prescriptive, means it's actually hard to know if these are helping anyone b/c context is so important.
can spend a lot of time conforming to these standards
they depend on CONTEXT
the rules don’t actually speak to end users experience
best way to do that is to TEST and try to experience the site that way
WCAG 2.1 - released in early June. not sure how quickly it's being adopted
w3.org/WAI/standards-guidelines/wcag/new-in-21
17 additional success criteria
targets some things around mobile, low vision, and cognitive learning disabilities
not a huge major change
the basics -
think bout your site in a TEXT ONLY environment
strip away the design and images
what does that experience become?
use ALT and TITLE attributes
https://webaim.org/techniques/alttext/
keyboard navigability
"not all attributes are created equally"
mindful of TABINDEX
skip-to-content link
helper thing for "text only" viewing
somebody w/ a screen reader can click this to skip over your "header nav junk" to get to the article in your website
some "starter themes" have this.
Use Semantic HTML5
nav, aside, main, etc
be mindful of H1 - H6
idea of a document outline
try to build document structure in a good way that’s meaningful in terms of the structure of what people are looking at
extend w/ ARIA roles
if you have more of an APP where the site changes STATE in terms of what it does as people click thru things on the site
indicate the ROLE or FUNCTION of that thing
color and type —
contrast ratio
font sizes
use more than JUST color to denote different sections and meaning
color is great but insufficient on its own
in a parking garage - you have a color AND number/letter to tell you where the car is. same idea here
use CSS for ALL CAPS
don't write it in all caps. shouldn't actually need to type in all caps
(not really a huge a11y thing, but it can drive designer/a11y people crazy)
be thoughtful about your content
use good titles and headers
good link text "click here" is a bad idea. provides no context without having to read text right/left
not uncommon for people to have screen reader configured to ONLY read the links. and if they're all "click here" nobody can tell what it does
"unsubscribe" in email footers, not "click here" in email footers
do not reference things by position
'see pic below'.
syndicated content - things may show up in a different order, may not always appear in the order you expect
MEDIA
no autoplay. ever.
if possible always provide some sort of captions for audio, video an the rich media
if podcaster, provide webinars, not a bad idea to have transcripts and put those in the page just below the video. usually a good thing for SEO too.
no images of text
"pictures should be pictures and text should be text"
CODE
indicate language
don’t have major errors in your code
open google console to confirm
gracefully handle zooming
write good css so if people are zooming that the site doesn't fall apart
line-height - make sure it's configured properly so it works when people zoom
WordPress
wordpress.org/about/accessibility
Theme directory has a flag for "accessibility ready" so you can filter for those themes
plugins - can filter with the "a11y" word to find them
Test! Test! Test!
have a real person use the site and tell you what annoys them on the site
Tools -
Browser extensions
Wave, from Webaim.org - available for chrome and firefox
kinda old
but can bring up a URL, identify a standard, it will pop up standards and tell you what's going wrong,
audits on the page
not automated for a whole site, only page by page
great first step, low hanging fruit you can address
Spectrum
avail for Chrome. maybe others too
simulate different color blindness conditions
can see your site in low contrast mode, various other variations
WCAG Luminosity
Contrast Ration Analyzer
can click on things, it will tell you what kind of contrast ratio you need to have
others
Lighthouse (in chrome devtools)
Axe (from Deque Systems)
similar to Wave plugin, newer, more elegant UI
recommended by others
Keep in mind -
it's not binary. not “is/isn't accessible"
it's a spectrum. more or less accessible for people under different circumstances
compliance is not everything
the UX is what matters
context matters
what it's ACTUALLY like for someone with an a11y issue
every step is good as long as it's a step forward
don't feel like you have to do everything all at once
start w/ just adding alt text if you need to, then do something else later, etc.
