Accessible WordPress Website Rebuild for a Civic Information Platform

Project Overview

This project involved rebuilding a civic information website that had gradually become slow, inconsistent, and difficult to maintain.

The original website had a basic layout structure and lacked a cohesive design system. Performance and accessibility were also limited, which made the site harder to use for visitors and difficult to manage for administrators.

The client provided a new design direction and requested a fully rebuilt WordPress website that would be fast, accessible, and easier to maintain.

A key requirement for the project was ensuring the website met WCAG accessibility standards and followed ADA compliance guidelines, allowing the site to be usable by a wider audience.

Initial Site Assessment

Before starting development, I reviewed the existing website and identified several structural issues.

Common problems included:

• inconsistent layout structures
• lack of centralized typography and style rules
• unoptimized images and assets
• plugin usage that created unnecessary overhead
• limited accessibility considerations

The website had also accumulated technical inconsistencies over time, which made updates more complicated.

Rather than building on top of the existing structure, the project required a more systematic rebuild.

Development Approach

The rebuild followed my standard structured development workflow, focusing on three key priorities:

• establishing a consistent design system
• improving accessibility across all pages
• optimizing the site for performance and maintainability

A centralized style structure was created to control typography, spacing, and layout behavior across the entire website.

This ensured consistency across all pages while also simplifying future updates.

Accessibility Implementation

Accessibility was one of the most important aspects of the project.

The goal was to ensure the website could be used by visitors with a wide range of accessibility needs.

This included implementing:

• accessible navigation structures
• proper heading hierarchy
• sufficient color contrast
• semantic HTML markup
• keyboard navigation compatibility
• screen reader friendly elements

As a result, most pages passed WCAG AAA accessibility standards, while the overall website achieved a 100% accessibility score during testing.

Page Development

The homepage was developed first and served as the visual foundation for the entire website.

Once approved by the client, additional pages were implemented using the same layout and styling system.

In total, nearly 20 pages were developed within a two-week timeline.

Each page was carefully reviewed for:

• design accuracy
• accessibility compliance
• responsive layout behavior
• performance efficiency

Responsive Optimization

Responsiveness was tested throughout development to ensure the site worked seamlessly across devices.

Layouts were validated on:

• mobile devices
• tablets
• laptops
• desktop displays

Typography scaling and spacing adjustments were made to ensure the content remained readable and structured across all screen sizes.

Performance Improvements

Performance optimization was implemented alongside development.

The previous site suffered from inefficient asset usage and inconsistent layout implementation.

To improve performance:

• images were optimized and resized appropriately
• unnecessary scripts were avoided
• layout structures were simplified
• page elements were implemented efficiently

After optimization, the website achieved a Google PageSpeed performance score of 92.

Results

The final website delivered significant improvements in performance, accessibility, and usability.

Key outcomes included:

• 92 PageSpeed performance score
• 100% accessibility score
• improved responsive layouts
• consistent typography and layout system
• easier long-term maintenance

The site now provides a professional and accessible experience while remaining simple for the client to manage.

Client Feedback

The client was very satisfied with the final result and left a 5/5 rating, highlighting both the technical quality of the work and the collaborative process throughout the project.

They particularly appreciated the attention to detail and the focus on accessibility and usability.

Long-Term Impact

With a consistent structure, improved accessibility, and optimized performance, the website is now positioned for long-term stability and easier content management.

The improved accessibility also ensures the site can serve a broader audience while meeting modern web standards.