--- url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/advanced/accessibility' title: 'Tornar as páginas acessíveis | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:44:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Pagina’s toegankelijk en vindbaar maken' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:44:43+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Tornar as páginas acessíveis' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:44:43+0000' dateModified: '2026-10-24T11:44:43+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/advanced/accessibility' articleSection: 'Pagina’s toegankelijk en vindbaar maken' - '@type': WebPage '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-builder/advanced/accessibility' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Início item: 'https://dxpr.com/pt-pt' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: pt-pt --- [Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Pagina’s toegankelijk en vindbaar maken](/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Tornar as páginas acessíveis. Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken ## In this guide Related guides - [Atalhos de teclado](/pt-pt/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) - [Firewall and data residency](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts). 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](/hc/documentation/learn-dxpr-builder/ai/image-alt-text). ## 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: | Text | Minimum ratio (WCAG AA) | |---|---| | Texto do corpo | 4.5:1 | | Texto grande (24 px, ou cerca de 19 px em negrito) | 3:1 | 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](/hc/documentation/learn-dxpr-builder/element-settings/background)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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) para a lista completa de atalhos do editor. - [Firewall e residência de dados](/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) para os outros temas de conformidade.