Blog

Building Nonprofit Websites in King County

Nonprofit youth mentoring website screenshot

A redesigned WordPress website for The 4C Coalition – a community-based nonprofit, founded in 1999, that helps black and other youth of color succeed in school and in life. The 4C Coalition offers one-on-one mentoring, group mentoring and tutoring to 12- to 17-year-olds in King County.

Scope of Work

content migration
copywriting
creative strategy
color palette development
front-end web development
online data management
performance optimization
security hardening
search engine optimization
visual design
WordPress training and consulting

Performance

Page load speed ranks in the top 15% of sites.

WebPageTest Speed Index: 1.737 (median = ~3.591; top 10% = <1.388)

Total Page File Size: 1.3 Mb (In 2020, the median web page size = ~2.1 MB; the average page size = ~2.4 Mb)
Total Web Server Requests: 48

Web Design Team

Content Strategy: Rita Cipalla
Photography: Rebecca Sullivan
Visual Design: Joan van den Berg
WordPress Theme DevelopmentScott Marlow

 

5 Ways to Make Your Website More Accessible

Usability is a measure of how easy a system is to use. The goal of website usability is generally to satisfy 95% of site visitors.

Accessibility is a subset of usability. Accessibility means your content can be accessed by allregardless of technological or physical means. This ranges from visitors with screen readers to those with mobile phones, tablets, or even slow Internet connections.

In the U.S., the CDC estimates ~26% of the population has a disability

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can:

1) perceive, 2) understand, 3) navigate, 4) interact with and 5) contribute to the Web.

Web accessibility encompasses all disabilities that affect access to the Web, including:

  • auditory
  • cognitive
  • neurological
  • physical
  • speech
  • visual

Web accessibility also benefits people without disabilities, for example:

  1. people using mobile phones, smart watches, smart TVs, and other devices with small screens, different input modes, etc.
  2. older people with changing abilities due to ageing
  3. people with “temporary disabilities” such as a broken arm or lost glasses
  4. people with “situational limitations” such as in bright sunlight or in an environment where they cannot listen to audio
  5. people using a slow Internet connection, or who have limited or expensive bandwidth

Federal agencies, federal contractors and agencies receiving federal funds/grants must make their websites accessible. Web Content Accessibility Guidelines (WCAG) is the legal accessibility standard.

The WebAIM Million

97% of home pages had detectable WCAG 2 failures — an average of 51 errors per page

Common types of WCAG 2 failures

WCAG Failure TypeLevel% of home pages in February 2021
Low contrast textAA86%
Missing alternative text for imagesA61%
Missing form input labelsA54%
HeadingsAA38%
Ambiguous Links, such as “click here”A22%

Addressing just these few types of issues would significantly improve accessibility across the web.

Website Accessibility Best Practices

  1. Mobile friendly with valid HTML
  2. Semantic HTML – e.g. ordered lists, etc.
    85.7% of screen reader respondents find heading levels very or somewhat useful
    61% of screen readers prefer Word vs. PDF documents (17%)
  3. Alternate text for all non-decorative images; avoid image-based text (or provide text-based alternatives)
  4. Site navigation works with a keyboard; and includes a ‘skip to content’ link to bypass navigation
  5. Avoid: auto-rotating/playing content, such as content sliders; popup windows; links opening new windows; PDF (only) content; ADA overlays and accessibility toggles

Accessibility Resources

  1. WCAG Quick Reference Level A (minimum requirements)
  2. Google Mobile Friendly Test
  3. The WebAIM Million
  4. WebAIM Screen Reader User Survey
  5. W3C Easy Checks – A First Review of Web Accessibility
  6. W3C Accessibility Principles
  7. ADA accessibility tools:
    tot@11y browser bookmarklet, WAVE (Web Accessibility Evaluation Tool), WebAIM Color Contrast Checker, Google (Chrome) Lighthouse
  8. Accessibility Advocates sign open letter urging people not to use accesibe and other overlay products