Moko Consulting

Open-source software for Joomla, Gitea, and web platforms. Home of MokoSuite, MokoGitea, and MokoCLI.

Tennessee
https://mokoconsulting.tech
Repositories
57
 Projects Packages Code Wiki Members
1
Repositories
57
 Projects Packages Code Wiki Members
1
standards/accessibility

Accessibility Standards

All MokoConsulting user-facing code must meet WCAG 2.1 Level AA compliance.

Core Principles

  • Perceivable — content available to all senses (sight, hearing, touch)
  • Operable — all functionality works via keyboard and assistive tech
  • Understandable — content and UI are clear and predictable
  • Robust — works across browsers and assistive technologies

Semantic HTML

Use correct HTML elements for their purpose:

<!-- CORRECT -->
<nav aria-label="Main navigation">
  <ul><li><a href="/backup">Backup</a></li></ul>
</nav>
<main id="content">
  <h1>Dashboard</h1>
  <section aria-labelledby="status-heading">
    <h2 id="status-heading">Backup Status</h2>
  </section>
</main>
<button type="button" onclick="startBackup()">Start Backup</button>

<!-- WRONG -->
<div class="nav">...</div>
<div class="main">
  <div class="title">Dashboard</div>
  <span onclick="startBackup()">Start Backup</span>
</div>

Keyboard Navigation

  • All interactive elements must be reachable via Tab key
  • Visible focus indicators on all focusable elements (never outline: none without a replacement)
  • Skip-to-content link as first focusable element
  • Logical tab order matching visual layout
  • Escape key closes modals and dropdowns
  • Arrow keys navigate within composite widgets (menus, tabs, grids)
:focus-visible {
  outline: 2px solid var(--moko-primary);
  outline-offset: 2px;
}

Color and Contrast

  • Text contrast ratio: 4.5:1 minimum (normal text), 3:1 for large text
  • Never convey information through color alone — use icons, patterns, or text
  • All UI must work in both light and dark mode
  • Test with color blindness simulators

Forms

  • Every input must have an associated <label> element
  • Error messages linked with aria-describedby
  • Required fields marked with aria-required="true" and visible indicator
  • Form validation errors announced to screen readers
<label for="backup-title">Profile Name</label>
<input type="text" id="backup-title" name="title"
       aria-required="true"
       aria-describedby="title-error">
<p id="title-error" class="error" role="alert">
  Profile name is required.
</p>

Images and Media

  • All images must have alt attributes
  • Decorative images: alt="" with role="presentation"
  • Complex images (charts, diagrams): provide text description
  • Video content: provide captions or transcript

ARIA Usage

  • Use ARIA only when native HTML semantics are insufficient
  • Never use aria-hidden="true" on focusable elements
  • Live regions for dynamic content: aria-live="polite" for updates, assertive for errors
  • Landmark roles: navigation, main, complementary, contentinfo

Testing

  • Keyboard test: navigate entire UI with Tab, Enter, Escape, Arrow keys
  • Screen reader test: verify with NVDA (Windows) or VoiceOver (Mac)
  • Contrast check: use browser DevTools or axe-core
  • Automated: integrate axe-core or pa11y into CI pipeline
Pages