A site accessible to all

Inclusive content from vision to solutions to products

CITISLAB’s website was created with the goals of. Inclusion, that is, to enable all who visit it, even in their diversity, to be able to navigate and consult it, and of Accessibility, that is, to break down some visual barriers and allow, for example, the reading of a good part of the images, indicating for each of them the ALT, that is, a brief description of its contents proposed by the Screen Reader.
Starting with the colors, the color choice that characterizes the entire site followed the needs and visibility tests: in addition to white, BLUE (#2621F), which is a cool color, and YELLOW (#FBBA1F), a warm color, were adopted. The palette was limited to these colors for simplification of stimuli and orderly sequencing of fields, so that the contrast ensures clear and immediate perception, even for those with visual difficulties.
All fonts are clear and legible, chosen from those without graces, in accordance with typographic accessibility guidelines. The fonts chosen are. Roboto and Open Sans.
The layout is simple and clean, and uses text/background alternation to keep the reader interested and the viewer stimulated.
Through the brand design, CITISLAB has placed accessibility and multisensory communication: CITIS is written in linear, graceless characters, a choice made to ensure maximum readability and comply with visual accessibility parameters, while the word laboratory, abbreviated to LAB, is expressed in both traditional characters and the Braille alphabet.

Site structure and navigability

To achieve the result of Accessibility, we have adopted a structured and rigorous approach in line with current standards:

  • Reference Guidelines – The project was developed according to WCAG 2.1 level AA and AgID Guidelines 2022, satisfying Legislative Decree 106/2018 and anticipating the future European Accessibility Act (2019/882).

  • Semantic structure and ARIA regions – Titles, paragraphs and sections are organized hierarchically; there are quick jump links (“jump to content”) and ARIA regions that guide keyboard navigation and screen readers.

  • Readable color contrast and typography – Each text/background pairing adheres to a minimum 4.5 : 1 ratio (7 : 1 for text under 18 px); the sans serif fonts chosen ensure clarity even on low-resolution screens.

  • Full text alternatives – Images, icons and buttons have text alternatives (alt, aria-label, aria-describedby); transcripts or subtitles are available for audio and video.

  • Focus management and keyboard rehearsal-The tabbing order follows visual logic, focus indicators remain obvious at all times, and there are no situations of keyboard blocking.

  • Testing with real users-The site was tested with NVDA and JAWS screen readers by UICI members, allowing us to identify and correct critical issues that automated checks alone would not have revealed.

The combination of these activities ensures perceptible, operable and understandable navigation for all people, making the site fully accessible and in line with the evolution of European legislation.

During the different phases of Web site construction and related accessibility testing, we were followed and assisted by the Computer Service of the Italian Union of the Blind and Visually Impaired – ETS – APS of Brescia, whom we thank for their competence and helpfulness. Also thanks to the cooperation of the UICI, reading tests were carried out by members who are blind and by members who are visually impaired due to different pathologies.

As a result of all these attentions, the site is therefore easily usable by anyone.

Powered by Luca Sperlari