{% extends "base.html" %} {% block title %}Accessibility Testing - Project Ploughshares{% endblock %} {% block content %}

Accessibility Testing Page

This page demonstrates the accessible components and allows for easy testing of accessibility features.

Color Contrast

Text on Background Colors

Regular text on white background (Default)

White text on Ploughshares blue

White text on Ploughshares dark blue

Black text on Ploughshares light blue

Black text on Ploughshares accent

White text on success color

White text on warning color

White text on error color

Keyboard Navigation

Focus States

Tab through these elements to test focus visibility:

Form Controls

Accessible Form

Enter your full name.
We'll never share your email with anyone else.

Tables

Accessible Table

Sample transactions data
# Transaction Date Amount
1 Equipment Purchase 2023-01-15 $1,200.00
2 Consulting Services 2023-02-28 $3,500.00
3 Software License 2023-03-10 $950.00

Icons and Images

Accessible Icons

Icons with proper alternative text:

Icon-only buttons with aria-label:

Text Sizing

Text Hierarchy

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

This is regular paragraph text. The base font size is set to 16px for optimal readability.

This is a lead paragraph with slightly larger text.

This is smaller text, still maintaining readability.

{% endblock %} {% block scripts %} {% endblock %}