From 68fc8e96a9629e73469ed457abd955e548ec670c Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:58 +0100 Subject: unslug pt-br: move --- .../index.html | 234 +++++++++++++++++++++ .../index.html | 35 +++ .../usando_o_atributo_aria-labelledby/index.html | 158 -------------- .../usando_o_atributo_aria-required/index.html | 83 -------- .../usando_o_slider_role/index.html | 125 ----------- .../using_the_alert_role/index.html | 145 +++++++++++++ .../using_the_aria-labelledby_attribute/index.html | 158 ++++++++++++++ .../using_the_aria-required_attribute/index.html | 83 ++++++++ .../using_the_slider_role/index.html | 125 +++++++++++ .../utilizando_o_alert_role/index.html | 145 ------------- .../aria/forms/basic_form_hints/index.html | 118 +++++++++++ .../forms/dicas_b\303\241sicas_de_form/index.html" | 118 ----------- .../index.html | 35 --- .../accessibility/aria/widgets/overview/index.html | 72 +++++++ .../aria/widgets/vis\303\243o_geral/index.html" | 72 ------- files/pt-br/web/accessibility/index.html | 52 +++++ .../mobile_accessibility_checklist/index.html | 100 +++++++++ .../accessibility/understanding_wcag/index.html | 57 +++++ .../understanding_wcag/keyboard/index.html | 87 ++++++++ 19 files changed, 1266 insertions(+), 736 deletions(-) create mode 100644 files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html create mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html delete mode 100644 files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html create mode 100644 files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html delete mode 100644 "files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" delete mode 100644 files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html create mode 100644 files/pt-br/web/accessibility/aria/widgets/overview/index.html delete mode 100644 "files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" create mode 100644 files/pt-br/web/accessibility/index.html create mode 100644 files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html create mode 100644 files/pt-br/web/accessibility/understanding_wcag/index.html create mode 100644 files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html (limited to 'files/pt-br/web/accessibility') diff --git a/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..df43b575a6 --- /dev/null +++ b/files/pt-br/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,234 @@ +--- +title: Visão geral da acessibilidade nas aplicações web e widgets +slug: Web/Acessibilidade/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Acessibilidade + - Aplicativos Web + - CSS + - DHTML + - Guía + - HTML+ARIA + - Navegação+Teclado + - WAI-ARA + - Widgets +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

A Rede Mundial está mudando. Estatísticamente, os sítios baseados em páginas estão, cada vez mais, sendo repostos por aplicações dinâmicas, em estilo Ambiente, que fazem uso intenso de JavaScript e AJAX. Estilistas estão criando novos widgets e controles inteiramente com a combinação de JavaScript, HTML e CSS. Este salto tem o potencial de aperfeiçoar, dramaticamente, a capacidade de resposta e a usabilidade da Rede, mas milhares de utilizadores estão sob o risco de exclusão, devido a algumas lacunas na acessibilidade. A JavaScript tem, tradicionalmente, tido a reputação de ser inviável para quem usa tecnologias assistivas, como leitores de tela mas, agora, existem maneiras de criar interfaces de utilização dinâmicas acessíveis a uma ampla variedade de pessoas.

+ +

O problema

+ +

A maior parte do conjunto de ferramentas JavaScript oferece uma biblioteca de utilização de widgets que imita o comportamento de interfaces de Ambiente familiares. Deslizantes, barras de menus, visão de arquivos em lista e muito mais pode ser construído com uma combinação de JavaScript, CSS e HTML. Uma vez que a especificação da HTML 4 não fornece etiquetas integradas (built-in tags) que descrevam estes tipos de widgets semanticamente, os desenvolvedores recorrem ao uso de elementos genéricos, tais como <div> e <span>. Embora isto resulte em um widget que se pareça com seu duplo de ambiente, geralmente não existe informação semântica suficiente, na marcação, para torná-lo utilizável por uma tecnologia assistiva. Teor dinâmico em uma página da Rede Mundial pode ser particularmente problemático para quem, por alguma razão, não pode ver a tela. Cotações de ações, alimentação instantânea de atualizações do twitter, indicadores de progresso e conteúdos similares alteram o DOM, enquanto uma tecnologia assistiva (TA/AT) pode não ser alertada disso. Aqui é onde o conjunto ARIA entra.

+ +

Exemplo 1: Marcação para um widget de abas construído sem as indicações ARIA. Não existem informações semânticas, na marcação, que descrevam a sua forma, nem a sua função.

+ +
<!-- This is a tabs widget. How would you know, looking only at the markup? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Chapter 1 content goes here</div>
+  <div id="ch2Panel">Chapter 2 content goes here</div>
+  <div id="quizPanel">Quiz content goes here</div>
+</div>
+ +

Exemplo 2: Como o widget de abas pode ser visto. Seus utilizadores podem reconhecer sua aparência, mas não há semântica legível por mecanismos de tecnologias assistivas.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

As definições para WAI-ARIA Accessible Rich Internet Applications (Aplicações Ricas para uma Internete Acessível), da W3C -  Web Accessibility Initiative (Iniciativa pela Acessibilidade na Rede Mundial/World Wide Web Consortium-W3C) - oferecem uma via para a adição das necessidades semânticas perdidas pelas tecnologias assistivas, como os leitores de tela. O conjunto ARIA possibilita que desenvolvedores possam descrever seus widgets de forma mais detalhada com a inclusão de atributos especiais à marcação. Projetado para preencher a lacuna entre o padrão de rotulagem HTML e os controles com estilo ambiente encontrados em aplicações dinâmicas pela web, o conjunto ARIA fornece funções (roles) e estados (states) que descrevem o comportamento da maioria das interfaces de utilização dos widgets conhecidas.

+ +

A especificação ARIA está dividida em três tipos diferentes de atributos: funções (roles), estados (states) e propriedades (properties). As funções (roles) descrevem os widgets que não estão disponíveis de outra forma em HTML 4, como deslizantes, barras de menu, abas e diálogos. As propriedades (properties) descrevem as características desses widgets - se podem ser arrastados (draggable), se existe algum elemento obrigatório, ou se trazem uma janela de explosão (popup) associada. Os estados (states) descrevem a interação atual de um elemento, informando à tecnlogia assistiva se este se encontra ativo, desativado, selecionado, ou oculto.

+ +

Os atributos ARIA são projetados para serem interpretados automaticamente pelo navegador e traduzidos para as APIs (Application Programming Interface/Interface de Programação de Aplicativo) de acessibilidade nativas do sistema operacional. Quando o conjunto ARIA está presente as tecnologias assistivas são capazes de reconhecer e interagir com os controles personalizados pela  JavaScript da mesma forma que fazem com os seus equivalentes de ambiente. Isto tem o potencial de oferecer uma experiência de utilização muito mais consistente do que aquela que foi possível nas gerações anteriores das aplicações da Rede, uma vez que os utilizadores de tecnologias assistivas podem empregar todo o seu conhecimento sobre o funcionamento das aplicações de ambiente, ao usar aquelas que são baseadas na web.

+ +

Exemplo 3: Marcação para um widget de abas com os atributos ARIA adicionados:

+ +
<!-- Now *these* are Tabs! -->
+<!-- We've added role attributes to describe the tab list and each tab. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Notice the role and aria-labelledby attributes we've added to describe these panels. -->
+  <div id="ch1Panel" role="tabpanel" aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role="tabpanel" aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role="tabpanel" aria-labelledby="quizTab">Quiz content goes here</div>
+</div>
+
+ +

O conjunto ARIA tem suporte nas últimas versões de todos os maiores navegadores, incluindo Firefox, Safari, Opera, Chrome e Internet Explorer. Muitas das tecnologias assistivas, como as de código aberto NVDA e os leitores de tela Orca, da mesma foma, trazem suporte ao ARIA. Progressivamente, as bibliotecas  JavaScript para widget, tais como  jQuery UI, YUI, Google Closure e Dojo Dijit também incluem as marcações ARIA.

+ +

Mudanças na apresentação

+ +

Mudanças de apresentação dinâmicas agregam o uso de CSS para alterar a aparência do conteúdo (uma borda vermelha em volta de algum dado inválido, ou a troca da cor de fundo de uma caixa de seleção já marcada), bem como quando um item é exibido, ou escondido.

+ +

Mudanças de estado

+ +

O conjunto ARIA provê atributos para declarar o estado atual da interface de utilização de um widget. Os exemplos abrangem (mas não são apenas estes, com certeza( :

+ + + +

(Para uma lista completa de estados ARIA, consulte a ARIA list of states and properties (lista de estados e propriedades ARIA).

+ +

Os desenvolvedores devem dar preferência ao uso dos estados ARIA para indicar a situação atual dos elementos widgets na interface de utilização (UI) e os seletores de atributos CSS para alterar a sua aparência, com base nas mudanças desses estados (em vez de usar um roteiro (script) para mudar um nome de classe de um elemento).

+ +

A Open Ajax Alliance (OAA - Aliança OpenAJAX ) disponibiliza um exemplo de um seletor de atributos CSS baseado nos estados ARIA (em inglês) - an example of CSS attribute selectors based on ARIA states. O exemplo mostra a interface de um editor WYS/WYG com um sistema de menu dinâmico. Os itens selecionados no menu, como o tipo de fonte estão, visualmente, distintos dos outros. As partes importantes do exemplo são explicadas a seguir.

+ +

Neste exemplo, a HTML para um menu tem a forma exibida abaixo. Note como, nas linhas 7 e 13, a propriedade (property) aria-checked é usada para declarar o estado da seleção dos itens do menu.

+ +

Exemplo 1a: HTML para um menu selecionável (adaptado da  http://www.oaa-accessibility.org/example/25/).

+ +
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
+  <li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true">Sans-serif</li>
+  <li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false">Serif</li>
+  ...
+
+ +

A CSS usada para alterar a aparência do item selecionado é mostrada no Exemplo 1b. Perceba que não existe um nome de classe (classname) de personalização, apenas o estado do atributo aria-checked, na linha 1.

+ +

Exemplo 1b: Seletor baseado em atributo para indicar um estado (da  http://www.oaa-accessibility.org/example/25/).

+ +
li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+
+ +

O  JavaScript para atualizar a propriedade aria-checked tem a forma exibida no Exemplo 1c. Repare que o roteiro (script) apenas atualiza o atributo aria-checked (linhas 3 e 8); também não é necessário adicionar, ou remover, um nome de classe personalizada.

+ +

Exemplo 1c: A  JavaScript atualiza o atributo aria-checked  (baseado em  http://www.oaa-accessibility.org/example/25/).

+ +
var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 && sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+
+ +

Alterações visuais

+ +

Quando o conteúdo visual é alterado (isto é, um elemento é escondido, ou mostrado), os desenvolvedores devem mudar o valor da propriedade aria-hidden. As técnicas descritas acima devem ser usadas, a fim de declarar a CSS para ocultar um elemento utilizando display:none (exibir:nenhum).

+ +

O sítio da Open Ajax Alliance fornece um exemplo de uma dica de tela (tooltip) que utiliza o estado aria-hidden para controlar a sua visibilidade (em inglês) an example of a tooltip that uses aria-hidden to control the visibility of the tooltip. O exemplo mostra um formulário web simples, com caixas de dicas de tela contendo instruções associadas aos campos de entrada. As partes relevantes deste exemplo estão explicadas abaixo.

+ +

Aqui, a HTML para a dica de tela tem a forma exibida no Exemplo 2a. A linha 9 configura o estado da aria-hidden para true.

+ +

Exemplo 2a: HTML para dicas de tela (adaptado de  http://www.oaa-accessibility.org/example/39/).

+ +
<div class="text">
+    <label id="tp1-label" for="first">First Name:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Your first name is optional</div>
+</div>
+
+ +

A CSS para esta marcação está explicada no Exemplo 2b. Veja que não há uso de classname personalizada, apenas o estado do atributo aria-hidden, na linha 1.

+ +

Exemplo 2b:  Seletor basedo em atributo para indicar um estado  (de http://www.oaa-accessibility.org/example/39/).

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+  }
+
+ +

O JavaScript que atualiza a propriedade aria-hidden tem a forma exposta no Exemplo 2c. Observe que o roteiro apenas atualiza o atributo aria-hidden (linha 2); não é necessário adicionar, nem remover, uma classname customizada.

+ +

Exemplo 2c: JavaScript para atualização do atributo aria-checked (com base em http://www.oaa-accessibility.org/example/39/).

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Mudança de Atributo (Role)

+ +
Em construção
+ +

O conjunto ARIA possibilita que os desenvolvedores possam declarar uma função semântica para um elemento que, de outro modo, não a apresentaria, ou a ofereceria de forma incorreta. Por exemplo, quando alguma lista desordenada é utilizada para criar um menu, à {{ HTMLElement("ul") }} deve ser dada uma role de menubar e cada {{ HTMLElement("li") }} deve ter uma role de menuitem.

+ +

O papel (role) de um elemento não deve mudar. Em vez disso, remova o elemento original e ocupe seu lugar com um elemento que tenha a função (role) nova.

+ +

Por exemplo, considere um widget de edição "inline": um componente que possibilita que seus utilizadores sejam capazes de editar uma parte de um texto, sem mudar toda a composição. Este componente carrega o modo "visualizar", no qual o texto não pode ser modificado, mas pode ser ativado e um modo "editar", no qual o texto pode ser alterado. Se você o desenvolve, pode ter a tentação de implementar o modo "visualizar" com o uso do elemento texto "somente leitura"  {{ HTMLElement("input") }}, definindo a sua ARIA role para button e, em seguida, alternando para o modo "editar", para tornar o elemento apto à gravação e removendo o atributo role no modo "editar" (desde que os elementos {{ HTMLElement("input") }} tenham as suas próprias funções semânticas).

+ +

Não faça isso. Em substituição, implemente o modo "visualizar" usando um elemento completamente diferente, tal como uma {{ HTMLElement("div") }}, ou {{ HTMLElement("span") }} com uma role de button e o modo « edit » utilizando um elemento texto {{ HTMLElement("input") }}.

+ +

Mudanças assíncronas de conteúdo

+ +
Em construção. Veja, também, Regiões Dinâmicas
+ + + +

Muitas vezes, os desenvolvedores negligenciam o suporte ao teclado quando criam widgets personalizados. Para ser acessível a uma gama maior de pessoas, todas as configurações de uma aplicação web, ou de um widget, devem oferecer controles pelo teclado, sem a necessidade de um rato. Na prática isto, frequentemente, envolve as convenções suportadas por widgets similares, de ambiente, tirando plena vantagem das teclas Tab, Entra, Barra de Espaço e Setas.

+ +

Tradicionalmente, a navegação pelo teclado na web tem sido limitada à tecla Tab, que é pressionada para dar foco a cada botão, vínculo, ou formulário na página, em uma ordenação linear e Shift-Tab para navegar em sentido contrário (navegação regresssiva). É uma forma unidimensional de navegação - para frente e para trás, um elemento por vez. Em páginas mais pesadas, alguém que navegue apenas pelo teclado deve pressioná-lo dezenas de vezes antes de alcançar a seção desejada. Implementar as convenções para teclado no modelo ambiente, para a web, tem o potencial de tornar a navegação significativamente mais rápida para essas pessoas.

+ +

Aqui está um resumo sobre como a navegação pelo teclado deve funcionar, com a habilitação do conjunto ARIA, na aplicação web:

+ + + +

Assim, para o exemplo de widget de abas acima, a pessoa que estiver navegando deve ser capaz de entrar e sair da caixa que o contém usando as teclas "Tab" e "Shift+Tab" ( a <ol> na nossa marcação). Uma vez que o foco, pelo teclado, estiver dentro do contêiner, as teclas de setas devem permitir a navegação entre as suas diferentes guias (os elementos <li> ). A partir daqui as convenções variam de plataforma para plataforma. No Windows, a próxima aba deve ser ativada, automaticamente, quando as teclas de setas forem pressionadas. Em Mac OS X, seus utilizadores ativam a próxima aba pressionando a tecla "Entra", ou a "barra de espaço". Um  tutorial abrangente, para a criação de widgets, com navegação pelo teclado, descreve como implementar esse comportamento utilizando JavaScript Keyboard-navigable JavaScript widgets (JavaScript para widgets navegáveis pelo teclado).

+ +

Para mais detalhes sobre as convenções da navegação pelo teclado em modelo ambiente, um guia completo (em inglês) DHTML style guide (guia de estilos da HTML Dinâmica) está disponível. Este guia oferece uma visão global de como a navegação pelo teclado deve funcionar em cada tipo de widget suportado pelo conjunto ARIA. A  W3C também oferece um documento que ajuda muito, ARIA Best Practices, incluindo a navegação pelo teclado e as convenções de atalhos para uma variedade de widgets.

+ +

Veja, também

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html new file mode 100644 index 0000000000..73b9605ef1 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_screen_reader_implementors_guide/index.html @@ -0,0 +1,35 @@ +--- +title: Guia para implementar o leitor de tela ARIA +slug: Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA +tags: + - ARIA + - Acessibilidade +translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide +--- +

Regiões Ativas

+ +

Este é apenas um guia. Uma marcação de região ativa é uma área complexa que é algo aberto à interpretações. O que segue pretende prover um guia de implementação que respeita a necessidade dos desenvolvedores de leitores de tela para tentar novas coisas. A intenção é chegar a um balanço entre providenciar um guia útil em como usar o significado de marcação pretendido

+ +

Interpretando a marcação de região ativa WAI-ARIA

+ +
    +
  1. Mudanças ativas são são dicas: Em geral marcação de região ativa é dado pelo autor como dicas, e a tecnologia assistiva pode permitir , site or even region-specific settings, assim como heurística para ajudar com mudanças ativas nas páginas que não têm dicas WAI-ARIA.
    2. +
  2. Opcionalmente, criar uma segunda, queue adicional se o usuário configurar um segundo canal de hardware: Se há dois canais para apresentação (i.e. text-to-speech e display Braile), então duas queues podem ser mantidas para permitir apresentação paralela. Os canais poderiam se configurados pelo usuário para apresentar regiões ativas baseada em vez ou prioridades.
    3. +
  3. Regiões ocupadas: Qualquer alteração numa região marcada com aria-busy="true" não deve ser adicionada à queue até que aquele atributo seja limpo.
    4. +
  4. Prioridade (aria-live ou a partir da vez) tem primeira precedência: itens deveriam ser adicionados à queue baseadas no seu nível de prioridade da propriedade aria-live ou inerente da vez (i.e. role="log" é prioridade por padrão). Itens assertivos são os primeiros então nível de prioridade. Alternativamente, implementações podem escolher ter uma política de limpeza mais items de prioridade, i.e. itens assertivos limpam qualquer item de prioridade da queue.
    5. +
  5. Tempo toma a segunda procedência: Priorizar itens com o mesmo nível de prioridade de acordo com quando o evento ocorre (eventos anteriores vêm primeiro). Itens presentes do mesmo nível de prioridade na ordem do que ocorreu primeiro.
    6. +
  6. Regiões atômicas (aria-atomic="true")  com mudanças múltiplas não deveriam estar presentes duas vezes com o mesmo conrteúdo. Como um novo evento para uma região atômica é adicionada à queue e remove um evento anterior para a mesma região. É provavelmente desejável que tenha pelo menos um pequeno timeout antes de apresentar mudanças numa região atômica, com a finalidade de evitar apresentar a região duas vezes para duas mudançasque ocorrem rapidamente uma após a outra.
    7. +
  7. Inclua labels quando estiver apresntando mudanças: se a mudança ocorre em algo com um label de alguma forma  semântico, fale o label. Isso é particularmente importante para mudanças em data cells, onde os headers column e row fornecem informação contextual importante.
    8. +
+ +

Ideias para Configurações e Heurística

+ +
    +
  1. Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.
    2. +
  2. Quando não há marcação WAI-ARIA presente, automaticamente apresenta algumas mudanças a mesnos que o usuário configure todas as mudanças ativas para desligado. Por exemplo, mudanças automáticas de fala que são causadas pela própria entrada do usuário, como parte do contexto daquela entrada.
    3. +
  3. Permitir configurações globais para desligar a apresentação de mudanças ativas, apresentar todas as mudanças ativas, use marcação, ou seja "esperto" (use heurística).
    4. +
+ +

Detalhes para Processamento via APIs Platform Acessibility

+ +

Esperamos que o desenvolvedor do navegador irá trabalhar para fornecer implementações consistentes. A imlementação mais completa das regiões ativas atualmente está no Firefox 3. Aqui está como regiões ativas WAI-ARIA são expostas no Firefox 3.

diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html deleted file mode 100644 index cd7cb90bb9..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/index.html +++ /dev/null @@ -1,158 +0,0 @@ ---- -title: Usando o atributo aria-labelledby -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby -tags: - - ARIA - - Acessibilidade - - PrecisaDeConteúdo -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute ---- -

Descrição

- -

Essa técnica demonstra como usar o atributo aria-labelledby.

- -

O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.

- -

aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.

- -

O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atributos nesses casos.

- -

aria-labelledby podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.

- -

Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.

- -

Value

- -

Uma lista de IDs do elemento separada por espaços

- -

Possíveis efeitos em user agents e tecnologias assistivas 

- -

Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.

- -
Nota: Opinões podem diferir em como as tecnologias assistivas devem manipular essa técnica. A informação fornecida acima é uma dessas opiniões e portanto não normativa.
- -

Exemplos

- -

Exemplo 1: Múltiplas Labels

- -

No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:

- -
<div id="billing">Endereço de Cobrança</div>
-
-<div>
-    <div id="name">Nome</div>
-    <input type="text" aria-labelledby="name billing"/>
-</div>
-<div>
-    <div id="address">Endereço</div>
-    <input type="text" aria-labelledby="address billing"/>
-</div>
-
- -

Exemplo 2: Associando Cabeçalhos com Regiões

- -

No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.

- -
<div role="main" aria-labelledby="foo">
-   <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1>
-   Fortes ventos expandem o fogo inflamado pelas altas temperaturas ...
-</div>
-
- -

Exemplo 3: Radio Groups

- -

No exemplo abaixo,  o container de um radiogroup  é associado com suas labels usando o atributo aria-labelledby:

- -
<div id="radio_label">Meu radio label</div>
-<ul role="radiogroup" aria-labelledby="radio_label">
-    <li role="radio">Item #1</li>
-    <li role="radio">Item #2</li>
-    <li role="radio">Item #3</li>
-</ul>
-
- -

Exemplo 4: Dialog Label

- -

No exemplo abaixo, o elemento cabeçalho que rotula o dialog é referenciado pelo atributo aria-labelledby:

- -
<div role="dialog" aria-labelledby="dialogheader">
-    <h2 id="dialogheader">Escolha um Arquivo</h2>
-    ... Conteúdo do Dialog
-</div>
-
- -

Exemplo 5: Definição Inline

- -

No exemplo abaixo, a definição de um termo que é descrita no fluxo natural da narrativa é associada com o próprio termo usando o atributo aria-labelledby:

- -
<p>O médico explicou que tinha sido um <dfn id="placebo">placebo</dfn>, ou <span role="definition" aria-labelledby="placebo">
-ou a uma preparação mais inerte prescrito para o alívio mental do paciente do que por seu efeito real sobre um distúrbio.</span>
-</p>
-
- -

Exemplo 6: Definições de Listas

- -

No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo aria-labelledby:

- -
<dl>
-    <dt id="anathema">anátema</dt>
-    <dd role="definition" aria-labelledby="anathema">uma proibição ou maldição solenemente pronunciada pela autoridade eclesiástica
-                                                     e acompanhada por excomunhão</dd>
-    <dd role="definition" aria-labelledby="anathema">uma vigorosa denúncia</dd>
-
-    <dt id="homily">homilia</dt>
-    <dd role="definition" aria-labelledby="homily">um sermão usualmente curto</dd>
-    <dd role="definition" aria-labelledby="homily">uma leitura ou discurso sobre ou de um tema moral</dd>
-
-</dl>
-
- -

Exemplo 7: Menus

- -

No exemplo abaixo, um menu popup é associado com sua label usando o atributo aria-labelledby:

- -
<div role="menubar">
-    <div role="menuitem" aria-haspopup="true" id="fileMenu">Arquivo</div>
-    <div role="menu" aria-labelledby="fileMenu">
-        <div role="menuitem">Abrir</div>
-        <div role="menuitem">Salvar</div>
-        <div role="menuitem">Salvar como ...</div>
-        ...
-    </div>
-    ...
-</div>
-
- -

Exemplos Funcionais:

- - - -

Notas 

- -

O mapeamento mais comum de uma - API de acessibilidade -  para um rótulo é a propriedade acessível name

- -

Usado pelas regras ARIA

- -

todos os elementos de markup base

- -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informação de suporte para combinações de produto UA e AT

- -

Recursos Adicionais

- - diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html deleted file mode 100644 index e93611b182..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Usando o atributo aria-required -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required -tags: - - ARIA - - Acessibilidade -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute ---- -
-
-

Descrição

- -

O atributo aria-required é usado para indicar que a entrada do usuário é obrigatória em um elemento antes que um formulário possa ser enviado. Este atributo pode ser usado com qualquer elemento de formulário HTML típico; não se limita a elementos que têm uma  role atribuída.

- -

{{ HTMLVersionInline("5") }} agora tem o atributo required, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.

- -

Valor

- -

true ou false (Padrão: false)

- -

Possíveis efeitos nos agentes de usuários e tecnologia assistiva 

- -

Os leitores de tela devem anunciar o campo como obrigatório.

- -

Observe que esse atributo não alterará automaticamente a apresentação do campo.

- -
Nota: Opiniões podem diferir em como a tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Um simples formulário

- -

 

- -
 <form action="post">
-     <label for="firstName">First name:</label>
-     <input id="firstName" type="text" aria-required="true" />
-     <br/>
-     <label for="lastName">Last name:</label>
-     <input id="lastName" type="text" aria-required="true" />
-     <br/>
-     <label for="streetAddress">Street address:</label>
-     <input id="streetAddress" type="text" />
- </form>
-
- -

Exemplos de trabalho:

- -

Exemplo de Tooltip  (inclui o uso do atributo aria-required)

- -

Notas 

- -

Usado em ARIA roles

- -
    -
  • Combobox
    • -
  • Gridcell
    • -
  • Listbox
    • -
  • Radiogroup
    • -
  • Spinbutton
    • -
  • Textbox
    • -
  • Tree
    • -
- -

Técnicas relacionadas com ARIA

- - - -

Compatibilidade

- -

TBD: Add support information for common UA and AT product combinations

- -

Recursos adicionais

- - -
-
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html deleted file mode 100644 index 18532f5f25..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_slider_role/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: Usando o slider role -slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role ---- -

Descrição

- -

Essa técnica demosntrará como usar o slider role. 

- -

The slider role is used for markup that allows a user to select a value from within a given range. The slider role is assigned to the "thumb," the control that is adjusted to change the value. Typically, another element is styled to visually represent the range of possible valued, and the thumb positioned visually to represent the value within that range. As the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.

- -

Keyboard And Focus

- -

The slider should be keyboard focusable and operable. When the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. Arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):

- - - - - - - - - - - - - - - - - - - - - - -
Tecla(s)Ação
Setas para direita e para cima Incrementa o valor selecionado
Setas para esquerda e para baixoDecrementa o valor selecionado
Page Up and Page DownOptionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)
- -

Possible effects on user agents and assistive technology 

- -

 

- -
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
- -

Examplos

- -

Examplo 1: Escala numérica simples

- -

In the example below, a simple slider is used to select a value between 1 and 100. The current volume is 50. The application will programmatically update the value of aria-valuenow in response to user input.

- -
<label for="fader">Volume</label>
-<input type="range"
-  id="fader"
-  min="1"
-  max="100"
-  value="50"
-  step="1"
-  aria-valuemin="1"
-  aria-valuemax="100"
-  aria-valuenow="50"
-  oninput="outputUpdate(value)">
-<output for="fader" id="volume">50</output>
-
- -

The following code snippet allows you to return the output as it is updated by user input:

- -
function outputUpdate(vol) {
-  document.querySelector('#volume').value = vol;
-}
-
- -

Examplo 2: Valores de texto

- -

Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

- -
<label for="day-handle">Days</label>
-<div class="day-slider">
-  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-handle"
-     aria-valuemin="1"
-     aria-valuemax="7"
-     aria-valuenow="2"
-     aria-valuetext="Monday">
- </div>
-</div>
-
- -

The code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes:

- -
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
-var updateSlider = function (newValue) {
-    var handle = document.getElementById("day-handle");
-    handle.setAttribute("aria-valuenow", newValue.toString());
-    handle.setAttribute("aria-valuetext", dayNames[newValue]);
-};
-
- -

Working Examples:

- - - -

Notas 

- -

Atributos ARIA usados

- - - - - -

Compatibility

- -

TBD: Add support information for common UA and AT product combinations

- -

Recursos Adicionais

- - diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html new file mode 100644 index 0000000000..25d3222fcd --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_alert_role/index.html @@ -0,0 +1,145 @@ +--- +title: Utilizando a função "alerta" +slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role +tags: + - ARIA + - Accessibility + - Acessibilidade + - Alertas + - Avançado + - CSS + - Caixas de aviso + - Configuração role + - Guía + - HTML+ARIA + - NeedsContent + - PrecisaDeConteúdo + - WAI-ARIA + - wcag1.2.1 + - wcag3.3.1 +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role +--- +

Descrição

+ +
+

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

+
+ +

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

+ + + +

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

+ +

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

+ +

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

+ + + +

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

+ + + +
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Adicionando o atributo (role) no código HTML:

+ +

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

+ +
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
+ +

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

+ +

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

+ +
var myAlert = document.createElement("p");
+myAlert.setAttribute("role", "alert");
+var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
+myAlert.appendChild(myAlertText);
+document.body.appendChild(myAlertText);
+
+ +

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

+ +
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
+
+ +

Exemplo 3: Adicionando a função de alerta a um elemento existente:

+ +

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

+ +
<p id="formInstruction">You must select at least 3 options</p>
+
+ +
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
+document.getElementById("formInstruction").setAttribute("role", "alert");
+ +

Exemplo 4: Construindo um elemento com uma função de alerta visível:

+ +

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

+ +

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

+ +
.hidden {
+  display:none;
+}
+
+ +
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
+
+ +
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
+document.getElementById("expirationWarning").className = "";
+ +

Exemplos de Trabalhos:

+ + + +

Notas:

+ + + +

Atributos ARIA utilizados

+ + + +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

+ +

Recursos Adicionais

+ + + +

 

diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html new file mode 100644 index 0000000000..cd7cb90bb9 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.html @@ -0,0 +1,158 @@ +--- +title: Usando o atributo aria-labelledby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby +tags: + - ARIA + - Acessibilidade + - PrecisaDeConteúdo +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute +--- +

Descrição

+ +

Essa técnica demonstra como usar o atributo aria-labelledby.

+ +

O atributo aria-labelledby é usado para indicar os IDs de elementos que são os rótulos para o objeto. É usado para estabelecer uma relação entre widgets ou grupos e suas labels. Usuários de tecnologias assistivas como leitores de telas navegam tipicamente uma página através de TABs entre as áreas da tela. Se uma label não está associada com um elemento input, widget ou grupo, não será legível por leitor de tela.

+ +

aria-labelledby é muito similar ao aria-describedby: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.

+ +

O atributo aria-labelledby não é usado somente para elementos de formulário; é também usado para associar texto estático com widgets, grupos de elementos, painéis, regiões que tem um cabeçalho, definições e mais. A seção {{ anch("Exemplos") }} abaixo fornece mais informação sobre como usar os atributos nesses casos.

+ +

aria-labelledby podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo for) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.

+ +

Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma role ARIA atribuída.

+ +

Value

+ +

Uma lista de IDs do elemento separada por espaços

+ +

Possíveis efeitos em user agents e tecnologias assistivas 

+ +

Quando ambos aria-labelledby e aria-label são usados, user agents dão precedência ao aria-labelledby quando computam o nome da propriedade acessível.

+ +
Nota: Opinões podem diferir em como as tecnologias assistivas devem manipular essa técnica. A informação fornecida acima é uma dessas opiniões e portanto não normativa.
+ +

Exemplos

+ +

Exemplo 1: Múltiplas Labels

+ +

No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:

+ +
<div id="billing">Endereço de Cobrança</div>
+
+<div>
+    <div id="name">Nome</div>
+    <input type="text" aria-labelledby="name billing"/>
+</div>
+<div>
+    <div id="address">Endereço</div>
+    <input type="text" aria-labelledby="address billing"/>
+</div>
+
+ +

Exemplo 2: Associando Cabeçalhos com Regiões

+ +

No exemplo abaixo, elementos de cabeçalho estão associados com o conteúdo que eles seguem. Note que a região sendo referenciada é a que contem o cabeçalho.

+ +
<div role="main" aria-labelledby="foo">
+   <h1 id="foo">Incêndios selvagens se espalham por San Diego Hills</h1>
+   Fortes ventos expandem o fogo inflamado pelas altas temperaturas ...
+</div>
+
+ +

Exemplo 3: Radio Groups

+ +

No exemplo abaixo,  o container de um radiogroup  é associado com suas labels usando o atributo aria-labelledby:

+ +
<div id="radio_label">Meu radio label</div>
+<ul role="radiogroup" aria-labelledby="radio_label">
+    <li role="radio">Item #1</li>
+    <li role="radio">Item #2</li>
+    <li role="radio">Item #3</li>
+</ul>
+
+ +

Exemplo 4: Dialog Label

+ +

No exemplo abaixo, o elemento cabeçalho que rotula o dialog é referenciado pelo atributo aria-labelledby:

+ +
<div role="dialog" aria-labelledby="dialogheader">
+    <h2 id="dialogheader">Escolha um Arquivo</h2>
+    ... Conteúdo do Dialog
+</div>
+
+ +

Exemplo 5: Definição Inline

+ +

No exemplo abaixo, a definição de um termo que é descrita no fluxo natural da narrativa é associada com o próprio termo usando o atributo aria-labelledby:

+ +
<p>O médico explicou que tinha sido um <dfn id="placebo">placebo</dfn>, ou <span role="definition" aria-labelledby="placebo">
+ou a uma preparação mais inerte prescrito para o alívio mental do paciente do que por seu efeito real sobre um distúrbio.</span>
+</p>
+
+ +

Exemplo 6: Definições de Listas

+ +

No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo aria-labelledby:

+ +
<dl>
+    <dt id="anathema">anátema</dt>
+    <dd role="definition" aria-labelledby="anathema">uma proibição ou maldição solenemente pronunciada pela autoridade eclesiástica
+                                                     e acompanhada por excomunhão</dd>
+    <dd role="definition" aria-labelledby="anathema">uma vigorosa denúncia</dd>
+
+    <dt id="homily">homilia</dt>
+    <dd role="definition" aria-labelledby="homily">um sermão usualmente curto</dd>
+    <dd role="definition" aria-labelledby="homily">uma leitura ou discurso sobre ou de um tema moral</dd>
+
+</dl>
+
+ +

Exemplo 7: Menus

+ +

No exemplo abaixo, um menu popup é associado com sua label usando o atributo aria-labelledby:

+ +
<div role="menubar">
+    <div role="menuitem" aria-haspopup="true" id="fileMenu">Arquivo</div>
+    <div role="menu" aria-labelledby="fileMenu">
+        <div role="menuitem">Abrir</div>
+        <div role="menuitem">Salvar</div>
+        <div role="menuitem">Salvar como ...</div>
+        ...
+    </div>
+    ...
+</div>
+
+ +

Exemplos Funcionais:

+ + + +

Notas 

+ +

O mapeamento mais comum de uma + API de acessibilidade +  para um rótulo é a propriedade acessível name

+ +

Usado pelas regras ARIA

+ +

todos os elementos de markup base

+ +

Técnicas ARIA relacionadas

+ + + +

Compatibilidade

+ +

TBD: Adicionar informação de suporte para combinações de produto UA e AT

+ +

Recursos Adicionais

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html new file mode 100644 index 0000000000..e93611b182 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.html @@ -0,0 +1,83 @@ +--- +title: Usando o atributo aria-required +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-required +tags: + - ARIA + - Acessibilidade +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute +--- +
+
+

Descrição

+ +

O atributo aria-required é usado para indicar que a entrada do usuário é obrigatória em um elemento antes que um formulário possa ser enviado. Este atributo pode ser usado com qualquer elemento de formulário HTML típico; não se limita a elementos que têm uma  role atribuída.

+ +

{{ HTMLVersionInline("5") }} agora tem o atributo required, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.

+ +

Valor

+ +

true ou false (Padrão: false)

+ +

Possíveis efeitos nos agentes de usuários e tecnologia assistiva 

+ +

Os leitores de tela devem anunciar o campo como obrigatório.

+ +

Observe que esse atributo não alterará automaticamente a apresentação do campo.

+ +
Nota: Opiniões podem diferir em como a tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é uma dessas opiniões e, portanto, não é normativa.
+ +

Exemplos

+ +

Exemplo 1: Um simples formulário

+ +

 

+ +
 <form action="post">
+     <label for="firstName">First name:</label>
+     <input id="firstName" type="text" aria-required="true" />
+     <br/>
+     <label for="lastName">Last name:</label>
+     <input id="lastName" type="text" aria-required="true" />
+     <br/>
+     <label for="streetAddress">Street address:</label>
+     <input id="streetAddress" type="text" />
+ </form>
+
+ +

Exemplos de trabalho:

+ +

Exemplo de Tooltip  (inclui o uso do atributo aria-required)

+ +

Notas 

+ +

Usado em ARIA roles

+ +
    +
  • Combobox
    • +
  • Gridcell
    • +
  • Listbox
    • +
  • Radiogroup
    • +
  • Spinbutton
    • +
  • Textbox
    • +
  • Tree
    • +
+ +

Técnicas relacionadas com ARIA

+ + + +

Compatibilidade

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Recursos adicionais

+ + +
+
diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html new file mode 100644 index 0000000000..18532f5f25 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_slider_role/index.html @@ -0,0 +1,125 @@ +--- +title: Usando o slider role +slug: Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_slider_role +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role +--- +

Descrição

+ +

Essa técnica demosntrará como usar o slider role. 

+ +

The slider role is used for markup that allows a user to select a value from within a given range. The slider role is assigned to the "thumb," the control that is adjusted to change the value. Typically, another element is styled to visually represent the range of possible valued, and the thumb positioned visually to represent the value within that range. As the user interacts with the thumb, the application must programmatically adjust the slider's aria-valuenow (and possible aria-valuetext) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.

+ +

Keyboard And Focus

+ +

The slider should be keyboard focusable and operable. When the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. Arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows):

+ + + + + + + + + + + + + + + + + + + + + + +
Tecla(s)Ação
Setas para direita e para cima Incrementa o valor selecionado
Setas para esquerda e para baixoDecrementa o valor selecionado
Page Up and Page DownOptionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)
+ +

Possible effects on user agents and assistive technology 

+ +

 

+ +
Note: Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.
+ +

Examplos

+ +

Examplo 1: Escala numérica simples

+ +

In the example below, a simple slider is used to select a value between 1 and 100. The current volume is 50. The application will programmatically update the value of aria-valuenow in response to user input.

+ +
<label for="fader">Volume</label>
+<input type="range"
+  id="fader"
+  min="1"
+  max="100"
+  value="50"
+  step="1"
+  aria-valuemin="1"
+  aria-valuemax="100"
+  aria-valuenow="50"
+  oninput="outputUpdate(value)">
+<output for="fader" id="volume">50</output>
+
+ +

The following code snippet allows you to return the output as it is updated by user input:

+ +
function outputUpdate(vol) {
+  document.querySelector('#volume').value = vol;
+}
+
+ +

Examplo 2: Valores de texto

+ +

Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the aria-valuetext attribute is used to provide the appropriate text name for the currently selected value. In the example below, the slider is used to select a day of the week.

+ +
<label for="day-handle">Days</label>
+<div class="day-slider">
+  <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-handle"
+     aria-valuemin="1"
+     aria-valuemax="7"
+     aria-valuenow="2"
+     aria-valuetext="Monday">
+ </div>
+</div>
+
+ +

The code snippet below shows a function that responds to user input and updates the aria-valuenow and aria-valuetext attributes:

+ +
var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+var updateSlider = function (newValue) {
+    var handle = document.getElementById("day-handle");
+    handle.setAttribute("aria-valuenow", newValue.toString());
+    handle.setAttribute("aria-valuetext", dayNames[newValue]);
+};
+
+ +

Working Examples:

+ + + +

Notas 

+ +

Atributos ARIA usados

+ + + + + +

Compatibility

+ +

TBD: Add support information for common UA and AT product combinations

+ +

Recursos Adicionais

+ + diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html deleted file mode 100644 index 25d3222fcd..0000000000 --- a/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_alert_role/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Utilizando a função "alerta" -slug: Web/Accessibility/ARIA/ARIA_Techniques/Utilizando_o_alert_role -tags: - - ARIA - - Accessibility - - Acessibilidade - - Alertas - - Avançado - - CSS - - Caixas de aviso - - Configuração role - - Guía - - HTML+ARIA - - NeedsContent - - PrecisaDeConteúdo - - WAI-ARIA - - wcag1.2.1 - - wcag3.3.1 -translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role ---- -

Descrição

- -
-

Esta técnica mostra como utilizar o atributo role alert e demonstra seu efeito em navegadores e tecnologias assistivas.

-
- -

O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, urgente. Quando este atributo (role) estiver ligado a um elemento, o navegador vai enviar um evento acessível de alerta aos produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo alert é mais útil para as informações que requerem a atenção imediata na tela. Por exemplo:

- - - -

Por causa da sua natureza intrusiva, o atributo de alerta deve ser usado moderadamente e, apenas, nas situações que exigirem atenção imediata. Mudanças dinâmicas que são menos urgentes devem receber um método menos agressivo, tal como a aria-live="polite", ou outros atributos (roles) para regiões dinâmicas.

- -

Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores

- -

Quando o atributo (role) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (user agent) deve fazer o seguinte:

- - - -

Os produtos de tecnologias assistivas devem atender tal evento e notificar seus utilizadores, em conformidade.

- - - -
Nota: As opiniões podem divergir sobre como uma tecnologia assistiva deve gerenciar esta técnica. A informação oferecida acima é uma dessas opiniões e, portanto, não é normativa.
- -

Exemplos

- -

Exemplo 1: Adicionando o atributo (role) no código HTML:

- -

O trecho abaixo mostra como o atributo role alert é inserido, diretamente, no código-fonte HTML. No momento em que o elemento termina de carregar, o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original quando a página carregar, o leitor de tela vai anunciar o erro imediatamente após a apresentação do título da página.

- -
<h2 role="alert">Your form could not be submitted because of 3 validation errors.(Seu formulário não pode ser submetido devido a 3 erros de validação)</h2>
- -

Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:

- -

Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:

- -
var myAlert = document.createElement("p");
-myAlert.setAttribute("role", "alert");
-var myAlertText = document.createTextNode("You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço, a fim de criar uma conta)");
-myAlert.appendChild(myAlertText);
-document.body.appendChild(myAlertText);
-
- -

Nota: O mesmo resultado pode ser obtido com menos código, quando se utiliza uma biblioteca de script, como jQuery:

- -
$("<p role='alert'>You must agree with our terms of service to create an account.(Você deve concordar com os nossos termos de serviço para criar uma conta)</p>").appendTo(document.body);
-
- -

Exemplo 3: Adicionando a função de alerta a um elemento existente:

- -

Às vezes é preferível adicionar uma função de alerta a um elemento que já está visível na página, a criar um novo elemento. Isto possibilita que os desenvolvedores reiterem a informação que virá a ser mais importante, ou urgente, para os utilizadores. Por exemplo, um controle de formulário pode ter uma instrução sobre o valor esperado. Caso um valor diferente seja inserido, o role="alert" pode ser adicionado ao texto de instrução e, então, o leitor de tela o anuncia como um alerta. O pseudo código, no fragmento abaixo, ilustra esta abordagem:

- -
<p id="formInstruction">You must select at least 3 options</p>
-
- -
// When the user tries to submit the form with less than 3 checkboxes selected (Quando houver a tentativa de submissão do formulário com menos de 3 caixas de seleção marcadas):
-document.getElementById("formInstruction").setAttribute("role", "alert");
- -

Exemplo 4: Construindo um elemento com uma função de alerta visível:

- -

Se um elemento já tem o atributo role="alert" e é, inicialmente, escondido pelo uso da CSS, torná-lo visível o faz disparar como se estivesse adicionado à página. Isto significa que um alerta existente pode ser "utilizado" múltiplas vezes. 

- -

Nota: Na maioria dos casos, esta abordagem não é recomendada, porque não é a ideal para esconder erro, ou alerta de texto, que não for aplicável no momento. Utilizadores de tecnologias assistivas antigas podem, ainda, perceber o texto de alerta, mesmo quando este não devesse ser aplicado, fazendo com que acreditem, incorretamente, que há um problema.

- -
.hidden {
-  display:none;
-}
-
- -
<p id="expirationWarning" role="alert" class="hidden">Your log in session will expire in 2 minutes(A sua sessão vai expirar em 2 minutos)</p>
-
- -
// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "hidden" faz o leitor de tela anunciar o alerta)
-document.getElementById("expirationWarning").className = "";
- -

Exemplos de Trabalhos:

- - - -

Notas:

- - - -

Atributos ARIA utilizados

- - - -

Técnicas ARIA relacionadas

- - - -

Compatibilidade

- -

TBD: Adicionar informações de suporte para UA comum e combinações de produtos TA / AT

- -

Recursos Adicionais

- - - -

 

diff --git a/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html new file mode 100644 index 0000000000..722c60d420 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/basic_form_hints/index.html @@ -0,0 +1,118 @@ +--- +title: Dicas básicas de form +slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form +translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints +--- +
+

Form labels

+
+ +

Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.

+ +

O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um id, e cada elemento {{HTMLElement("label")}} tem um atributo for indicando o id do {{HTMLElement("input")}} associado.

+ +

Exempl0 1. Form simples com labels

+ +
<form>
+  <ul>
+    <li>
+      <input id="wine-1" type="checkbox" value="riesling"/>
+      <label for="wine-1">Berg Rottland Riesling</label>
+    </li>
+    <li>
+      <input id="wine-2" type="checkbox" value="weissbergunder"/>
+      <label for="wine-2">Weissbergunder</label>
+    </li>
+    <li>
+      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
+      <label for="wine-3">Pinot Grigio</label>
+    </li>
+    <li>
+      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
+      <label for="wine-4">Berg Rottland Riesling</label>
+    </li>
+  </ul>
+</form>
+
+ +

Rotulando com ARIA

+ +

O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. WAI-ARIA, a especificação de Aplicações Internet Ricas em Acessibilidade da W3C Iniciativa de Acessibilidade Web, fornece o atributo aria-labelledby para esses casos.

+ +

O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.

+ +

Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)

+ +
<h3 id="rg1_label">Lunch Options</h3>
+
+<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
+  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Thai
+  </li>
+  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
+    <img role="presentation" src="radio-unchecked.gif" /> Subway
+  </li>
+  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
+    <img role="presentation" src="radio-checked.gif" /> Radio Maria
+  </li>
+</ul>
+
+ +

Descrevendo com ARIA

+ +

Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo aria-describedby para diretamente associar a descrição com o controle.

+ +

O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo aria-describedby no {{HTMLElement("button")}} referencia o id de {{HTMLElement("div")}}.

+ +

Exemplo 3. Um botão descrito por um elemento separado.

+ +
<button aria-describedby="descriptionRevert">Revert</button>
+<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div>
+ +

(Note que o atributo aria-describedby é usado para outros propósitos, além de controles do form.)

+ +

Campos inválidos e obrigatórios

+ +

Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:

+ + + +

O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo aria-required é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo aria-invalid do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).

+ +

Exemplo 4a. Um form com campos obrigatórios.

+ +
<form>
+  <div>
+    <label for="name">* Name:</label>
+    <input type="text" value="name" id="name" aria-required="true"/>
+  </div>
+  <div>
+    <label for="phone">Phone:</label>
+    <input type="text" value="phone" id="phone" aria-required="false"/>
+  </div>
+  <div>
+    <label for="email">* E-mail:</label>
+    <input type="text" value="email" id="email" aria-required="true"/>
+  </div>
+</form>
+ +

Exemplo 4b. Parte de um script que valida a entrada no form.

+ +
var validate = function () {
+  var emailElement = document.getElementById(emailFieldId);
+  var valid = emailValid(formData.email); // returns true if valid, false otherwise
+
+  emailElement.setAttribute("aria-invalid", !valid);
+  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
+};
+ +

Fornecendo Mensagens de Erro Úteis

+ +

Leia como usar alertas ARIA para melhorar forms.

+ +
A ser decidido: devemos ou combinar em um artigo ou separar em técnicas, ou ambos. Além disso, é ARIA marcação apropriada para mensagens de erro em uma página carregada após a validação do lado do servidor?
+ +

Para maiores informações usando ARIA para acessibilidade de forms, veja o documento Práticas de Cricação de WAI-ARIA.

diff --git "a/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" "b/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" deleted file mode 100644 index 722c60d420..0000000000 --- "a/files/pt-br/web/accessibility/aria/forms/dicas_b\303\241sicas_de_form/index.html" +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Dicas básicas de form -slug: Web/Accessibility/ARIA/forms/Dicas_básicas_de_form -translation_of: Web/Accessibility/ARIA/forms/Basic_form_hints ---- -
-

Form labels

-
- -

Quando estiver implementando forms usando elementos HTML tradicionais relacionados à foms, é importante fornecer labels para controles e para explicitamente associar um label com o seu ocntrole. Quando um usuário de leitor de tela navega uma página, o leitor de tel irá descrever os controles do form, mas sem uma associação direta entre o controle e seu label, o leitor de tela não tem maneira de saber qual label é o correto.

- -

O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um id, e cada elemento {{HTMLElement("label")}} tem um atributo for indicando o id do {{HTMLElement("input")}} associado.

- -

Exempl0 1. Form simples com labels

- -
<form>
-  <ul>
-    <li>
-      <input id="wine-1" type="checkbox" value="riesling"/>
-      <label for="wine-1">Berg Rottland Riesling</label>
-    </li>
-    <li>
-      <input id="wine-2" type="checkbox" value="weissbergunder"/>
-      <label for="wine-2">Weissbergunder</label>
-    </li>
-    <li>
-      <input id="wine-3" type="checkbox" value="pinot-grigio"/>
-      <label for="wine-3">Pinot Grigio</label>
-    </li>
-    <li>
-      <input id="wine-4" type="checkbox" value="gewurztraminer"/>
-      <label for="wine-4">Berg Rottland Riesling</label>
-    </li>
-  </ul>
-</form>
-
- -

Rotulando com ARIA

- -

O elemento HTML {{HTMLElement("label")}} é apropriado para elementos relacionados com form, mas muitos controles de form são implementados como widget JavaScript dinâmico, usando {{HTMLElement("div")}}s ou {{HTMLElement("span")}}s. WAI-ARIA, a especificação de Aplicações Internet Ricas em Acessibilidade da W3C Iniciativa de Acessibilidade Web, fornece o atributo aria-labelledby para esses casos.

- -

O exemplo abaixo mostra um grupo de botões rádio usando um lista não ordenada. Note que na linha 3, o elemento {{HTMLElement("li")}} seta o atributo aria-labelledby para "rg1_label," o id do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.

- -

Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de http://www.oaa-accessibility.org/examplep/radio1/)

- -
<h3 id="rg1_label">Lunch Options</h3>
-
-<ul class="radiogroup" id="rg1"  role="radiogroup" aria-labelledby="rg1_label">
-  <li id="r1"  tabindex="-1" role="radio" aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Thai
-  </li>
-  <li id="r2"  tabindex="-1" role="radio"  aria-checked="false">
-    <img role="presentation" src="radio-unchecked.gif" /> Subway
-  </li>
-  <li id="r3"   tabindex="0" role="radio" aria-checked="true">
-    <img role="presentation" src="radio-checked.gif" /> Radio Maria
-  </li>
-</ul>
-
- -

Descrevendo com ARIA

- -

Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo aria-describedby para diretamente associar a descrição com o controle.

- -

O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo aria-describedby no {{HTMLElement("button")}} referencia o id de {{HTMLElement("div")}}.

- -

Exemplo 3. Um botão descrito por um elemento separado.

- -
<button aria-describedby="descriptionRevert">Revert</button>
-<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div>
- -

(Note que o atributo aria-describedby é usado para outros propósitos, além de controles do form.)

- -

Campos inválidos e obrigatórios

- -

Web developers tipicamente usam estratégias de apresentação para indicar campos obrigatórios ou campos inválidos, mas tecnologias assistivas (TAs) não podem necessariamente inferir essa informação a partir da apresentação. ARIA fornece atributos para indicar que os controles do form são obrigatórios ou inválidos:

- - - -

O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo aria-required é setado para true (em adição aos asteriscos próximos aos labels) indicando que os campos de nome e e-mail são obrigatórios. A segunda parte do exemplo é um trecho de JavaScript que valida o e-mail e seta o atributo aria-invalid do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).

- -

Exemplo 4a. Um form com campos obrigatórios.

- -
<form>
-  <div>
-    <label for="name">* Name:</label>
-    <input type="text" value="name" id="name" aria-required="true"/>
-  </div>
-  <div>
-    <label for="phone">Phone:</label>
-    <input type="text" value="phone" id="phone" aria-required="false"/>
-  </div>
-  <div>
-    <label for="email">* E-mail:</label>
-    <input type="text" value="email" id="email" aria-required="true"/>
-  </div>
-</form>
- -

Exemplo 4b. Parte de um script que valida a entrada no form.

- -
var validate = function () {
-  var emailElement = document.getElementById(emailFieldId);
-  var valid = emailValid(formData.email); // returns true if valid, false otherwise
-
-  emailElement.setAttribute("aria-invalid", !valid);
-  setElementBorderColour(emailElement, valid); // sets the border to red if second arg is false
-};
- -

Fornecendo Mensagens de Erro Úteis

- -

Leia como usar alertas ARIA para melhorar forms.

- -
A ser decidido: devemos ou combinar em um artigo ou separar em técnicas, ou ambos. Além disso, é ARIA marcação apropriada para mensagens de erro em uma página carregada após a validação do lado do servidor?
- -

Para maiores informações usando ARIA para acessibilidade de forms, veja o documento Práticas de Cricação de WAI-ARIA.

diff --git a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html b/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html deleted file mode 100644 index 73b9605ef1..0000000000 --- a/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Guia para implementar o leitor de tela ARIA -slug: Web/Accessibility/ARIA/Guia_para_implementar_o_leitor_de_tela_ARIA -tags: - - ARIA - - Acessibilidade -translation_of: Web/Accessibility/ARIA/ARIA_Screen_Reader_Implementors_Guide ---- -

Regiões Ativas

- -

Este é apenas um guia. Uma marcação de região ativa é uma área complexa que é algo aberto à interpretações. O que segue pretende prover um guia de implementação que respeita a necessidade dos desenvolvedores de leitores de tela para tentar novas coisas. A intenção é chegar a um balanço entre providenciar um guia útil em como usar o significado de marcação pretendido

- -

Interpretando a marcação de região ativa WAI-ARIA

- -
    -
  1. Mudanças ativas são são dicas: Em geral marcação de região ativa é dado pelo autor como dicas, e a tecnologia assistiva pode permitir , site or even region-specific settings, assim como heurística para ajudar com mudanças ativas nas páginas que não têm dicas WAI-ARIA.
    2. -
  2. Opcionalmente, criar uma segunda, queue adicional se o usuário configurar um segundo canal de hardware: Se há dois canais para apresentação (i.e. text-to-speech e display Braile), então duas queues podem ser mantidas para permitir apresentação paralela. Os canais poderiam se configurados pelo usuário para apresentar regiões ativas baseada em vez ou prioridades.
    3. -
  3. Regiões ocupadas: Qualquer alteração numa região marcada com aria-busy="true" não deve ser adicionada à queue até que aquele atributo seja limpo.
    4. -
  4. Prioridade (aria-live ou a partir da vez) tem primeira precedência: itens deveriam ser adicionados à queue baseadas no seu nível de prioridade da propriedade aria-live ou inerente da vez (i.e. role="log" é prioridade por padrão). Itens assertivos são os primeiros então nível de prioridade. Alternativamente, implementações podem escolher ter uma política de limpeza mais items de prioridade, i.e. itens assertivos limpam qualquer item de prioridade da queue.
    5. -
  5. Tempo toma a segunda procedência: Priorizar itens com o mesmo nível de prioridade de acordo com quando o evento ocorre (eventos anteriores vêm primeiro). Itens presentes do mesmo nível de prioridade na ordem do que ocorreu primeiro.
    6. -
  6. Regiões atômicas (aria-atomic="true")  com mudanças múltiplas não deveriam estar presentes duas vezes com o mesmo conrteúdo. Como um novo evento para uma região atômica é adicionada à queue e remove um evento anterior para a mesma região. É provavelmente desejável que tenha pelo menos um pequeno timeout antes de apresentar mudanças numa região atômica, com a finalidade de evitar apresentar a região duas vezes para duas mudançasque ocorrem rapidamente uma após a outra.
    7. -
  7. Inclua labels quando estiver apresntando mudanças: se a mudança ocorre em algo com um label de alguma forma  semântico, fale o label. Isso é particularmente importante para mudanças em data cells, onde os headers column e row fornecem informação contextual importante.
    8. -
- -

Ideias para Configurações e Heurística

- -
    -
  1. Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.
    2. -
  2. Quando não há marcação WAI-ARIA presente, automaticamente apresenta algumas mudanças a mesnos que o usuário configure todas as mudanças ativas para desligado. Por exemplo, mudanças automáticas de fala que são causadas pela própria entrada do usuário, como parte do contexto daquela entrada.
    3. -
  3. Permitir configurações globais para desligar a apresentação de mudanças ativas, apresentar todas as mudanças ativas, use marcação, ou seja "esperto" (use heurística).
    4. -
- -

Detalhes para Processamento via APIs Platform Acessibility

- -

Esperamos que o desenvolvedor do navegador irá trabalhar para fornecer implementações consistentes. A imlementação mais completa das regiões ativas atualmente está no Firefox 3. Aqui está como regiões ativas WAI-ARIA são expostas no Firefox 3.

diff --git a/files/pt-br/web/accessibility/aria/widgets/overview/index.html b/files/pt-br/web/accessibility/aria/widgets/overview/index.html new file mode 100644 index 0000000000..6e8cb06ae2 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/widgets/overview/index.html @@ -0,0 +1,72 @@ +--- +title: Visão geral +slug: Web/Accessibility/ARIA/widgets/Visão_geral +tags: + - Acessibilidade + - JavaScript + - Landing + - PrecisaAtualizar +translation_of: Web/Accessibility/ARIA/widgets/overview +--- +
Aviso: precisa de atualização
+ +

Introdução 

+ +

Alguns exemplos funcionais e boas práticas na construção de widgets acessíveis aplicando JavaScript.

+ +

Recursos Gerais

+ + + +

Caixa de seleção

+ + + + + + + +

Deslizantes

+ + + +

Abas

+ + + +

Combo-box

+ + + + + + + +

Validação de Formulários

+ + + +

Tabelas

+ + diff --git "a/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" "b/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" deleted file mode 100644 index 6e8cb06ae2..0000000000 --- "a/files/pt-br/web/accessibility/aria/widgets/vis\303\243o_geral/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Visão geral -slug: Web/Accessibility/ARIA/widgets/Visão_geral -tags: - - Acessibilidade - - JavaScript - - Landing - - PrecisaAtualizar -translation_of: Web/Accessibility/ARIA/widgets/overview ---- -
Aviso: precisa de atualização
- -

Introdução 

- -

Alguns exemplos funcionais e boas práticas na construção de widgets acessíveis aplicando JavaScript.

- -

Recursos Gerais

- - - -

Caixa de seleção

- - - - - - - -

Deslizantes

- - - -

Abas

- - - -

Combo-box

- - - - - - - -

Validação de Formulários

- - - -

Tabelas

- - diff --git a/files/pt-br/web/accessibility/index.html b/files/pt-br/web/accessibility/index.html new file mode 100644 index 0000000000..b494b06163 --- /dev/null +++ b/files/pt-br/web/accessibility/index.html @@ -0,0 +1,52 @@ +--- +title: Acessibilidade +slug: Web/Acessibilidade +tags: + - ARIA + - Acessibilidade + - Avançado + - Desenvolvimento Web + - TA - Tecnologias Assistivas +translation_of: Web/Accessibility +--- +

Acessiblidade no desenvolvimento Web significa permitir que o máximo possível de pessoas possa acessar os sites da web mesmo quando suas habilidades são limitadas de alguma forma. Aqui nós fornecemos informações sobre o desenvolvimento de conteúdo acessível.

+ +

"A palavra Acessibilidade é, frequentemente, usada para descrever facilidades ou assistências às pessoas com necessidades especiais, como em acessível para cadeirantes. Isto pode se estender para o Sistema Braille, rampas para cadeirantes, sinais sonoros em passagens de pedestres, modelos de páginas e assim por diante". Acessibilidade na Wikipedia

+ +

"A Web é, fundamentalmente, projetada para funcionar para todas as pessoas, independentemente de máquina, programas, língua, cultura, localização ou capacidade física ou mental de seus utilizadores. Quando a web atende a esses requisitos, ela se torna acessível a pessoas com dificuldades auditivas, motoras, visuais e cognitivas". W3C - Acessibilidade

+ +
+
+

Documentação

+ +
+
Desenvolvimento Web
+
Uma coleção de artigos destinados a mostrar as principais questões de desenvolvimento web no mundo da acessibilidade.
+
ARIA
+
Uma coleção de artigos para aprender como usar ARIA e tornar seus documentos HTML mais acessíveis.
+
Desenvolvimento de tecnologias assistivas (TA)
+
Uma coleção de artigos direcionados a desenvolvedores de tecnologias assistivas.
+
Acessibilidade em dispositivos móveis
+
Esse documento fornece uma breve lista das necessidades da acessibilidade para desenvolvedores de aplicativos móveis.
+
+ +

Ver todos os artigos sobre Acessibilidade...

+
+ +
+

Ferramentas para desenvolvedores web

+ + + + + +

Outras páginas úteis

+ + +
+
diff --git a/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html new file mode 100644 index 0000000000..29d407c175 --- /dev/null +++ b/files/pt-br/web/accessibility/mobile_accessibility_checklist/index.html @@ -0,0 +1,100 @@ +--- +title: Acessibilidade para plataforma móvel +slug: Web/Acessibilidade/Accessibilidade_para_plataforma_movel +tags: + - Acessibilidade + - Firefox OS + - Guías + - Móveis +translation_of: Web/Accessibility/Mobile_accessibility_checklist +--- +
+

Este documento contém uma lista concisa de requisitos para desenvolvedores de aplicativos móveis. Tem como intenção evoluir continuamente conforme forem aparecendo outros padrões.

+
+ +

Cor

+ + + +
+

   Jon Snook escreveu um útil Colour Contrast Checker  que é usado para checar o contraste de cores entre o background e o foreground. De maneira alternativa o Tanaguru Contrast-Finder faz um trabalho similar, mas também sugeste melhores contrastes de cores considerando as usadas.

+
+ +

Visibilidade

+ + + +

Foco

+ + + +

Textos Equivalentes

+ + + +

Manipulação de Estado

+ + + +

Orientações gerais

+ + + +
+

Tanaguru's automated accessibility testing service fornece uma maneira útil para descobrir alguns erros de acessibilidade que ocorrem em páginas web, ou instalando aplicativos web (ex: Firefox OS.) Você pode encontrar mais sobre a técnica de implementação do Tanaguru, como também contribuir para o projeto tanaguru.org.

+
+ +
+

A versão original desse documento foi escrita por Yura Zenevich.

+
+ +

 

diff --git a/files/pt-br/web/accessibility/understanding_wcag/index.html b/files/pt-br/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..392c1008b7 --- /dev/null +++ b/files/pt-br/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,57 @@ +--- +title: Entendendo as Diretrizes de Acessibilidade do Conteúdo Web +slug: Web/Acessibilidade/Entendendo_WCAG +tags: + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

Este conjunto de artigos fornece explicações rápidas para ajudá-lo a entender as etapas que devem ser seguidas para estar em conformidade com as recomendações descritas nas Diretrizes de Acessibilidade para Conteúdo Web 2.0 ou 2.1 do W3C (ou apenas WCAG, para as finalidades deste artigo).

+ +

O WCAG 2.0 e 2.1 fornece um conjunto detalhado de diretrizes para tornar o conteúdo web mais acessível para pessoas com uma ampla variedade de deficiências. Isso é compreensivo, porém incrivelmente detalhado e muito difícil de obter uma compreensão rápida disso. Por essa razão, nós fizemos uma sumário com os passos práticosque você precisa saber para satisfazer as diferentes recomendações, com mais alguns link para mais detalhes do que está sendo solicitado.

+ +

Os quatro princípios

+ +

WCAG is broadly broken down into four principles — major things that web content must be to be considered accessible (see Understanding the Four Principles of Accessibility for the WCAG definitions).

+ +

Each of the links below will take you to pages that further expand on these areas, giving you practical advice on how to write your web content so it conforms to the success criteria outlined in each of the WCAG 2.0 and 2.1 guidelines that further sub-divides each principle.

+ + + +

Should I use WCAG 2.0 or 2.1?

+ +

WCAG 2.1 is the most recent and relevant accessibility standard. Use WCAG 2.1 to help more people with disabilities and reduce the future legal risk for web site owners. Target WCAG 2.0 first when allocating resources. Then step up to WCAG 2.1. 

+ +

O que é o WCAG 2.1?

+ +

WCAG 2.1 was published as an official recommendation on 05 June 2018. The European Union (EU) adopted WCAG 2.1 as the digital accessibility standard in September 2018. W3C published a press release WCAG 2.1 Adoption in Europe. 

+ +

WCAG 2.1 includes:

+ + + + + +

This guide is intended to provide practical information to help you build better, more accessible websites. However, we are not lawyers, and none of this constitutes legal advice. If you are worried about the legal implications of web accessibility, we'd recommend that you check the specific legislation governing accessibility for the web/public resources in your country or locale, and seek the advice of a qualified lawyer.

+ +

O que é acessibilidade? e particulamente o Guia de Acessibilidade e a seção de regras fornecem mais informações relacionadas.

diff --git a/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html new file mode 100644 index 0000000000..905c6d062f --- /dev/null +++ b/files/pt-br/web/accessibility/understanding_wcag/keyboard/index.html @@ -0,0 +1,87 @@ +--- +title: Keyboard +slug: Web/Acessibilidade/Entendendo_WCAG/Keyboard +translation_of: Web/Accessibility/Understanding_WCAG/Keyboard +--- +
To be fully accessible, a web page must be operable by someone using only a keyboard to access and control it. This includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for input whenever possible.
+ +

Focusable elements should have interactive semantics

+ +

If an element can be focused using the keyboard, then it should be interactive; that is, the user should be able to do something to it and produce a change of some kind (for example, activating a link or changing an option).

+ +
+

Note: One important exception to this rule is if the element has role="document" applied to it, inside an interactive context (such as role="application"). In such a case, focusing the nested document is the only way of returning assistive technology to a non-interactive state (often called "browse mode").

+
+ +

Most interactive elements are focusable by default; you can make an element focusable by adding a tabindex=0 attribute value to it. However, you should only add tabindex if you have also made the element interactive, for example, by defining appropriate event handlers keyboard events.

+ +

See also

+ + + +

Avoid using tabindex attribute greater than zero

+ +

The tabindex attribute indicates that an element is focusable using the keyboard. A value of zero indicates that the element is part of the default focus order, which is based on the ordering of elements in the HTML document. A positive value puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).

+ +

This creates confusion for keyboard-only users when the focus order differs from the logical order of the page. A better strategy is to structure the HTML document so that focusable elements are in a logical order, without the need to re-order them with positive tabindex values.

+ +

See also

+ + + +

Clickable elements must be focusable and should have interactive semantics

+ +

If an element can be clicked with a pointing device, such as a mouse, then it should also be focusable using the keyboard, and the user should be able to do something by interacting with it.

+ +

An element is clickable if it has an onclick event handler defined. You can make it focusable by adding a tabindex=0 attribute value to it. You can make it operable with the keyboard by defining an onkeydown event handler; in most cases, the action taken by event handler should be the same for both types of events.

+ +

See also

+ + + +

Interactive elements must be able to be activated using a keyboard

+ +

If the user can interact with an element using touch or a pointing device, then the element should also support interacting using the keyboard. That is, if you have defined event handlers for touch or click events, you should also define them for keyboard events. The keyboard event handlers should enable the effectively the same interaction as the touch or click handlers.

+ +

See also

+ + + +

Interactive elements must be focusable

+ +

If the user can interact with an element (for example, using touch or a pointing device), then it should be focusable using the keyboard. You can make it focusable by adding a tabindex=0 attribute value to it. That will add the element to the list of elements that can be focused by pressing the Tab key, in the sequence of such elements as defined in the HTML document.

+ +

See also

+ + + +

Focusable element must have focus styling

+ +

Any element that can receive keyboard focus should have visible styling that indicates when the element is focused. You can do this with the :focus CSS pseudo-class.

+ +

Standard focusable elements such as links and input fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.

+ +

If you create your own focusable components, be sure that you also define focus styling for them.

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf