Accessibility is legally required for good reasons

Some alpha.CA.Gov design principles

• Start with user needs
• Iterate — then iterate again
• Make it accessible and inclusive
• Make things open: It makes things better
• Optimize performance

Alpha team formed 12/2019

Built 17 new services on alpha.ca.gov

Stood up V1 covid19.ca.gov in 4 days

Still iterating

Immediate traffic spikes

Ongoing need

Fast, accessible, readable

• Loads in 2 seconds on 3G with a Moto G4
• Grade 9 or lower Automated Readability Index
• Lighthouse Performance, Accessibility scores: 100

Human Translations

https://github.com/cagov/covid19

Open source

static site generator

Static Site generation in practice

• Reliable
• Scales smoothly
• Lower cloud costs
• Less infrastructure to manage
• You can use them without sacrificing anything
  • We retain the convenience of WordPress by using it headlessly for authoring, regenerating the static artifact each update
  • We use web components and FAAS APIs for realtime interactive widgets

The 11ty community

Fast on my machine

Why so dramatic about performance?

Performance is an equity issue

• Data transfer costs people money
• Devices with less capable CPUs take a lot longer to parse javascript even after it is downloaded so some users are staring at a white screen forever waiting for your single page app to work
• > 9% of Californians are accessing the internet on 3G
• Unlimited data plans throttle users at bandwidth caps
• Conditions vary for everybody, I used to commute on BART and parts of that journey I really appreciated sites that made an effort to be fast

Performance is good for the bottom line

• Speed is a search ranking factor
• Speed increases user satisfaction
• Speed impacts conversion levels

• How site speed impacts your metrics
• Performance is UX
• Google on why performance matters

Solutions

• Bake performance, a11y and readability into your processes so you are aware of tradeoffs
  • Make temporary compromises when necessary but treat them as bugs
• Challenge your team to increase lighthouse scores. Putting up points is fun!
• Run audits on code changes
• Set performance budgets in your build tools
• Run audits regularly against production
• Keep measurement history for review

Tools

• https://calibreapp.com/
• https://www.speedlify.dev/
• https://www.npmjs.com/package/lighthouse

YES!

There is a conspiracy to make your site slow

Forces at work

• The constant need for more features immediately
• Surveillance
  • You can recreate a user session video by watching every cursor move and keypress in javascript. These things are costly, use them sparingly if they are helpful.
• Careless install instructions
  • Does this large script really need to be added in a render blocking manner?
• The developers
  • Yes, I am part of the problem too, always trying to find a way to fit in some cool 3D dataviz

Don't slow down

• Know your audience
• Keep measuring and raise your team's awareness of the results
• Cover the basics then do dope stuff

Readability

• Reduce cognitive load
• Increase effectiveness
• Include all literacy levels

Tools

• hemingwayapp.com: realtime hints
• npm: unfluff & readability-scores

Experiment warning

cagov.github.io/leaderboard/

We're hiring

https://state-of-california-agency.forms.fm/california-digital-were-hiring/forms/7721

https://news.alpha.ca.gov/roles/

More info

• Github: http://github.com/cagov
• The CA.Gov Alpha team: @cadotgov
• Aaron Hans: @nopatternaaron
• https://news.alpha.ca.gov/prioritizing-users-in-a-crisis-building-covid19-ca-gov/