Providing WordPress Support, Empowering Clients, & Encouraging Accessibility

supported living services nonprofit website

A WordPress Theme rebuild for Alpha Supported Living Services – a non-profit agency providing supported living and group training home services to adults and children with developmental disabilities in King, Snohomish, and Spokane counties.

This latest WordPress website project involved helping a nonprofit to better comply with Web Content Accessibility Guidelines (Level AA). By replacing the commercial paid Theme with an open source WordPress-approved Theme (_Underscores), accessibility benchmark scores improved markedly.

Scope of Work

accessibility testing
front-end web development
performance optimization
security hardening
search engine optimization
WordPress training and consulting

Accessibility

To improve conformance with WCAG Level AA, 3 navigation features were added: a ‘skip to content’ link to help visitors bypass repetitive navigation; a keyboard-navigable menu; and site search. For low vision visitors, color contrast ratios were increased to meet the minimum 4.5:1 guidelines; a second visual indicator was added to body text links; image-based text was replaced with text; and the minimum font size was increased to 16 pixels.

Other accessibility improvements included removing an auto-rotating content slider (that did not include a pause feature); integrating more accessible social media icons; and making telephone numbers more accessible to assistive technology and mobile devices.

Ongoing accessibility efforts include improving alternate text for images; converting inaccessible PDF documents, like Annual Reports, to Pages and Posts; and maintaining content in semantic HTML.

Performance

Additional work involved optimizing page load performance. By optimizing images for web loading and reducing the number of web server requests (generated by Plugins and the former Theme) by 46% – page load speed almost doubled.

Performance Metric Old website
New Website
Google Lighthouse: Accessibility 71/100 100/100
Google Lighthouse: Best Practices 93/100 100/100
WebPageTest Speed Index 3.092 1.654
Total Homepage File Size 6.4 Mb (4 Mb Images + 937 Kb Scripts + 157 Kb CSS + 278 Kb Fonts + 63 Kb HTML) 1.5 Mb (464 Kb Images + 763 Kb Scripts + 84 Kb CSS + 111 Kb Fonts + 72 Kb HTML)
Total Web Server Requests 99 (13 Images + 32 Scripts + 13 CSS + 8 Other + 16 Font + 5 HTML) 53 (8 Images + 20 Scripts + 10 CSS + 5 Fonts + 7 Other + 6 HTML)
Total Homepage Load TIme ~3.1 seconds ~1.7 seconds

WebPage Test Speed Index: median = ~3.591; top 10% = <1.388
In 2020, the average page size = ~2.4 Mb and median page size = ~2.1 Mb.
Database-driven websites, like WordPress, are more performance optimized when server requests are < 40 – 60.

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 Type Level % of home pages in February 2021
Low contrast text AA 86%
Missing alternative text for images A 61%
Missing form input labels A 54%
Headings AA 38%
Ambiguous Links, such as “click here” A 22%

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

Weebly to WordPress Website Work

Family Voices of Washington screenshot

A redesigned website for The Family-to-Family Health Information Center – a nonprofit organization that helps families of children and youth with special health care needs, and the professionals who serve them, to find healthcare funding.

The 1.6 Mb Weebly homepage has been converted to a 625 Kb WordPress landing page (a 61% page size reduction), with 30% fewer web server requests, which results in better mobile performance.

ADA accessibility improvements included color contrast, ARIA elements, a keyboard-navigable menu with a site search option, reduced line widths for easier readability, and a Google Translate feature.

Scope of Work

  • ADA (WCAG AA) accessibility improvements
  • Mobile responsive theming
  • Performance optimization
  • Security hardening

Google Lighthouse benchmarks
Accessibility: 98/100
Best Practices: 98/100
Desktop Performance: 98/100
Mobile Performance: 70/100
Search Engine Optimization: 100/100

WordPress Theme Development by: Scott Marlow

Cushy CMS to WordPress CMS Conversion

Dumas Bay retreat center screenshot

Client: Dumas Bay Centre

Scope of Work
Accessibility Improvements
Copyediting and content migration
Front-End web development
Performance optimization
Security hardening
Search engine optimization
Visual redesign

Team: Cipalla Communications, Scott Marlow, Joan van den Berg

Dumas Bay Centre is a unique event & retreat venue owned by the City of Federal Way.

Before the website redesign, center staff were limited to editing existing website content using Cushy CMS, a WYSIWYG HTML editing tool. To add new content, city IT staff needed to upload files to the web host.

The website was migrated to a new host and WordPress was configured to allow full rich-content editing. The new mobile-friendly site features a more modern look, with image galleries, oEmbed video support, site search, SSL protection, and feedback and rental inquiry forms. All implemented with accessibility in mind.

Performance Metrics

Performance WordPress Site Benchmark
Google Mobile Speed: 68
Google Desktop Speed 81
Pingdom 87 faster than 87% of tested sites
WebPageTest Speed Index 1,017 median = ~4,493
top 10% = <1,388
YSlow 81 average score = 70
Web Page Size 526 Kb In 2017, average page size = ~2.4 Mb
median page size = ~1.9 Mb
Web Server Requests 27 < 40 – 60 recommended