Delivered a WCAG 2.1 AA Platform, Placing 3rd Out of 27 International Teams
During the Knowbility Accessibility Internet Rally (AIR), 27 international teams set out to build accessible websites for nonprofit clients on a fixed competition timeline. Only 15 teams successfully delivered a finished product.
Serving as Project Manager, Product Manager, and Design Lead, I guided our volunteer cross-functional team through the full project lifecycle to replace The Arc of DFW Area’s legacy website with a custom, accessible WordPress platform.
Role
Year
Deliverables
- Project Initiation & Planning
- Project Controlling & Integration
Business, Product & Design Requirements
Stakeholder Alignment
- Information Architecture & Content Strategy
Custom WordPress CMS: (WCAG 2.1 Level AA & Section 508)
Legacy Challenges
- Content is unorganized and difficult for families to discover.
- Visual design lacks consistency, hierarchy, and appeal.
- The legacy CMS is difficult for staff to maintain and update independently.
- The platform lacks mobile responsiveness and impedes interaction for users with accessibility needs.
Goals
Content Strategy
Align site messaging with the chapter’s core mission so families can quickly locate support services and get involved.
Information architecture
Restructure navigation and page hierarchies to improve resource findability and search discoverability.
Visual Design
Modernize the interface aesthetic to create an approachable environment that reinforces organizational credibility.
Technology
Deploy a sustainable CMS platform built on accessibility best practices that non-technical staff can maintain independently.
Guiding Principles: Accessibility & Human Factors
Our primary users are individuals with Intellectual and Developmental Disabilities (IDD) and their families.
Every architectural and interface decision must integrate WCAG 2.1 Level AA and Section 508 standards from the ground up.
Designing for visitors who require cognitive and physical accommodations ultimately creates a clearer, more resilient experience for every visitor.
The platform must honor the mission of The Arc by anticipating the urgent questions families face when navigating IDD support systems.
Backed by a dedicated community of advocates, the website serves as a trusted first point of contact.
Above all, The Arc is someone to ask, “How do I get answers?”
Content Inventory & Thematic Synthesis
Before structuring new navigation, we audited years of decentralized documentation.
The client repository contained materials scattered across multiple digital formats, print artifacts, and third-party links.
Cataloging and Clustering the Content Backlog
- Documented, cataloged, and audited every site asset using spreadsheets to evaluate freshness and relevance.
- Executed card grouping and brainwriting exercises with the team to cluster disparate files into cohesive topic domains.
- Consulted our assigned Knowbility accessibility mentor to identify non-compliant document formats and plan accessible HTML alternatives early in the planning cycle.
Mind Mapping & Thematic Gap Analysis
- Identified critical information gaps where the legacy site failed to address urgent family inquiries, particularly around local advocacy programs.
- Outlined content pathways to connect high-interest parent questions directly to core support services.
Comparative Analysis & Strategic Benchmarks
To establish measurable product requirements, I led the team through a Google HEART framework and OKR exercise alongside a comparative evaluation of peer disability nonprofits.
Our scenario walk-through revealed that the legacy website functioned as an unmaintained brochure with broken links, driving families away to Facebook for answers while failing to explain how donations or annual memberships funded local programs.
This synthesis established three tactical focus areas for our build:
Donation Conversion:
Funding is essential for chapter sustainability.
The redesign required removing multi-step friction from the donation workflow and placing prominent, accessible contribution prompts across high-traffic landing pages.
Membership Growth:
Encouraging visitors to join the organization expands community reach and volunteer capacity.
We planned clear calls to action that emphasize the direct benefits of local membership.
Advocacy & Community Training: Training programs and family guidance are the primary drivers of The Arc’s mission.
We focused interface layouts around making upcoming workshops and training modules immediately visible without deep scrolling.
Mapped navigation models across peer Arc chapters and regional nonprofits to evaluate how they structured primary, secondary, and tertiary content buckets.
Contrasted competitor wayfinding and navigation patterns with the team, identifying where peer models became crowded, shallow, or competed with their own calls to action.
Balanced stakeholder priorities by designing an architecture where educational mission content and an independent donation conversion funnel reinforce one another without competing for hierarchy.
Comparative Domain Mapping:
Isolated each peer site’s top-level navigation by color to compare subject domains side by side.
Thematic Correlation:
Parsed recurring structural patterns and page naming conventions across organizations.
Consolidation:
Bundled overlapping categories and eliminated redundancy to establish a durable taxonomy.
Baseline Synthesis: Combined existing site taxonomy with our content audit distillation to establish an initial structural pass.
Refined category labels and aligned primary, secondary, and tertiary levels during our in-person team sorting workshop
Production Architecture (Final)
Finalized the site hierarchy, isolating clear pathways for family support resources alongside a dedicated donation and membership funnel.
Product & Accessibility Architecture:
Semantic Front-End Control:
Building from a stripped-down theme framework with Bootstrap helper classes gave us direct control over DOM order, ARIA attributes, and keyboard focus states without fighting bloated third-party templates.
Searchable HTML Migration:
Replaced unindexed PDF uploads and external JotForms with native, accessible page templates and integrated intake forms for donations, memberships, and board nominations.
Seed-and-Scale Content Model:
Established repeatable page templates for core content types (Medicaid guides, school advocacy, and community trainings) so client volunteers could steadily expand the knowledge base after launch.
Operational & Financial Sustainability:
Zero-Cost Licensing:
Deployed within the client’s existing $0/month hosting footprint with no paid theme dependencies.
Low Maintenance Overhead:
Structured the admin publishing workflow for non-technical volunteer treasurers and board members.
Accessible Talent Pool:
Selected an open-source ecosystem with broad documentation and affordable contract support if future chapter boards require external help.
Iterative Wireframing & Stakeholder Alignment
Directed our Junior Designer in translating our taxonomy into desktop wireframes, establishing clean content containers for educational resources and local services.
Conducted structured review sessions in Basecamp with the client liaison, gathering feedback on content hierarchy and refining page layouts through iterative drafts.
Secured client sign-off on structural wireframes before advancing into component styling and front-end development.
Responsive, Mobile-First Execution
Prioritized mobile viewport layouts to support parents and advocates who access community resources directly from mobile devices.
Designed linear, single-column reading paths with generous touch targets to accommodate users with motor tremors or limited dexterity.
Ensured text containers and functional controls scale cleanly up to 400% zoom without horizontal scrolling or collision.
Accessible Technical Specifications: Menu Interaction Architecture
To bridge UX intent and front-end delivery, I authored detailed developer annotations based on W3C Web Accessibility Initiative (WAI) design patterns.
“in situations when the parent menu item needs to carry out a function, such as linking to a web page, a separate button can be added to the parent item, to open and close the submenu. This button can also act as a visual indicator for the presence of a submenu.”
– Editors: Eric EggertShadi Abou-Zahra Contributors: The Education and Outreach Working Group (EOWG)
Specification Details:
Specified dual-action flyout menu mechanics, separating top-level landing page links from submenu expansion buttons to support screen reader users, sighted keyboard navigators, and touchscreen visitors.
Documented precise keyboard focus sequences, hover delays, and ARIA state transitions (aria-expanded, aria-current)
so our developer could code accessible interaction states directly into the theme framework.
Quality Assurance & Defect Remediation
(Pre-Flight Audit)
Pre-Flight Compliance Audit:
Prior to launch, we subjected the staging site to an exhaustive accessibility review with our assigned Knowbility senior mentor, testing with Deque axe, Social Security Administration ANDI, W3C Nu HTML Validator, and NVDA screen readers.
Defect Triage & Remediation:
Categorized findings by severity (Critical, Severe, Minor), prioritizing blockers including HTML syntax linting, form label associations, color contrast compliance, and heading hierarchy order.
Technical Governance: Coordinated front-end fixes directly with our developer in Basecamp, mapping styling solutions through Bootstrap utility classes to maintain code consistency across the site without introducing bloated markup.
Final Implementation & System Delivery
Delivered a fully responsive, WCAG 2.1 Level AA compliant WordPress website that replaced unsearchable legacy PDFs with clear, navigable web resources.
Integrated accessible form workflows for donations, volunteer onboarding, and board nominations, giving the chapter an independent operational foundation.
Retrospective:
We delivered and submitted the redesigned website for The Arc of DFW Area at the conclusion of the Knowbility Accessibility Internet Rally (AIR).
Out of 27 international teams that initiated the rally, 15 successfully delivered a completed site for judging, and our team won 3rd place overall for WCAG 2.1 compliance and accessible user experience.
To close out the project, we transitioned the custom WordPress platform and content templates to the chapter’s volunteer board so they could independently publish community resources and events.
Following the competition, I continued providing pro-bono technical and design support to assist the chapter as their digital presence grew.
Leading this initiative reinforced how structured project governance, pragmatic scope control, and accessibility-first architecture can deliver enterprise-grade digital equity even under tight nonprofit budget and resource constraints.
