Privacy and Terms

How this site was built

The site was developed with open web technologies — PHP, HTML, CSS and JavaScript, with no frameworks — following Google’s Material Design 3 design system as its basis for structure and components, with its own typography in Atkinson Hyperlegible, a typeface designed for maximum legibility for people with low vision. There is no database: all the content lives in version-controlled text files, kept separate from the presentation. The site works fully without JavaScript; the scripts that exist are progressive enhancements, such as the accessibility features panel and the copy buttons.

The implementation was carried out with the support of Claude Code, Anthropic’s AI-assisted programming tool, under human direction and review: the code goes through technical review by the developer Matheus Vinicius Lançoni da Silva, and the decisions on design, user experience and content are made by Thalia Rauane de Oliveira, the designer responsible for the project, with supervision from Marina Ramos Pezzini.

It is worth recording what the artificial intelligence did not do: the 12 recommendations are the outcome of academic research conducted by people — literature review, analysis, synthesis and verification with 11 specialists — completed before this site was built. AI was an instrument of implementation; the authorship of the research, the editorial responsibility and the accessibility verification are human.

Conformance level

This site aims for conformance with the Web Content Accessibility Guidelines – WCAG 2.2, taking level AA as an absolute floor and level AAA as the target, especially in the criteria for contrast (1.4.6), visual presentation (1.4.8) and keyboard navigation.

Accessibility decisions

• Strict semantic HTML: landmarks, a real heading hierarchy, true lists and minimal ARIA — only where native HTML does not suffice.
• Full keyboard navigation, with a visible focus indicator, skip links ("skip to content") and a logical tab order.
• Colour contrast targeting AAA (7:1 for body text), checked pair by pair across the six modes available: light, automatic dark, manual dark, high contrast, yellow on black and black on yellow. The only exception is the link colour in the light theme, which reaches level AA (4.8:1 on the cards) and is kept because it is a brand colour — in that mode and all others, links in running text are always underlined, so identifying them never depends on colour (WCAG 1.4.1).
• Respect for operating system preferences: prefers-reduced-motion (animations switched off or pausable, with a static alternative) and prefers-color-scheme (automatic light or dark theme).
• An accessibility features panel of our own — text size, line spacing, letter spacing, bolder text, reading mode, reading guide (which follows both the mouse and the keyboard focus), link underlining, enlarged cursor, hiding images, pausing animations, themes and colour modes — opened from the fixed button on the right-hand edge, stored in the browser and applied without reloading the page. No third-party accessibility overlay or widget is used.
• Line spacing and letter spacing are separate controls, because they are distinct needs: someone who needs airier lines does not always want looser letters. The values adopted are the minimums required by WCAG 1.4.12 — line height 1.9; 0.12em between letters; 0.16em between words.
• Reading mode: presents the content alone, in a single column of about 55 characters per line, with no navigation rail, tabs or decorative elements around it. Previous/Next navigation remains, so that nobody is stranded on a page with no way forward.
• Full operation without JavaScript; the scripts are progressive enhancements only.
• Page zoom up to 200% with no loss of content and no horizontal scrolling (WCAG 1.4.10 — reflow). The same was checked for the panel’s combinations: the four text sizes together with line spacing, letter spacing and bolder text, on screens from 400 to 1280 pixels wide.
• At the two largest text sizes, the desktop navigation rail gives way to the top bar with a drawer menu. The rail and its panel take a width that scales with the text size; keeping it at those steps would consume more than half of an ordinary screen and leave the reading column too narrow.
• Touch targets of at least 44×44 pixels.
• Automatic translation into Brazilian Sign Language through VLibras, the free official tool of the Brazilian federal government — on the Portuguese pages (see "Known limitations").
• The site in three languages (Portuguese, English and Spanish), with the correct lang attribute on each page and the equivalent versions declared in hreflang. The language switch is a link, not a button: it works without JavaScript, and its accessible name states both the current language and the destination ("Current language: Portuguese. Switch to English"), because the "PT" abbreviation drawn on the button conveys neither on its own. Each language name carries its own lang, so that a screen reader pronounces it with the right phonetics.
• Careful alternative text on every content image; the visual examples carry a visible text description, which teaches twice: through the visual and through the description.

The relationship between this site and Recommendation 09

Recommendation 09 (Design of the Resource) was formulated for teaching materials — print and presentations. This site, being a web product, applies its principles (sans-serif typography, clear hierarchy, high contrast, generous spacing) through the standards proper to the digital medium: WCAG 2.2 and Material Design 3.

Assistive technology and testing

The site is developed and checked continuously with: keyboard-only navigation; the NVDA screen reader on Windows; browser zoom at 200%; and simulation of the operating system’s reduced-motion and colour-scheme preferences. The results of each round of checks update this statement.

Known limitations

• Automated audits (Lighthouse) flag insufficient contrast in the "don’t do this" simulations in the examples. The finding is correct and the low contrast is deliberate: those simulations are the very content that demonstrates the barrier being described — fixing them would destroy what they teach. They are not read by assistive technology (they are marked as decorative) and what they demonstrate is described in visible text beside them, so no information depends on seeing them. Outside those examples, the audits record no contrast failures.
• There is no sign language translation on the English and Spanish versions of the site. VLibras signs Brazilian Sign Language from Portuguese text; triggered on an English page, it would sign word by word through the wrong engine, producing an incorrect translation — worse, for anyone who relies on it, than a declared absence. That is why the Libras button exists only on /pt. A survey carried out on 26/07/2026 found no free, official equivalent of VLibras for American Sign Language (ASL) or Spanish Sign Language (LSE): the nearest commercial alternative (Hand Talk) is paid, announces ASL as a future feature, and does not offer LSE. The absence is recorded here as a declared gap, not as a solved problem.
• VLibras is an external service of the Brazilian federal government: the widget and its translations are not under this site’s control, and their quality may vary.
• The files for download (accessible PDF, EPUB, audio and the braille-ready edition) have not been produced yet — the Materials page states the status of each one transparently.
• The English and Spanish versions are faithful working translations of a text written in Portuguese, produced for this site and not yet reviewed by an external specialist translator. The Portuguese remains the canonical version, and each recommendation page in the other languages says so and links to it.
• Checks with VoiceOver (macOS and iOS) and TalkBack (Android) are planned but have not yet been carried out systematically.

Found a barrier?

Accessibility is a continuous process. If you come across any barrier on this site — contrast, navigation, screen reader, language — report it through the feedback form, describing the page and the problem. Every report is checked and answered.

Report an accessibility barrier