Section 7
Accessibility Standards
WCAG 2.1 AA compliance requirements and bilingual accessibility considerations.
Compliance Target: WCAG 2.1 Level AA
All Manateq digital products must meet WCAG 2.1 Level AA compliance. This ensures our digital experiences are accessible to users with disabilities, including those using assistive technologies.
WCAG Principles (POUR)
Perceivable
- Provide text alternatives for non-text content
- Provide captions and alternatives for multimedia
- Create content that can be presented in different ways
- Make it easier for users to see and hear content
Operable
- Make all functionality available from a keyboard
- Give users enough time to read and use content
- Do not design content that causes seizures
- Help users navigate and find content
Understandable
- Make text readable and understandable
- Make content appear and operate in predictable ways
- Help users avoid and correct mistakes
Robust
- Maximize compatibility with current and future tools
- Use valid, semantic HTML markup
- Ensure ARIA attributes are used correctly
Color Contrast Requirements
| Element Type | Minimum Ratio | WCAG Level |
|---|---|---|
| Normal Text (< 18px) | 4.5:1 | AA |
| Large Text (≥ 18px or 14px bold) | 3:1 | AA |
| UI Components & Graphics | 3:1 | AA |
| Enhanced (AAA) | 7:1 | AAA |
Manateq Color Contrast Verification
- • Manateq-Red (#862633) on White: 7.8:1 ✓ Passes AA & AAA
- • Manateq-Gold (#9A8555) on White: 4.6:1 ✓ Passes AA
- • Neutral-900 (#231F20) on White: 16.1:1 ✓ Passes AA & AAA
Keyboard Navigation
Required Behaviors
- • All interactive elements must be focusable
- • Focus order must follow logical reading order
- • Focus indicator must be clearly visible
- • No keyboard traps (except modals)
- • Skip links for main content
Focus Indicator Style
Default Focus Style
outline: 2px solid Manateq-Gold;
outline-offset: 2px;The Manateq-Gold (#9A8555) focus ring provides sufficient contrast and brand alignment.
Bilingual Accessibility (Arabic/English)
Language Declaration
Always declare the page language and mark language changes:
<html lang="en"><p lang="ar" dir="rtl">النص العربي</p>RTL Support
- • Use CSS logical properties (margin-inline-start, padding-inline-end)
- • Mirror layouts for RTL (navigation, icons, progress indicators)
- • Test with actual Arabic content, not placeholder text
Typography
- • Arabic text may require slightly larger font sizes for readability
- • Ensure line height accommodates Arabic diacritics
- • Test text expansion (Arabic text is often longer than English)
Accessibility Testing
Automated Testing
- • Lighthouse accessibility audit (target: 90+)
- • axe-core integration in CI/CD pipeline
- • WAVE browser extension for manual checks
- • Color contrast analyzers
Manual Testing
- • Keyboard-only navigation testing
- • Screen reader testing (NVDA, VoiceOver, TalkBack)
- • Zoom testing (up to 200%)
- • Reduced motion preference testing