Principality of KaharagiaDesign System

Accessibility

All Kaharagian government websites must be accessible to everyone. We follow WCAG 2.1 Level AA standards.

Our Commitment

The Principality of Kaharagia is committed to ensuring digital services are accessible to everyone, regardless of ability. This design system provides the foundation for building inclusive government websites.

Focus States

All interactive elements must have a clearly visible focus state. We use a distinctive yellow background with a black outline that meets WCAG 2.1 requirements.

Press Tab to see focus states:

The focus state uses:

  • Background: Kaharagian Gold (#FEBC0A)
  • Outline: 3px black (#0B0C0C)
  • Text: Black for maximum contrast

Colour Contrast

All text must meet minimum contrast ratios:

  • Normal text: 4.5:1 minimum contrast ratio
  • Large text (18px+ or 14px+ bold): 3:1 minimum
  • UI components: 3:1 minimum for boundaries

The design system colour palette has been tested to ensure all combinations meet these requirements.

Typography

  • Body text: 18px minimum size for comfortable reading
  • Line height: 1.5 for body text to improve readability
  • Line length: Maximum ~75 characters for optimal reading
  • Font: Noto Sans, a highly legible sans-serif typeface

Semantic HTML

Always use semantic HTML elements to provide meaning and structure:

  • Use <header>, <nav>, <main>, <footer>
  • Use heading levels (<h1>-<h6>) in order
  • Use <button> for actions, <a> for navigation
  • Use lists (<ul>, <ol>) for grouped items
  • Use <table> with proper headers for tabular data

ARIA Attributes

Use ARIA attributes to enhance accessibility when HTML semantics aren't sufficient:

  • aria-label - Provide accessible names for icon-only buttons
  • aria-expanded - Indicate expanded/collapsed state
  • aria-current="page" - Mark current page in navigation
  • aria-describedby - Link to help text or descriptions
  • aria-hidden="true" - Hide decorative content from screen readers

Skip Links

Every page must include a skip link as the first focusable element:

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

Images

  • Informative images: Include descriptive alt text
  • Decorative images: Use empty alt="" or aria-hidden="true"
  • Complex images: Provide detailed descriptions in the surrounding text
  • Icons with text: Hide the icon, let text convey meaning
  • Icon-only buttons: Use aria-label to provide accessible name

Forms

  • Every input must have an associated <label>
  • Use fieldset and legend for grouped inputs
  • Provide clear error messages that identify the problem
  • Don't rely on colour alone to indicate errors
  • Allow sufficient time to complete forms

Keyboard Navigation

All functionality must be operable with a keyboard:

  • Tab: Move between interactive elements
  • Enter/Space: Activate buttons and links
  • Arrow keys: Navigate within components (menus, tabs)
  • Escape: Close modals and menus

Testing Checklist

  1. Navigate the entire page using only the keyboard
  2. Test with a screen reader (NVDA, VoiceOver, JAWS)
  3. Check colour contrast with an accessibility tool
  4. Zoom to 200% and check content is still usable
  5. Run automated checks (axe, WAVE, Lighthouse)
  6. Test with users who have disabilities

Resources