1. Accessibility Principles

This site follows the WCAG 2.1 Level AA guidelines, based on the core principles of accessibility: Perceivable, Operable, Understandable, and Robust (POUR).

• Perceivable: Information must be presented in ways users can recognize (text, alt text, captions).
• Operable: All interactive elements must be usable with keyboard and assistive tech.
• Understandable: Interfaces should be predictable, readable, and consistent.
• Robust: Code must work reliably across browsers, platforms, and screen readers.

2. Page Structure & Headings

Use semantic HTML and heading hierarchy to make content understandable and navigable for all users, including those using screen readers.

• Use only one "h1" per page — typically reserved for the page title.
• Maintain a logical heading order: h1 → h2 → h3, without skipping levels.
• Use HTML5 landmarks: "header", "nav", "main", "footer".
• Each page must have a unique and descriptive title (WCAG 2.4.2).

Page Title Examples

ARIA Landmarks & Headings

3. Text, Links & Contrast

Ensure that all textual elements and interactive components are readable, understandable, and perceivable to all users — including those relying on assistive technologies.

• Ensure a 4.5:1 color contrast ratio for normal text and 3:1 for large text.
• All links must have descriptive text. Avoid vague labels like "Click here".
• Buttons and CTAs must include a visible label and a focus state (visible outline or underline).
• Never rely on color alone to convey meaning (e.g., status, actions).

Accessible Button Examples

Link Text

4. Interactive States – Hover & Focus

5. Forms & Labels

All form fields must be labeled clearly and programmatically connected to their labels. This ensures users with screen readers or assistive devices can understand and complete forms accurately.

• All inputs must have an associated "label" element using the "for" attribute and a matching "id".
• Error messages should be linked using "aria-describedby" to explain the issue.
• Use "fieldset" and "legend" for grouped inputs like radio buttons or checkboxes.
• Indicate required fields both visually (e.g., with an asterisk) and programmatically (e.g., aria-required="true").

Form Label Examples

6. Images & Alt Text

Every image must have meaningful alternative text (alt attribute) or be hidden from assistive tech if purely decorative.

• Decorative images should use alt="" and aria-hidden="true".
• Informative images must have descriptive alt="…" that conveys purpose (not “image of infographic”).
• Complex images (charts, infographics) need longer descriptions, either longdesc or a nearby figcaption or text description.

Image Examples

Error: Image has no alt text. Screen readers skip or misinterpret it.

Correct: Image has descriptive alt text describing purpose of graphic.

Correct (decorative): Image is decorative and is hidden from assistive technology.

7. Mobile & Keyboard Support

Interfaces must be operable via both touch and keyboard. This ensures users navigating with screen readers, switches, or keyboard-only setups can fully interact with the site.

• All navigation and interaction must work via keyboard (Tab, Enter, Space).
• Ensure buttons, links, and inputs are touch-friendly (minimum size: 44x44px).
• Menus, sliders, and modals should be fully operable without a mouse.
• Focus must be managed properly when opening or closing modals (e.g., return focus to the triggering element).

Keyboard Navigation Examples

Sliders Accessibility

8. Color Guidelines & Brand Palette

These are the official HSCMD brand colors for UI design. Use them consistently for text, actions, and backgrounds to ensure both accessibility and visual harmony.

9. Contact

If you have questions, suggestions, or need help applying these accessibility guidelines, please reach out: