A regra de ouro da acessibilidade em desenvolvimento web: use o elemento HTML nativo correto
antes de recorrer a ARIA. Um <button> já vem com foco por teclado, ativação
por Enter/Espaço e papel semântico de "botão" para leitores de tela — de graça. Um
<div onclick="..."> não tem nada disso; você precisaria recriar manualmente toda essa
funcionalidade com tabindex, role="button" e listeners de teclado.
2. Navegação por teclado
Tab move o foco para o próximo elemento interativo; Shift+Tab para
o anterior. A ordem deve seguir a ordem visual/lógica da página (critério 2.4.3 Ordem do Foco).
Todo elemento interativo precisa de um indicador de foco visível (critério 2.4.7,
nível AA) — nunca use outline: none sem fornecer uma alternativa visível equivalente.
Armadilhas de foco (2.1.2): o usuário precisa sempre conseguir sair de um componente
usando só o teclado (ex.: um modal mal implementado que "prende" o foco dentro dele para sempre).
Links de pular bloco ("Pular para o conteúdo principal") permitem que quem navega por
teclado não precise passar por dezenas de links de menu em toda página nova.
3. O que é ARIA (e quando usar)
WAI-ARIA (Accessible Rich
Internet Applications) é um conjunto de atributos HTML que comunica papéis, estados e propriedades para
tecnologias assistivas quando o HTML nativo não é suficiente — tipicamente em componentes de interface
JavaScript (abas, modais, menus suspensos, sliders). A primeira regra do ARIA é: "não use ARIA se
existe um elemento HTML nativo com a semântica e o comportamento que você precisa." ARIA mal aplicado
pode piorar a acessibilidade em vez de melhorá-la, porque sobrescreve a semântica nativa sem alterar o
comportamento.
Roles (papéis): definem o que um elemento é — ex. role="dialog",
role="navigation", role="alert".
Landmarks (marcos): roles de navegação estrutural — <nav>,
<main>, <header>, <footer> — permitem que
usuários de leitor de tela pulem direto para a seção que querem, em vez de navegar linearmente por toda a
página.
Estados e propriedades: aria-expanded, aria-hidden,
aria-label, aria-live (para anunciar mudanças dinâmicas de conteúdo, como
mensagens de erro em formulários).
4. Leitores de tela
Software que converte a interface em fala (ou braille), usado principalmente por pessoas cegas ou com
baixa visão severa. Os mais usados: NVDA e JAWS (Windows, gratuito e
pago respectivamente), VoiceOver (nativo no macOS/iOS), TalkBack (nativo
no Android). Testar sua própria interface com um leitor de tela real — mesmo que superficialmente — revela
problemas que nenhuma ferramenta automatizada encontra sozinha.
Last modified: Tuesday, 4 August 2026, 8:28 PM
AccessibilityNo options active
Readable FontApplies Atkinson Hyperlegible
Dyslexia-Friendly FontOff
Highlight Titles
Highlight Links
Highlight Buttons
Text SizeDefault
Line HeightDefault
Text SpacingDefault
Word SpacingDefault
Text AlignmentDefault
Bionic Reading
How it works:
Darkens the first letters of each word, proportional to its length - the rest keeps its normal weight
Does not change the page's text: screen readers still read every word whole, with no mid-word interruption
Never touches forms, quiz questions, the text editor, rendered MathJax, or the virtual keyboard
Bionic reading's effect on reading speed or comprehension is not consistently backed by evidence - this option only applies the visual effect
ContrastDefault
Invert Colors
Color AdjustmentColor-blindness filtersDefault
SaturationNormal
Blue Light FilterOff
Hide Images
Before turning this on:
Hides every image and video on the page, including embedded YouTube and Vimeo videos
This applies to all of them, including ones that carry information (a diagram, a chart) - there is no way to keep just those visible
Automatically enabled by Focus Mode (level 3 — Text only)
Pause Animations
What gets paused:
CSS animations and transitions on the page (banners, hover effects, carousels)
Animated GIFs, frozen on their current frame
Video with autoplay, or already playing
Any video that tries to start playing on its own while this is on is paused too
Silence Media
How it works:
Audio with autoplay (or already playing) is muted and paused
Video with autoplay (or already playing) is muted but keeps playing silently — turn on "Pause Animations" too if you also want it to stop
Embedded YouTube and Vimeo videos are muted too, when the page allows controlling them
Media added to the page later — including videos loaded on demand — is silenced too while this is on
Turning this off does not bring sound back on its own: it only stops silencing new media from then on
Tooltips
Sign Language (VLibras)
What you need to know:
Shows (or hides) the access button for VLibras - a Brazilian Sign Language (Libras) translator maintained by the Brazilian federal government at vlibras.gov.br
The VLibras script already loads on this page regardless of this option - what you control here is only the visibility of its button, not whether its content is loaded
When you use the translation, the content is processed by the public VLibras service (vlibras.gov.br) - outside this institution's own infrastructure
This option only exists because an administrator chose to integrate VLibras with this panel - without that integration on, VLibras' button shows up on its own, without going through here
Reading Guide
How it works:
A horizontal line follows the mouse cursor vertically across the screen
Helps you keep your place while reading long paragraphs without losing the line
The line colour can be customised by the site administrator, in Settings
Reading Mask
How it works:
A horizontal band around the mouse cursor stays visible; the rest of the screen dims
Helps you focus on one line at a time, reducing distraction from the rest of the page
Move the mouse vertically to shift the reading band
Magnifier
How it works:
A circular lens follows the mouse pointer and magnifies the content under it — text, images and tables
Use the arrow keys to move the lens without a mouse
Use + and - to zoom in or out (2x, 3x, 4x)
Press Esc to turn the magnifier off at any time
CursorDefault
Focus ModeSimplifies the pageDefault
Widen ContentWidens the reading columnDefault
Screen ReaderText-to-speech
How to use:
Enable the option — an indicator appears in the corner of the screen
Hover over any text on the page to highlight it
Click the highlighted text to hear it read aloud
Use the "Stop" button on the indicator to stop reading at any time
Virtual Keyboard
How to use:
Enable the option — the keyboard appears fixed at the bottom of the screen
Click a text field on the page to place the cursor in it
Tap the on-screen keys to type into that field
Tap ⇧ to switch between lowercase and uppercase; the accent row (á, é, í, ó, ú, ã, õ, ç, â, ê) is always available
Voice Commands
Say one of the following commands:
"increase text" — Increases text size
"decrease text" — Decreases text size
"high contrast" — Activates high contrast
"dark mode" — Activates dark mode
"reset" — Restores all defaults
"close panel" — Closes the panel
"open panel" — Opens the panel
"scroll down" — Scrolls down
"scroll up" — Scrolls up
"scroll to top" — Goes to page top
"scroll to bottom" — Goes to page bottom
"screen reader" — Toggles screen reader
"widen content" — Widens the reading column
"narrow content" — Narrows the reading column
Face NavigationControl cursor with head movements
How to use:
Enable the option
Look at the center of the screen and click Calibrate
Move your head to move the virtual cursor
Open your mouth (~1 s) or blink both eyes (~1 s) to click — when the ring around the cursor fills up, the click is performed
To scroll the page, move the cursor to the top or bottom edge of the screen