Accessibility Statement
BiotechProject is deeply committed to ensuring that its website is accessible to all people, including users with visual, auditory, motor, cognitive, or neurodiverse disabilities. Accessibility is not just a technical requirement, but a foundational principle in our design, development, and scientific communication. We believe science should be open, inclusive, and usable by everyone — regardless of sensory, cognitive, or technological capabilities.
Conformance to Standards
The main pages of the BiotechProject website are conformant with the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, in accordance with Legislative Decree 10 August 2018, No. 106, which implements EU Directive (EU) 2016/2102.
Conformance has been verified through a combined approach:
- Technical audits using automated tools (axe, WAVE, Lighthouse)
- Manual testing with keyboard navigation, screen readers (NVDA, VoiceOver), and mobile devices
- Verification of user preference support (reduced motion, high contrast, zoom up to 200%)
- Validation of HTML and CSS code via W3C validators
Last verified on: .
Implemented Accessibility Features
The site was designed with an “accessibility by design” approach. Key features include:
- Full keyboard navigation: All functionality is accessible via keyboard. A dedicated button enables advanced visual highlighting for keyboard users.
- Advanced menu support: Dropdown menus are navigable via arrow keys, Home, End, and Esc, with proper focus management.
- Screen reader compatibility: Semantic HTML structure, correct use of
ARIA, and dynamic state handling. - Sufficient color contrast: All text meets the minimum 4.5:1 ratio (normal text) and 3:1 for UI elements, in compliance with WCAG 1.4.3 and 1.4.11.
- Resizable text: Content remains readable and functional at up to 200% zoom, without loss of information, overlapping, or horizontal scrolling, in accordance with WCAG 1.4.4 (Resize Text) and 1.4.10 (Reflow).
- Animation control: All non-essential animations (menus, buttons, visual effects) are automatically disabled if the user has set
prefers-reduced-motion: reduce. We also provide a manual option to disable them completely via the “Comfort” button, which also turns off decorative elements like background particles and the DNA animation. - High contrast support: The site respects the user preference
prefers-contrast: high. In such cases, a high-contrast theme (deep blue) is applied automatically to improve readability, in line with WCAG 1.4.12 (Text Spacing, Level AAA). - Dynamic color theme: A color selector in the Service menu allows users to choose among five color variants (Green, Cyan, Purple, Orange, Deep Blue), designed to support various visual conditions, including different types of color blindness.
- Persistence of user preferences: Theme choice and keyboard navigation state are saved in
localStorageand restored on subsequent visits, ensuring a consistent experience. - Accessible popups: Popup windows are opened centered, with proper focus management on open and close via the Esc key or an accessible close button (activated with the Enter key). Focus is trapped while the popup is active and restored correctly upon closing, conforming to WCAG 2.1 2.1.1 (Keyboard) and 2.4.3 (Focus Order). The close button is positioned in the top-right corner and is navigable with Tab, ensuring a predictable and accessible experience. The popup container includes
role="dialog"andaria-modal="true"to ensure proper perception by assistive technologies. - Safe lazy loading: Images are loaded lazily via
IntersectionObserver, with fallback for older browsers. Alternative text (alt) is always present before loading. - Accessible clocks and counters: The live clock and countdown are updated dynamically and marked with
aria-live="polite"to announce changes to screen readers. - Resilient design: No external framework dependencies. Vanilla JavaScript, modern yet backward-compatible CSS, and semantic HTML ensure long-term robustness, performance, and accessibility.
- Simplified content pages: For each main page, a simplified version of the content is available, written in plain language, with short sentences and visual support. This feature supports users with dyslexia, cognitive difficulties, or varying literacy levels, in compliance with WCAG 3.1.5 (Reading Level, Level AA) and as a step toward Level AAA.
- Accessibility of visual data: Charts and progress circles are accompanied by hidden tables (
visually-hidden) and structured alternative text to ensure data is accessible to screen readers and assistive technologies. - Data export: Performance and accessibility data can be exported in JSON or CSV format, promoting transparency and independent audits.
- Automatic visual comfort (QRedshift): The site automatically applies a warmer color temperature filter in the evening (based on local time) to reduce eye strain and support circadian rhythms. This feature can be manually disabled at any time. In contexts without an integrated menu, a focusable icon in the top-right corner serves as a fallback control, with full keyboard and screen reader support.
- Support for pronunciation and comprehension: The
<ruby>tag is used to provide contextual definitions for complex scientific terms (e.g., mitochondria, epigenetics), improving understanding for students, users with cognitive difficulties, and non-experts. This implementation conforms to WCAG 3.1.3 (Unusual Words) and 3.1.5 (Reading Level). - Accessible video: Videos do not autoplay and are manually activated via a keyboard-navigable preview. They include custom controls with
aria-label, a textual description of the scene, and support for Enter/Space to activate.
Technologies Used
The site is built with modern, lightweight, and accessible technologies:
- HTML5 with semantic structure
- CSS3 with Custom Properties and media queries for user preferences
- Vanilla JavaScript (no frameworks, maximum accessibility and performance)
- ARIA 1.2 for dynamic interactions and state management
- Media queries:
prefers-reduced-motion,prefers-contrast - Persistence:
localStoragefor theme and navigation state - Optimizations:
IntersectionObserver(lazy loading),MutationObserver(dynamic integration) - Images: AVIF and WebP for performance and quality
Ongoing Conformance Toward Level AAA
We are actively implementing additional features to move closer to WCAG 2.1 Level AAA:
- Pronunciation of technical terms: Expanding the use of the
<ruby>tag to include pronunciation guides (e.g., syllabification or IPA) for words like "CRISPR", "epigenetics", "plasmid". - Explanation of acronyms: Progressive implementation of
<abbr title="...">to expand abbreviations such as "PCR", "ATP", "DNA" on first use in text. - Descriptive link text: Continuous verification that all links have meaningful text even out of context (WCAG 2.4.9 – Link Purpose).
- Migration from popups to accessible modals: Progressive replacement of
window.open()windows with internal modals featuringrole="dialog", focus trapping, full keyboard navigation, and Esc support.
Partial Non-Conformities or Exceptions
Despite our strong commitment to inclusivity, some parts of the site do not fully satisfy all WCAG 2.1 criteria, due to technical, contextual, or backward-compatibility reasons. These cases are documented and actively being improved:
- Use of
role="menu"in dropdown navigation: Currently, dropdown menus userole="menu"androle="menuitem"to ensure advanced keyboard behavior (arrow keys, Home/End, Esc). However, this pattern is technically intended for application-like menu bars. We are evaluating a transition to a simpler semantic model — based on<button>and<a>— to improve screen reader compatibility while maintaining full keyboard functionality. - Popups based on
window.open(): Some links open external windows to ensure backward compatibility with legacy client systems. We are actively migrating to accessible internal modals for a more inclusive and controlled experience.
Feedback and Reporting
Your feedback is essential to help us improve the accessibility of our project. If you encounter barriers in accessing content, experience difficulties using any functionality, or have suggestions to make the site more inclusive, we invite you to contact us.
Date of Last Review
Future Updates
This statement will be updated regularly to reflect implemented improvements. Upcoming updates include:
- Complete migration to internal modals instead of
window.open(). - Evaluation of a simpler ARIA pattern for menus to better align with screen reader expectations.
- Optimization of contrast in night mode (QRedshift) to ensure a minimum 4.5:1 ratio even with the filter active.
- Integration of full transcripts and captions for all future videos.
“BiotechProject is not just science: it’s inclusion. Every line of code is designed to be accessible, resilient, and human.”
BiotechProject. A project for a more inclusive web.