Accessibility Guidelines

Version 1.0 — October 2025

This document outlines the accessibility standards and implementation guidelines for Conformo, ensuring compliance with WCAG 2.1 Level AA standards.

Accessibility Commitment
WCAG 2.1 Compliance
Perceivable
Operable
Understandable
Robust
Testing & Validation
Known Issues
Accessibility Statement

Accessibility Commitment

Conformo is committed to ensuring digital accessibility for people with disabilities. We continually improve the user experience for everyone and apply relevant accessibility standards.

Our Goal: WCAG 2.1 Level AA compliance across all features and pages.

Target Audience: All users, including those who:

Use screen readers
Navigate by keyboard only
Have visual impairments
Have motor disabilities
Have cognitive disabilities
Use assistive technologies

WCAG 2.1 Compliance

Conformance Level

Target: WCAG 2.1 Level AA

Current Status: In Progress

Level A: Partially conformant
Level AA: Partially conformant
Level AAA: Not targeted (exceeds requirements)

Standards Referenced

WCAG 2.1
ARIA Authoring Practices
Italian Accessibility Law (Legge Stanca)

Perceivable

Information and user interface components must be presentable to users in ways they can perceive.

1.1 Text Alternatives

Guideline: Provide text alternatives for non-text content.

Implementation:

All images have descriptive alt text
Decorative images use empty alt=””
Icons include aria-label or sr-only text
Complex graphics have extended descriptions
Logo has appropriate alt text

Code Example:

<!-- Good: Informative image -->
<img src="chart.png" alt="Grafico conformità GDPR mostrante 85% completamento" />

<!-- Good: Decorative image -->
<img src="border.png" alt="" role="presentation" />

<!-- Good: Icon button -->
<button aria-label="Chiudi finestra">
  <svg aria-hidden="true">...</svg>
</button>

1.2 Time-based Media

Guideline: Provide alternatives for time-based media.

Status: Not applicable (no audio/video content currently)

1.3 Adaptable

Guideline: Create content that can be presented in different ways without losing information.

Implementation:

Semantic HTML elements used (header, nav, main, article, aside, footer)
Proper heading hierarchy (h1 → h2 → h3)
Lists use ul/ol elements
Forms use label elements
Tables have th elements with scope
Reading order matches visual order

Code Example:

<!-- Good: Semantic structure -->
<main>
  <article>
    <h1>Dashboard Conformità</h1>
    <section>
      <h2>Stato Generale</h2>
      <p>...</p>
    </section>
  </article>
</main>

<!-- Good: Form labels -->
<label for="email">Email</label>
<input id="email" type="email" name="email" />

1.4 Distinguishable

Guideline: Make it easier for users to see and hear content.

Implementation:

Color Contrast: | Element | Colors | Ratio | Status | |———|——–|——-|——–| | Body text | #4A5568 on #FFFFFF | 9.74:1 | ✅ AA (4.5:1) | | Primary button | #FFFFFF on #2F54A6 | 7.08:1 | ✅ AA (4.5:1) | | Secondary button | #FFFFFF on #1B9F7E | 4.54:1 | ✅ AA (4.5:1) | | Accent button | #FFFFFF on #F68C3B | 3.22:1 | ⚠️ Below AA | | Link text | #2F54A6 on #FFFFFF | 7.08:1 | ✅ AA (4.5:1) |

Additional Requirements:

Color is not the only visual means of conveying information
Text can be resized to 200% without loss of content
No images of text (except logos)
Sufficient color contrast ratios (most elements)
Reflow content for responsive design (no horizontal scrolling at 320px)

Action Items:

⚠️ Review accent orange (#F68C3B) usage - may need darker shade for text
Ensure interactive states don’t rely solely on color
Test zoom to 200% on all pages

Operable

User interface components and navigation must be operable.

2.1 Keyboard Accessible

Guideline: Make all functionality available from a keyboard.

Implementation:

All interactive elements keyboard accessible
Tab order is logical and intuitive
No keyboard traps
Skip navigation link available
Focus visible on all interactive elements
Keyboard shortcuts documented

Code Example:

<!-- Good: Skip to main content -->
<a href="#main-content" class="skip-link">Salta al contenuto principale</a>

<!-- Good: Custom component with keyboard support -->
<div role="button" tabindex="0" 
     onKeyPress={(e) => e.key === 'Enter' && handleClick()}>
  Azione
</div>

CSS for Skip Link:

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

2.2 Enough Time

Guideline: Provide users enough time to read and use content.

Implementation:

Session timeout warnings implemented
Users can extend sessions
No time limits on reading content
Auto-save for form data (where applicable)

2.3 Seizures and Physical Reactions

Guideline: Do not design content that could cause seizures or physical reactions.

Implementation:

No flashing content
No elements that flash more than 3 times per second
Motion respects prefers-reduced-motion

Code Example:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

2.4 Navigable

Guideline: Provide ways to help users navigate, find content, and determine where they are.

Implementation:

Skip navigation links
Page titles describe topic/purpose
Focus order preserves meaning
Link purpose clear from text
Multiple navigation methods
Headings and labels describe topic
Keyboard focus is visible
Breadcrumb navigation (where applicable)

Requirements:

Each page has unique, descriptive title
Heading hierarchy is logical (no skipped levels)
Focus indicator has minimum 3px outline
Links are descriptive (no “click here”)

2.5 Input Modalities

Guideline: Make it easier for users to operate functionality through various inputs.

Implementation:

Touch targets minimum 44×44px
Click/tap actions don’t require specific gestures
Label in Name matches accessible name
Motion actuation has alternative

Understandable

Information and the operation of user interface must be understandable.

3.1 Readable

Guideline: Make text content readable and understandable.

Implementation:

Language declared: <html lang="it">
Language changes marked: <span lang="en">Privacy Policy</span>
Text in plain Italian (appropriate for SME audience)
Glossary for technical terms

3.2 Predictable

Guideline: Make web pages appear and operate in predictable ways.

Implementation:

Navigation consistent across pages
Components behave consistently
Context changes announced
No automatic form submission on focus
Focus changes are intentional

3.3 Input Assistance

Guideline: Help users avoid and correct mistakes.

Implementation:

Error identification for form fields
Labels and instructions provided
Error suggestions provided
Error prevention for critical actions (confirmation dialogs)
Inline validation with helpful messages

Code Example:

{errors.email && (
  <span className="error" role="alert" id="email-error">
    {errors.email.message}
  </span>
)}

<input
  id="email"
  type="email"
  aria-describedby="email-error"
  aria-invalid={!!errors.email}
/>

Robust

Content must be robust enough to be interpreted by a wide variety of user agents, including assistive technologies.

4.1 Compatible

Guideline: Maximize compatibility with current and future user agents.

Implementation:

Valid HTML (no parsing errors)
ARIA attributes used correctly
Name, Role, Value for custom components
Status messages use appropriate ARIA roles

ARIA Best Practices:

Use semantic HTML first
ARIA only when semantic HTML insufficient
Test with screen readers (NVDA, JAWS, VoiceOver)
Validate with automated tools

Code Example:

<!-- Good: Native button -->
<button type="submit">Invia</button>

<!-- Acceptable: Custom component with ARIA -->
<div 
  role="button"
  tabindex="0"
  aria-pressed="false"
  onClick={handleClick}
  onKeyPress={(e) => e.key === 'Enter' && handleClick()}
>
  Attiva/Disattiva
</div>

<!-- Good: Status message -->
<div role="status" aria-live="polite">
  Salvataggio completato
</div>

Testing & Validation

Automated Testing Tools

Recommended tools:

axe DevTools: Browser extension for accessibility testing
WAVE: Web accessibility evaluation tool
Lighthouse: Chrome DevTools accessibility audit
Pa11y: Automated accessibility testing CLI

Manual Testing

Keyboard Navigation:

Tab through entire page
Verify all interactive elements accessible
Check focus indicators visible
Ensure logical tab order
Test form submission via Enter key

Screen Reader Testing:

NVDA (Windows, free): Primary testing tool
JAWS (Windows, commercial): Secondary testing
VoiceOver (macOS/iOS, built-in): Mobile testing
TalkBack (Android, built-in): Mobile testing

Visual Testing:

Zoom to 200% - verify no content loss
High contrast mode - verify usability
Color blindness simulation
Text spacing adjustment
Responsive design (320px width minimum)

Test Checklist

Known Issues

Current Accessibility Gaps

Accent Orange Contrast (Priority: High)
- Issue: Accent orange #F68C3B has 3.22:1 contrast on white
- Required: 4.5:1 for AA compliance
- Solution: Use darker shade or larger/bold text only
Skip Navigation Link (Priority: High)
- Issue: No skip-to-content link on pages
- Impact: Keyboard users must tab through navigation
- Solution: Add skip link to all pages
ARIA Labels (Priority: Medium)
- Issue: Some icons lack proper labels
- Impact: Screen readers can’t announce icon purpose
- Solution: Add aria-label to all icon buttons
Focus Indicators (Priority: Medium)
- Issue: Some custom components lack visible focus
- Impact: Keyboard users can’t see current focus
- Solution: Ensure 3px outline on all interactive elements
Heading Hierarchy (Priority: Medium)
- Issue: Some pages skip heading levels
- Impact: Screen reader users may be confused
- Solution: Audit and fix heading structure
Motion Animations (Priority: Low)
- Issue: Animations don’t respect prefers-reduced-motion
- Impact: Users with vestibular disorders affected
- Solution: Add prefers-reduced-motion support

Remediation Timeline

High Priority: Within 30 days
Medium Priority: Within 60 days
Low Priority: Within 90 days

Accessibility Statement

Conformance Status

Partially Conformant: The website is partially conformant with WCAG 2.1 Level AA. Some parts of the content do not fully conform to the accessibility standard.

Feedback

We welcome your feedback on the accessibility of Conformo. Please let us know if you encounter accessibility barriers:

Email: accessibility@conformo.ai (to be configured)
GitHub: Report accessibility issue

We aim to respond to accessibility feedback within 5 business days.

Compatibility

Conformo is designed to be compatible with:

Modern browsers (Chrome, Firefox, Safari, Edge)
Screen readers (NVDA, JAWS, VoiceOver)
Keyboard navigation
Mobile devices (iOS, Android)
Assistive technologies

Technical Specifications

HTML5
CSS3
JavaScript (ES6+)
React 18
ARIA 1.2

Assessment Approach

Conformo’s accessibility was assessed using:

Self-evaluation
Automated testing tools
Manual keyboard testing
Screen reader testing (NVDA)
User feedback

Date of Assessment: October 2025

References

Last Updated: October 2025
Version: 1.0
Next Review: January 2026
Maintained by: Conformo Accessibility Team

Accessibility Guidelines

Table of Contents

Accessibility Commitment

WCAG 2.1 Compliance

Conformance Level

Standards Referenced

Perceivable

1.1 Text Alternatives

1.2 Time-based Media

1.3 Adaptable

1.4 Distinguishable

Operable

2.1 Keyboard Accessible

2.2 Enough Time

2.3 Seizures and Physical Reactions

2.4 Navigable

2.5 Input Modalities

Understandable

3.1 Readable

3.2 Predictable

3.3 Input Assistance

Robust

4.1 Compatible

Testing & Validation

Automated Testing Tools

Manual Testing

Test Checklist

Known Issues

Current Accessibility Gaps

Remediation Timeline

Accessibility Statement

Conformance Status

Feedback

Compatibility

Technical Specifications

Assessment Approach

References