Build a Fully Accessible Modern Web Application

# CHAPTER 20

Build a Fully Accessible Modern Web Application #

1. Introduction #

Congratulations. You have completed the rigorous journey from understanding the ethical necessity of inclusive design to mastering the strict, mathematical, and architectural requirements of WCAG international law. You understand the spatial chaos of mobile touch targets, the invisible auditory reality of Screen Readers, and the cognitive barriers of disappearing placeholders. To finalize your transition from visual designer to Inclusive UX Architect, you must execute the Final Capstone Project. You are the Lead Accessibility Designer for a new Healthcare Portal. Your task is to architect a complex dashboard that must pass absolute WCAG AA compliance, proving you can handle color-independent feedback, flawless tab ordering, and impenetrable modal focus traps.

2. The Project Scenario #

The Client: "HealthCore" - A patient portal for accessing medical records and scheduling appointments. The Goal: Architect a high-fidelity Figma prototype and write the accompanying Developer Documentation ensuring the UI is 100% accessible to elderly users, motor-impaired users, and blind users. The Deliverables:

1. 1. A WCAG AA Compliant Color & Typography System.

1. 2. A Semantic HTML Landmark Map.

1. 3. An Accessible Scheduling Form.

1. 4. A Documented Modal (Focus Trap).

1. 5. A Final Accessibility Audit Report.

3. Step 1: The Compliant Design System #

Before drawing a single wireframe, establish the mathematical baseline.

• Typography: Set the baseline body font to 16px Inter (Sans-serif). Set the Line Height to 150% (24px).

• Colors: Use the Able plugin. Ensure your primary dark blue text (#1E3A8A) on a white background scores at least 4.5:1. Ensure your primary action buttons (Blue background with White text) pass the 3.0:1 UI component test.

• The Focus State: Build a Master Button Component. Add a [Focus] variant featuring a 3px solid, offset outline.

4. Step 2: The Semantic Landmark Map #

You must architect the invisible structure for the Screen Reader.

• Draw the Dashboard wireframe.

• Create a layer called "A11y Annotations" and draw explicit boxes around your layout.

• Top Bar: Label it <header>. Inside it, wrap the navigation links in <nav>.

• Main Dashboard: Label it <main>. (Ensure there is only one).

• The Headings: Ensure the dashboard title is marked as <h1>. The sub-sections (Recent Appointments, Lab Results) are marked exactly as <h2>.

5. Step 3: The Accessible Scheduling Form #

Forms are the ultimate test of cognitive and physical accessibility.

• Labels: Ensure every input (Date, Doctor, Reason) has a permanent text label positioned directly above the box. No placeholders allowed.

• Instructions: Under the "Date" label, add the text: Format: MM/DD/YYYY.

• Error Handling: Design the Error Variant for the input box. Ensure the border turns red, a Warning Icon [!] appears, and red text explains the error. Add an annotation for the developer: *"Dev Note: Use aria-live region so screen reader announces this error instantly."*

6. Step 4: The Modal Architecture #

The user must confirm their appointment via a pop-up Modal.

• The Design: Design a massive, screen-dimming overlay containing the confirmation details, a [Confirm] button, and a [Cancel] button.

• The Touch Targets: Ensure the [Cancel] 'X' icon has an invisible bounding box of 44x44px.

• The Developer Handoff Annotations:

• *"Trap Focus: Keyboard Tab MUST loop inside this modal."*

• *"Escape Route: Modal MUST close on Escape keypress."*

• *"Return Focus: On close, cursor MUST teleport back to the 'Schedule' button."*

7. Step 5: The Final Accessibility Audit #

Before presenting the final file, run your QA pipeline.

1. 1. The Plugin Pass: Run the "Color Blind" simulator on your dashboard. Are the "Urgent" (Red) and "Standard" (Green) medical notifications still visually distinct? (If not, add warning icons).

1. 2. The Zoom Pass: Zoom the Figma canvas to 200%. Do your Auto Layout containers expand gracefully, or does the text shatter outside the boxes?

1. 3. The Keyboard Pass: Put away your mouse. Mentally trace the Tab order from the top left of the screen, through the navigation, down into the form, and finally to the Submit button. Is it perfectly sequential?

8. Final Architecture Review (The Portfolio Export) #

Zoom out in Figma and look at the inclusive ecosystem you have built.

1. 1. You have proven you understand mathematical WCAG Color Constraints.

1. 2. You have proven you can architect invisible Semantic HTML Landmarks for screen readers.

1. 3. You have proven you can eliminate cognitive barriers in complex Form Design.

1. 4. You have proven you can communicate complex interaction mechanics (Focus Traps) to engineering teams.

*This single Figma file is a complete, enterprise-grade Accessibility portfolio piece.* If a blind user encounters this code, it will read like a perfectly structured audiobook. If a user with motor tremors encounters this interface, their keyboard will glide through it effortlessly.

9. Summary #

You have conquered the architecture of inclusion. You did not just draw pretty pictures; you engineered an environment that treats every human biological reality with dignity. You applied the POUR principles—ensuring your work is Perceivable by the senses, Operable by diverse hardware, Understandable to the human mind, and Robust enough to survive assistive technology. You understand that in digital design, Accessibility is the ultimate metric of professional maturity—a measurable, legally binding blueprint for human empathy.

You have completed the Accessibility (A11y) – Complete Beginner to Advanced Guide. You now possess the specialized, highly sought-after skills required to build products for the entire planet.

10. Next Steps in Your Journey #

Where do you go from here?

• To understand how to take these static accessible components and wire them into complex, moving simulations, study UI/UX Prototyping – Complete Beginner to Advanced Guide.

• To understand how to define the base structural layouts (Landmarks) before applying accessible typography and color, study Wireframing – Complete Beginner to Advanced Guide.

• To learn how to physically write the Semantic HTML and ARIA code that powers these designs, study Frontend Web Development.

The theory is finished. Go build an inclusive reality.