Accessibility Report
- Analysis date
- January 27, 2026
- Reference standard
- WCAG 2.1 (Levels A, AA)
- Regulation
- EU Directive 2016/2102, EN 301 549
- Method
- Direct source code analysis
1. Tools and Methodology
| Tool | Aspects verified |
|---|---|
| Source code analysis | JSX/TSX structure, ARIA attributes, HTML semantics |
| Grep pattern matching | Accessibility attribute search (aria-*, role, alt) |
| CSS verification | Focus states, skip links, sr-only |
| Build verification | Error-free compilation |
Components analyzed: 47 files including layouts, components, pages and styles
2. WCAG 2.1 Compliance by Criterion
2.1 Principle 1 - Perceivable
| Criterion | Description | Status | Notes |
|---|---|---|---|
| 1.1.1 | Non-text content | Compliant | Alt text on all images |
| 1.3.1 | Info and relationships | Compliant | Semantic landmarks, structured headings |
| 1.3.2 | Meaningful sequence | Compliant | Logical DOM order |
| 1.3.3 | Sensory characteristics | Compliant | No visual-only instructions |
| 1.4.1 | Use of color | Compliant | Information not conveyed by color alone |
| 1.4.3 | Contrast minimum | To verify | Requires visual testing |
| 1.4.4 | Resize text | Compliant | Responsive layout |
| 1.4.10 | Reflow | Compliant | Tailwind breakpoints |
| 1.4.12 | Text spacing | Compliant | CSS does not limit spacing |
2.2 Principle 2 - Operable
| Criterion | Description | Status | Notes |
|---|---|---|---|
| 2.1.1 | Keyboard | Compliant | All elements reachable |
| 2.1.2 | No keyboard trap | Compliant | No focus traps |
| 2.2.2 | Pause, stop, hide | Compliant | Pause button on sliders |
| 2.4.1 | Bypass blocks | Compliant | Skip links implemented |
| 2.4.2 | Page titled | Compliant | Meta title on all pages |
| 2.4.3 | Focus order | Compliant | Logical DOM order |
| 2.4.4 | Link purpose (in context) | Compliant | Descriptive aria-labels |
| 2.4.5 | Multiple ways | Compliant | Menu + breadcrumb |
| 2.4.6 | Headings and labels | Compliant | Meaningful headings |
| 2.4.7 | Focus visible | Compliant | Global :focus-visible |
2.3 Principle 3 - Understandable
| Criterion | Description | Status | Notes |
|---|---|---|---|
| 3.1.1 | Language of page | Compliant | lang="it" / lang="en" |
| 3.1.2 | Language of parts | Compliant | Content consistent per language |
| 3.2.1 | On focus | Compliant | No context changes on focus |
| 3.2.2 | On input | Compliant | No automatic context changes |
| 3.2.3 | Consistent navigation | Compliant | Consistent Header/Footer |
| 3.3.1 | Error identification | Compliant | role="alert" on errors |
| 3.3.2 | Labels or instructions | Compliant | Labels on all forms |
2.4 Principle 4 - Robust
| Criterion | Description | Status | Notes |
|---|---|---|---|
| 4.1.1 | Parsing | Compliant | Valid JSX, build OK |
| 4.1.2 | Name, role, value | Compliant | ARIA correctly used |
3. Detailed Component Analysis
3.1 Main Layout
layout.tsx + Wrapper.tsx
| Element | Implementation | Status |
|---|---|---|
| <html lang> | lang="it" / lang="en" | Compliant |
| Skip links | 2 links (main-content, footer) | Compliant |
| <main id="main-content"> | Present in Wrapper.tsx | Compliant |
| <header> | Header.tsx component | Compliant |
| <footer id="footer"> | Footer.tsx component | Compliant |
3.2 Header and Navigation
| Element | Implementation | Status |
|---|---|---|
| Semantic <header> | Present | Compliant |
| <nav aria-label> | "Main menu" | Compliant |
| Logo with alt | "Oriente Occidente Logo" | Compliant |
| Mobile menu aria-label | translate("openMenu") | Compliant |
| Disclosure aria-expanded | Present | Compliant |
| Disclosure aria-controls | Panel connection | Compliant |
3.3 Newsletter
| Element | Implementation | Status |
|---|---|---|
| Associated <label> | htmlFor="mce-EMAIL" | Compliant |
| Visible label | Persistent label above input | Compliant |
| aria-required | "true" on email input | Compliant |
| role="alert" errors | Present | Compliant |
| role="status" success | Present | Compliant |
3.4 Sliders and Carousels
| Component | A11y Module | Pause/Play | aria-label | Status |
|---|---|---|---|---|
| HeroSlider.js | Active | Present | Dynamic | Compliant |
| Gallery.js | Active | N/A | prev/next | Compliant |
| GalleryStandard.js | Active | N/A | Configured | Compliant |
| GalleryHome.js | Active | N/A | Configured | Compliant |
| GalleryPreview.js | Active | N/A | Configured | Compliant |
3.5 Registration Form
| Element | Implementation | Status |
|---|---|---|
| Label for each field | htmlFor/id connected | Compliant |
| aria-required | On required fields | Compliant |
| Error messages | role="alert" + aria-live | Compliant |
4. CSS and Accessibility Styles
4.1 Focus Visible (WCAG 2.4.7)
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid black;
outline-offset: 2px;
}
/* Contrast on dark backgrounds */
.bg-black a:focus-visible,
.bg-black button:focus-visible {
outline-color: white;
}Status: Compliant
4.2 Skip Links (WCAG 2.4.1)
.skip-link {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-100%);
background: black;
color: white;
padding: 8px 12px;
z-index: 50;
}
.skip-link:focus {
transform: translateX(-50%) translateY(0);
}Status: Compliant - Hidden until focused
5. Compliance Summary
Level A (30 criteria)
Level AA (20 criteria)
Items Requiring Manual Verification
| Criterion | Description | Reason |
|---|---|---|
| 1.4.3 | Contrast minimum | Requires visual testing with tools |
| 1.4.6 | Enhanced contrast (AAA) | Requires visual testing |
6. Strengths
Complete Skip Links System
- Two working skip links
- Appropriate CSS styles with focus animation
Fully Accessible Sliders
- Swiper A11y module on all carousels
- Pause/play button with ARIA states
- Screen reader messages in Italian
Perfectly Accessible Forms
- Labels associated with each field
- aria-required on mandatory fields
- Error handling with role="alert"
Robust Focus Management
- Global :focus-visible for all elements
- Adaptive contrast for light/dark backgrounds
Accessible Navigation
- aria-expanded on expandable menus
- aria-controls for logical connection
- Descriptive aria-labels
Secure External Links
- rel="noopener noreferrer" on all target="_blank"
- External link indication in aria-labels
7. Detailed Assessment
| Aspect | Score | Evaluation |
|---|---|---|
| Semantic structure | 10/10 | Excellent |
| Navigation | 10/10 | Excellent |
| Forms | 10/10 | Excellent |
| Images | 9/10 | Very Good |
| Sliders/Carousels | 10/10 | Excellent |
| Focus management | 10/10 | Excellent |
| ARIA implementation | 10/10 | Excellent |
8. Future Recommendations
Low Priority (Optional Improvements)
- Color contrast testing with axe DevTools or WAVE
- Testing with real screen readers (NVDA, VoiceOver, JAWS)
9. axe DevTools Testing (February 10, 2026)
In addition to the source code analysis, the website was tested with axe DevTools (version 4.120.1, axe-core engine 4.11.0), a professional accessibility testing tool that performs automated and guided tests directly on the published site, according to the WCAG 2.1 AA standard.
9.1 Summary by tested area
| Tested area | Critical issues | Serious issues | Result |
|---|---|---|---|
| Tables | 0 | 0 | Compliant |
| Keyboard navigation | 0 | 0 | Compliant |
| Modal windows | 0 | 0 | Compliant |
| Interactive elements | 0 | 0 | Compliant |
| Page structure | 0 | 0 | Compliant |
| Images | 0 | 0 | Compliant |
| Forms | 0 | 0 | Compliant |
| Total | 0 | 0 | 0 issues |
9.2 Issues found and resolved
The issues identified during the February 10, 2026 test were all resolved with corrective actions on February 11, 2026.
Focus indicator in footer (WCAG 2.4.7)
Original issue: footer links did not show a visible focus indicator when navigating with the keyboard.
Cause: a CSS rule applied a white outline to footer links, making it invisible on the white background.
Fix: removed the CSS rule that forced white outlines on footer links. All links now inherit the default black outline, ensuring visibility on light backgrounds.
Visible label in newsletter form (WCAG 3.3.2)
Original issue: a newsletter form field did not have a visible label.
Fix: added a label with htmlFor attribute associated to the field, visually hidden but accessible to assistive technologies.
Persistent label on email field (WCAG 3.3.2)
Original issue: the newsletter email field used the placeholder as the only visual label, which disappeared when typing.
Fix: the email field label is now always visible above the input with clear styling (bold text), ensuring a persistent indication of the field's purpose.
9.3 Test information
- Tool
- axe DevTools (Chrome extension) v4.120.1
- Analysis engine
- axe-core v4.11.0
- Test date
- February 10, 2026
- Standard applied
- WCAG 2.1 AA
- Page tested
- Homepage (www.orienteoccidente.it)
- Test type
- Automated + guided manual (IGT)
10. Compliance Declaration
The Oriente Occidente website is compliant with WCAG 2.1 Level AA guidelines based on source code analysis.
Excellence points:
- Sliders with pause/play controls
- Fully accessible forms
- Working skip links
- Visible focus on all elements
- Appropriate use of ARIA
Recommended verifications:
- Color contrast testing
- Screen reader testing
- Keyboard-only navigation testing
11. Feedback and Reports
To report accessibility issues or request information in alternative formats, please contact us through the following channels:
- Email: info@orienteoccidente.it
- Phone: +39 0464 431660