Accessibility
A site that works for more people.
The goal is WCAG 2.2 at level AA. Here are the features, the shortcuts and what's still missing.
Accessibility bar
On the right edge of every page, the button Accessibility features opens a column of adjustments. Your choices are stored only in your browser and apply to the whole site, including the demo.
- Increase and decrease text size
- Three sizes: 100%, 115% and 130%. Headings grow less, so nothing spills off the screen.
- High contrast
- Swaps the colors for darker versions. All text exceeds 7:1 contrast, WCAG's highest level.
- Grayscale
- Removes the site's colors, for people who get distracted by them or see better without them.
- Bolder text
- Makes the letters thicker, which helps on small screens and for people with low vision.
- Wider text spacing
- Increases line height and spacing between letters and words, to the values in WCAG criterion 1.4.12.
- Highlight links
- Underlines all links, so you don't depend on color to find them.
- Pause animations
- Stops waves, animated panels and transitions on every page.
The bar is a complement. The site is built to work without it: with a keyboard, a screen reader, 200% zoom and the system's reduced motion option.
Keyboard shortcuts
Following eMAG, the Brazilian government's accessibility model. In Firefox, use Alt + Shift + number.
| Keys | What it does |
|---|---|
| Alt + 1 | Go to the main content |
| Alt + 2 | Go to menu |
| Alt + 3 | Open search |
| Alt + 4 | Go to footer |
| Alt + 5 | Open this page |
| Ctrl + K or / | Open search |
| Esc | Close search, menus, windows and the conversation with Marina |
How the site was tested
- An automated audit with axe-core (WCAG 2.2 A and AA) on the main pages.
- Keyboard and focus tests on menus, windows, tabs, search, the bot and the guided demo.
- No page with horizontal scrolling from 320 to 1440 pixels wide.
- Audio narration of the articles and the success stories.
Known limitations
The brand's lilac with white text on buttons, and as the color of some links, falls below 4.5:1 contrast. Fixing it depends on a brand decision. Until then, High contrast mode solves it.
Talk to us
Found a barrier? On a real service, the contact would be acessibilidade@vela-rh.example (a fictitious address).
A fictitious company, a portfolio project. The features described work on this site.