Tornar as páginas acessíveis.

Dê a cada imagem uma descrição, mantenha os títulos por ordem e torne o texto legível sobre cor, para utilizadores de leitores de ecrã e teclado usarem as páginas. Esta página enumera o que o DXPR Builder faz, o que adiciona e como verifica o resultado antes de publicar.

O que o construtor faz

• Real text structure. O elemento Text usa CKEditor 5 com títulos reais (Heading 1 a Heading 6), parágrafos e listas.
• ARIA on interactive elements. Os separadores têm role="tablist" e role="tab". As barras de progresso e os contadores circulares têm role="progressbar" com o valor mínimo, máximo e atual. Os títulos de painéis de colapso são botões que indicam se o painel está aberto.
• Accessible editor dialogs. Cada diálogo de definições é um role="dialog" com aria-modal e um título.
• Keyboard access in the editor. Enter abre as definições de um elemento, Escape fecha um painel ou desseleciona o elemento, e Ctrl (Cmd num Mac) com uma tecla de seta move elementos. Consulte a referência de atalhos de teclado.

Os elementos de esquema (secções, linhas e colunas) são div simples. A estrutura que um leitor de ecrã anuncia vem dos títulos.

Adicionar texto alternativo a uma imagem

1. Aponte para a imagem e clique em More > Settings.
2. Abra o painel SEO.
3. Escreva uma descrição em Alt attribute: o que a imagem mostra e por que está na página, numa ou duas frases, sem "image of".
4. Clique em Save no diálogo e depois em Save na barra do contentor.

Quando Alt attribute está vazio, o elemento Image não escreve alt nenhum, e os leitores de ecrã podem ler o nome do ficheiro. Para uma imagem puramente decorativa, use antes uma Background image de secção no painel Style; os leitores de ecrã saltam fundos. O carrossel de imagens usa um Alt attribute para todas as imagens, por isso descreva o conjunto.

As imagens geradas por IA começam com a prompt como texto alternativo. Edite-o para descrever o resultado em vez do pedido. Consulte texto alternativo de imagem.

Manter os títulos por ordem

1. Dê à página um Heading 1. A maioria dos temas mostra o título da página como Heading 1, por isso não adicione um segundo no construtor. No DXPR CMS pode esconder esse título numa página: no formulário de edição, abra DXPR Theme Settings e marque Page Title em DXPR Hide Regions.
2. Na barra de ferramentas do elemento Text, use a lista de títulos para marcar títulos de secção como Heading 2 e subsecções como Heading 3. Não salte níveis.
3. Use os botões de lista da barra de ferramentas para listas em vez de hífenes escritos.

Três elementos fixam o nível de título. O Title do Jumbotron é sempre Heading 1, o Title do cartão é sempre Heading 5, e cada Toggle title de um painel Collapse é um Heading 2.

Verificar o contraste de cor

Os seletores de cor oferecem a paleta do tema mas não medem contraste, por isso verifique-o:

Para texto sobre foto, escureça a foto para o rácio valer em toda a imagem. No painel Background effects da secção, defina Background effect como Gradient com Start color e End color escuros e semitransparentes. Fundos mostra os passos.

Usar ligações e botões descritivos

Os elementos Button e Link mostram o texto escrito como texto da ligação. Escreva o que a ligação faz ("Register for Open Day"), não "click here". O elemento Link também tem um Title attribute no painel SEO para uma descrição mais longa.

O que vê

1. Defina View mode na barra do contentor como Preview, para não haver controlos do editor no caminho.
2. Prima Tab para percorrer a página. Cada botão, ligação e separador é alcançável e mostra um anel de foco visível.
3. Um verificador automático, como a auditoria de acessibilidade do navegador ou a extensão axe, não indica erros para o conteúdo do construtor na página publicada.

Se o relatório não vem limpo

• The checker reports an image without alt text. O Alt attribute do elemento Image está vazio. Preencha-o, ou mova uma imagem decorativa para um fundo de secção.
• The checker reports two Heading 1s. Um Title de Jumbotron é sempre Heading 1, junto ao título de página do tema. Use antes um elemento Text com um Heading 2.
• The checker reports a skipped heading level. Um Title de cartão é sempre Heading 5. Deixe-o vazio e comece o cartão com um título de elemento Text no nível certo.
• The checker reports low contrast on text over a photo. Adicione o gradiente descrito acima, ou escolha um fundo de texto mais escuro.

O que se segue?

• Atalhos de teclado para a lista completa de atalhos do editor.
• Firewall e residência de dados para os outros temas de conformidade.