GOV web apps

Digital experience evaluation at scale

Index

Motivation

Cloud Architecture

Interesting Discoveries

Web Performance

motivation

As Tech Lead at California's Office of Data and Innovation I noticed:

 

Government stakeholders often have blindspots around the digital experience quality of web applications they hire vendors to deliver

cloud architecture

AWS Tools

  • ArchitectJS
  • Reproducible deploys
  • AWS Lambda
  • AWS Events
  • AWS schedules (cron)

Open source

  • NLP libraries
  • Axe Core
  • CrUX data
  • VeraPDF
  • Lighthouse

qa checks

  • Playwright end to end tests 
  • Discord notifications

ArchitectJS

Community governed framework offers production equivalent dev environments for AWS Lambda/DynamoDb projects

 

The app.arc config file is a shorthand for AWS sam.json (Serverless Application Model) reproducible full cloud model setup instructions

@app
hello

@http
get /
get /likes
post /likes

@events
hit-counter

@scheduled
daily-affirmation rate(1 day)

@tables
likes
  likeID *String

@tables-indexes
likes
  date *String

Lambda farms out expensive audit work via SNS Subscriptions to custom apps

AWS 

Scale up and down cost effectively with Lambda, DynamoDB, SNS

1

HTML Accessibility 

axe-core analysis

2

HTML Performance 

Chrome User Experience Report (CrUX) data retrieval

3

HTML Performance

Lighthouse lab audit if no CrUX data

5

PDF Accessibility review with VeraPDF auditor

4

Robots, Sitemap, OpenGraph

Custom scripts review AI friendliness, SEO, Social

6

Readability

Custom scripts based on NLP packages extract text, evaluate ARI, FK

  • Playwright Based
  • End to End Tests
  • Part of build process

Testing

  • Audit success/failure
  • AWS Resource health
  • Report to Discord
  • Error, Log Channels

Observability

ca.gov subdomains

interesting discoveries

  • AI friendliness
  • Readability
  • Accessibility
  • Performance

ai friendliness

AI crawlers have been blocked without full organization awareness

# robots.txt for https://virginiabeach.gov/

https://virginiabeach.gov/sitemaps-2-sitemap.xml

# live - don't allow web crawlers to index cpresources/ or vendor/

User-agent: *
Disallow: /cpresources/
Disallow: /vendor/
Disallow: /.env
Disallow: /cache/


# Disallow ChatGPT bot, as there's no benefit to allowing it to index your site
User-agent: GPTBot
Disallow: /

User-agent: bingbot
Disallow: /

readability

The average readability index of content on government sites is 10

accessibility

The most commonly detected accessibility issues are easily remedied

.with-pseudo {
  &::after {
    content: '';
    position: absolute;
    inset: -0.5rem;
  }
}

Performance

90% of government websites have performance issues

  1. Poor performance reduces success rates

  2. The most vulnerable population suffer the most from slow web application

  3. Everyone experiences performance constraints at some point in time
  4. Performance is not backed by government guidance like accessibility

 

Creating complex web applications is easier than ever.

Which is great, but our no/low code tools often output apps with performance problems.

web performance

performance problems i've dealt  with in different types of web apps

mpa + widgets

Multi page applications with embedded highly interactive widgets

cms/static

The majority of sites where content is published regularly and delivered with basic interactivity

spa

Single page applications

Standard WordPress with Custom Gutenberg Blocks based on design system

CMS / static sites

11ty

innovation.ca.gov

WordPress

cannabis.ca.gov

  • Manage tracking scripts

  • Avoid unnecessary frameworks

Static Site Generator frontend, headless WordPress backend

covid19.ca.gov

MPA + widgets

>

Dashboard migration from Tableau to Web Components

  • Leverage web platform
  • Use light components
  • Build steps trim JS, CSS
  • Build step size monitoring

All chart elements available

to screen readers

Easily manage deep translations

Additional benefits of web component architecture

my.scangov.com

free tools

SPA

  • small Preact framework
  • Lightweight components
  • Small state manager
  • route based code splitting
  • depend heavily on APIs

differentiation

Helping government stakeholders gain awareness of digital experience quality helps them serve the public

 

Teams which can deliver high performance apps and help train the next generation of code creation tools will have a big impact on the quality of services.

Made with Slides.com