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.