diff options
Diffstat (limited to 'files/pt-br/web/accessibility')
24 files changed, 7258 insertions, 0 deletions
diff --git a/files/pt-br/web/accessibility/aria/aria_guides/index.html b/files/pt-br/web/accessibility/aria/aria_guides/index.html new file mode 100644 index 0000000000..698295b8d5 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_guides/index.html @@ -0,0 +1,27 @@ +--- +title: ARIA guides +slug: Web/Accessibility/ARIA/ARIA_Guides +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Guides +--- +<p>Aplicações de internet ricas acessíveis (<strong>ARIA</strong>) define caminhos para fazer a web mais acessível para pessoas com deficiências. Umas poucas linhas guias para seguirem que garante melhor acessibilidade, como usar drag and drop para colocações de widgets.</p> + +<ul> + <li>Manipulação de erros em formulários</li> + <li>Widgets de rotulagens</li> + <li>Rotulagem de widgets compostos e regiões</li> + <li>Gerenciamento do foco em Widgets Compostos (aria-activedescendant vs roving tabindex)</li> + <li>Usando funções de referência</li> + <li>Manipulação dinâmica de atualizações & Regiões ao vivo</li> + <li>Virtual vs. Modo não Virtual em AT Produtos</li> + <li>Usando Drag & Drop</li> + <li>Notificar usuários de Não-ARIA Leitores de telas</li> + <li>Estrtura de fixação com papel de apresentação</li> + <li>Esconder tabela de leiaute (Layout)</li> + <li>Gerenciamento de diálogos modais e não modais</li> + <li>Usando ARIA com HTML5</li> + <li>Como testar ARIA</li> + <li>ARIA em dispositivos móveis</li> +</ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/index.html new file mode 100644 index 0000000000..446c2132d4 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/index.html @@ -0,0 +1,194 @@ +--- +title: ARIA techniques +slug: Web/Accessibility/ARIA/ARIA_Techniques +tags: + - ARIA + - Acessibilidade + - Precisa de Tradução + - Referencia + - TopicStub + - Visão Geral +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +<p>O ARIA define as semânticas que podem ser aplicadas aos elementos, e são divididas em <strong>funções</strong> (definindo um tipo de elemento da interface do usuário) e <strong>estados</strong> e <strong>propriedades</strong> que são suportados por uma função. Os autores devem atribuir uma função ARIA e os estados e propriedades apropriados a um elemento durante seu ciclo de vida, a menos que o elemento já possua semântica ARIA apropriada (através do uso de um elemento HTML apropriado). A adição de semântica ARIA apenas expõe informações extras para a API de acessibilidade de um navegador e não afeta o DOM de uma página.</p> + +<h2 id="Funções">Funções</h2> + +<h3 id="Funções_de_widget">Funções de widget</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">button</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">checkbox</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">link</a></li> + <li>menuitem</li> + <li>menuitemcheckbox </li> + <li>menuitemradio</li> + <li>option</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li> + <li>scrollbar</li> + <li>searchbox</li> + <li>separator (when focusable)</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li> + <li>spinbutton</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">treeitem</a></li> +</ul> + +<h3 id="Funções_compostas">Funções compostas</h3> + +<p>As técnicas abaixo descrevem cada função composta, bem como suas funções filho obrigatórias e opcionais.</p> + +<ul> + <li>combobox</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (incluindo as funções <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader)</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a> (incluindo a função option)</li> + <li>menu</li> + <li>menubar</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup (veja a função radio)</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (incluindo as funções <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">tree</a></li> + <li>treegrid</li> +</ul> + +<h3 id="Funções_da_estrutura_de_documento">Funções da estrutura de documento</h3> + +<ul> + <li></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">article</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li> + <li>columnheader</li> + <li>definition</li> + <li>directory</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li> + <li>feed</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li> + <li>math</li> + <li>none</li> + <li>note</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li> + <li>rowheader</li> + <li>separator</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li> + <li>term</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">tooltip</a></li> +</ul> + +<h3 id="Funções_de_ponto_de_referência">Funções de ponto de referência</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">banner</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li> +</ul> + +<h3 id="Funções_de_regiões_ativa">Funções de regiões ativa</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">log</a></li> + <li>marquee</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li> +</ul> + +<h3 id="Funções_de_janela">Funções de janela</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li> +</ul> + +<h2 id="Estados_e_propriedades">Estados e propriedades</h2> + +<h3 id="Atributos_de_widget">Atributos de widget</h3> + +<ul> + <li>aria-autocomplete</li> + <li>aria-checked</li> + <li>aria-current</li> + <li>aria-disabled</li> + <li>aria-errormessage</li> + <li>aria-expanded</li> + <li>aria-haspopup</li> + <li>aria-hidden</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> + <li>aria-level</li> + <li>aria-modal</li> + <li>aria-multiline</li> + <li>aria-multiselectable</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li>aria-placeholder</li> + <li>aria-pressed</li> + <li>aria-readonly</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> + <li>aria-selected</li> + <li>aria-sort</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> +</ul> + +<h3 id="Atributos_da_região_ativa">Atributos da região ativa</h3> + +<ul> + <li>aria-live</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> + <li>aria-atomic</li> + <li>aria-busy</li> +</ul> + +<h3 id="Atributos_de_drag_drop">Atributos de drag & drop</h3> + +<ul> + <li>aria-dropeffect</li> + <li>aria-dragged</li> +</ul> + +<h3 id="Atributos_de_relacionamento">Atributos de relacionamento</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> + <li>aria-colcount</li> + <li>aria-colindex</li> + <li>aria-colspan</li> + <li>aria-controls</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Annotations#Associating_annotated_elements_with_their_details">aria-details</a></li> + <li>aria-errormessage</li> + <li>aria-flowto</li> + <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li>aria-owns</li> + <li>aria-posinset</li> + <li>aria-rowcount</li> + <li>aria-rowindex</li> + <li>aria-rowspan</li> + <li>aria-setsize</li> +</ul> + +<h3 id="Propriedades_específicas_do_MicrosoftEdge">Propriedades específicas do MicrosoftEdge</h3> + +<ul> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li> +</ul> 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 new file mode 100644 index 0000000000..cd7cb90bb9 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-labelledby/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 +--- +<h3 id="Descrição">Descrição</h3> + +<p>Essa técnica demonstra como usar o atributo <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby"><code>aria-labelledby</code></a>.</p> + +<p>O atributo <code>aria-labelledby</code> é 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.</p> + +<p><code>aria-labelledby</code> é muito similar ao <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a>: uma label descreve a essência de um objeto, enquanto uma descrição prove mais informação que o usuário pode precisar.</p> + +<p>O atributo <code>aria-labelledby</code> 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.</p> + +<p><code>aria-labelledby</code> podem ser usadas em conjunto com o elemento {{ HTMLElement("label") }} (usando o atributo <code style="font-style: normal;">for</code>) para melhorar a compatibilidade com user agents que não suportam ainda ARIA.</p> + +<p>Esse atributo pode ser usado com qualquer elemento HTML de formulário; não é limitado a elementos que tem uma <span style="font-family: Consolas, Monaco, 'Andale Mono', monospace;">role</span> ARIA atribuída.</p> + +<h3 id="Value">Value</h3> + +<p>Uma lista de IDs do elemento separada por espaços</p> + +<h3 id="Possíveis_efeitos_em_user_agents_e_tecnologias_assistivas">Possíveis efeitos em user agents e tecnologias assistivas </h3> + +<p>Quando ambos <code>aria-labelledby</code> e <a href="/en/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute"><code>aria-label</code></a> são usados, user agents dão precedência ao <code>aria-labelledby</code> quando computam o nome da propriedade acessível.</p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="Exemplos">Exemplos</h3> + +<h4 id="Exemplo_1_Múltiplas_Labels">Exemplo 1: Múltiplas Labels</h4> + +<p>No exemplo abaixo, cada campo input é rotulado por tanto por seu próprio rótulo individual como pelo rótulo do grupo:</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemplo_2_Associando_Cabeçalhos_com_Regiões">Exemplo 2: Associando Cabeçalhos com Regiões</h4> + +<p>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 <em>contem</em> o cabeçalho.</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemplo_3_Radio_Groups">Exemplo 3: Radio Groups</h4> + +<p>No exemplo abaixo, o container de um <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radiogroup_role" title="Using the alert role">radiogroup</a> é associado com suas labels usando o atributo <code>aria-labelledby</code>:</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemplo_4_Dialog_Label">Exemplo 4: Dialog Label</h4> + +<p>No exemplo abaixo, o elemento cabeçalho que rotula o <em>dialog</em> é referenciado pelo atributo <code>aria-labelledby</code>:</p> + +<pre class="brush: html"><div role="dialog" aria-labelledby="dialogheader"> + <h2 id="dialogheader">Escolha um Arquivo</h2> + ... Conteúdo do Dialog +</div> +</pre> + +<h4 id="Exemplo_5_Definição_Inline">Exemplo 5: Definição Inline</h4> + +<p>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 <code>aria-labelledby</code>:</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemplo_6_Definições_de_Listas">Exemplo 6: Definições de Listas</h4> + +<p>No exemplo abaixo, as definições numa lista formal de definições são associadas com os termos que eles definem usando o atributo <code>aria-labelledby</code>:</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemplo_7_Menus">Exemplo 7: Menus</h4> + +<p>No exemplo abaixo, um <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-haspopup_attribute" title="Using the aria-required attribute">menu popup</a> é associado com sua label usando o atributo <code>aria-labelledby</code>:</p> + +<pre class="brush: html"><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> +</pre> + +<h4 id="Exemplos_Funcionais">Exemplos Funcionais:</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/button2/" title="http://www.oaa-accessibility.org/examplep/button2/">Exemplo de um button</a> usando <code>aria-labelledby</code></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/combobox1/" title="http://www.oaa-accessibility.org/examplep/combobox1/">Exemplo de um combobox</a> usando <code>aria-labelledby</code></li> +</ul> + +<h3 id="Notas">Notas </h3> + +<p>O mapeamento mais comum de uma + <i>API de acessibilidade</i> + para um rótulo é a propriedade acessível <em>name</em></p> + +<h3 id="Usado_pelas_regras_ARIA">Usado pelas regras ARIA</h3> + +<p>todos os elementos de markup base</p> + +<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute">Usando o atributo aria-label</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">Usando o atributo aria-describedby</a></li> +</ul> + +<h3 id="Compatibilidade">Compatibilidade</h3> + +<p class="comment">TBD: Adicionar informação de suporte para combinações de produto UA e AT</p> + +<h3 id="Recursos_Adicionais">Recursos Adicionais</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby">Especificação WAI-ARIA para aria-labelledby</a></li> +</ul> 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 new file mode 100644 index 0000000000..e93611b182 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_atributo_aria-required/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 +--- +<div> +<div> +<h3 id="Descrição">Descrição</h3> + +<p><span class="seoSummary">O atributo <a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required"><code>aria-required</code></a> é 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 <code>role</code> atribuída.</span></p> + +<p>{{ HTMLVersionInline("5") }} agora tem o atributo <code>required</code>, mas aria-required ainda é útil para agentes de usuário que não suportam ainda HTML5.</p> + +<h3 id="Valor">Valor</h3> + +<p><code>true</code> ou <code>false</code> (Padrão: <code>false</code>)</p> + +<h3 id="Possíveis_efeitos_nos_agentes_de_usuários_e_tecnologia_assistiva">Possíveis efeitos nos agentes de usuários e tecnologia assistiva </h3> + +<p>Os leitores de tela devem anunciar o campo como obrigatório.</p> + +<p>Observe que esse atributo não alterará automaticamente a apresentação do campo.</p> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="Exemplos">Exemplos</h3> + +<h4 id="Exemplo_1_Um_simples_formulário">Exemplo 1: Um simples formulário</h4> + +<p> </p> + +<pre class="brush: html"> <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> +</pre> + +<h4 id="Exemplos_de_trabalho">Exemplos de trabalho:</h4> + +<p><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo de Tooltip </a> (inclui o uso do atributo <code>aria-required</code>)</p> + +<h3 id="Notas">Notas </h3> + +<h3 id="Usado_em_ARIA_roles">Usado em ARIA roles</h3> + +<ul> + <li>Combobox</li> + <li>Gridcell</li> + <li>Listbox</li> + <li>Radiogroup</li> + <li>Spinbutton</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="Using the textbox role">Textbox</a></li> + <li>Tree</li> +</ul> + +<h3 id="Técnicas_relacionadas_com_ARIA">Técnicas relacionadas com ARIA</h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid property">Usando o atributo aria-invalid</a></li> +</ul> + +<h3 id="Compatibilidade">Compatibilidade</h3> + +<p class="comment">TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Recursos_adicionais">Recursos adicionais</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-required">Especificação WAI-ARIA para<code>aria-required</code></a></li> + <li><a class="external" href="http://www.w3.org/TR/wai-aria-practices/#ariaform" title="http://www.w3.org/TR/wai-aria-practices/#ariaform">WAI-ARIA Authoring Practices for forms</a></li> + <li><a href="/en/HTML/HTML5/Constraint_validation" title="Constraint validation">Constraint validation</a> in {{ HTMLVersionInline("5") }}</li> +</ul> +</div> +</div> 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 new file mode 100644 index 0000000000..18532f5f25 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/usando_o_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 +--- +<h3 id="Descrição">Descrição</h3> + +<p>Essa técnica demosntrará como usar o <a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" rel="external" title="http://www.w3.org/TR/wai-aria/roles#slider">slider</a> role. </p> + +<p>The<code> slider</code><code> </code>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 <code>aria-valuenow</code> (and possible <code>aria-valuetext</code>) attribute to reflect the current value. See the {{ anch("Examples") }} section below for more information.</p> + +<h4 id="Keyboard_And_Focus">Keyboard And Focus</h4> + +<p>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):</p> + +<table style="width: 70%;"> + <thead> + <tr> + <th scope="col">Tecla(s)</th> + <th scope="col">Ação</th> + </tr> + </thead> + <tbody> + <tr> + <td>Setas para direita e para cima </td> + <td>Incrementa o valor selecionado</td> + </tr> + <tr> + <td>Setas para esquerda e para baixo</td> + <td>Decrementa o valor selecionado</td> + </tr> + <tr> + <td>Page Up and Page Down</td> + <td>Optionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100)</td> + </tr> + </tbody> +</table> + +<h3 id="Possible_effects_on_user_agents_and_assistive_technology">Possible effects on user agents and assistive technology </h3> + +<p> </p> + +<div class="note"><strong>Note:</strong> Opinions may differ on how assistive technology should handle this technique. The information provided above is one of those opinions and therefore not normative.</div> + +<p id="Examples">Examplos</p> + +<h4 id="Examplo_1_Escala_numérica_simples">Examplo 1: Escala numérica simples</h4> + +<p>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 <code>aria-valuenow</code> in response to user input.</p> + +<pre class="brush: html"><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> +</pre> + +<p>The following code snippet allows you to return the output as it is updated by user input:</p> + +<pre>function outputUpdate(vol) { + document.querySelector('#volume').value = vol; +} +</pre> + +<h4 id="Examplo_2_Valores_de_texto">Examplo 2: Valores de texto</h4> + +<p>Sometimes, a slider is used to choose a value that is not, semantically, a number. In these cases, the <code>aria-valuetext</code> 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.</p> + +<pre class="brush: html"><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> +</pre> + +<p>The code snippet below shows a function that responds to user input and updates the <code>aria-valuenow</code> and <code>aria-valuetext</code> attributes:</p> + +<pre class="brush: js">var dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; +var updateSlider = function (newValue) { + var handle = document.getElementById("day-handle"); + handle<span>.setAttribute(<span class="string">"aria-valuenow"</span><span>, </span><span class="string">newValue.toString()</span><span>);</span></span> + handle.setAttribute("aria-valuetext", dayNames[newValue]); +}; +</pre> + +<h4 id="Working_Examples">Working Examples:</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/slider1/" title="http://www.oaa-accessibility.org/examplep/slider1/">Slider example</a></li> +</ul> + +<h3 id="Notas">Notas </h3> + +<h3 id="Atributos_ARIA_usados">Atributos ARIA usados</h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="Using the aria-label attribute">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="Using the aria-required attribute">aria-valuetext</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> +</ul> + +<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3> + +<h3 id="Compatibility">Compatibility</h3> + +<p class="comment">TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Recursos_Adicionais">Recursos Adicionais</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#slider" title="http://www.w3.org/TR/wai-aria/roles#slider">WAI-ARIA specification for the <code>slider</code> role</a></li> +</ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html new file mode 100644 index 0000000000..c2c258dae7 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-describedby_attribute/index.html @@ -0,0 +1,87 @@ +--- +title: Usando o atributo aria-describedby +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +tags: + - ARIA + - Acessibilidade + - atributo +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute +--- +<h3 id="Descrição">Descrição</h3> + +<p><span class="seoSummary">O atributo <code><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" rel="external" title="https://www.w3.org/TR/wai-aria/#aria-describedby">aria-describedby</a></code> é usado para indicar os IDs dos elementos que descrevem o objeto. Isso é usado para estabelecer um relacionamento entre widgets ou grupos e texto que descrevem eles. Isso é muito similar ao <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a>: um rótulo (label) que descreve a essência de um objeto, enquanto a descrição fornece mais informação do que o usuário pode precisar.</span></p> + +<p>O atributo <code>aria-describedby</code> não é usado apenas para elementos de formulário; ele também é usado para associar texto estático com widgets, grupos de elementos, paineis, regiões que tem um cabeçalho, definiões e mais. A seção abaixo fornece mais informação sobre como usar o atributo nesses casos.</p> + +<p>O atributo pode ser usando em qualquer elemento típico de um formulário HTML; isso não é limitado a elementos que tem um <code>role</code> ARIA atribuído.</p> + +<h3 id="Valor">Valor</h3> + +<p>uma lista de IDs de elementos separados por um espaço</p> + +<h3 id="Efeitos_possíveis_em_user_agents_e_tecnologia_assistiva">Efeitos possíveis em user agents e tecnologia assistiva</h3> + +<div class="note"><strong>Nota: </strong>Opiniões podem difererir em como a tecnologia assistiva deve lidar com essa técnica. A informação fornecida abaixo é uma dessas opiniões e, portanto, não normativa.</div> + +<h3 id="Exemplos">Exemplos</h3> + +<h4 id="Exemplo_1_Descrições_do_ponto_de_referência_do_aplicativo">Exemplo 1: Descrições do ponto de referência do aplicativo</h4> + +<p>No exemplo abaixo, um parágrafo introdutório descreve uma aplicação de calendário. O <code>aria-describedby</code> é usado para associar o parágrado com o container da aplicação.</p> + +<pre class="brush: html"><div role="application" aria-labelledby="calendar" aria-describedby="info"> + <h1 id="calendar">Calendário</h1> + <p id="info"> + Esse calendário mostra a data do jogo do Boston Red Sox. + </p> + <div role="grid"> + ... + </div> +</div> +</pre> + +<h4 id="Exemplo_2_Um_botão_de_fechar">Exemplo 2: Um botão de fechar</h4> + +<p>No exemplo abaixo, um link que funciona como um botão de "fechar" num diálogo é descrito em outro lugar do documento.O atributo aria-describedby é usado para associar a descrição com o link.</p> + +<pre class="brush: html"><button aria-label="Close" aria-describedby="descriptionClose" + onclick="myDialog.close()">X</button> + +... + +<div id="descriptionClose">Fechar esta janela irá descartar qualquer informação inserida e +retornará você para a página principal</div> +</pre> + +<h3 id="Exemplos_funcionando">Exemplos funcionando:</h3> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/checkbox1/" title="http://www.oaa-accessibility.org/examplep/checkbox1/">Exemplo checkbox</a> usa <code>aria-describedby</code></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/tooltip1/" title="http://www.oaa-accessibility.org/examplep/tooltip1/">Exemplo tooltip</a> usa <code>aria-describedby</code></li> +</ul> + +<h3 id="Notas">Notas</h3> + +<ul> + <li>O <code>aria-describedby</code> atribuido não é designado para referenciar descrições de um recurso externo — já que é um ID, ele deve referenciar um elemento do mesmo documento DOM.</li> +</ul> + +<h3 id="Usado_pelos_roles_de_ARIA">Usado pelos roles de ARIA</h3> + +<p>todos os elementos do markup base</p> + +<h3 id="Técnicas_relacionadas_ao_ARIA">Técnicas relacionadas ao ARIA</h3> + +<ul> + <li><a href="/en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Usando o atributo aria-labelledby</a></li> +</ul> + +<h3 id="Compatibilidade">Compatibilidade</h3> + +<p class="comment">Ainda não foi definido: Adicionar suporte a informação comum de combinações de produtos UA e AT</p> + +<h3 id="Recursos_adicionais">Recursos adicionais</h3> + +<ul> + <li><a class="external" href="https://www.w3.org/TR/wai-aria/#aria-describedby" title="https://www.w3.org/TR/wai-aria/#aria-describedby">WAI-ARIA especificação para aria-describedby</a></li> +</ul> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html new file mode 100644 index 0000000000..57699fa5e3 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.html @@ -0,0 +1,64 @@ +--- +title: Usando o atributo aria-label +slug: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +tags: + - ARIA + - Acessibilidade + - Conteúdo + - Referencia +translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute +--- +<p><span class="seoSummary">O atributo <a class="external" href="https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-label" rel="external" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label"><code>aria-label</code></a> é usado para definir um string na tag do elemento atual. Use nos casos que a tag do texto não seja visível na tela. Se há texto visível na tag do elemento, usa <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="Using the aria-labelledby attribute">aria-labelledby</a> em vez.</span></p> + +<p>Esse atributo pode ser usado em qualquer elemento de HTML; não se limita aos elementos que tem um papel ARIA atribuído.</p> + +<h3 class="editable" id="Valor"><span>Valor</span></h3> + +<p>string</p> + +<h3 class="editable" id="Possíveis_efeitos_sobre_os_user_agents_e_Tecnologia_assistiva"><span>Possíveis efeitos sobre os user agents e </span>Tecnologia assistiva<span> </span></h3> + +<div class="editIcon" style=""> +<h3 class="editable" id="sect1"><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute?action=edit&sectionId=3" title="Edit section"><span class="icon"><img alt="Edit section" class="sectionedit" src="/skins/common/icons/icon-trans.gif"></span></a></h3> +</div> + +<div class="note"><strong>Nota:</strong> Opiniões podem diferir em como tecnologia assistiva deve lidar com esta técnica. A informação fornecida acima é um desses pareceres e, portanto, não normativo.</div> + +<h2 id="Exemplos">Exemplos</h2> + +<div id="section_5"> +<h4 id="Exemplo_1_Várias_Etiquetas">Exemplo 1: Várias Etiquetas</h4> + +<p>No exemplo abaixo, um botão é denominado para olhar como um botão típico "fechar", com um X no meio. Uma vez que não há nada que indique que a finalidade do botão é para fechar a janela, o atributo <code>aria-label</code> é utilizado para fornecer o rótulo para quaisquer tecnologias assistiva.</p> +</div> + +<pre class="deki-transform"><span class="tag"><button aria-label=<span class="str">"Fechar"</span> onclick=<span class="str">"myDialog.close()"</span>></span>X<span class="tag"></button></span> +</pre> + +<h4 id="Working_Examples">Working Examples:</h4> + +<p> </p> + +<h3 id="Notas">Notas</h3> + +<p>The most common <em>accessibility API</em> mapping for a label is the <em>accessible name</em> property.</p> + +<h3 id="Used_by_ARIA_roles">Used by ARIA roles</h3> + +<p>todos os elementos da marcação de base</p> + +<h3 id="Related_ARIA_techniques">Related ARIA techniques </h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Using the aria-labelledby attribute</a></li> +</ul> + +<h3 id="Compatibilidade">Compatibilidade</h3> + +<p class="comment">TBD: Add support information for common UA and AT product combinations</p> + +<h3 id="Recursos_Adicionais">Recursos Adicionais</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label" title="http://www.w3.org/TR/wai-aria/states_and_properties#aria-label">WAI-ARIA specification for aria-label</a></li> +</ul> 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 new file mode 100644 index 0000000000..25d3222fcd --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_techniques/utilizando_o_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 +--- +<h3 id="Descrição">Descrição</h3> + +<div class="summary"> +<p>Esta técnica mostra como utilizar o atributo <em>role</em> <a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a> e demonstra seu efeito em navegadores e tecnologias assistivas.</p> +</div> + +<p>O atributo de alerta é utilizado para comunicar alguma mensagem importante e, frequentemente, <span class="short_text" id="result_box" lang="pt"><span>urgente.</span></span> Quando este atributo (<em>role</em>) estiver ligado a um elemento, o navegador vai enviar <span class="short_text" id="result_box" lang="pt"><span>um evento acessível de alerta</span> </span><span id="result_box" lang="pt"><span>aos</span> <span>produtos de tecnologia assistiva que, então, poderão notificar seus utilizadores sobre o que estiver acontecendo. O atributo <em>alert</em> é mais útil para as</span> <span>informações</span> <span>que requerem a atenção imediata</span><span> na tela.</span></span><span lang="pt"><span> Por exemplo:</span></span></p> + +<ul> + <li>Um valor inválido foi inserido em um campo de um formulário</li> + <li>A sessão atual expirou</li> + <li>a conexão com o servidor foi perdida, as mudanças locais não serão salvas.</li> +</ul> + +<p>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 (<em>roles</em>) para regiões dinâmicas.</p> + +<h3 id="Efeitos_possíveis_sobre_as_tecnologias_assistivas_e_seus_utilizadores">Efeitos possíveis sobre as tecnologias assistivas e seus utilizadores</h3> + +<p>Quando o atributo (<em>role</em>) alerta é adicionado a um elemento, ou este se torna visível, o identificador de navegação (<em>user agent</em>) deve fazer o seguinte:</p> + +<ul> + <li>Exibir o elemento como tendo uma função de alerta (<em>alert role</em>) na API de acessibilidade do sistema operacional.</li> + <li>Disparar um evento de alerta acessível, usando a API de acessibilidade do sistema operacional, se houver suporte para tal.</li> +</ul> + +<p>Os produtos de tecnologias assistivas devem atender tal evento <span id="result_box" lang="pt"><span>e</span> <span>notificar</span> seus utilizadores, <span>em conformidade.</span></span></p> + +<ul> + <li>Leitores de tela podem interromper a <span class="short_text" id="result_box" lang="pt"><span>produção corrente (</span></span>quer sejam a fala, ou o braille) e, imediatamente, anunciar, ou exibir, a mensagem de alerta.</li> + <li>Ampliadores de tela podem, visualmente, indicar que houve um alerta e qual era o seu texto.</li> +</ul> + +<div class="note"><strong>Nota:</strong> 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.</div> + +<h3 id="Exemplos">Exemplos</h3> + +<h4 id="Exemplo_1_Adicionando_o_atributo_(role)_no_código_HTML">Exemplo 1: Adicionando o atributo (<em>role</em>) no código HTML:</h4> + +<p>O trecho abaixo mostra como o atributo <em>role alert</em> é inserido, diretamente, no código-fonte HTML. No momento em que o elemento <span class="short_text" id="result_box" lang="pt"><span>termina de carregar,</span> <span>o leitor de tela deve ser notificado do alerta. Se o elemento já estiver no código-fonte original</span></span> 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<span id="result_box" lang="pt"><span>.</span></span></p> + +<pre class="brush: html"><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></pre> + +<h4 id="Exemplo_2_Adicionando_dinamicamente_um_elemento_com_a_função_de_alerta">Exemplo 2: Adicionando, dinamicamente, um elemento com a função de alerta:</h4> + +<p>Esta parte mostra como criar, de forma dinâmica, um elemento com uma função de alerta e como adicioná-lo à estrutura do documento:</p> + +<pre class="brush: js">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); +</pre> + +<p><strong>Nota: </strong>O mesmo resultado pode ser obtido com menos código, <span id="result_box" lang="pt"><span>quando se utiliza</span></span> uma biblioteca de <em>script</em>, como jQuery:</p> + +<pre class="brush: js">$("<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); +</pre> + +<h4 id="Exemplo_3_Adicionando_a_função_de_alerta_a_um_elemento_existente">Exemplo 3: Adicionando a função de alerta a um elemento <span class="short_text" id="result_box" lang="pt"><span>existente</span></span>:</h4> + +<p>À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<code> role="alert" </code>pode ser <span class="short_text" id="result_box" lang="pt"><span>adicionado ao</span> <span>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:</span></span></p> + +<pre class="brush: html"><p id="formInstruction">You must select at least 3 options</p> +</pre> + +<pre class="brush: js">// 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");</pre> + +<h4 id="Exemplo_4_Construindo_um_elemento_com_uma_função_de_alerta_visível">Exemplo 4: Construindo um elemento com uma função de alerta visível:</h4> + +<p>Se um elemento já tem o atributo<code> role="alert" </code>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. </p> + +<p><strong>Nota: </strong>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.</p> + +<pre class="brush: css">.hidden { + display:none; +} +</pre> + +<pre class="brush: html"><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> +</pre> + +<pre class="brush: js">// removing the 'hidden' class makes the element visible, which will make the screen reader announce the alert:(Remover a classe "<em>hidden</em>" faz o leitor de tela anunciar o alerta) +document.getElementById("expirationWarning").className = ""; </pre> + +<h4 id="Exemplos_de_Trabalhos">Exemplos de Trabalhos:</h4> + +<ul> + <li><a class="external" href="http://www.oaa-accessibility.org/example/1/">Exemplo de funções com caixas de alerta ARIA - Alert role example using an ARIA alert box</a></li> + <li><a class="external" href="http://www.oaa-accessibility.org/examplep/alertdialog1/" title="http://www.oaa-accessibility.org/examplep/alertdialog1/">Exemplo de alerta utilizando uma caixa de diálogo modal ARIA - Alert example using a modal ARIA dialog box</a></li> +</ul> + +<h3 id="Notas">Notas:</h3> + +<ul> + <li>A utilização da função alerta em um elemento implica que ele tenha a<code> aria-live="assertive".</code></li> + <li>O atributo <em>alert role</em> deve ser usado, apenas, para conteúdo com texto estático. O elemento no qual a função alerta for usada não deve ser passível de receber foco, então, um leitor de tela vai, automaticamente, anunciar o alerta, <span class="short_text" id="result_box" lang="pt"><span>independentemente de onde o foco do teclado esteja localizado no momento.</span></span></li> + <li>Se um alerta oferecer, também, controles interativos (tais como um controle de formulário que possibilite a sua correção, ou um botão "OK" que descarte o alerta), em seu lugar deve-se utilizar um <a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="Using the alert role"><em>alertdialog</em> (diálogo de alerta)</a><span class="short_text" id="result_box" lang="pt"><span>.</span></span></li> +</ul> + +<h3 id="Atributos_ARIA_utilizados">Atributos ARIA utilizados</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/wai-aria/roles#alert" title="http://www.w3.org/TR/wai-aria/roles#alert">alert</a></li> +</ul> + +<h3 id="Técnicas_ARIA_relacionadas">Técnicas ARIA relacionadas</h3> + +<ul> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role" title="en/ARIA/ARIA_Techniques/Using_the_alertdialog_role">Utilizando a função alertdialog</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_property" title="Using the aria-invalid property">Utilizando a propriedade aria-invalid</a></li> +</ul> + +<h3 id="Compatibilidade">Compatibilidade</h3> + +<p class="comment">TBD: <span id="result_box" lang="pt"><span>Adicionar</span> <span>informações de suporte para</span> <span>UA</span> <span>comum e combinações de produtos</span></span><span lang="pt"> <span>TA</span> <span>/ AT</span></span></p> + +<h3 id="Recursos_Adicionais">Recursos Adicionais</h3> + +<ul> + <li>Melhores práticas ARIA - Alert Role: <a class="external" href="http://www.w3.org/TR/wai-aria-practices/#alert" title="http://www.w3.org/TR/wai-aria-practices/#alert">http://www.w3.org/TR/wai-aria-practices/#alert</a></li> +</ul> + +<p> </p> diff --git a/files/pt-br/web/accessibility/aria/aria_test_cases/index.html b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html new file mode 100644 index 0000000000..c079dc751e --- /dev/null +++ b/files/pt-br/web/accessibility/aria/aria_test_cases/index.html @@ -0,0 +1,4701 @@ +--- +title: ARIA Casos de Teste +slug: Web/Accessibility/ARIA/ARIA_Test_Cases +translation_of: Web/Accessibility/ARIA/ARIA_Test_Cases +--- +<h1 id="Introdução"><span class="mw-headline" id="Introduction">Introdução</span></h1> + +<div class="warning">A informação dessa página encontra-se desatualizada: sua última atualização foi em Novmebro de 2010. No entanto, as informações ainad podem ser úteis para alguns leitores.<br> +<br> +Para ver exemplos atualizados, entre em <a class="external" href="http://oaa-accessibility.org/examples" title="http://oaa-accessibility.org/examples">OpenAjaxAlliance ARIA examples page</a>.</div> + +<p>For each example we test the "Expected" results with assistive technologies, for each browser that AT supports WAI-ARIA in. Where a failure occurs we will test the browser for API incorrectness, using tools such as MSAA Inspect. This must be done in order to determine where to file a bug (browser or AT).</p> + +<p>There are several purposes for providing this information:</p> + +<ol> + <li>Help browser vendors provide correct implementations</li> + <li>Help AT vendors provide correct implementations</li> + <li>Inform authors as to what actually works reliably</li> +</ol> + +<p>In general we're testing with the latest public releases. However, where things don't work we may test with nightly builds if they are available, in order to show what is already fixed in upcoming releases.</p> + +<p>We can add more screen readers if people are willing to step up and provide test results for them.</p> + +<p>Tested UA/AT Combinations:</p> + +<ul> + <li>Dragon 10 with Firefox 3 and IE 8 beta 2</li> + <li>JAWS 9 & 10 with Firefox 3</li> + <li>JAWS 9 & 10 with IE beta 2</li> + <li>NVDA 0.6p2 with Firefox 3</li> + <li>Orca with Firefox 3</li> + <li>Window-Eyes 7 with IE 8 beta 2 and Firefox 3</li> + <li>Voiceover (Leopard) with Safari 4.0.2</li> + <li>Zoom (Leopard) with Safari 4.0.2, Firefox 3.x and Opera 9.x</li> + <li>ZoomText 9.1 with Firefox 3 and IE 8 beta 2</li> +</ul> + +<h3 id="Test_Case_Structure_2"><span class="mw-headline" id="Test_Case_Structure">Test Case Structure</span></h3> + +<p>Test cases are organized as follows:</p> + +<ul> + <li>Test Case Links</li> + <li>Test Details + <ul> + <li>Expected AT Behavior</li> + <li>Markup</li> + <li>Notes</li> + </ul> + </li> + <li>Results Table</li> +</ul> + +<dl> + <dd> + <table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td> + <p>1. pass 2. fail</p> + </td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<dl> + <dd> + <table> + <caption>Table Legend</caption> + <tbody> + <tr> + <th>-</th> + <td>no info/test yet</td> + </tr> + <tr> + <th>n/a</th> + <td>not applicable (not supported technically)</td> + </tr> + <tr> + <th>pass</th> + <td>expected behaviour met</td> + </tr> + <tr> + <th>fail</th> + <td>expected behaviour notmet</td> + </tr> + <tr> + <th>1. 2.</th> + <td>reference to link example</td> + </tr> + </tbody> + </table> + </dd> +</dl> + +<p> </p> + +<h3 id="Note_Regarding_DojoDijit_Test_Files"><span class="mw-headline" id="Note_Regarding_Dojo.2FDijit_Test_Files">Note Regarding Dojo/Dijit Test Files</span></h3> + +<p>The main purpose of Dojo's Dijit test files are for Dojo developers to exercise and debug the code. As such, they are used to test a variety of features, such as styling, behavior, mouse, and keyboard interactions, to name few. These test files are not specifically for testing ARIA. Still, Dojo's widgets implement ARIA, and the noted test files could be used as an "ARIA test file".</p> + +<h3 id="New_Tests_for_Internet_Explorer_8_RC1_2"><span class="mw-headline" id="New_Tests_for_Internet_Explorer_8_RC1">New Tests for Internet Explorer 8 RC1</span></h3> + +<p>On <a class="external text" href="http://samples.msdn.microsoft.com/ietestcenter/Aria/AriaTestPage.htm" rel="nofollow">this MSDN page</a> the ARIA state/role mapping in IE8 to MSAA Roles can be directly checked. Also, as a clever feature for AT testing, the firing of events (like EVENT_OBJECT_STATECHANGE) can be invoked from the examples. Finally, a list of currently non-mapped ARIA roles is given.</p> + +<h2 id="Documenting_and_Filing_Bugs_2"><span class="mw-headline" id="Documenting_and_Filing_Bugs">Documenting and Filing Bugs</span></h2> + +<p>Review the information on <a class="external text" href="/en/ARIA/How_to_file_ARIA-related_bugs" rel="nofollow" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">how to file a bug on an ARIA implementation</a>. When documenting an issue, please also list it in the relevant compatibility table below. When possible provide a link to the bug in the database so that its status can be reviewed.</p> + +<h1 id="Widget_Test_Cases_2"><span class="mw-headline" id="Widget_Test_Cases">Widget Test Cases</span></h1> + +<h2 id="Alert_2"><span class="mw-headline" id="Alert">Alert</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/alert/alert.html" rel="nofollow">Simple alert</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/alert/alert1.html" rel="nofollow">Complex Alert</a></li> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/client-form-validation-invalid-and-alert.html" rel="nofollow">Real alert example with aria-required and aria-invalid</a> -- type in a email address without an at sign to test the alert</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>A screen reader or screen magnifier must speak an alert when it becomes visible.</li> + <li>A screen magnifier should move the current view to the alert or open a new panel with the alert information</li> + <li>Optional, but desired: if there are widgets within the alert, their role and any keyboard mnemonic (accesskey) should be spoken. For example, "Options, button, Alt+Shift+T" should be spoken if there is an options button in the alert with Alt+Shift+T as an accesskey.</li> +</ul> + +<p><br> + <strong>Markup used:</strong></p> + +<ul> + <li>role="alert"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>Passed</td> + <td>Fail</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Passed</td> + <td>Fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>Passed- not announced as "alert"</td> + <td>Fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>Passed</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<ul> + <li>FFD - An interesting thing to note is that, when focus moves to an alert, JAWS loses its place on the page, so that, when the alert disappears, JAWS Virtual Cursor is at the bottom of the page.</li> +</ul> + +<h2 id="Alertdialog_2"><span class="mw-headline" id="Alertdialog">Alertdialog</span></h2> + +<ol> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/alertdialog/alertdialog1.php" rel="nofollow">Alert Dialog</a></li> + <li><a class="external text" href="http://developer.yahoo.com/yui/examples/container/container-ariaplugin_clean.html" rel="nofollow">YUI alert dialog (3rd button in this page)</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>AT should speak the fact that this is an alert, the title and contents of the dialog, then place virtual focus or the real focus on the desired control (like a button).</li> + <li>Screen magnifier should show the focused button or emulate any other standard behavior found in notification dialogs in Windows or respective operating systems.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="alert"</li> + <li>aria-labeledby</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p>In the UIUC test example, the 'close' button cannot recieve focus.</p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>2 PASS, 1 PASS with known focus of the Close button problem. + <p>FFD - I concur</p> + </td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Voiceover (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>Fail- announced as 'alert'</td> + <td>Pass</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Button_2"><span class="mw-headline" id="Button">Button</span></h2> + +<h3 id="Basic_Button_2"><span class="mw-headline" id="Basic_Button">Basic Button</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/button/button.html" rel="nofollow">Button with description</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html" rel="nofollow">dojo nightly build</a> -- lots of other types of buttons there as well.</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>When focus falls on a button, a screen reader speaks the text of the button plus alternative text of any images within the button (the accessible name of the button). The word "button" is also spoken before or after the accessible name.</li> +</ul> + +<p><br> + <strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Pass in non-V-PC mode, pass in V-PC-mode also if the button's text is not provided via labelledby or label.</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Toggle_Button_2"><span class="mw-headline" id="Toggle_Button">Toggle Button</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/button/togglebuttonhtml" rel="nofollow">Buttons with Icons and without Text</a> -- under construction. Only the bold/italic buttons should be toggle buttons, and they aren't currently toggleable.</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Same as basic button above, plus if the state is pressed, AT should indicate that when focus lands on the button and when toggling.</li> + <li>AT should indicate that it is a toggle button (not a regular button)</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="button" aria-pressed="false" (or true)</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Pass in non-V-PC-mode, button's state is announced when pressed, or when toggling it to pressed. Fail in V PC mode. No indication is given that a button is pressed, or that it is pressed after activating it.</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Menu_Button_2"><span class="mw-headline" id="Menu_Button">Menu Button</span></h3> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Button.html" rel="nofollow">dojo nightly build</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen readers should indicate that this button has an associated menu.</li> + <li>Screen magnifiers should give indication (if this is not done visually anyway).</li> + <li>When the button is pressed, the menu should be tracked like any other menu.</li> + <li>When closing the menu, this should be indicated, and focus should be repeated for the menu button the menu was opened from, or the new focus location if the activated menu item results in that.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Pass in Non-V-PC-mode. Buttons are indicated as menu buttons. Menus are tracked, closing menus also results in correct focus tracking. Partial fail in V-PC-Mode. The fact that a button is a menu button is not indicated with the virtual cursor. Menus and focus are properly tracked upon activation.</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Checkbox_2"><span class="mw-headline" id="Checkbox">Checkbox</span></h2> + +<h3 id="Simple_Checkbox_2"><span class="mw-headline" id="Simple_Checkbox">Simple Checkbox</span></h3> + +<p><strong>Testcases:</strong></p> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/checkbox/checkbox2.html" rel="nofollow">Set aria-checked="false" for unchecked</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/checkbox/checkbox.html" rel="nofollow">Both remove or set attribute for unchecked case</a> -- also includes an invalid and required checkbox</li> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/checkbox/checkbox5.php" rel="nofollow">Hierarchical</a> (newly added test not in test results yet)</li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_CheckBox.html" rel="nofollow">dojo nightly build</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should speak the accessible name followed by both the type being checkbox and the state (checked, unchecked). When pressing Space, new state should be announced automatically.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="checkbox"</li> + <li>aria-checked="true" or "false"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p>Need testcase where aria-checked attribute is removed instead of set to false</p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Pass</td> + <td>Fail (changes not spoken)</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>Pass</td> + <td> + <ol> + <li>Pass</li> + <li>Fail (unchecked presented as checked, IE exposing incorrect state for no aria-checked attribute)</li> + </ol> + </td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>NVDA</td> + <td>Fail on #2 -- repetitive text spoken, first checkbox toggle speaks incorrect state</td> + <td>n/a</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>Pass</td> + <td>-</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>Orca</td> + <td>Pass</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Tristate_Checkbox_2"><span class="mw-headline" id="Tristate_Checkbox">Tristate Checkbox</span></h3> + +<p><strong>Testcases:</strong></p> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/checkbox/checkbox-tristate.html" rel="nofollow">Both remove or unset for unchecked case</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should announce accessible name, role and state. When toggling, new state should be announced (not checked, partially checked, checked).</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="checkbox"</li> + <li>aria-checked="true" | "false" | "mixed"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Partial pass. The state of tristate checkboxes is not announced when initially focusing. It is announced when toggling.</td> + <td>Fail - changes not spoken</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>Pass</td> + <td>Fail (unchecked presented as checked, IE exposing incorrect state for no aria-checked attribute)</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>NVDA</td> + <td>Fail -- for change from mixed to fully checked, nothing spoken</td> + <td>n/a</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>Pass</td> + <td>-</td> + <td>Fail</td> + <td>Fail</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Combobox_2"><span class="mw-headline" id="Combobox">Combobox</span></h2> + +<p><strong>Testcases:</strong></p> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/combobox/combo-editable.html" rel="nofollow">editable combo 2</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_ComboBox.html" rel="nofollow">dojo nightly build (combobox)</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_FilteringSelect.html" rel="nofollow">dojo nightly build (combobox with auto complete)</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>On focus, screen reader announces the label, the role and the current content of the combobox.</li> + <li>If the currently selected option is changed the new option should be spoken whether the list is open or closed.</li> + <li>When the combo box is opened or closed, the new open/closed state should be spoken.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Fail. Label and current content as well as role are spoken, also when typing in a new value, that gets reflected. But when dropping down the lists of states in either example, after the second or so list item, JAWS turns off Forms Mode, and the user has to turn off V Cursor to be able to make selections or tab to anything useful.</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Datepicker_2"><span class="mw-headline" id="Datepicker">Datepicker</span></h2> + +<p><strong>Testcases:</strong></p> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/datepicker/datepicker.sample.html" rel="nofollow">Datepicker Example</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td> </td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Description_2"><span class="mw-headline" id="Description">Description</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/button/button.html" rel="nofollow">Description for groupbox and for button</a></li> +</ol> + +<p>(AL) Note: the description role is no longer necessary as long as aria-describedby is used; however, this test case is still useful for testing aria-describedby.</p> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>When any control is focused inside the groupbox, where focus was previously outside of the groupbox, the description for the entire groupbox should be read by a screen reader.</li> + <li>When the button is focused, the description of the button should be read after the button's label and role are read by the screen reader.</li> + <li>Regression testers should test both tabbing forward and back, to make sure that the groupbox description and button description are both read when the button is the first item focused in the groupbox.</li> + <li>(AL) Alternatively, description are not read automatically but may be accessible from a hotkey. However, if the screen reader does not at least indicate that the description exists, users are likely to miss important information.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="description" and aria-describedby</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Dialog_2"><span class="mw-headline" id="Dialog">Dialog</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Dialog.html" rel="nofollow">dojo nightly build</a>- Note that this may not always work</li> + <li><a class="external text" href="http://download.dojotoolkit.org/release-1.2.3/dojo-release-1.2.3/dijit/tests/test_Dialog.html" rel="nofollow">Dojo 1.2.3 Release</a></li> + <li><a class="external text" href="http://developer.yahoo.com/yui/examples/container/container-ariaplugin_clean.html" rel="nofollow">YUI dialogs -- use first two dialog buttons</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) When the dialog opens, the dialog caption (or title), role, and if present, description should be read by screen readers, followed by the focused widget.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>pass</td> + <td>fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Drag_and_Drop_2"><span class="mw-headline" id="Drag_and_Drop">Drag and Drop</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/draganddrop/draganddrop1.html" rel="nofollow">Tic tac toe</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/draganddrop/draganddrop2.html" rel="nofollow">Slide show</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) Once focusing or arrowing onto the draggable item, screen reader should indicate that item can be an object that can be dragged.</li> + <li>Once marked for drag and drop, screen reader should announce that this item has been picked up, to distinguish it from others that may be draggable, but are currently not selected for the operation. (AL) I'm not sure if there is a way for the screen reader to know when something has been marked for drag & drop.</li> + <li>Target nodes where the item can be dropped should be indicated from now on when they receive focus or arrowing onto them with the virtual cursor.</li> + <li>After drag and drop operation has completed, the new location of the item should be indicated in the virtual buffer representation. If the drag and drop operation caused a menu to open, focus should be tracked in that menu, and the user should be able to complete further interaction via the keyboard as usual.</li> + <li>Optional but desired: AT should provide simple method to navigate only among the current drop targets.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-grab</li> + <li>aria-dropeffect</li> +</ul> + +<p><strong>Notes:</strong></p> + +<ul> + <li>(MZ) There is no equivalent place in any of the known operating systems where draggable items are denoted and targets being indicated as such. All drag and drop operations screen readers traditionally perform within the operating system are hit and miss games that are performed on pixel locations. The above is a suggested series of behaviors I as an end user would want to experience when dealing with ARIA drag and drop, but it has no basis to go on, unlike common controls, for example.</li> +</ul> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Grid_2"><span class="mw-headline" id="Grid">Grid</span></h2> + +<p>See various grid and table examples on the <strong><a class="external" href="http://wiki.codetalks.org/wiki/index.php/Complex_Grid_Examples" title="Complex Grid Examples">example page for grid variants</a></strong>.</p> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Basic Grid</a> -- single select</li> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.html" rel="nofollow">Grid in an application</a> -- single select</li> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/grid/grid1.php" rel="nofollow">Illinois Grid Example</a> -- multi select</li> +</ol> + +<p><br> + <strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should read column and row headers as the grid is traversed with arrow keys (in forms mode). Screen readers should continue to respect any special table reading modes while the user traverses the grid. For example, while in the grid in forms mode, the user should be able to configure the screen reader to read row headers only.</li> +</ul> + +<ul> + <li><strong>JAWS -</strong> + + <ul> + <li>Virtual Cursor - JAWS treats a grid as if it were an HTML table. All table keys are active. Header behavior is not yet defined.</li> + <li>PC Cursor - TBD.</li> + </ul> + </li> +</ul> + +<ul> + <li><strong>Window-Eyes</strong> + + <ul> + <li>Window-Eyes should allow the user to change row/col header reading modes with Ctrl+Shift+H, whether the user is in browse or forms mode.</li> + </ul> + </li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="grid", "gridcell", "rowheader", "columnheader"</li> + <li>aria-selected, aria-readonly</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Treegrid_2"><span class="mw-headline" id="Treegrid">Treegrid</span></h2> + +<p>Examples:</p> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/treegrid/treegrid.sample2.html" rel="nofollow">Grid with expandable rows</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) Screen readers should announce the current cell or row depending on the default behavior of the AT in other similar situations (e. g. ListViews in Windows, Tree Tables in Linux). If the current row is expandable, screen reader should indicate current state (expanded or collapsed). When the user changes the state, the new state should be spoken immediately. When navigating cells horizontally, the column header should be spoken for each cell.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Group_2"><span class="mw-headline" id="Group">Group</span></h2> + +<p>(no examples yet)</p> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) When focus first lands on a control inside the group, the name should be spoken. Role may or may not be spoken, screen reader should use same handling as for regular group boxes. If describedby is present, the description should be spoken. Following all that, the focused control should be spoken.</li> + <li><strong>JAWS -</strong> + <ul> + <li>JAWS speaks the group name when focus is placed on a control within the group for the first time.</li> + <li>If described by is used on a fieldset (group box), JAWS speaks the description when focus is placed on a control within the group box for the first time.</li> + </ul> + </li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Img_2"><span class="mw-headline" id="Img">Img</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/img/tiled.html" rel="nofollow">Tiled image</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen readers should announce the image is a single graphic element along with its associated label, even though it is built from numerous sub-images.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="img"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p>If the screen reader does not provide the required behavior, then most likely it is a browser issue, for not respecting "Children Presentational: true" for that role. The accessible hierarchy should contain no children for the img.</p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="List_2"><span class="mw-headline" id="List">List</span></h2> + +<p><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/list.html" rel="nofollow">Simple List</a></p> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) Screen reader should indicate an ARIA list like any other static HTML list. Normally, the number of items contained within the list, and the nesting level (if this is not the outermost list) is announced upon entering. Upon leaving the list, screen reader should give an indication. List items should be read as they appear. As the user navigates, any level changes should be read.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Link_2"><span class="mw-headline" id="Link">Link</span></h2> + +<ul> + <li><a class="external text" href="http://codetalks.org/source/widgets/link/link.html" rel="nofollow">Basic Link Example</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/link/link.sample.html" rel="nofollow">Link Variants</a></li> +</ul> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should announce the text or label for the link when it is focused, and the fact that it's a link. ARIA links should be included in the screen reader's List Links function just like ordinary links. Actions in this dialogor list such as "Activate Link" or "Move to Link" should perform the same as they do with regular links.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Listbox_and_Option_2"><span class="mw-headline" id="Listbox_and_Option">Listbox and Option</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_MultiSelect.html" rel="nofollow">dojo nightly build</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/listbox/listbox.html" rel="nofollow">Single select listbox</a> using aria-activedescendant</li> + <li><a class="external text" href="http://codetalks.org/source/widgets/listbox/listbox-owner.html" rel="nofollow">Listbox in an iframe</a> -- this is an important case as it's an example of how a mashup widget can be built (the widget source simply comes from another url, and is tied in using an iframe)</li> + <li><a class="external text" href="http://developer.yahoo.com/yui/examples/carousel/carousel-ariaplugin_source.html" rel="nofollow">YUI "Carousel" listbox</a> -- a more advanced test case</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) Screen reader should announce the label and role of the listbox when it gains focus. If an item is focused within the list, this should be announced next, followed by an indication of this item's position within the list if the screen reader supports this in other lists as well. As focus moves within the list, the screen reader should announce the relevant list items.</li> + <li>(AL) What about multiple selection? What should happen as the user selects or unselects the current item, does a select all, uses shift+arrow to select, etc.?</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="listbox", "option" (listitem should only be used with list, which is for static document structures, could someone please make sure our examples follow this rule)</li> + <li>aria-activedescendant</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Menubar_and_Menu_2"><span class="mw-headline" id="Menubar_and_Menu">Menubar and Menu</span></h2> + +<ol> + <li><a class="external text" href="http://developer.yahoo.com/yui/examples/menu/menuwaiaria_source.html" rel="nofollow">YUI menubar</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.html" rel="nofollow">Menubar 1</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Menu.html" rel="nofollow">dojo nightly build - popup menu</a></li> +</ol> + +<p><br> + <strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) As focus is placed inside a menu or menubar, a screen reader should announce the name (if any) of the menu, the role of the menu, and then read the current menu item.</li> + <li>(AL) As focus moves within the menu, the screen reader should read the current menuitem.</li> + <li>(AL) To read a menu item, the screen reader should announce the name. If it is a radio or checkbox menu item, the screen reader should indicate that it's checkable. If it has a submenu (aria-haspopup), the screen reader should indicate that as well.</li> + <li>(MZ) If a menu is dropped down, the activation of the new menu should be indicated and the focus tracked as it moves through the items.</li> + <li>(MZ) When the menu is closed, screen reader should indicate this along with the newly focused item.</li> + <li>(MZ) This may be the menu bar or higher level menu item, or a control that gains focus after the menu was closed after executing a command.</li> + <li>(MZ) If the menu caused a dialog to open, the dialog context should be given, just as with regular desktop applications.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="menubar", role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio"</li> + <li>aria-haspopup="true"</li> + <li>aria-disabled="true"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Progressbar_2"><span class="mw-headline" id="Progressbar">Progressbar</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_ProgressBar.html" rel="nofollow">dojo nightly build</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/progressbar/progressbar.html" rel="nofollow">Progress bar in "off" live region</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/progressbar/progressbar-with-assertive.html" rel="nofollow">Progressbar in "assertive" live region</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>The progress updates should be treated as the screen reader treats any progress updates. The live region markup should not affect how the progress updates are presented.</li> + <li>(AL) If the screen reader provides a keystroke to announce the current progress, this should work with an ARIA progressbar as well.</li> + <li><strong>JAWS -</strong> JAWS announces the level of progress at each time interval the user selects in JAWS configuration.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="progressbar", aria-valuemin, aria-valuenow, aria-valuemax</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Radiogroup_and_Radiobutton_2"><span class="mw-headline" id="Radiogroup_and_Radiobutton">Radiogroup and Radiobutton</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/radio/radio1.html" rel="nofollow">Radio Example using CSS Background Images</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/radio/radio2.html" rel="nofollow">Radio Example using IMG Element</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/radio/radio3.html" rel="nofollow">Radio Example using aria-activedescendent Property</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_CheckBox.html" rel="nofollow">dojo nightly build</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>On initial focus, the screen reader should announce the label of the radio group and the focused radio button, whether it is selected or not, and its position. As focus moves among the radio buttons, the newly focused radio button's label, state and position should be indicated.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Separator_2"><span class="mw-headline" id="Separator">Separator</span></h2> + +<p>(no examples yet)</p> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) The inclusion of this element should be controlled by the screen reader. If it does not indicate separators by default in the operating system, it should honor this for web applications, too. If it does support separators, the same symbolism should be used as for other separators in speech and braille.</li> + <li><strong>JAWS -</strong> TBD.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Slider_2"><span class="mw-headline" id="Slider">Slider</span></h2> + +<h3 id="Single_Slider_2"><span class="mw-headline" id="Single_Slider">Single Slider</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/slider/pretty-slider-inline-img.html" rel="nofollow">Slider using in-line images for thumb</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Slider.html" rel="nofollow">dojo nightly build</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/slider/simple-slider.html" rel="nofollow">Simple slider</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/slider/pretty-slider-background-images.html" rel="nofollow">Pretty slider</a></li> + <li><a class="external text" href="http://mindtrove.info/html/rating-tutorial.html" rel="nofollow">MINDTROVE Rating Widget</a></li> + <li><a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">Paciello Group slider</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>The user can navigate to the slider control in all modes. When the user navigates to the slider, the screen reader should announce the label, role and position of the slider.</li> + <li>When not in a virtual buffer mode, the user can control the slider using keys such as the arrow keys, home and end.</li> + <li>In virtual buffer mode, the slider exists in the virtual buffer as a single entity, and any images or text that create the sliders appearance are not presented to the user separately. Note: if this does not work, it means the browser is exposing the children instead of respecting the "Children Presentational: true" rule for sliders</li> + <li>As the user moves the slider, the new value is spoken</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="slider"</li> + <li>aria-valuemin, aria-valuenow, aria-valuemax</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Multi-Thumb_Slider_2"><span class="mw-headline" id="Multi-Thumb_Slider">Multi-Thumb Slider</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/slider/pretty-slider-dual-inline-img.html" rel="nofollow">Multi-Thumb Slider Example using inline images for thumbs</a></li> + <li><a class="external text" href="http://www.paciellogroup.com/blog/misc/samples/aria/slider/doubleslider.html" rel="nofollow">TPG double slider</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li><strong>JAWS -</strong> On focus JAWS announces the role and focus slider position. As the user moves the slider, JAWS announces the new position. The same is true for the second thumb (slider).</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Spinner_2"><span class="mw-headline" id="Spinner">Spinner</span></h2> + +<h3 id="Spin_Button_2"><span class="mw-headline" id="Spin_Button">Spin Button</span></h3> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/test_Spinner.html" rel="nofollow">dojo nightly build</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) As focus first lands on the spinner, the screen reader should announce the label, role and current value. As the value is changed, the new value should be announced without repeating label or role.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Tabpanel_2"><span class="mw-headline" id="Tabpanel">Tabpanel</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel1.html" rel="nofollow">Simple Tabpanel Example</a></li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Dialog.html" rel="nofollow">dojo nightly build</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tabpanel.html" rel="nofollow">Another tab panel example</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tabpanel/tablist.sample.html" rel="nofollow">Just annother tab panel example</a></li> + <li><a class="external text" href="http://developer.yahoo.com/yui/examples/tabview/tabview-ariaplugin_clean.html" rel="nofollow">YUI Tab Panel example with live regions (using YUI ARIA plug-in)</a>.</li> + <li><a class="external text" href="http://samples.msdn.microsoft.com/ietestcenter/Aria/samples/TabControl.html" rel="nofollow">MS IE8 Tab Control example</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>As focus first lands on the tabs, screen reader announces the label and role of the focused tab item, and whether it is selected.</li> + <li>As the user presses left and right arrows to change the tabs, the newly focused tab should be announced. When navigating over the currently selected tab, the fact that this is the tab currently being active should be indicated. Note that for tabs with AJAX content, for performance reasons it is optional that they only load the panel only once the user presses Space on the new tab. However, if there is no perf issues they can show the new content simply when the tab gets focus.</li> + <li>If a new tab is selected via Space, the now selected state should be indicated.</li> + <li>As the user tabs into the panel, its name, role, and if present, description should be read, followed by the newly focused item.</li> + <li>Subsequent navigation within the same tab panel should not repeat name, role, or description of the tab panel.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Textbox_2"><span class="mw-headline" id="Textbox">Textbox</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Editor.html" rel="nofollow">dojo nightly build</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) When focus first lands on the textbox, its label and role should be indicated. If it also contains content, an indication should be given as for regular textboxes. If the text is automatically selected on focus, this should be indicated.</li> + <li>Arrow keys should read by character or line as usual.</li> + <li>(AL) I think we need more here. For example, what about reading the line number if the user requests that info?</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Toolbar_2"><span class="mw-headline" id="Toolbar">Toolbar</span></h2> + +<ol> + <li><a class="external text" href="http://www.thosedamntwins.com/aria/toolbar/" rel="nofollow">Example</a> to test ARIA live region and toolbar</li> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Toolbar.html" rel="nofollow">dojo nightly build</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(MZ) Upon initial focus, if the toolbar has a label, screen reader should speak it, followed by the role and the label and role of the current toolbar item.</li> + <li>As the controls within the toolbar are navigated, the newly focused item should be announced, but the label or role of the toolbar itself should not be repeated.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Tooltip_2"><span class="mw-headline" id="Tooltip">Tooltip</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Tooltip.html" rel="nofollow">dojo nightly build (tooltip)</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tooltip/tooltip.html" rel="nofollow">Simple tooltip</a> -- the tooltip for the link contains the text "Some tooltip"</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>The tooltip text should be spoken as the user navigates to the widget with the tooltip.</li> + <li><strong>JAWS -</strong> JAWS announces tooltips as they appear. This is dependent on the user's JAWS configuration setting.</li> + <li><strong>ZoomText -</strong> (AL) should ensure that tooltip is visible (not scrolled off) when it appears, and should read it aloud</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="tooltip"</li> + <li>aria-describedby</li> + <li>aria-hidden</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Tree_2"><span class="mw-headline" id="Tree">Tree</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/test_Tree.html" rel="nofollow">dojo nightly build</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tree/tree.html" rel="nofollow">Simple tree</a> -- uses document structure to create hierarchy</li> + <li><a class="external text" href="http://codetalks.org/source/widgets/tree/tree3.html" rel="nofollow">Tree</a> - Subtrees are encapsulated in treeitems</li> + <li><a class="external text" href="http://samples.msdn.microsoft.com/ietestcenter/Aria/samples/tree/ariatree.htm" rel="nofollow">MS IE8 Tree example</a></li> + <li>We need an example that uses aria-level, aria-setsize and aria-posinset to create the hierarchy</li> + <li>We also need one that uses aria-owns to create the hierarchy / structure</li> + <li>We need one that uses the document to create structure, but uses nested ULs with links inside, and role="presentation"</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>If navigated to in a screen reader's virtual buffer, the label, role and previously active item of the tree should be read.</li> + <li>Upon initial focus, the label (if present), and role of the tree itself should be spoken, followed by the current tree item's information.</li> + <li>When a tree item is read, the screen reader should announce its label, role, state and "Item n of m" positional information. The state includes whether it is expandable and expanded/open.</li> + <li>As focus is moved, output should be identical to desktop tree widgets like in e.g. Windows Explorer: the tree item should be read as described above, and the level should be announced if it changes.</li> + <li>As expandable items are opened and closed, the state change should be announced immediately. Optionally, when opening an item, announce the number of sub items that just became available.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="tree", "treeitem", "group", "presentation"</li> + <li>aria-level, aria-setsize, aria-posinset</li> + <li>aria-expanded</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h1 id="Other_Test_Cases_2"><span class="mw-headline" id="Other_Test_Cases">Other Test Cases</span></h1> + +<h2 id="Application_2"><span class="mw-headline" id="Application">Application</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/landmarks/application-with-inner-document.html" rel="nofollow">Simple application with inner document</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.html" rel="nofollow">With grid and menubar</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>If AT supports virtual buffers (probably all Windows screen readers), this should be automatically turned off and the user should interact via the keyboard commands built into the web app.</li> + <li>It should still be possible to the document/browse/virtual mode back on</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="application"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>Fail</td> + <td>Fail</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Pass with slight problems in the menu bar (wrong order of events or missing ones, sometimes making JAWS believe it is still in a menu when the menu has actually closed)</td> + <td>Fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>Fail</td> + <td>Fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>Fail</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Document_2"><span class="mw-headline" id="Document">Document</span></h2> + +<ul> + <li><a class="external text" href="http://codetalks.org/source/landmarks/application-with-inner-document.html" rel="nofollow">Application with inner document</a></li> +</ul> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>If a document/browser/virtual reading mode exists, switch to that mode when the document or descendant of the document receives focus</li> + <li>Document is also treated as a <a class="external text" href="http://wiki.codetalks.org/wiki/index.php/Set_of_ARIA_Test_Cases#Landmarks" rel="nofollow">landmark</a></li> +</ul> + +<p><strong>Markup used:</strong></p> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="Landmarks_2"><span class="mw-headline" id="Landmarks">Landmarks</span></h2> + +<ol> + <li><a class="external text" href="http://news.yahoo.com/" rel="nofollow">Real world Yahoo! news page with landmarks</a></li> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/nav/nav1.php" rel="nofollow">Illinois Navigation Example</a></li> + <li><a class="external text" href="http://codetalks.org/source/landmarks/test-all-minimal.html" rel="nofollow">Test all landmarks</a> -- very minimal test, not a real world case. The page includes some nested landmarks as well.</li> + <li><a class="external text" href="http://juicystudio.com/article/examining-wai-aria-document-andmark-roles.php" rel="nofollow">Juicy Studio</a> -- real world example</li> + <li><a class="external text" href="http://codetalks.org/" rel="nofollow">This site</a> -- another real world example</li> + <li><a class="external text" href="http://codetalks.org/source/landmarks/application-with-inner-document.html" rel="nofollow">Application with inner document</a> -- the only landmark here is the document, since role="application" as at the root</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen readers should not include the root accessible object in a page in the list of landmarks</li> + <li>Screen readers should provide keys to allow users to traverse a list of landmarks or next/prev landmark keys</li> + <li>Screen readers should support nested landmarks, and multiple landmarks of the same time</li> + <li>Screen readers should announce the number of landmarks at page load, if they exist on the page</li> + <li>Screen readers should announce landmarks as users navigate into them (test in all screen reader modes)</li> + <li>8 (JG) Are their any landmark role equivalents with HTML headers like role=main~h1??</li> +</ul> + +<ul> + <li><strong>JAWS -</strong> + + <ul> + <li>JAWS announces landmarks as they are encountered in the virtual page.</li> + <li>JAWSKey+Ctrl+SemiColon keystroke displays a list of landmarks in the current page.</li> + <li>SemiColon and SHift+SemiColon move to Next Landmark and Move to Previous Landmark respectively.</li> + </ul> + </li> +</ul> + +<p><br> + <strong>Markup used:</strong></p> + +<ul> + <li>role = (one of the following): "application", "article", "banner", "complementary", "contentinfo", "directory", "document", "log", "main", "note", "navigation", "region", "search", "status"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<ul> + <li>Screen readers may wish to provide some landmark-specific conveniences such as automatically starting at "main" when reading the page after page load, or providing a special key to get to the search bar, etc.</li> +</ul> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>AL: Tested 2 and 4 with JAWS 10.0.512U on Nov 21, 2008 + <p>2. FAIL - No landmarks reported on page load but there are many in the source. Pressing ; does not visit any of them.<br> + 4. FAIL - JAWS says it has 5 landmarks, when page first loads, pressing ; only moves between 2 of the landmarks. Also, JAWSKey+Ctrl+SemiColon keystroke displays only 4 of the landmarks (it seems to be missing search)</p> + </td> + <td>Exact same failures as with Firefox</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="Live_Regions_2"><span class="mw-headline" id="Live_Regions">Live Regions</span></h2> + +<p>Thank you to Charles Chen for developing the <a class="external text" href="http://accessibleajax.clcworld.net/" rel="nofollow">live region examples</a>.</p> + +<h3 id="aria-live_2"><span class="mw-headline" id="aria-live">aria-live</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/live/live_off.html" rel="nofollow">aria-live="off"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/live_polite.html" rel="nofollow">aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/live_assertive.html" rel="nofollow">aria-live="assertive"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/live_rude.html" rel="nofollow">aria-live="rude"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/live_missing.html" rel="nofollow">aria-live attribute is missing</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/live_nested-regions.html" rel="nofollow">nested live regions: "assertive" inside "off"</a></li> + <li><a class="external text" href="http://samples.msdn.microsoft.com/ietestcenter/Aria/samples/liveRegion.htm" rel="nofollow">MS IE8 Chat Example</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li><strong>JAWS -</strong> Announces updates to live regions.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-live</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Labelled_or_Described_Live_Region_2"><span class="mw-headline" id="Labelled_or_Described_Live_Region">Labelled or Described Live Region</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/live/labelledby.html" rel="nofollow">aria-labelledby="(id)" aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/describedby.html" rel="nofollow">aria-describedby="(id)" aria-live="polite"</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li><strong>JAWS -</strong> Announces updates to live regions.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-live, aria-labelledby, aria-describedby</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="aria-atomictrue"><span class="mw-headline" id="aria-atomic.3D.22true.22">aria-atomic="true"</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/live/atomic_true.html" rel="nofollow">aria-atomic="true" aria-live="polite"</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(AL) For any changed text within an atomic live region, the screen reader should read the entire atomic region.</li> + <li>(AL) If two or more changes occur before the screen reader gets a chance to read the region, the screen reader should still only read the entire region once.</li> + <li>(AL) The screen reader should try to concatenate several sequential changes to the same region. If two changes occur almost at the same time (say within .05 seconds for example), the screen reader should make sure to read the entire region only once.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-atomic="true" aria-live="polite"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="aria-controls_2"><span class="mw-headline" id="aria-controls">aria-controls</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/live/controls.html" rel="nofollow">aria-controls</a> -- activating button makes live region change</li> + <li><a class="external text" href="http://codetalks.org/source/live/live_controls-and-politeness.html" rel="nofollow">aria-controls and live="polite" changes</a> -- live region with a combination of polite real world changes and button-controlled changes</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(AL) Minimal: the screen reader should utilize the politeness level to read changes that occur.</li> + <li>(AL) Optional but desired: the screen reader should announce updates to a live region where the region changes are the result of a user action. This should even if the user does not set aria-live, and for any value other than aria-live="off". It turns out that using aria-controls is actually not the best way to determine this in all browsers. There is often a way to determine if a change was caused by user input.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-controls, aria-live="polite"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="aria-relevant_tests_2"><span class="mw-headline" id="aria-relevant_tests">aria-relevant tests</span></h3> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_additons.html" rel="nofollow">aria-relevant="additions" aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_removals.html" rel="nofollow">aria-relevant="removals" aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_text.html" rel="nofollow">aria-relevant="text" aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_all.html" rel="nofollow">aria-relevant="all" aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_additons_removals_text.html" rel="nofollow">aria-relevant="additions removals text"" aria-live="polite</a> -- should have same behavior as "all"</li> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_additions_text.html" rel="nofollow">aria-relevant="additions text" aria-live="polite"</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/relevant_default.html" rel="nofollow">aria-live="polite"</a> -- aria-relevant is not set, so should act the same as "additions text"</li> +</ol> + +<p><br> + <strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(AL) If aria-relevant is not specified, the screen reader should read only live node additions and text changes</li> + <li>(AL) If aria-relevant is specified, the screen reader should read all the changes specified by aria-relevant and no more.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-relevant, aria-live="polite"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Live_roles_Log_Timer"><span class="mw-headline" id="Live_roles:_Log_.2B_Timer">Live roles: Log + Timer</span></h3> + +<ol> + <li><a class="external text" href="http://test.cita.uiuc.edu/aria/live/live1.php" rel="nofollow">Illinois Log and Timer example</a></li> + <li><a class="external text" href="http://codetalks.org/source/live/chat.html" rel="nofollow">CLC Chat</a> -- see the <a class="external text" href="http://codetalks.org/source/live/chat_notes.html" rel="nofollow">accompanying notes</a></li> + <li><a class="external text" href="https://addons.mozilla.org/en-US/firefox/addon/16" rel="nofollow">Chatzilla</a> (this is a real app but uses ARIA in an HTML area for chat)</li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(AL) A screen reader should announce changes inside a log as if they are marked with aria-live="polite", unless the author overrides that with a specific aria-live property on an ancestor of the node that changes.</li> + <li>(AL) A screen reader should not announce any changes within a timer unless the author overrides that with a specific aria-live property on an ancestor of the change.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="log", "timer"</li> + <li>aria-relevant="additions removals text" (for Chatzilla buddy list)</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Live_role_Marquee"><span class="mw-headline" id="Live_role:_Marquee">Live role: Marquee</span></h3> + +<p>(no examples yet)</p> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>(AL) A screen reader should not announce any changes within a marquee unless the author overrides that with a specific aria-live property on an ancestor of the change.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="marquee"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Live_role_Status"><span class="mw-headline" id="Live_role:_Status">Live role: Status</span></h3> + +<p>(no examples yet)</p> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen readers often provide a special key to announce the current status. This key should present the contents of any "status" region.</li> + <li>(AL) A screen reader should announce changes inside a status as if they are marked with aria-live="polite", unless the author overrides that with a specific aria-live property on an ancestor of the node that changes.</li> + <li>(AL) Strongly preferred, but not currently required: screen readers should read the status when any hotkey associated with status reading is pressed. The known keys are as follows: + <ul> + <li>JAWS: Insert+PageDown</li> + <li>Window-Eyes: Ctrl+Shift+Insert</li> + <li>System Access To Go: Modifier+PageDown</li> + </ul> + </li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>role="status"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h3 id="Live_HTML_table_2"><span class="mw-headline" id="Live_HTML_table">Live HTML table</span></h3> + +<ol> + <li><a class="external text" href="http://accessibleajax.clcworld.net/scoreboard/scoreboard.htm" rel="nofollow">Live game scores</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>A screen reader should read changes within the table as well as provide sufficient contextual clues (row and column header info) so that the user can determine what the changes actually mean.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li><table></li> + <li>aria-live="polite"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><a class="external text" href="http://accessibleajax.clcworld.net/scoreboard/scoreboard_notes.html" rel="nofollow">Scoreboard notes</a></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h1 id="Property-Only_Test_Cases_2"><span class="mw-headline" id="Property-Only_Test_Cases">Property-Only Test Cases</span></h1> + +<p>These testcases involve ARIA properties used to enhance HTML controls (as opposed to JavaScript-built widgets).</p> + +<h2 id="autocomplete_2"><span class="mw-headline" id="autocomplete">autocomplete</span></h2> + +<ol> + <li><a class="external text" href="http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/form/_autoComplete.html" rel="nofollow">Dojo autocomplete</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should announce the fact that this is a control supporting autocomplete. When suggestions appear, if the AT supports it elsewhere in the operating system (e. g. the Run dialog), suggestions should be supported inside the web app as well.</li> + <li>Screen magnifiers should indicate AutoCompletes as they do elsewhere in the operating system.</li> + <li>Optional: for each character typed, screen readers may choose to indicate how many options are remaining in the autocomplete list (if that number has changed). Alternatively, screen readers could make a sound when there is only 1 autocomplete option remaining.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-autocomplete</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>Fail</td> + <td>Fail</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>Fail - Does not announce the presence of AutoComplete possibilities, does not do this anywhere in Windows. Reads autocomplete suggestions through its ordinary highlight color mechanism.</td> + <td>Fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>Fail</td> + <td>Fail</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>Pass</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<p> </p> + +<h2 id="describedby_2"><span class="mw-headline" id="describedby">describedby</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/describedby.html" rel="nofollow">aria-describedby</a></li> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/describedby-display-none.html" rel="nofollow">aria-describedby with display: none</a></li> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/describedby-hidden.html" rel="nofollow">aria-describedby with visibility: hidden</a></li> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/img-description.html" rel="nofollow">aria-describedby on img's with role="button"</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>When the textfield is focused, this description should be spoken after the label "Minutes": "Allows you to specify the number of minutes of inactivity after which your computer should shut down." (AL) The describedby text should be spoken whether it is hidden or not.</li> + <li>(AL) Alternatively, the description could be accessible from a hotkey. However, if the screen reader does not at least indicate that the description exists, users are likely to miss important information.</li> + <li><strong>JAWS -</strong> + <ul> + <li>If described by is used on a fieldset (group box), JAWS speaks the description when focus is placed on a control within the group box for the first time.</li> + <li>If described by is used on a control, JAWS displays the description when the user presses JAWSKey+F1.</li> + </ul> + </li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-describedby</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="label_2"><span class="mw-headline" id="label">label</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/label.html" rel="nofollow">aria-label</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should prefer aria-label information above anything else, including screen text or aria-labelledby.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-label="My something-or-other"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<ul> + <li>If the screen reader simply uses the accessible name property it should get the correct text to speak, even if several methods (aria-label, aria-labelledby, alt, label for, descendant text, title, etc.) are used.</li> +</ul> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>Fail</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="labelledby_2"><span class="mw-headline" id="labelledby">labelledby</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/labelledby.html" rel="nofollow">aria-labelledby</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should prefer this information over screen text or other attributes, excluding aria-label, which supercedes even this one.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-labelledby</li> +</ul> + +<p><strong>Notes:</strong></p> + +<ul> + <li>If the screen reader simply uses the accessible name property it should get the correct text to speak, even if several methods (aria-label, aria-labelledby, alt, label for, descendant text, title, etc.) are used.</li> +</ul> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> + +<h2 id="required_2"><span class="mw-headline" id="required">required</span></h2> + +<ol> + <li><a class="external text" href="http://codetalks.org/source/enhanced-html-forms/required.html" rel="nofollow">aria-required="true"</a></li> +</ol> + +<p><strong>Expected AT Behavior:</strong></p> + +<ul> + <li>Screen reader should give an indication (speech, sound, Braille, etc.) that this field is required to be filled.</li> +</ul> + +<p><strong>Markup used:</strong></p> + +<ul> + <li>aria-required="true"</li> +</ul> + +<p><strong>Notes:</strong></p> + +<p><strong>Results:</strong></p> + +<table> + <tbody> + <tr> + <th>AT</th> + <th>Firefox</th> + <th>IE</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>JAWS 9</td> + <td>-</td> + <td>-</td> + <td>n/a</td> + <td>n/a</td> + </tr> + <tr> + <td>JAWS 10</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>VoiceOver (Leopard)</td> + <td>n/a</td> + <td>n/a</td> + <td>-</td> + <td>fail</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>NVDA</td> + <td>-</td> + <td>n/a</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Zoom (Leopard)</td> + <td>pass</td> + <td>n/a</td> + <td>pass</td> + <td>pass</td> + </tr> + <tr> + <td>ZoomText</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + <tr> + <td>Orca</td> + <td>-</td> + <td>-</td> + <td>-</td> + <td>-</td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/accessibility/aria/forms/alerts/index.html b/files/pt-br/web/accessibility/aria/forms/alerts/index.html new file mode 100644 index 0000000000..b33525c5ad --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/alerts/index.html @@ -0,0 +1,141 @@ +--- +title: Alerts +slug: Web/Accessibility/ARIA/forms/alerts +translation_of: Web/Accessibility/ARIA/forms/alerts +--- +<h2 id="O_problema">O problema</h2> + +<p>Você tem um formulário — um formulário de contato, por exemplo — no qual você deseja inserir algum that you want to put some accessible error checking into. Examples of common problems include e-mail addresses which are not valid, or a name field which does not contain at least a first name or a surname.</p> + +<h2 id="O_formulário">O formulário</h2> + +<p>Primeiro, por favor leia sobre a técnica de <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints#Required_and_invalid_fields" title="/en/Web/Accessibility/ARIA/forms/Basic_form_hints"><code>aria-required</code> </a> if you have not done so, as this technique expands upon that.</p> + +<p>Here is a simple form:</p> + +<pre class="brush: html"> <form method="post" action="post.php"> + <fieldset> + <legend>Please enter your contact details</legend> + <label for="name">Your name (required):</label> + <input name="name" id="name" aria-required="true"/> + <br /> + <label for="email">E-Mail address (required):</label> + <input name="email" id="email" aria-required="true"/> + <br /> + <label for="website">Website (optional):</label> + <input name="website" id="website"/> + </fieldset> + <label for="message">Please enter your message (required):</label> + <br /> + <textarea name="message" id="message" rows="5" cols="80" + aria-required="true"></textarea> + <br /> + <input type="submit" name="submit" value="Send message"/> + <input type="reset" name="reset" value="Reset form"/> + </form> +</pre> + +<h2 id="Checking_for_validity_and_notifying_the_user_2"><span class="mw-headline" id="Checking_for_validity_and_notifying_the_user">Checking for validity and notifying the user</span></h2> + +<p>Form validations consists of several steps:</p> + +<ol> + <li>Checking if the e-mail address or entered name are valid. Each field has a set of criteria which must be met in order to pass validation. In order to simplify this example, we’ll check whether the e-mail address contains the “@” symbol, and if the name entry contains at least 1 character.</li> + <li>If the above criteria is not met, the field’s <code>aria-invalid</code> attribute will be given a value of “<code>true</code>”.</li> + <li>If the criteria was not met, the user will be notified via an alert. Instead of using the JavaScript ‘<code>alert</code>’ function, we’ll use a simple WAI-ARIA widget for notification. This notifies the user of the error, but allows for them continue modifying the form without losing focus (caused by the “<code>onblur</code>” handler in JavaScript's default ‘<code>alert</code>’ function).</li> +</ol> + +<p>Below is example JavaScript code which could be inserted above the closing “<code>head</code>” tag:</p> + +<pre class="brush: js"> <script type="application/javascript"> + function removeOldAlert() + { + var oldAlert = document.getElementById("alert"); + if (oldAlert){ + document.body.removeChild(oldAlert); + } + } + + function addAlert(aMsg) + { + removeOldAlert(); + var newAlert = document.createElement("div"); + newAlert.setAttribute("role", "alert"); + newAlert.setAttribute("id", "alert"); + var msg = document.createTextNode(aMsg); + newAlert.appendChild(msg); + document.body.appendChild(newAlert); + } + + function checkValidity(aID, aSearchTerm, aMsg) + { + var elem = document.getElementById(aID); + var invalid = (elem.value.indexOf(aSearchTerm) < 0); + if (invalid) { + elem.setAttribute("aria-invalid", "true"); + addAlert(aMsg); + } else { + elem.setAttribute("aria-invalid", "false"); + removeOldAlert(); + } + } + </script> +</pre> + +<h2 id="The_checkValidity_function_2"><span class="mw-headline" id="The_checkValidity_function">The <code>checkValidity</code> function</span></h2> + +<p>The primary method in JavaScript used for form validation is the <code>checkValidity</code> function. This method takes three parameters: The ID of the <code>input</code> that is to be validated, the term to search for to ensure validity, and the error message to be inserted into the alert.</p> + +<p>To see if it is valid, the function checks whether the <code>indexOf</code> the <code>input</code>’s value is anything greater than <code>-1</code>. A value of <code>-1</code> or less is returned if the index of the search term could not be found within the value.</p> + +<p>If invalid, the function does two things:</p> + +<ol> + <li>It sets the element’s <code>aria-invalid</code> attribute to “<code>true</code>”, which will indicate to screen readers that there is invalid content in here.</li> + <li>It will call the <code>addAlert</code> function to add the alert with the provided error message.</li> +</ol> + +<p>If the search term is found, the <code>aria-invalid</code> attribute is reset to “<code>false</code>”. In addition, any leftover alerts are removed.</p> + +<h2 id="The_addAlert_function_2"><span class="mw-headline" id="The_addAlert_function">The <code>addAlert</code> function</span></h2> + +<p>This function first removes any old alerts. The function is simple: It looks for an element with id “<code>alert</code>”, and if found, removes that from the <a href="/en-US/docs/Mozilla/Tech/XUL/Tutorial/Document_Object_Model">document object model</a>.</p> + +<p>Next, the function creates a <code>div</code> element to hold the alert text. It gets an ID of “<code>alert</code>”. And it gets a role set of “alert”. This is actually ARIA-inspired, even though it doesn’t say “aria” in the attribute name. This is because that role is based on the <a class="external text" href="http://www.w3.org/TR/xhtml-role/" title="XHTML Role Attribute Module">XHTML Role Attribute Module</a> that was simply ported to HTML for simplicity.</p> + +<p>The text is added to the <code>div</code> element, and the <code>div</code> element is added to the document.</p> + +<p>The moment this happens, Firefox will fire an “alert” event to assistive technologies when this <code>div</code> appears. Most screen readers will pick this one up automatically and speak it. This is similar to the Notification Bar in Firefox that prompts you whether you want to save a password. The alert we just created does not have any buttons to press, it just tells us what’s wrong.</p> + +<h2 id="Modifying_the_“onblur”_event"><span class="mw-headline" id="Adding_the_magic_to_the_.E2.80.9Conblur.E2.80.9D_event">Modifying the “<code>onblur</code>” event</span></h2> + +<p>All that’s left now is add the event handler. We need to change the two inputs for e-mail and name for this:</p> + +<pre class="brush: html"> <input name="name" id="name" aria-required="true" + onblur="checkValidity('name', ' ', 'Invalid name entered!');"/> + <br /> + <input name="email" id="email" aria-required="true" + onblur="checkValidity('email', '@', 'Invalid e-mail address');"/> +</pre> + +<p><strong>Testing the example</strong></p> + +<p>If you use Firefox 3 and a currently-supported screen reader, try the following:</p> + +<ol> + <li>Enter only your first name as the name. When tabbing, you’ll hear an alert that tells you you’ve entered an invalid name. You can then shift-tab back and correct the error.</li> + <li>Enter an e-mail address without the “@” symbol. When tabbing out of this field, you should hear a warning that says you didn’t enter a valid e-mail address.</li> +</ol> + +<p>In both cases, when returning focus to the field in question, your screen reader should tell you that this field is invalid. JAWS 9 supports this, but JAWS 8 does not, so this may not work in all versions of the screen readers supported.</p> + +<h2 id="A_few_questions_that_you_might_have_2"><span class="mw-headline" id="A_few_questions_that_you_might_have">A few questions that you might have</span></h2> + +<dl> + <dt>Q. Why did you put both “<code>(required)</code>” in the label text and the <code>aria-required</code> attribute on some of the inputs?</dt> + <dd>A. If this were a real live form, and the site was being visited by a browser that does not yet support ARIA, we’d still want to give an indication that this is a required field.</dd> + <dt>Q. Why don’t you set focus back to the invalid field automatically?</dt> + <dd>A. Because this is not allowed by the Windows API specs, and possibly others. Also, letting the focus jump around without real user interaction too often is not a nice thing to do in general. </dd> +</dl> + +<div class="warning">TBD: let's rethink this -- personally, I think setting focus might be good if done without causing a keyboard trap.</div> diff --git a/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html b/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/index.html new file mode 100644 index 0000000000..722c60d420 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/dicas_básicas_de_form/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 +--- +<div class="twocolumns"> +<h2 id="Form_labels" name="Form_labels">Form labels</h2> +</div> + +<p>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.</p> + +<p>O exemplo abaixo mostra um form simples com labels. Note que cada elemento {{HTMLElement("input")}} tem um <strong>id</strong>, e cada elemento {{HTMLElement("label")}} tem um atributo <strong>for</strong> indicando o <strong>id</strong> do {{HTMLElement("input")}} associado.</p> + +<p><em>Exempl0 1. Form simples com labels</em></p> + +<pre class="brush: html"><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> +</pre> + +<h2 id="Labeling_with_ARIA" name="Labeling_with_ARIA">Rotulando com ARIA</h2> + +<p>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. <a href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">WAI-ARIA</a>, a especificação de <strong>Aplicações Internet Ricas em Acessibilidade</strong> da W3C <a href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Iniciativa de Acessibilidade Web</a>, fornece o atributo <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby"><strong>aria-labelledby</strong></a> para esses casos.</p> + +<p>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 <strong>aria-labelledby</strong> para "rg1_label," o <strong>id</strong> do elemento {{HTMLElement("h3")}} na linha 1, que é o label para o grupo rádio.</p> + +<p><em>Exemplo 2. Um grupo rádio implementado usando uma lista não ordenada (adaptado de <a href="http://www.oaa-accessibility.org/examplep/radio1/">http://www.oaa-accessibility.org/examplep/radio1/</a>)</em></p> + +<pre class="brush: html"><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> +</pre> + +<h2 id="Describing_with_ARIA" name="Describing_with_ARIA">Descrevendo com ARIA</h2> + +<p>Controles form às vezes tem uma descrição associada com eles, em adição ao label. ARIA fornece o atributo <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-describedby"><strong>aria-describedby</strong></a> para diretamente associar a descrição com o controle.</p> + +<p>O exemplo abaixo mostra um elemento {{HTMLElement("button")}} que é descrito por uma sentença num elemento {{HTMLElement("div")}} separado. O atributo <strong>aria-describedby</strong> no {{HTMLElement("button")}} referencia o <strong>id</strong> de {{HTMLElement("div")}}.</p> + +<p><em>Exemplo 3. Um botão descrito por um elemento separado.</em></p> + +<pre class="brush: html"><button aria-describedby="descriptionRevert">Revert</button> +<div id="descriptionRevert">Reverting will undo any changes that have been made since the last save.</div></pre> + +<p>(Note que o atributo <strong>aria-describedby</strong> é usado para outros propósitos, além de controles do form.)</p> + +<h2 id="Required_and_invalid_fields" name="Required_and_invalid_fields">Campos inválidos e obrigatórios</h2> + +<p>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:</p> + +<ul> + <li>A propriedade <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required"><strong>aria-required</strong></a> pode ser aplicada a um elemento form para indicar para uma TA que é obrigatório preencher o formulário.</li> + <li>O estado <a href="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid" title="http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid"><strong>aria-invalid</strong></a> pode ser programaticamente aplicado para indicar para uma TA quais campos de dados têm dados incorretos, então o usuário sabe que ele entrou um dado inválido.</li> +</ul> + +<p>O exemplo abaixo mostra um form simples com três campos. Nas linhas 4 e 12, o atributo <strong>aria-required</strong> é 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 <strong>aria-invalid</strong> do campo e-mail (linha 12 do HTML) de acordo com o resultado (em adição à mudança de apresentação do elemento).</p> + +<p><em>Exemplo 4a. Um form com campos obrigatórios.</em></p> + +<pre class="brush: html"><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></pre> + +<p><em>Exemplo 4b. Parte de um script que valida a entrada no form.</em></p> + +<pre class="brush: js">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 +};</pre> + +<h2 id="Providing_Helpful_Error_Messages" name="Providing_Helpful_Error_Messages">Fornecendo Mensagens de Erro Úteis</h2> + +<p>Leia como usar <a href="/en-US/docs/aria/forms/alerts" title="aria/forms/alerts">alertas ARIA para melhorar forms</a>.</p> + +<div class="note">A ser decidido: <span id="result_box" lang="pt"><span>devemos</span> <span>ou</span> <span>combinar em</span> <span>um</span> <span>artigo ou</span> <span>separar em</span> <span>técnicas</span><span>, ou ambos.</span> <span>Além disso,</span> <span>é</span> <span>ARIA</span> <span>marcação apropriada</span> <span>para mensagens de erro</span> <span>em uma</span> <span>página carregada</span> <span>após a validação</span> <span>do lado do servidor</span><span>?</span></span></div> + +<p>Para maiores informações usando ARIA para acessibilidade de forms, veja o documento <a href="http://www.w3.org/TR/wai-aria-practices/" title="http://www.w3.org/TR/wai-aria-practices/">Práticas de Cricação de WAI-ARIA</a>.</p> diff --git a/files/pt-br/web/accessibility/aria/forms/index.html b/files/pt-br/web/accessibility/aria/forms/index.html new file mode 100644 index 0000000000..355c70b673 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/index.html @@ -0,0 +1,21 @@ +--- +title: Formulários +slug: Web/Accessibility/ARIA/forms +tags: + - ARIA + - Accessibility + - Acessibilidade + - Rótulos + - WebMechanics + - formulários +translation_of: Web/Accessibility/ARIA/forms +--- +<p>As páginas a seguir fornecem várias técnicas para melhorar a acessibilidade nos formulários <em>web</em>:</p> + +<ul> + <li><a href="/en/Accessibility/ARIA/Basic_form_hints" title="Basic form hints">Dicas básicas sobre formulários</a>: Adicionando dicas e descrições para campos inválidos, ou obrigatórios</li> + <li><a href="/en/Accessibility/ARIA/forms/alerts" title="alerts">Alertas</a>: Usando alertas para fornecer mensagens de erro de validação no lado cliente</li> + <li><a href="/en/Accessibility/ARIA/forms/Multipart_labels" title="https://developer.mozilla.org/en/aria/forms/Multipart_labels">Rótulos de múltiplas partes</a>: Habilitando rótulos (<em>labels</em>) para formulários complexos, com um controle para cada campo</li> +</ul> + +<p>Ver também o <a class="external" href="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html" title="http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html">Artigo do Yahoo! sobre validação de formulário e ARIA</a>, cobrindo muito do mesmo conteúdo.</p> diff --git a/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html b/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html new file mode 100644 index 0000000000..102274fadb --- /dev/null +++ b/files/pt-br/web/accessibility/aria/forms/multipart_labels/index.html @@ -0,0 +1,47 @@ +--- +title: Usando ARIA para rótulos com campos incorporados - Multipart labels +slug: Web/Accessibility/ARIA/forms/Multipart_labels +tags: + - ARIA + - Accessibility + - Acessibilidade + - Formulários+ARIA + - Guía + - Intermediário + - PrecisaDeConteúdo +translation_of: Web/Accessibility/ARIA/forms/Multipart_labels +--- +<div> +<h2 id="O_problema"><span class="mw-headline" id="Problem">O problema</span></h2> + +<p>Você tem um formulário onde existe uma pergunta simples e a resposta é mencionada na própria questão. Um exemplo clássico, que todos nós conhecemos das configurações de nossos navegadores, é a colocação "Deletar o histórico após x dias". "Apagar o histórico após" está à esquerda da caixa de texto, x é o número, por exemplo, 21 e a palavra "dias" vem depois dessa caixa, formando uma sentença de fácil compreensão.</p> + +<p>Se você está usando um leitor de tela tem que perceber que, quando vai para esta configuração no Firefox, escuta a pergunta "Deletar o histórico depois de 21 dias?", seguida por um aviso de que você está em uma caixa de texto contendo o número 21. Isso não é legal? Você não precisa navegar ao redor para descobrir a unidade. "Dias" pode, facilmente, ser "meses", ou "anos" em muitos diálogos comuns, não havendo maneira de descobrir, a não ser com comandos para reexaminar a tela.</p> + +<p><span class="seoSummary">A solução está em um atributo ARIA chamado <strong>aria-labelledby</strong> (<em>aria-etiqueta liderada por</em>). Seu parâmetro é uma cadeia de caracteres (<em>string</em>) que consiste de IDs dos elementos HTML que você quer concatenar em um único nome acessível.</span></p> + +<p>Tanto o atributo <strong>aria-labelledby</strong>, como o <strong>aria-describedby </strong>(<em>aria-descrito por</em>), são especificados <span class="short_text" id="result_box" lang="pt"><span>no elemento de formulário que será rotulado, por exemplo uma </span></span><input>.<span class="short_text" lang="pt"><span> Em ambas as situações, as ligações do controle da rotulagem <em>for/label</em>, que podem, também, estar presentes, serão substituídas pelo atributo </span></span><strong>aria-labelledby</strong>. Se você oferecer o atributo<strong> aria-labelledby</strong> em uma página HTML, então deve, da mesma forma, providenciar uma arquitetura de rótulo que vá, igualmente, apoiar os navegadores mais antigos, que ainda não têm suporte ARIA. Com Firefox 3, seus utilizadores cegos conseguem, automaticamente, melhor acessibilidade com o novo atributo, mas quem utiliza navegadores antigos não sofrerá abandono no escuro, desta forma.</p> + +<p>Exemplo:</p> +<input><span id="labelShutdown">Desligar o computador após </span> <input> <span id="shutdownUnit"> minutos</span> + +<pre class="brush: html"><input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> +<span id="labelShutdown">Shut down computer after</span> +<input aria-labelledby="labelShutdown shutdownTime shutdownUnit" id="shutdownTime" type="text" value="10" /> +<span id="shutdownUnit"> minutes</span> +</pre> + +<h2 id="Uma_nota_para_quem_usa_JAWS_8"><span class="mw-headline" id="A_Note_for_JAWS_8_users">Uma nota para quem usa JAWS 8</span></h2> + +<p>O JAWS 8.0 tem a sua própria lógica para encontrar os <em>labels</em> e isso o faz, sempre, substituir a caixa de texto com o <em>accessibleName</em> que uma página HTML recebe. Quanto ao JAWS 8, <u>eu</u> ainda não encontrei uma maneira de fazê-lo aceitar o <em>label</em> do exemplo acima. Mas o NVDA e o Window-Eyes fazem isso muito bem e a Orca, no Linux, também não apresenta problemas. (Os <u>autores</u> do artigo, são: <a href="https://developer.mozilla.org/en-US/profiles/bunnybooboo">bunnybooboo</a>, <a href="https://developer.mozilla.org/en-US/profiles/kscarfone">kscarfone</a>, <a href="https://developer.mozilla.org/en-US/profiles/StephenKelly">StephenKelly</a>, <a href="https://developer.mozilla.org/en-US/profiles/Kritz">Kritz</a>, <a href="https://developer.mozilla.org/en-US/profiles/Fredchat">Fredchat</a>, <a href="https://developer.mozilla.org/en-US/profiles/Sheppy">Sheppy</a>, <a href="https://developer.mozilla.org/en-US/profiles/Aaronlev">Aaronlev</a>)</p> + +<div class="note">TBD: adicione mais informação de compatibilidade</div> + +<h2 id="Isto_pode_ser_executado_sem_ARIA"><span class="mw-headline" id="Can_this_be_done_without_ARIA.3F">Isto pode ser executado sem ARIA?</span></h2> + +<p>O membro da comunidade Ben Millard apontou, numa publicação em um blogue, que os controles podem ser embutidos nos <em>labels,</em> como mostrado no exemplo acima, usando HTML 4, <a class="external text" href="http://projectcerbera.com/blog/2008/03#day24" rel="nofollow">controls can be embedded in labels as shown in the above example using HTML 4</a>, <span id="result_box" lang="pt"><span>simplesmente</span> <span>com a</span> <span>incorporação da entrada (</span></span><em>input</em>)<span lang="pt"> <span>no</span> <span>rótulo (<em>label</em>)</span></span>. Agradecemos pela informação, Ben! É muito útil e deixa claro que algumas técnicas que estão disponíveis há anos escapam, às vezes, até mesmo aos gurus. Esta técnica funciona em Firefox; entretanto, isso não é verdade para muitos outros navegadores, inclusive IE. Para <em>labels</em> com controles de formulários embutidos o uso do atributo <strong>aria-labelledby </strong>ainda é a melhor abordagem.</p> + +<p> </p> +</div> + +<p> </p> 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 new file mode 100644 index 0000000000..73b9605ef1 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/guia_para_implementar_o_leitor_de_tela_aria/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 +--- +<h2 id="Regiões_Ativas">Regiões Ativas</h2> + +<p>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</p> + +<h3 id="Interpretando_a_marcação_de_região_ativa_WAI-ARIA">Interpretando a marcação de região ativa WAI-ARIA</h3> + +<ol> + <li>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.</li> + <li>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.</li> + <li>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.</li> + <li>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.</li> + <li>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.</li> + <li>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.</li> + <li>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.</li> +</ol> + +<h3 id="Ideias_para_Configurações_e_Heurística">Ideias para Configurações e Heurística</h3> + +<ol> + <li>Permitir uma voz diferente (em text-to-speech) ou outras características de apresentação para setar mudanças ativas seperadamente.</li> + <li>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.</li> + <li>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).</li> +</ol> + +<h3 id="Detalhes_para_Processamento_via_APIs_Platform_Acessibility">Detalhes para Processamento via APIs Platform Acessibility</h3> + +<p>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 <a href="/en/AJAX/WAI_ARIA_Live_Regions//API_Support" title="http://developer.mozilla.org/editor/fckeditor/core/editor/en/AJAX/WAI_ARIA_Live_Regions//API_Support">regiões ativas WAI-ARIA são expostas no Firefox 3</a>.</p> diff --git a/files/pt-br/web/accessibility/aria/index.html b/files/pt-br/web/accessibility/aria/index.html new file mode 100644 index 0000000000..75a8173c54 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/index.html @@ -0,0 +1,148 @@ +--- +title: ARIA +slug: Web/Accessibility/ARIA +tags: + - AJAX + - ARIA + - Accessibility + - Acessibilidade + - Introdução + - JavaScript ARIA + - TopicStub + - W3C + - WAI-ARIA + - WAI-ARIA+HTML +translation_of: Web/Accessibility/ARIA +--- +<p><span class="seoSummary">Aplicações para a Internet Ricas em Acessibilidade - Accessible</span><span lang="pt"> <span class="hps">Rich Internet Applications</span> <span class="hps">(ARIA</span><span>) definem as</span> <span class="hps">formas de tornar</span> <span class="hps">o conteúdo</span> <span class="hps">e as</span> <span class="hps">aplicações da Rede Mundial - <em>Web</em> -</span> <span class="hps">(especialmente aqueles</span> <span class="hps">desenvolvidos com</span> <span class="hps">Ajax e</span> <span class="hps">JavaScript)</span> <span class="hps">mais acessíveis às pessoas</span> <span class="hps">com deficiência.</span></span></p> + +<p><span lang="pt"><span class="hps">Por exemplo,</span> a <span class="hps">ARIA</span> <span class="hps">permite</span> a marcação de regiões importantes na página (como uma caixa de busca, um cabeçalho, chamadas "pontos de referência") para facilitar a navegação (agilizam a utilização de leitores de tela, por exemplo),<span> </span><span class="hps">JavaScript</span><span> para <em>widgets</em>, sugestões de preenchimento</span> <span class="hps">de formulário e</span> <span class="hps">mensagens de erro,</span> <span class="hps">atualizações de conteúdo</span> <span class="hps">em tempo real</span> <span class="hps">e muito mais.</span></span></p> + +<p><span id="result_box" lang="pt"><span class="hps">O ARIA</span> <span class="hps">é um conjunto de</span> <span class="hps">atributos especiais para a acessibilidade,</span><span class="hps"> que</span> <span class="hps">pode ser adicionado a</span> <span class="hps">qualquer linguagem marcação</span><span>, mas</span> <span class="hps">é especialmente adequado para</span> <span class="hps">HTML.</span> <span class="hps">O atributo</span> <span class="hps">da função define</span><span class="hps"> qual é o</span><span class="hps"> modelo de</span> <span class="hps">objeto</span> <span class="hps">(tais como</span> <span class="hps">um artigo</span><span>, um alerta,</span> <span class="hps">ou</span> algo que <span class="hps">deslize)</span><span>.</span> <span class="hps">Há atributos adicionais</span> <span class="hps">ARIA que</span> <span class="hps">fornecem</span> <span class="hps">outras propriedades</span> <span class="hps">úteis, como</span> <span class="hps">a descrição</span> <span class="hps">de uma</span> <span class="hps">forma, ou</span> <span class="hps">o valor atual em</span> <span class="hps">uma barra de progresso</span><span>.</span></span></p> + +<p>O conjunto ARIA pode ser implementado nos navegadores mais populares e em leitores de tela. No entanto, as implementações variam e as tecnologias mais antigas não as suportam bem. Utilize um ARIA compatível, ou solicite a alguém que o atualize para as tecnologias mais recentes.</p> + +<div class="note"> +<p><strong>Nota</strong>: Por favor, participe e torne o ARIA melhor para as pessoas! Não tem muito tempo? Envie sugestões para <a href="https://lists.mozilla.org/listinfo/accessibility">acessibilidade</a> <a href="https://lists.mozilla.org/listinfo/accessibility">- lista de correspondência da Mozilla</a>, ou #<em>accessibility </em><a href="https://wiki.mozilla.org/IRC">canal IRC</a><em>.</em></p> +</div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h3 id="Documentation" name="Documentation">Começando em ARIA</h3> + + <dl> + <dt><a href="/en-US/docs/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="An overview of accessible web applications and widgets">Apresentando ARIA</a></dt> + <dd>Uma rápida introdução sobre como tornar um conteúdo dinâmico acessível com ARIA: Veja, também, o clássico <a class="external" href="http://dev.opera.com/articles/view/introduction-to-wai-aria/" title="http://dev.opera.com/articles/view/introduction-to-wai-aria/">ARIA intro by Gez Lemon</a>, de 2008.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" title="https://developer.mozilla.org/en-US/docs/Accessibility/Web_applications_and_ARIA_FAQ">Aplicações<em> Web</em> e ARIA FAQ</a></dt> + <dd>Respostas às perguntas frequentes sobre WAI-ARIA e sobre por que é necessário tornar as aplicações <em>web</em> acessíveis.</dd> + <dt><a class="external" href="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/" title="http://zomigi.com/blog/videos-of-screen-readers-using-aria-updated/">Vídeos de Leitores de Tela Utilizando ARIA</a></dt> + <dd>Veja exemplos reais e simplificados de vídeos, por toda a <em>web</em>, que incluem o "antes" e o "depois" da acessibilidade. </dd> + <dt><a class="external" href="http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html">Usando ARIA com HTML</a></dt> + <dd>Um guia prático para desenvolvedores. Traz sugestões sobre quais atributos ARIA usar com os elementos HTML. As sugestões são baseadas em realidades implementadas.</dd> + </dl> + + <h3 id="Melhorias_Simples_ARIA">Melhorias Simples ARIA</h3> + + <dl> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/" rel="external" title="http://www.paciellogroup.com/blog/2010/10/using-wai-aria-landmark-roles/">Melhorando a Navegação nas Páginas com os Pontos de Referência ARIA</a></dt> + <dd>Uma deliciosa introdução à utilização de pontos de referência para beneficiar a navegação pelas páginas da internete por quem utiliza os leitores de tela ARIA. <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/">Veja, também, as notas da implementação de pontos de referência ARIA</a> <a class="external" href="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/" rel="external" title="http://www.paciellogroup.com/blog/2011/07/html5-accessibility-chops-aria-landmark-support/"> </a> e exemplos de situações reais (atualizadas a partir de 11 de julho).</dd> + <dt><a href="/en-US/docs/ARIA/forms" rel="internal" title="/en-US/docs/ARIA/forms">Melhorando a Acessibilidade nos Formulários</a></dt> + <dd>O conjunto ARIA não é, apenas, para conteúdo dinâmico! Aprenda como aperfeiçoar a acessibilidade nos formulários HTML utilizando alguns atributos adicionais ARIA. </dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions" title="Live Regions">Regiões dinâmicas (trabalho em progresso)</a></dt> + <dd>As regiões dinâmicas oferecem sugestões, aos leitores de tela, sobre como controlar as alterações nos conteúdos das páginas.</dd> + <dt><a class="external" href="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm" rel="external" title="http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm">Utilizando a ARIA Regiões Dinâmicas para Apresentar as Alterações no Conteúdo</a></dt> + <dd>Um resumo sobre as regiões dinâmicas, pelos criadores do programa de leitura de tela JAWS. Note que as regiões dinâmicas também são suportadas pela NVDA, no Firefox e VoiceOver, com Safari.</dd> + </dl> + + <h3 id="ARIA_para_Widgets_Roteirizados">ARIA para <em>Widgets </em>Roteirizados</h3> + + <dl> + <dt><a class="external" href="/en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets" title="en-US/docs/Accessibility/Keyboard-navigable_JavaScript_widgets">Navegação pelo Teclado e Foco para <em>Widgets</em> em JavaScript</a></dt> + <dd>A primeira etapa do desenvolvimento de um <em>widget</em> acessível com JavaScript é tornà-lo navegável através do teclado. Este artigo descreve as fases dessa operação. O <a class="external" href="http://www.yuiblog.com/blog/2009/02/23/managing-focus/" title="http://www.yuiblog.com/blog/2009/02/23/managing-focus/">artigo Yahoo! Administrando focos</a> também é de grande ajuda.</dd> + <dt><a class="external" href="http://access.aol.com/dhtml-style-guide-working-group/" title="http://dev.aol.com/dhtml_style_guide">Guia de Estilo para Navegação através do Teclado</a></dt> + <dd>Um desafio em ARIA é conseguir que os desenvolvedores executem procedimentos estáveis - claramente melhores para quem os utiliza. Este guia de estilos descreve a interface de teclado para os <em>widgets</em> comuns.</dd> + </dl> + + <h3 id="Recursos_ARIA">Recursos ARIA</h3> + + <dl> + <dt><a href="/en-US/docs/Accessibility/ARIA/widgets/overview" title="en-US/docs/aria/widgets/overview">A Técnica na Execução de <em>Widgets</em>, Tutoriais e Exemplos</a></dt> + <dd>Precisa de um controle dezlizante, um menu, ou algum outro tipo de <em>widget</em>? Encontre, aqui, as maneiras de obtê-los.</dd> + <dt><a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">Bibliotecas JavaScript UI com ARIA habilitada</a></dt> + <dd>Se você está começando um projeto novo, escolha uma biblioteca UI para <em>widget</em> com suporte a ARIA já embutido. Atenção: isto é de 2009 -- este conteúdo deve ser movido para uma página MDN, onde pode ser atualizado.</dd> + <dt><a class="external" href="http://dl.dropbox.com/u/573324/CSUN2012/index.html" title="http://dl.dropbox.com/u/573324/CSUN2012/index.html">Acessibilidade em HTML5 e Aplicações Ricas - Materiais de Oficina CSUN 2012</a></dt> + <dd>Inclua apresentações de eslaides e exemplos.</dd> + </dl> + </td> + <td> + <h3 id="Community" name="Community">Lista de Correspondência</h3> + + <dl> + <dt><a class="link-https" href="https://groups.google.com/forum/#!forum/free-aria" title="https://groups.google.com/forum/#!forum/free-aria">ARIA Livre no Grupo Google</a></dt> + <dd>Área de perguntas sobre ARIA, bem como de fazer sugestões para melhorar a documentação ARIA encontrada nestas páginas.</dd> + </dl> + + <h3 id="Community" name="Community">Blogs</h3> + + <p>As informações ARIA nos blogues tendem a ficar desatualizadas rapidamente. Sem contar que há outras boas informações fora deles, de desenvolvedores que estão tornando o conjunto Aria funcional hoje.</p> + + <p><a class="external" href="http://www.paciellogroup.com/blog/category/wai-aria/" title="http://www.paciellogroup.com/blog/category/wai-aria/">Paciello Group</a></p> + + <p><a class="external" href="http://www.accessibleculture.org/tag/wai-aria/" title="http://www.accessibleculture.org/tag/wai-aria/">Cultura Acessível</a></p> + + <h3 id="Encontrando_Erros">Encontrando Erros</h3> + + <p><a href="/en/Accessibility/ARIA/How_to_file_ARIA-related_bugs" title="https://developer.mozilla.org/en/ARIA/How_to_file_ARIA-related_bugs">Erros nos arquivos ARIA em navegadores, leitores de telas e bibliotecas JavaScript</a>.</p> + + <h3 id="Exemplos">Exemplos</h3> + + <dl> + <dt><a class="external" href="/en-US/docs/Accessibility/ARIA/ARIA_Test_Cases" title="en-US/docs/ARIA/examples">Exemplos de Bibliotecas ARIA</a></dt> + <dd>Um conjunto de exemplos de arquivos das bibliotecas base, com os quais fica muito fácil aprender.</dd> + <dt><span class="external">Demonstração de Biblioteca para a Accessibilidade JS em <em>Widget</em> </span></dt> + <dd><a class="external" href="http://dojotoolkit.org/widgets" title="http://dojotoolkit.org/widgets">Dojo</a>, <a class="external" href="http://hanshillen.github.com/jqtest/" title="http://hanshillen.github.com/jqtest/">jQuery</a>, <a class="external" href="http://wiki.fluidproject.org/display/fluid/Components" title="http://wiki.fluidproject.org/display/fluid/Components">Fluid</a>, <a class="external" href="http://yuilibrary.com/gallery/" title="http://yuilibrary.com/gallery/">YUI</a></dd> + </dl> + + <dl> + <dt><a class="external" href="http://mail.yahoo.com" title="http://mail.yahoo.com">Correio Eletrônico Yahoo!</a></dt> + <dd>A Yahoo! colocou tudo reunido com o Yahoo! <em>e-mail</em>, uma aplicação para a <em>web</em> que parece um aplicativo nativo. E funciona muito bem. Em uma <a class="external" href="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/" title="http://www.marcozehe.de/2011/09/21/review-the-all-new-yahoo-mail-web-application/">análise do <em>e-mail</em> Yahoo!</a> pelo leitor de tela, Marco Zehe diz: "Que o bom trabalho permaneça!".</dd> + </dl> + + <dl> + <dt><a class="external" href="http://search.yahoo.com" title="http://search.yahoo.com">Pesquisa Yahoo!</a></dt> + <dd>A Yahoo! tem feito um trabalho incrível no avanço do ARIA, aplicando suas posibilidades de forma plena e <a class="external" href="http://ycorpblog.com/2011/03/23/searchdirect/" title="http://ycorpblog.com/2011/03/23/searchdirect/">compartilhando suas técnicas</a>. A Pesquisa Yahoo! usa uma combinação de pontos de referência ARIA, regiões dinâmicas e <em>widgets</em>.</dd> + </dl> + + <h3 id="Esforços_pela_Padronização">Esforços pela Padronização</h3> + + <dl> + <dt><a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">Uma Visão Geral das Atividades WAI-ARIA na W3C</a></dt> + <dd>Uma visão geral oficial dos esforços de padronização da WAI-ARIA pela Iniciativa de tornar a <em>Web </em>Acessível (Web Accessibility Initiative - WAI)</dd> + <dt><a class="external" href="http://www.w3.org/TR/wai-aria/" title="http://www.w3.org/TR/wai-aria/">Especificações WAI-ARIA</a></dt> + <dd>As especificações W3C são referências úteis. Note que, nesta fase, é importante testar a compatibilidade, uma vez que as implementações ainda estão inconsistentes.</dd> + <dt><a class="external" href="http://www.w3.org/WAI/PF/aria-practices/" title="http://www.w3.org/WAI/PF/aria-practices/">Práticas Oficiais WAI-ARIA</a></dt> + <dd>Conforme as especificações da W3C WAI-ARIA, a excelênca nas práticas oficiais representam o futuro ideal - o dia em que todos os autores possam trabalhar em suas realizações sobre uma base ARIA consistente em navegadores e leitores de tela. A documentação W3C proporcionará a você uma visão aprofundada de ARIA.<br> + <br> + Por enquanto, desenvolvedores <em>web</em> que implementem ARIA devem priorizar a compatibilidade. Use as melhores documentações das práticas e exemplos baseados em implementações atuais.</dd> + <dt><a class="external" href="http://www.openajax.org/member/wiki/Accessibility" title="http://www.openajax.org/member/wiki/Accessibility">A Força-Tarefa da Acessibilidade Open AJAX</a></dt> + <dd>Os centros de pesquisa Open AJAX envolvem ferramentas de desenvolvimento, modelos de arquivos e testes automatizados para ARIA.</dd> + <dt><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="ARIA Techniques">Em Construção: Técnicas ARIA WCAG 2.0</a></dt> + <dd>A comunidade necessita de um conjunto completo de técnicas WCAG voltadas para WAI-ARIA + HTML, a fim de que as organizações possam estar confortáveis ao proclamar que o teor de suas ARIAs habilitadas é compatível com essas técnicas WCAG. É muito importante que as regulamentações, ou políticas, sejam baseadas em WCAG.</dd> + </dl> + </td> + </tr> + </tbody> + <tbody> + <tr> + <td colspan="2"> + <h3 id="Related_Topics" name="Related_Topics">Tópicos Relacionados</h3> + + <dl> + <dd><a href="/en-US/docs/Accessibility" title="en-US/docs/Accessibility">Accessibilidade</a>, <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a>, <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a></dd> + </dl> + </td> + </tr> + </tbody> +</table> diff --git a/files/pt-br/web/accessibility/aria/roles/index.html b/files/pt-br/web/accessibility/aria/roles/index.html new file mode 100644 index 0000000000..d26540b113 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/roles/index.html @@ -0,0 +1,78 @@ +--- +title: WAI-ARIA Roles +slug: Web/Accessibility/ARIA/Roles +tags: + - ARIA + - ARIA Roles + - Acessibilidade + - Referencia + - Rôles +translation_of: Web/Accessibility/ARIA/Roles +--- +<p class="summary">Essa página lista referências às atribuções WAI-ARIA discutidos no MDN. Para visualizar a lista completa, veja <a href="/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, States, and Properties</a></p> + +<p>{{SubpagesWithSummaries}}</p> + +<div class="hidden"> +<p>Por favor, reivindique o <em>role</em> que pretende explorar adicionando o seu nome após o nome do <em>role</em>: (páginas antigas apontam para <a href="/en-US/docs/">https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques</a>). Os <em>roles</em> com esboços já concluídos foram removidos da lista.</p> + +<ul> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_Role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Banner_Role">banner</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Combobox_Role">Combobox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Command_Role">Command</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Columnheader_Role">Columnheader </a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Composite_Role">composite</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Definition_Role">Definition</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Directory_Role">Directory</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Feed_Role">Feed</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">Gridcell</a> (Eric E)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Group_Role">Group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Input_Role">input</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Landmark_Role">landmark</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Link_Role">Link</a> - página antiga</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listbox_Role">listbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Log_Role">Log</a> - página antiga</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Marquee_Role">Marquee</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Math_Role">math</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menu_Role">menu</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menubar_Role">menubar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuiitem_Role">Menuitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemcheckbox_Role">Menuitemcheckbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Menuitemradio_Role">Menuitemradio</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/None_Role">none</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Note_Role">note</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Option_Role">Option</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Presentation_Role">presentation</a> </li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Progressbar_Role">Progressbar</a> - página antiga</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radio_Role">Radio</a> - página antiga</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Radiogroup_Role">radiogroup</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Range_Role">range</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_Role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Roletype_Role">roletype</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowheader_Role">rowheader</a>(Estelle)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Scrollbar_Role">Scrollbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Searchbox_Role">searchbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Section_Role">section</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Sectionhead_Role">sectionhead</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Select_Role">select</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Separator_Role">separator</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Slider_Role">Slider</a> - página antiga</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Spinbutton_Role">Spinbutton</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Status_Role">Status</a> - página antiga</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Structure_Role">structure</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">Tabpanel</a> (Michiel)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Term_Role">term</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Time_Role">Timer</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Toolbar_Role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">Tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">Tree</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treegrid_Role">treegrid</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">Treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Widget_Role">widget</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Window_Role">window</a></li> +</ul> +</div> diff --git a/files/pt-br/web/accessibility/aria/web_applications_and_aria_faq/index.html b/files/pt-br/web/accessibility/aria/web_applications_and_aria_faq/index.html new file mode 100644 index 0000000000..4141f81ffc --- /dev/null +++ b/files/pt-br/web/accessibility/aria/web_applications_and_aria_faq/index.html @@ -0,0 +1,320 @@ +--- +title: Aplicações web e ARIA - Perguntas Frequentes (FAQ) +slug: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +tags: + - ARIA + - Accessibility + - Acessibilidade + - Guía + - Intro + - Introdução + - JavaScript + - W3C + - WAI-ARIA +translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ +--- +<h2 id="O_que_significa_ARIA">O que significa ARIA?</h2> + +<p>WAI-ARIA, que quer dizer <a class="external" href="http://www.w3.org/WAI/intro/aria.php" title="http://www.w3.org/WAI/intro/aria.php">Accessible Rich Internet Applications </a>(Aplicações Ricas para uma Internete Acessível), são as especificações da <a class="external" href="http://www.w3.org/WAI/" title="http://www.w3.org/WAI/">Web Accessibility Initiative</a> (Iniciativa pela Acessibilidade na <em>Web</em>), da <a class="external" href="http://www.w3.org/" title="http://www.w3.org/">W3C</a> (World Wide Web Consortium). O conjunto ARIA oferece a maneira de tornar as aplicações e <em>widgets</em> da rede mundial mais acessíveis a uma diversidade maior de pessoas, incluindo quem utiliza tecnologias assistivas, como leitores de telas, ou lentes de aumento.</p> + +<p>O conjunto ARIA fornece semânticas adicionais para descrever a função (role), estado (state) e funcionalidade de muitos controles familiares da interface de utilização, tais como menus, deslizantes, árvores e diálogos. E, também, provê informação estrutural adicional, o que auxilia os autores a identificar as áreas de referência (<em>landmarks</em>), regiões e malhas nas suas páginas. O conjunto ARIA habilita aplicações dinâmicas e <em>widgets</em> gerenciados pela JavaScript a interoperar com uma gama de tecnologias assistivas baseadas em ambiente.</p> + +<p>Para mais informações sobre como criar <em>widgets</em> acessíveis com ARIA, veja a <a href="/en/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="en/Accessibility/An overview of accessible web applications and widgets">Visão geral da acessibilidade em aplicações <em>web</em> e <em>widgets </em>- Overview of accessible web applications and widgets</a>.</p> + +<h2 id="ARIA_-_onde_tem_suporte">ARIA - onde tem suporte?</h2> + +<p>ARIA é um grupo de especificações relativamente novo, mas o suporte está crescendo. Uma larga variedade de navegadores comumente usados, tecnologias assistivas, conjunto de ferramentas JavaScript e aplicações, agora, suportam o conjunto ARIA. Entretanto, velhas versões destas tecnologias ainda podem estar sendo utilizadas por muita gente. Quem sabe você possa considerar a implementação de ARIA pela utilização de <span class="short_text" id="result_box" lang="pt"><span>técnicas de aprimoramento</span> <span>progressivo</span></span> — como adicionar ARIA usando JavaScript e não diretamente na sua marcação — no intuito<span class="short_text" id="result_box" lang="pt"><span> de</span> <span>obter, </span><span>graciosamente,</span></span> o<span id="result_box" lang="pt"> <span>suporte</span> <span>nos navegadores e tecnologias assistivas mais antigos.</span></span></p> + +<h3 id="Navegadores">Navegadores</h3> + +<p>O conjunto ARIA encontra suporte nos seguintes navegadores:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Navegadorr</th> + <th>Versão Mínima</th> + <th>Observações</th> + </tr> + <tr> + <td>Firefox</td> + <td>3.0+</td> + <td>Funciona com NVDA, JAWS 10+ e Orca</td> + </tr> + <tr> + <td><a class="external" href="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support" title="http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support">Chrome</a></td> + <td>Mais recentes</td> + <td>O suporte a leitores de tela ainda é experimental a partir do Chrome 15</td> + </tr> + <tr> + <td>Safari</td> + <td>4+</td> + <td>No Safari 5 o suporte está <span class="short_text" id="result_box" lang="pt"><span>muito melhorado</span></span>.<br> + Para regiões dinâmicas é preciso o Safari 5 com VoiceOver no iOS5, ou OS X Lion</td> + </tr> + <tr> + <td><a class="external" href="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/" title="http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/">Opera</a></td> + <td>9.5+</td> + <td> + <p>Necessita o VoiceOver no OS X. TBD: <span class="short_text" id="result_box" lang="pt"><span>como está funcionando</span> <span>atualmente</span></span>?</p> + </td> + </tr> + <tr> + <td><a class="external" href="http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/cc891505(v=vs.85).aspx">Internet Explorer</a></td> + <td>8+</td> + <td>Funciona com JAWS 10+ e NVDA. Não existe suporte para regiões dinâmicas no NVDA.<br> + O suporte em IE9 está muito aperfeiçoado.</td> + </tr> + </tbody> +</table> + +<p>Em certos casos, as versões anteriores podem suportar, apenas, algumas características do conjunto ARIA. Tabelas mais detalhadas da compatibilidade de navegadores estão disponíveis a partir de múltiplas fontes:</p> + +<ul> + <li><a class="external" href="http://caniuse.com/wai-aria" title="http://caniuse.com/wai-aria">caniuse.com</a></li> + <li><a class="external" href="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/" title="http://www.paciellogroup.com/blog/2012/02/rough-guide-browsers-operating-systems-and-screen-reader-support/">The Paciello Group</a></li> +</ul> + +<h3 id="Tecnologias_Assistivas">Tecnologias Assistivas</h3> + +<p>As tecnologias assistivas estão, progressivamente, abraçando o conjunto ARIA. Algumas delas incluem:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Tecnologia Assistiva</th> + <th>Versão mínima para o conjunto ARIA básico</th> + <th>Versão mínima para regiões dinâmicas e suportes de alerta</th> + </tr> + <tr> + <td>NVDA</td> + <td>2010.2<br> + (NVDA é, sempre, um aprimoramento gratuito)</td> + <td>2011.1 para Firefox, sem apoio para regiões dinãmicas no IE a partir de 2011.2.</td> + </tr> + <tr> + <td>Orca</td> + <td>? (TBD)</td> + <td>? (TBD)</td> + </tr> + <tr> + <td>VoiceOver</td> + <td>OSX 10.5,<br> + iOS 4</td> + <td>OS X 10.7<br> + iOS 5</td> + </tr> + <tr> + <td>JAWS</td> + <td>8</td> + <td>10</td> + </tr> + <tr> + <td>Window-Eyes</td> + <td>7</td> + <td>Atualmente, sem suporte para regiões vivas</td> + </tr> + <tr> + <td>ZoomText</td> + <td>?</td> + <td>Atualmente, sem suporte para regiões vivas</td> + </tr> + </tbody> +</table> + +<p>Nota: as primeiras versões destas ferramentas tinham, muitas vezes, implementações ARIA parciais, ou com problemas.</p> + +<p>Para notas sobre o suporte JAWS para ARIA a partir do JAWS 10, veja este artigo do Paciello Group: <a class="external" href="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/" title="http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/">JAWS Support for ARIA</a>.</p> + +<h3 id="O_Conjunto_de_Ferramentas_JavaScript">O Conjunto de Ferramentas JavaScript</h3> + +<p>Funções, estados, e propriedades ARIA <span class="short_text" id="result_box" lang="pt"><span>foram adiciona</span></span>das a <span id="result_box" lang="pt"><span>uma série de</span> <span>conjuntos de ferramentas</span> JavaScript </span><span lang="pt"><span>populares</span> <span>para a interface de utilização</span></span>, incluindo:</p> + +<ul> + <li>Dojo/Dijit</li> + <li>jQuery UI</li> + <li>Fluid Infusion</li> + <li>Google Closure</li> + <li>Google Web Toolkit</li> + <li>BBC Glow</li> + <li>Yahoo! User Interface Library (YUI)</li> +</ul> + +<p>Para mais informações sobre acessibilidade com o conjunto de ferramentas JavaScript, leia:</p> + +<ul> + <li>Steve Faulkner's <a class="external" href="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/" title="http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/">WAI-ARIA Implementation in JavaScript UI Libraries</a></li> +</ul> + +<h2 id="Você_pode_me_dar_um_exemplo_do_conjunto_ARIA_em_ação">Você pode me dar um exemplo do conjunto ARIA em ação?</h2> + +<p><a name="aria-in-action">Com prazer: ) Eis, aqui, a marcação para um <em>widget</em> de uma barra de progresso: </a></p> + +<pre class="brush:html;"><div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /></pre> + +<p>Esta barra de progresso é construída usando uma <code><div></code>, o que não é muito descritivo. Infelizmente, não há muitas etiquetas semânticas disponíveis para desenvolvedores em HTML 4, logo, nós precisamos incluir as funções e propriedades ARIA. Estas são especificadas pela adição de atributos ao elemento. Neste exemplo, o atributo <code>role="progressbar" </code>informa, ao navegador, que este elemento é, agora, um <em>widget</em> de barra de progresso movimentado pela JavaScript. Os atributos <strong>aria-valuemin</strong> (aria-valor mínimo) e <strong>aria-valuemax</strong> (aria-valor máximo) determinam os valores mínimo e máximo para essa barra de progresso e o <strong>aria-valuenow </strong>(aria-valor agora) descreve o seu estado atual.</p> + +<p>Além de inseridos diretamente na marcação, os atributos ARIA podem ser<span id="result_box" lang="pt"> <span>adicionados ao elemento</span> <span>e atualizados</span> <span>dinamicamente</span></span> pela utilização de códigos em JavaScript, como este:</p> + +<pre class="brush: javascript" id="line96">// Find the progress bar <div> in the DOM. +var progressBar = document.getElementById("percent-loaded"); + +// Set its ARIA roles and states, so that assistive technologies know what kind of widget it is. +progressBar.setAttribute("role", "progressbar"); +progressBar.setAttribute("aria-valuemin", 0); +progressBar.setAttribute("aria-valuemax", 100); + +// Create a function that can be called at any time to update the value of the progress bar. +function updateProgress(percentComplete) { + progressBar.setAttribute("aria-valuenow", percentComplete); +}</pre> + +<h2 id="sect1" style="line-height: 23px;"> </h2> + +<h2 id="Se_eu_adicionar_ARIA_a_estruturação_ou_o_comportamento_da_minha_página_vão_mudar" style="line-height: 23px;">Se eu adicionar ARIA a estruturação, ou o comportamento, da minha página vão mudar?</h2> + +<p>Não, o conjunto ARIA é disponibilizado, apenas, para as tecnologias assistivas APIs (Interface de Programação de Aplicações) e não afeta as funcionalidades nativas dos navegadores em relação ao DOM, nem ao estilo. Do ponto de vista dos navegadores, a HTML nativa define o significado semântico e o comportamento de um elemento, com os atributos ARIA agindo como uma camada de topo, com a finalidade de dar suporte à TA/AT API. Embora o conjunto ARIA não vá alterar qualquer modelo, bem como <span class="short_text" id="result_box" lang="pt"> <span>todos os atributos</span> <span>HTML, a CSS pode</span></span> <span id="result_box" lang="pt"><span>tirar vantagem dos atributos</span></span><span lang="pt"> <span>ARIA</span> <span>como seletores</span> <span>de elemento.</span></span> Isto pode providenciar um mecanismo conveniente para <span id="result_box" lang="pt"><span>o modelo</span> <span>de <em>widgets</em></span> <span>capacitados com ARIA</span></span>.</p> + +<pre class="brush: css">.tab-panel[aria-hidden="true"] { + display: none; + } + +.tab-panel[aria-hidden="false"] { + display: block; + } +</pre> + +<p><strong style="font-family: georgia,times,times new roman,serif; font-size: 1.628em; font-weight: 700; letter-spacing: -1px; line-height: 23px;">E quanto à validação?</strong></p> + +<p>O<span class="short_text" id="result_box" lang="pt"><span>s</span> <span>novos atributos</span> <span>introduzidas</span> <span>em</span></span> ARIA, tais como <strong>role</strong> <span class="short_text" id="result_box" lang="pt"><span>e</span> <span>aqueles</span> <span>com o prefixo</span></span> <strong>aria-</strong>, não são, oficialmente, parte das especificações HTML 4, ou XHTML 4. Como resultado, as páginas que incluem ARIA podem não validar o uso ferramentas como o <a class="external" href="http://validator.w3.org/" title="http://validator.w3.org/">W3C's Markup Validator</a>.</p> + +<p>A primeira solução potencial para este problema é evitar inserir as funções e os estados ARIA diretamente na sua marcação. Em vez disso, use a JavaScript para adicionar, dinamicamente, o conjunto ARIA à sua página, como mostrado na resposta à " <a href="/#aria-in-action" title="#aria-in-action">Você pode me dar um exemplo do conjunto ARIA em ação?</a>". A sua página ainda vai ser, teoricamente, inválida, mas vai passar todas as verificações de validação estática corretamente.</p> + +<p>Outra alternativa é usar a declaração de tipo de documento (<em>doctype</em>) HTML5, que inclui suporte embutido para ARIA. O <span id="result_box" lang="pt"><span>validador</span></span> <span id="result_box" lang="pt"><span>HTML5</span> <span>do</span> <span>W3C</span> <span>nunca vai encontrar</span> <span>usos</span> <span>inválidos</span> <span>de</span> <span>ARIA</span> <span>em</span> <span>páginas</span> <span>HTML5</span> <span>para</span> <span>você.</span></span></p> + +<h2 id="Como_a_HTML_5_se_relaciona_com_o_conjunto_ARIA">Como a HTML 5 se relaciona com o conjunto ARIA?</h2> + +<p>A HTML 5 introduz uma série de novas etiquetas semânticas úteis na linguagem HTML. <span id="result_box" lang="pt"><span>Algumas delas</span> <span>se</span> <span>justapõe,</span> <span>diretamente, com</span> <span>as funções disponíveis</span></span> em ARIA, <span class="short_text" id="result_box" lang="pt"><span>tais como o novo elemento</span></span><span class="short_text" lang="pt"> <span><</span><span>progress></span>.</span> <span class="short_text" id="result_box" lang="pt"><span>Nos casos em que</span> <span>o navegador</span> <span>suporte uma marcação HTML que também exista em ARIA, normalmente, não há a necessidade de acrescentar as funções e estados ARIA ao elemento.</span></span> O conjunto ARIA engloba muitas funções, estados e propriedades que não estão disponíveis em HTML5, então, estas continuarão sendo úteis aos desenvolvedores que usam HTML5. Para mais informações, Steve Faulkner escreveu um ótimo <a class="external" href="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/" title="http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/">overview of the relationship between HTML5 and ARIA</a> (em inglês).</p> + +<h4 id="Degrading_Gracefully_de_HTML5_para_ARIA"><em>Degrading Gracefully</em> de HTML5 para ARIA</h4> + +<p>Ao entregar conteúdo a navegadores que não são sensíveis à linguagem HTML5, você pode considerar uma <em>gracefully degrading</em> para o uso do conjunto ARIA, quando necessário. Assim, utilizando o exemplo da barra de progresso, você pode fazer a <span class="short_text" id="result_box" lang="pt"><span>alteração para uma</span></span> <code>"role="progressbar"</code>, nos casos em que a marcação <code><progressbar></code> não for suportada.</p> + +<p>Aqui você tem um exemplo da marcação usada para uma barra de progresso em HTML5:</p> + +<pre class="brush: html" id="line96"><!DOCTYPE html> +<html> + <head><title>Gracefully degrading progress bar</title></head> + <body> + <progress id="progress-bar" value="0" max="100">0% complete</progress> + <button id="update-button">Update</button> + </body> +</html> +</pre> + +<p>...e aqui está o código JavaScript que vai garantir que a barra de progresso ainda funcione em navegadores mais antigos:</p> + +<pre class="brush: javascript" id="line96">var progressBar = document.getElementById("progress-bar"); + +// Check to see if the browser supports the HTML5 <progress> tag. +var supportsHTML5Progress = (typeof (HTMLProgressElement) !== "undefined"); + +function setupProgress() { + if (!supportsHTML5Progress) { + // HTML5 <progress> isn't supported in this browser, so we need to add + // ARIA roles and states to the element. + progressBar.setAttribute("role", "progressbar"); + progressBar.setAttribute("aria-valuemin", 0); + progressBar.setAttribute("aria-valuemax", 100); + } +} + +function updateProgress(percentComplete) { + if (!supportsHTML5Progress) { + // HTML5 <progress> isn't supported by this browser, + // so we need to update the aria-valuenow attribute + progressBar.setAttribute("aria-valuenow", percentComplete); + } else { + // HTML5 <progress> is supported, so update the value attribute instead. + progressBar.setAttribute("value", percentComplete); + } + + progressBar.textContent = percentComplete + "% complete"; +} + +function initDemo() { + setupProgress(); // Setup the progress bar. + + // Bind a click handler to the button, which will update the progress bar to 75%. + document.getElementById("update-button").addEventListener("click", function (e) { + updateProgress(75); + e.preventDefault(); + }, false); +} +initDemo(); +</pre> + +<h2 id="sect2"> </h2> + +<h2 id="Como_funcionam_as_tecnologias_assistivas">Como funcionam as tecnologias assistivas?</h2> + +<p>Tecnologias assistivas usam uma API (Interface de Programação de Aplicações) construída em cada sistema operacional, concebida, especificamente, para descrever as funções, estados e estruturas da interface de utilização de uma aplicação. Por exemplo, um leitor de tela utiliza esta API para ler a interface de utilização com um mecanismo de vocalização do texto, uma lente de aumento a utiliza para realçar áreas importantes - ou ativas - da tela e um teclado virtual pode utilizá-la para proporcionar um tipo de teclado mais eficiente dentro de determinado contexto - ou o controle da UI. Tecnologias assistivas, muitas vezes, também acessam uma página do DOM, do princípio ao fim, <span id="result_box" lang="pt"> <span>através desta</span> <span>API,</span> <span>para entender sua semântica e atributos da página.</span></span></p> + +<p>O conjunto ARIA proporciona uma ponte entre o mundo do DOM e a área de trabalho. Os navegadores expõe os elementos capacitados com o conjunto ARIA para as APIs das tecnologias assistivas, como se estes fossem <em>widgets</em> nativos. Como resultado, quem os utiliza ganha uma experiência de uso muito mais consistente, na qual <em>widgets</em> dinâmicos, da <em>web</em>, impulsionados pela JavaScript são <span id="result_box" lang="pt"><span>comparáveis a</span><span>os seus equivalentes</span> <span>da área de trabalho.</span></span></p> + +<h2 id="sect3"> </h2> + +<h2 id="Como_experimento_o_uso_que_fiz_do_conjunto_ARIA_Existem_ferramentas_gratuitas_disponíveis">Como experimento o uso que fiz do conjunto ARIA? Existem ferramentas gratuitas disponíveis?</h2> + +<p>Existem <span id="result_box" lang="pt"><span>várias ferramentas</span></span><span lang="pt"> <span>de</span> <span>inspeção e</span><span> depuração</span> <span>para ajudar você no seu</span> <span>teste</span> da ação do conjunto <span>ARIA</span><span>:</span></span></p> + +<ul> + <li>Inspetor de Objetos no Windows</li> + <li>Inspetor de Acessibilidade em OS X</li> + <li>AccProbe em Linux</li> + <li>Inspetor Firebug's DOM</li> + <li>O <a class="external" href="http://code.google.com/p/ainspector/" title="http://code.google.com/p/ainspector/">Accessibility Inspector for Firebug</a></li> + <li><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb">Ferramentas para Desenvolvedores de Acessibilidade (Accessibility Developer Tools)</a>, para Chrome</li> +</ul> + +<p>Há vários leitores de tela gratuitos, ou de código aberto, que podem ser utilizados, para você colocar a mão na massa nos seus testes com ARIA. Estes incluem:</p> + +<ul> + <li><a class="external" href="http://live.gnome.org/Orca" title="http://live.gnome.org/Orca">Orca</a> para Linux</li> + <li><a class="external" href="http://www.nvda-project.org/" title="http://www.nvda-project.org/">NVDA</a> para Windows</li> + <li><a class="external" href="http://www.apple.com/accessibility/voiceover/" title="http://www.apple.com/accessibility/voiceover/">VoiceOver</a> é construído dentro do OS X</li> +</ul> + +<p>Quando você estiver testando um leitor de tela, mantenha dois pontos-chave em mente:</p> + +<ol> + <li>Experimentadores ocasionais de leitores de tela nunca vão opinar suficientemente, por isso, teste e obtenha respostas de quem, realmente, utiliza essas tecnologias.</li> + <li>A acessibilidade vai muito além de, apenas, dar suporte aos leitores de tela. Tente experimentar uma variedade de técnicas de usabilidade e acessibilidade.</li> +</ol> + +<p>Outras ferramentas de teste úteis e técnicas para aplicativos e <em>widgets</em> com habilitação ARIA:</p> + +<ul> + <li><a class="external" href="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html" title="http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html">Yahoo!'s ARIA bookmarklets</a> (marcadores de ítens ARIA, da Yahoo!)</li> + <li>Fluid Project's <a class="external" href="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol" title="http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol">simple accessibility evaluation techniques</a></li> +</ul> + +<h2 id="Onde_acontecem_as_discussões_sobre_ARIA">Onde acontecem as discussões sobre ARIA?</h2> + +<ul> + <li><a class="external" href="http://lists.w3.org/Archives/Public/wai-xtech/" title="http://lists.w3.org/Archives/Public/wai-xtech/">Wai-xtech mailing list</a> -- holds discussions on ARIA specs. (<span class="short_text" id="result_box" lang="pt"><span>mantém discussões</span> <span>sobre as</span> <span>especificações</span> <span>ARIA)</span></span></li> + <li><a class="external" href="http://groups.google.com/group/free-aria" title="http://groups.google.com/group/free-aria">Free-ARIA google group</a> -- para desenvolvedores e utilizadores dos <span id="result_box" lang="pt"><span>recursos</span></span> e ferramentas gratuitas.</li> +</ul> + +<h2 id="Onde_posso_aprender_mais_sobre_ARIA">Onde posso aprender mais sobre ARIA?</h2> + +<ul> + <li><a href="/en/Accessibility/An_overview_of_accessible_web_applications_and_widgets" title="en/Accessibility/An overview of accessible web applications and widgets">Visão geral sobre a acessibilidade nas aplicações e <em>widgets</em> <em>web</em></a></li> + <li><a href="/en/Accessibility/Accessible_forms" title="en/Accessibility/Accessible forms">Formulários acessíveis</a></li> + <li>The W3C's <a class="external" href="http://www.w3.org/WAI/aria/faq" title="http://www.w3.org/WAI/aria/faq">WAI-ARIA Frequently Asked Questions</a></li> + <li>WebAIM's <a class="external" href="http://webaim.org/techniques/aria/" title="http://webaim.org/techniques/aria/">Accessibility of Rich Internet Applications</a></li> +</ul> + +<p>a autoria do artigo é de: morenoh149, kscarfone, akhabibullina, xfq, Fredchat, mpiotrowicz, Sheppy, BrendanMcKeon, anastasia, jswisher, Aaronlev, colinbdclark.</p> + +<p> </p> diff --git a/files/pt-br/web/accessibility/aria/widgets/index.html b/files/pt-br/web/accessibility/aria/widgets/index.html new file mode 100644 index 0000000000..136aecae2e --- /dev/null +++ b/files/pt-br/web/accessibility/aria/widgets/index.html @@ -0,0 +1,10 @@ +--- +title: widgets +slug: Web/Accessibility/ARIA/widgets +tags: + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Web/Accessibility/ARIA/widgets +--- +<p>This page was auto-generated because a user created a sub-page to this page.</p> diff --git a/files/pt-br/web/accessibility/aria/widgets/visão_geral/index.html b/files/pt-br/web/accessibility/aria/widgets/visão_geral/index.html new file mode 100644 index 0000000000..6e8cb06ae2 --- /dev/null +++ b/files/pt-br/web/accessibility/aria/widgets/visão_geral/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 +--- +<div class="warning">Aviso: precisa de atualização</div> + +<h2 id="Introdução"><span class="mw-headline" id="Introduction">Introdução</span> </h2> + +<h2 id="Alguns_exemplos_funcionais_e_boas_práticas_na_construção_de_widgets_acessíveis_aplicando_JavaScript.">Alguns exemplos funcionais e boas práticas na construção de <em>widgets</em><span style='font-family: "Open Sans",arial,x-locale-body,sans-serif;'> acessíveis aplicando JavaScript.</span></h2> + +<h2 id="Recursos_Gerais"><span class="mw-headline" id="General_Resources">Recursos Gerais</span></h2> + +<ul> + <li><a class="external text" href="http://dev.aol.com/dhtml_style_guide" rel="nofollow">Guia de Estilo DHTML</a> recomendações para interação com o teclado</li> + <li><a class="external text" href="http://www.w3.org/wai/pf/aria-practices" rel="nofollow">Guia de Práticas para criação de WAI-ARIA</a></li> +</ul> + +<h2 id="Caixa_de_seleção">Caixa de seleção</h2> + +<ul> + <li><a class="external text" href="http://www.paciellogroup.com/blog/?p=53" rel="nofollow">Exemplos ARIA para Alternar Botões e exemplos dos 3 estados de uma Caixa de Seleção</a> (de "The Paciello Group Blog")</li> +</ul> + +<h2 id="Menu_2"><span class="mw-headline" id="Menu">Menu</span></h2> + +<ul> + <li><a class="external text" href="http://yuiblog.com/blog/2007/12/21/menu-waiaria/" rel="nofollow">Usando as Funções e Estados WAI-ARIA com o Controle de Menu YUI</a></li> +</ul> + +<h2 id="Deslizantes"><span class="mw-headline" id="Slider">Deslizantes</span></h2> + +<ul> + <li>Do blog Paciello Group: Deslizantes ARIA - <a class="external text" href="http://www.paciellogroup.com/blog/?p=68" rel="nofollow">parte um</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=69" rel="nofollow">parte dois</a>, <a class="external text" href="http://www.paciellogroup.com/blog/?p=76" rel="nofollow">parte três</a> (<a class="external text" href="http://www.paciellogroup.com/blog/misc/ARIA/slider/" rel="nofollow">exemplo</a>)</li> +</ul> + +<h2 id="Abas"><span class="mw-headline" id="Tabs">Abas</span></h2> + +<ul> + <li><a class="external text" href="http://yuiblog.com/blog/2008/07/30/tabview-aria/" rel="nofollow">Melhorando a Acessibilidade na Visão em Abas com as Funções e Estados WAI-ARIA, </a>do blog YUI</li> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/tabs" rel="nofollow">Melhorando as Abas jQuery UI, de acordo com WCAG 2.0 e ARIA</a></li> +</ul> + +<h2 id="Combo-box"><span class="mw-headline" id="Combobox">Combo-box</span></h2> + +<ul> + <li><a class="external text" href="http://www.protofunc.com/scripts/jquery/select/" rel="nofollow">Combo-box simples (não editável) como Select-Box-Replacement</a></li> +</ul> + +<h2 id="Lightbox_2"><span class="mw-headline" id="Lightbox">Lightbox</span></h2> + +<ul> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/lightbox" rel="nofollow">WCAG 2.0 e aplicação lightbox ARIA-</a><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/table" rel="nofollow">conformant</a></li> +</ul> + +<h2 id="Validação_de_Formulários"><span class="mw-headline" id="Form_Validation">Validação de Formulários</span></h2> + +<ul> + <li><a class="external text" href="http://wiki.github.com/fnagel/jQuery-Accessible-RIA/formular" rel="nofollow">WCAG 2.0 e validação ativa de ARIA-conformant</a></li> +</ul> + +<h2 id="Tabelas"><span class="mw-headline" id="Table">Tabelas</span></h2> + +<ul> + <li><a class="external text" href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-formulare-mit-html-css-und-javascript/" rel="nofollow">Tutorial alemão sobre criação de formulário acessível</a></li> + <li><a class="external text" href="http://codetalks.org/source/widgets/grid/grid.sample.html" rel="nofollow">Exemplo de grade simples em CodeTalks</a></li> +</ul> diff --git a/files/pt-br/web/accessibility/at-apis/gecko/index.html b/files/pt-br/web/accessibility/at-apis/gecko/index.html new file mode 100644 index 0000000000..1abe2834d5 --- /dev/null +++ b/files/pt-br/web/accessibility/at-apis/gecko/index.html @@ -0,0 +1,10 @@ +--- +title: Gecko +slug: Web/Accessibility/AT-APIs/Gecko +tags: + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko +--- +<p>{{wiki.localize('System.API.page-generated-for-subpage')}}</p> diff --git a/files/pt-br/web/accessibility/at-apis/gecko/roles/index.html b/files/pt-br/web/accessibility/at-apis/gecko/roles/index.html new file mode 100644 index 0000000000..a3e835eb0b --- /dev/null +++ b/files/pt-br/web/accessibility/at-apis/gecko/roles/index.html @@ -0,0 +1,255 @@ +--- +title: Gecko Roles +slug: Web/Accessibility/AT-APIs/Gecko/Roles +translation_of: Mozilla/Tech/Accessibility/AT-APIs/Gecko/Roles +--- +<p><a href="/pt-BR/docs/Accessibility:AT-APIs#Supported_Roles">« AT APIs Support Page</a></p> + +<p><span class="seoSummary">This page offers a list of accessible roles used in Gecko. Role constants are defined in the <code><a href="/pt-BR/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAccessibleRole" title="">nsIAccessibleRole</a></code> interface.</span></p> + +<dl> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_NOTHING">ROLE_NOTHING</a></code></dt> + <dd>Used when the accessible item doesn't have a strongly defined role.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TITLEBAR">ROLE_TITLEBAR</a></code></dt> + <dd>Represents a title or caption bar for a window. Used by MSAA only, this is supported automatically by Microsoft Windows.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUBAR">ROLE_MENUBAR</a></code></dt> + <dd>Represents the menu bar (positioned beneath the title bar of a window on most platforms or at the top of the screen on Mac OS X) from which menus are selected by the user.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLLBAR">ROLE_SCROLLBAR</a></code></dt> + <dd>Represents a vertical or horizontal scroll bar, which is part of the client area or used in a control.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRIP">ROLE_GRIP</a></code></dt> + <dd>Represents a special mouse pointer, which allows a user to manipulate user interface elements such as windows. For example, a user clicks and drags a sizing grip in the lower-right corner of a window to resize it</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SOUND">ROLE_SOUND</a></code></dt> + <dd>Represents a system sound, which is associated with various system events.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CURSOR">ROLE_CURSOR</a></code></dt> + <dd>Represents the system mouse pointer.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CARET">ROLE_CARET</a></code></dt> + <dd>Represents the system caret.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code></dt> + <dd>Represents an alert or a condition that a user should be notified about. Assistive Technologies typically respond to the role by reading the entire onscreen contents of containers advertising this role. Should be used for warning dialogs, etc.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WINDOW">ROLE_WINDOW</a></code></dt> + <dd>Represents the window frame, which contains child objects such as a title bar, client, and other objects contained in a window. The role is supported automatically by Microsoft Windows.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INTERNAL_FRAME">ROLE_INTERNAL_FRAME</a></code></dt> + <dd>A sub-document.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUPOPUP">ROLE_MENUPOPUP</a></code></dt> + <dd>Represents a menu, which presents a list of options from which the user can make a selection to perform an action.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code></dt> + <dd>Represents a menu item, which is an entry in a menu that a user can choose to carry out a command, select an option.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLTIP">ROLE_TOOLTIP</a></code></dt> + <dd>Represents a tooltip that provides helpful hints; this is generally displayed at the mouse cursor position.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APPLICATION">ROLE_APPLICATION</a></code></dt> + <dd>Represents a main window for an application.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT">ROLE_DOCUMENT</a></code></dt> + <dd>Represents a document window. A document window is always contained within an application window.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PANE">ROLE_PANE</a></code></dt> + <dd>Represents a pane within a frame or document window. Users can navigate between panes and within the contents of the current pane, but cannot navigate between items in different panes. Thus, panes represent a level of grouping lower than frame windows or documents, but above individual controls.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHART">ROLE_CHART</a></code></dt> + <dd>Represents a graphical image used to represent data.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIALOG">ROLE_DIALOG</a></code></dt> + <dd>Represents a dialog box or message box.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BORDER">ROLE_BORDER</a></code></dt> + <dd>Represents a window border.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GROUPING">ROLE_GROUPING</a></code></dt> + <dd>Logically groups other objects.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SEPARATOR">ROLE_SEPARATOR</a></code></dt> + <dd>Used to visually divide a space into two regions, such as a separator menu item or a bar that divides split panes within a window.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOOLBAR">ROLE_TOOLBAR</a></code></dt> + <dd>Represents a toolbar, which is a grouping of controls (push buttons or toggle buttons) that provides easy access to frequently used features.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATUSBAR">ROLE_STATUSBAR</a></code></dt> + <dd>Represents a status bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object. The status bar has multiple fields, which display different kinds of information.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE">ROLE_TABLE</a></code></dt> + <dd>Represents a table that contains rows and columns of cells, and optionally, row headers and column headers.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMNHEADER">ROLE_COLUMNHEADER</a></code></dt> + <dd>Represents a column header, providing a visual label for a column in a table.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROWHEADER">ROLE_ROWHEADER</a></code></dt> + <dd>Represents a row header, which provides a visual label for a table row.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLUMN">ROLE_COLUMN</a></code></dt> + <dd>Represents a column of cells within a table.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROW">ROLE_ROW</a></code></dt> + <dd>Represents a row of cells within a table.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CELL">ROLE_CELL</a></code></dt> + <dd>Represents a cell within a table.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LINK">ROLE_LINK</a></code></dt> + <dd>Represents a link to something else. This object might look like text or a graphic, but it acts like a button.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HELPBALLOON">ROLE_HELPBALLOON</a></code></dt> + <dd>Displays a Help topic in the form of a ToolTip or Help balloon.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHARACTER">ROLE_CHARACTER</a></code></dt> + <dd>Represents a cartoon-like graphic object, such as Microsoft Office Assistant, which is displayed to provide help to users of an application.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LIST">ROLE_LIST</a></code></dt> + <dd>Represents a list box, allowing the user to select one or more items.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTITEM">ROLE_LISTITEM</a></code></dt> + <dd>Represents an item in a list.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINE">ROLE_OUTLINE</a></code></dt> + <dd>Represents an outline or tree structure, such as a tree view control, that displays a hierarchical list and allows the user to expand and collapse branches.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OUTLINEITEM">ROLE_OUTLINEITEM</a></code></dt> + <dd>Represents an item in an outline or tree structure.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETAB">ROLE_PAGETAB</a></code></dt> + <dd>Represents a page tab, it is a child of a page tab list.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROPERTYPAGE">ROLE_PROPERTYPAGE</a></code></dt> + <dd>Represents a property sheet.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_INDICATOR">ROLE_INDICATOR</a></code></dt> + <dd>Represents an indicator, such as a pointer graphic, that points to the current item.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GRAPHIC">ROLE_GRAPHIC</a></code></dt> + <dd>Represents a picture.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_STATICTEXT">ROLE_STATICTEXT</a></code></dt> + <dd>Represents read-only text, such as labels for other controls or instructions in a dialog box. Static text cannot be modified or selected.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_LEAF">ROLE_TEXT_LEAF</a></code></dt> + <dd>Represents selectable text that allows edits or is designated read-only.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></dt> + <dd>Represents a push button control.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECKBUTTON">ROLE_CHECKBUTTON</a></code></dt> + <dd>Represents a check box control.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIOBUTTON">ROLE_RADIOBUTTON</a></code></dt> + <dd>Represents an option button, also called a radio button. It is one of a group of mutually exclusive options. All objects sharing a single parent that have this attribute are assumed to be part of single mutually exclusive group.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX">ROLE_COMBOBOX</a></code></dt> + <dd>Represents a combo box; an edit control with an associated list box that provides a set of predefined choices.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DROPLIST">ROLE_DROPLIST</a></code></dt> + <dd>Represents the calendar control.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PROGRESSBAR">ROLE_PROGRESSBAR</a></code></dt> + <dd>Represents a progress bar, dynamically showing the user the percent complete of an operation in progress.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAL">ROLE_DIAL</a></code></dt> + <dd>Represents a dial or knob whose purpose is to allow a user to set a value.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HOTKEYFIELD">ROLE_HOTKEYFIELD</a></code></dt> + <dd>Represents a hot-key field that allows the user to enter a combination or sequence of keystrokes.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SLIDER">ROLE_SLIDER</a></code></dt> + <dd>Represents a slider, which allows the user to adjust a setting in given increments between minimum and maximum values.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPINBUTTON">ROLE_SPINBUTTON</a></code></dt> + <dd>Represents a spin box, which is a control that allows the user to increment or decrement the value displayed in a separate "buddy" control associated with the spin box.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIAGRAM">ROLE_DIAGRAM</a></code></dt> + <dd>Represents a graphical image used to diagram data.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ANIMATION">ROLE_ANIMATION</a></code></dt> + <dd>Represents an animation control, which contains content that changes over time, such as a control that displays a series of bitmap frames.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EQUATION">ROLE_EQUATION</a></code></dt> + <dd>Represents a mathematical equation. It is used by MATHML.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWN">ROLE_BUTTONDROPDOWN</a></code></dt> + <dd>Represents a button that drops down a list of items.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONMENU">ROLE_BUTTONMENU</a></code></dt> + <dd>Represents a button that drops down a menu.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_BUTTONDROPDOWNGRID">ROLE_BUTTONDROPDOWNGRID</a></code></dt> + <dd>Represents a button that drops down a grid.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_WHITESPACE">ROLE_WHITESPACE</a></code></dt> + <dd>Represents blank space between other objects.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGETABLIST">ROLE_PAGETABLIST</a></code></dt> + <dd>Represents a container of page tab controls.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CLOCK">ROLE_CLOCK</a></code></dt> + <dd>Represents a control that displays time.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLITBUTTON">ROLE_SPLITBUTTON</a></code></dt> + <dd>Represents a button on a toolbar that has a drop-down list icon directly adjacent to the button.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IPADDRESS">ROLE_IPADDRESS</a></code></dt> + <dd>Represents an edit control designed for an Internet Protocol (IP) address. The edit control is divided into sections for the different parts of the IP address.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ACCEL_LABEL">ROLE_ACCEL_LABEL</a></code></dt> + <dd>Represents a label control that has an accelerator.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ARROW">ROLE_ARROW</a></code></dt> + <dd>Represents an arrow in one of the four cardinal directions.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CANVAS">ROLE_CANVAS</a></code></dt> + <dd>Represents a control that can be drawn into and is used to trap events.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHECK_MENU_ITEM">ROLE_CHECK_MENU_ITEM</a></code></dt> + <dd>Represents a menu item with a check box.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COLOR_CHOOSER">ROLE_COLOR_CHOOSER</a></code></dt> + <dd>Represents a specialized dialog that lets the user choose a color.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DATE_EDITOR">ROLE_DATE_EDITOR</a></code></dt> + <dd>Represents control whose purpose is to allow a user to edit a date.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_ICON">ROLE_DESKTOP_ICON</a></code></dt> + <dd>An iconified internal frame in an ROLE_DESKTOP_PANE.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DESKTOP_FRAME">ROLE_DESKTOP_FRAME</a></code></dt> + <dd>A desktop pane. A pane that supports internal frames and iconified versions of those internal frames.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DIRECTORY_PANE">ROLE_DIRECTORY_PANE</a></code></dt> + <dd>A directory pane. A pane that allows the user to navigate through and select the contents of a directory. May be used by a file chooser.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FILE_CHOOSER">ROLE_FILE_CHOOSER</a></code></dt> + <dd>A file chooser. A specialized dialog that displays the files in the directory and lets the user select a file, browse a different directory, or specify a filename. May use the directory pane to show the contents of a directory.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FONT_CHOOSER">ROLE_FONT_CHOOSER</a></code></dt> + <dd>A font chooser. A font chooser is a component that lets the user pick various attributes for fonts.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CHROME_WINDOW">ROLE_CHROME_WINDOW</a></code></dt> + <dd>Frame role. A top level window with a title bar, border, menu bar, etc. It is often used as the primary window for an application.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GLASS_PANE">ROLE_GLASS_PANE</a></code></dt> + <dd>A glass pane. A pane that is guaranteed to be painted on top of all panes beneath it.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HTML_CONTAINER">ROLE_HTML_CONTAINER</a></code></dt> + <dd>A document container for HTML, whose children represent the document content.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ICON">ROLE_ICON</a></code></dt> + <dd>A small fixed size picture, typically used to decorate components.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LABEL">ROLE_LABEL</a></code></dt> + <dd>Presents an icon or short string in an interface.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LAYERED_PANE">ROLE_LAYERED_PANE</a></code></dt> + <dd>A layered pane. A specialized pane that allows its children to be drawn in layers, providing a form of stacking order. This is usually the pane that holds the menu bar as well as the pane that contains most of the visual components in a window.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION_PANE">ROLE_OPTION_PANE</a></code></dt> + <dd>A specialized pane whose primary use is inside a dialog.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PASSWORD_TEXT">ROLE_PASSWORD_TEXT</a></code></dt> + <dd>A text object uses for passwords, or other places where the text content is not shown visibly to the user.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_POPUP_MENU">ROLE_POPUP_MENU</a></code></dt> + <dd>A temporary window that is usually used to offer the user a list of choices, and then hides when the user selects one of those choices.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RADIO_MENU_ITEM">ROLE_RADIO_MENU_ITEM</a></code></dt> + <dd>A radio button that is a menu item.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ROOT_PANE">ROLE_ROOT_PANE</a></code></dt> + <dd>A root pane. A specialized pane that has a glass pane and a layered pane as its children. Its children can include scroll bars and a viewport.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SCROLL_PANE">ROLE_SCROLL_PANE</a></code></dt> + <dd>A scroll pane. An object that allows a user to incrementally view a large amount of information.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SPLIT_PANE">ROLE_SPLIT_PANE</a></code></dt> + <dd>A split pane. A specialized panel that presents two other panels at the same time. Between the two panels is a divider the user can manipulate to make one panel larger and the other panel smaller.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_COLUMN_HEADER">ROLE_TABLE_COLUMN_HEADER</a></code></dt> + <dd>The header for a column of a table.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TABLE_ROW_HEADER">ROLE_TABLE_ROW_HEADER</a></code></dt> + <dd>The header for a row of a table.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEAR_OFF_MENU_ITEM">ROLE_TEAR_OFF_MENU_ITEM</a></code></dt> + <dd>A menu item used to tear off and reattach its menu.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TERMINAL">ROLE_TERMINAL</a></code></dt> + <dd>Represents an accessible terminal.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TEXT_CONTAINER">ROLE_TEXT_CONTAINER</a></code></dt> + <dd>Collection of objects that constitute a logical text entity.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TOGGLE_BUTTON">ROLE_TOGGLE_BUTTON</a></code></dt> + <dd>A toggle button. A specialized push button that can be checked or unchecked, but does not provide a separate indicator for the current state.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_TREE_TABLE">ROLE_TREE_TABLE</a></code></dt> + <dd>Representas a control that is capable of expanding and collapsing rows as well as showing multiple columns of data.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_VIEWPORT">ROLE_VIEWPORT</a></code></dt> + <dd>A viewport. An object usually used in a scroll pane. It represents the portion of the entire data that the user can see. As the user manipulates the scroll bars, the contents of the viewport can change.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADER">ROLE_HEADER</a></code></dt> + <dd>Header of a document page.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FOOTER">ROLE_FOOTER</a></code></dt> + <dd>Footer of a document page.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARAGRAPH">ROLE_PARAGRAPH</a></code></dt> + <dd>A paragraph of text.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RULER">ROLE_RULER</a></code></dt> + <dd>A ruler such as those used in word processors.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_AUTOCOMPLETE">ROLE_AUTOCOMPLETE</a></code></dt> + <dd>A text entry having dialog or list containing items for insertion into an entry widget, for instance a list of words for completion of a text entry.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_EDITBAR">ROLE_EDITBAR</a></code></dt> + <dd>An editable text object in a toolbar.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ENTRY">ROLE_ENTRY</a></code></dt> + <dd>An control whose textual content may be entered or modified by the user.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CAPTION">ROLE_CAPTION</a></code></dt> + <dd>A caption describing another object.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_DOCUMENT_FRAME">ROLE_DOCUMENT_FRAME</a></code></dt> + <dd>A visual frame or container which contains a view of document content. Document frames may occur within another Document instance, in which case the second document may be said to be embedded in the containing instance. HTML frames are often ROLE_DOCUMENT_FRAME. Either this object, or a singleton descendant, should implement the Document interface.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_HEADING">ROLE_HEADING</a></code></dt> + <dd>Heading.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PAGE">ROLE_PAGE</a></code></dt> + <dd>An object representing a page of document content. It is used in documents which are accessed by the user on a page by page basis.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_SECTION">ROLE_SECTION</a></code></dt> + <dd>A container of document content.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_REDUNDANT_OBJECT">ROLE_REDUNDANT_OBJECT</a></code></dt> + <dd>An object which is redundant with another object in the accessible hierarchy. ATs typically ignore objects with this role.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_FORM">ROLE_FORM</a></code></dt> + <dd>A container of form controls.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IME">ROLE_IME</a></code></dt> + <dd>An object which is used to allow input of characters not found on a keyboard, such as the input of Chinese characters on a Western keyboard.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_APP_ROOT">ROLE_APP_ROOT</a></code></dt> + <dd> ???</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PARENT_MENUITEM">ROLE_PARENT_MENUITEM</a></code></dt> + <dd>Represents a menu item, which is an entry in a menu that a user can choose to display another menu.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_CALENDAR">ROLE_CALENDAR</a></code></dt> + <dd>A calendar that allows the user to select a date.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_LIST">ROLE_COMBOBOX_LIST</a></code></dt> + <dd>A list of items that is shown by combobox.</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_COMBOBOX_OPTION">ROLE_COMBOBOX_OPTION</a></code></dt> + <dd>A item of list that is shown by combobox</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_IMAGE_MAP">ROLE_IMAGE_MAP</a></code></dt> + <dd>An image map -- has child links representing the areas</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_OPTION">ROLE_OPTION</a></code></dt> + <dd>An option in a listbox</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_RICH_OPTION">ROLE_RICH_OPTION</a></code></dt> + <dd>A rich option in a listbox, it can have other widgets as children</dd> + <dt><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_LISTBOX">ROLE_LISTBOX</a></code></dt> + <dd>A list of options</dd> +</dl> + +<div class="note"> +<p><strong>Editor's note:</strong> Use template <span class="nowiki"><code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_">ROLE_</a></code></span> to get reference on accessible role. It looks like <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_MENUITEM">ROLE_MENUITEM</a></code>.</p> +</div> diff --git a/files/pt-br/web/accessibility/at-apis/index.html b/files/pt-br/web/accessibility/at-apis/index.html new file mode 100644 index 0000000000..57b2f546d4 --- /dev/null +++ b/files/pt-br/web/accessibility/at-apis/index.html @@ -0,0 +1,176 @@ +--- +title: AT APIs Support +slug: Web/Accessibility/AT-APIs +tags: + - AT_APIs + - Accessibility + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Tech/Accessibility/AT-APIs +--- +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<div class="note">Documentation is in progress still. But in the meantime it more up-to-date and contains more details than existed analogues for <a class="external" href="http://developer.mozilla.org/en/docs/Accessibility/AT-SPI_Support">AT-SPI</a> and <a class="external" href="http://wiki.mozilla.org/Accessibility/AT-Windows-API">MSAA</a></div> + +<p>This documentation explains how makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support Gecko-based software. We provide for them the support of these products on Windows, Linux/Unix and OS X platforms.</p> + +<h3 id="Accessible_Gecko" name="Accessible_Gecko">Accessible Gecko</h3> + +<p>Gecko is a rendering engine that Firefox, SeaMonkey, Netscape and yelp use. Gecko can render a variety of content, not just HTML and supports key web standards such as Cascading Style Sheets, Javascript and the W3C DOM. Gecko also handles the users keystrokes and mouse clicks. Gecko is the core architecture that we are adding accessibility to, in order to support basic accessibility in all applications that are based on it.</p> + +<h3 id="Gecko_Based_Applications" name="Gecko_Based_Applications">Gecko Based Applications</h3> + +<p>Gecko can be used in two ways to create application:</p> + +<h4 id="Embedded_Clients" name="Embedded_Clients">Embedded Clients</h4> + +<p>Embedded clients use Gecko only in the content window, at the moment for HTML and generic XML only. They typically use standard Windows controls for their user interface -- the area outside of the client content window, plus the context menu.</p> + +<ul> + <li>on Windows platform + <ul> + <li>MFCEMBED testing client - this is a very simple package, great for testing basic HTML accessibility with your products and the Gecko rendering engine (please <a href="#Contacts">contact</a> us for a copy).</li> + <li><a class="external" href="http://kmeleon.sourceforge.net/">K-Meleon</a> - light, ultra-fast and more advanced (fully configurable) Gecko-based web browser available on the Windows platform</li> + </ul> + </li> + <li>on Linux/Unix platform + <ul> + <li><a class="external" href="http://live.gnome.org/Yelp">Yelp help viewer</a> - the help viewer in Gnome</li> + <li><a class="external" href="http://www.gnome.org/projects/evolution/">Evolution email</a> - provides integrated mail, addressbook and calendaring functionality to users of the GNOME desktop.</li> + </ul> + </li> + <li>on Mac platform + <ul> + <li><a class="external" href="http://caminobrowser.org/">Camino</a> - web browser for OS X</li> + </ul> + </li> +</ul> + +<h4 id="XUL_Applications" name="XUL_Applications">XUL Applications</h4> + +<p>XUL applications make full use of the Gecko architecture, not only for HTML content, but also for the entire user interface. Widgets such as menus, tab panels, tree views and dialogs are provided via an XML language called XUL (eXtensible User-interface Language). None of the user interface contains standard OS controls. This is done to ensure a common look and feel across all supported platforms, and to allow for different skins (appearances). Developing a XUL window is not that different from developing a web page, but the elements available to add widgets are more powerful and designed to be similar to desktop widgets.</p> + +<p>Examples of XUL applications:</p> + +<ul> + <li><a class="external" href="http://www.mozilla.com/en-US/firefox/">Firefox</a> - web-browser</li> + <li><a class="external" href="http://www.mozilla.com/en-US/thunderbird/">Thunderbird</a> - email client</li> + <li><a class="external" href="http://www.seamonkey-project.org/">Seamonkey</a> - web-browser, advanced e-mail and newsgroup client, IRC chat client, and HTML editing made simple</li> + <li><a class="external" href="http://www.mozilla.org/projects/calendar/sunbird/">Sunbird</a> - cross-platform calendar application</li> + <li><a class="external" href="http://www.kompozer.net/">KompoZer</a> - a complete Web Authoring System for Linux Desktop, Microsoft Windows and Macintosh users to rival programs like FrontPage and Dreamweaver.</li> + <li><a class="external" href="http://www.openkomodo.com/">Open Komodo</a> - platform for building developer environments</li> + <li><a class="external" href="http://www.getmiro.com/">Miro</a> - a free, open source internet tv and video player</li> + <li>Any XulRunner application (<a class="external" href="http://www.songbirdnest.com/">Songbird media player</a>, etc.)</li> + <li>Extensions to other XUL apps (e.g. <a class="external" href="http://addons.mozilla.org">Firefox extensions</a>)</li> +</ul> + +<h3 id="Gecko_Version" name="Gecko_Version">Gecko Version</h3> + +<p>For Firefox and all other Gecko-based products: this documentation applies to up-to-date product builds based on Gecko 1.9.2 -- currently not available on official releases. However most of described features are supported starting from Gecko 1.9.0 (Firefox 3.0). However it's preferable to grab the current build of Firefox or any other Gecko-based product to be up to dated:</p> + +<ul> + <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">Firefox</a> recent builds</li> + <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/thunderbird/nightly/latest-trunk/">Thunderbird</a> recent builds</li> + <li><a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/seamonkey/nightly/latest-trunk/">Seamonkey</a> recent builds</li> +</ul> + +<h3 id="Determining_if_Accessibility_is_Enabled_in_a_Firefox">Determining if Accessibility is Enabled in a Firefox</h3> + +<p>Accessibility is enabled on Windows and Linux platforms by default. As well you might find helpful the <a class="link-https" href="https://addons.mozilla.org/firefox/2407/">about:accessibilityenabled Firefox</a> extension.</p> + +<h2 id="Supported_AT_APIs" name="Supported_AT_APIs">Supported AT APIs</h2> + +<h3 id="AT_APIs_terms" name="AT_APIs_terms">AT APIs terms</h3> + +<dl> + <dt><a class="external" href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/msaa/msaastart_9w2t.asp">Microsoft Active Accessibility (MSAA)</a></dt> + <dd>an API devised by Microsoft so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand MSAA, you'll need to read the docs on MSDN and play with the sample apps and code that come with <a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742f-1f3d-4115-a8ba-2f7a6022b533&displaylang=en">MSAA SDK 1.3</a>. (I recommend SDK 1.3 because the MSAA SDK 2.0 doesn't come with the source code to the testing tools. The other differences are not important).</dd> + <dt><a class="external" href="http://www.linux-foundation.org/en/Accessibility/IAccessible2">IAccessible2 (IA2)</a></dt> + <dd>IAccessible2 is a new accessibility API which complements Microsoft's earlier work on MSAA. This API fills critical accessibility API gaps in the MSAA offering.</dd> + <dt><a class="external" href="http://www.gnome.org/~billh/at-spi-idl/html/">Assistive Technology Service Provider Interface (AT-SPI)</a></dt> + <dd>an API devised by Sun Microsystems so that accessibility aids can track what's going on inside the user interface of any software package that supports it. If you seriously need to understand AT-SPI, you'll need to read the docs on gnome.org and play with the available sample apps and code, such as at-poke. Please note that the web docs are sometimes out of date, and the <a class="external" href="http://cvs.gnome.org/viewcvs/at-spi/">latest AT-SPI is available on CVS</a>.</dd> + <dt><a class="external" href="http://www.apple.com/macosx/features/universalaccess/">Universal Access (UA)</a></dt> + <dd>Universal Access (UA) is the Apple's accessibility framework.</dd> +</dl> + +<h3 id="Windows_platform" name="Windows_platform">Windows platform</h3> + +<p>We support MSAA (Microsoft Active Accessibility) and IAccessible2 on Windows. Also we expose <a href="/en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support" title="en/Accessibility/AT-APIs/ImplementationFeatures/MSAA#Additional_DOM_Support">MS COM interfaces</a> ISimpleDOM* to provide an access to DOM tree.</p> + +<p>IAccessible2 is a set of interfaces that overlay the MSAA (IAccessible) and DOM (ISimpleDOM*) interface support. Any object that supports IAccessible will also support IAccessible2 and possibly any of the other IA2 interfaces.</p> + +<h3 id="Linux.2FUnix_platform" name="Linux.2FUnix_platform">Linux/Unix platform</h3> + +<p>We support ATK/AT-SPI interfaces on Linux.</p> + +<h3 id="Mac_platform" name="Mac_platform">Mac platform</h3> + +<p>We currently support only a subset of Universal Access. The rest of the <a class="external" href="http://wiki.mozilla.org/Mac:Accessibility">Mozilla Universal Access support</a> is in progress.</p> + +<h2 id="Accessible_Web_Specifications" name="Accessible_Web_Specifications">Accessible Web Standards</h2> + +<p>Gecko exposes the number of XML languages including HTML to AT. Refer to <a href="/en/Accessibility/AT-APIs/Web_Specifications" title="en/ARIA_User_Agent_Implementors_Guide">accessible web specifications page</a> to learn what and how markup languages are exposed.</p> + +<h2 id="AT_APIs_Supported_Features_Details" name="AT_APIs_Supported_Features_Details">AT APIs Implementation Details</h2> + +<p>Refer to <a href="/En/Accessibility/AT-APIs/Implementation_Details" title="en/Accessibility/AT-APIs/Implementation_Details">implementation details page</a> to see how Gecko supports interesting AT API. There you will find information how AT API interfaces, roles, states and etc are mapped into Gecko accessibility API and visa versa.</p> + +<h2 id="Keyboard_User_Interface_and_API" name="Keyboard_User_Interface_and_API">Keyboard User Interface and API</h2> + +<p>Fortunately, Gecko uses the standard keyboard API's for each supported platform. The Mozilla keyboard shortcuts for content are similar to what is used in other browsers. Here is a list of <a class="external" href="http://www.mozilla.org/support/firefox/keyboard">Firefox keyboard shortcuts</a>.</p> + +<h2 id="Test_Tools" name="Test_Tools">Test Tools</h2> + +<p>Here you will find a list of tools to test accessibility Gecko-based applications.</p> + +<ul> + <li>MSAA + <ul> + <li><a class="external" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=4179742F-1F3D-4115-A8BA-2F7A6022B533&displaylang=en">MSAA SDK tools</a> - version 1.3 is recommended instead of 2.0 because it includes source code for the tools</li> + </ul> + </li> + <li>IAccessible2 + <ul> + <li><a class="external" href="http://www.eclipse.org/actf/downloads/">Accessibility Probe</a> -- includes MSAA support as well</li> + </ul> + </li> + <li>ATK/AT-SPI + <ul> + <li><a class="external" href="http://live.gnome.org/Accerciser">Accerciser</a> - interactive Python accessibility explorer for the GNOME desktop</li> + </ul> + </li> + <li>Gecko + <ul> + <li><a class="external" href="http://www.mozilla.org/projects/inspector/">DOM Inspector</a> has an ability to test Gecko accessibility layer, supports base features.</li> + <li>Firebug</li> + </ul> + </li> +</ul> + +<h2 id="Screen_Readers" name="Screen_Readers">Screen Readers</h2> + +<p>Here's a list of screen readers we are oriented to in the first place.</p> + +<ul> + <li>Windows platform + <ul> + <li><a class="external" href="http://www.freedomscientific.com/fs_products/software_jaws.asp">JAWS</a></li> + <li><a class="external" href="http://www.gwmicro.com/">Windows Eyes</a></li> + <li><a class="external" href="http://www.nvda-project.org/">NVDA</a></li> + </ul> + </li> + <li>Linux/Unix platform + <ul> + <li><a class="external" href="http://live.gnome.org/Orca">Orca</a></li> + </ul> + </li> + <li>OS X platform + <ul> + <li><a class="external" href="http://www.apple.com/accessibility/voiceover/">VoiceOver</a></li> + </ul> + </li> +</ul> + +<h2 id="Contacts" name="Contacts">Contacts</h2> + +<p>Please discuss accessibility issues on the <a class="external" href="http://groups.google.com/group/mozilla.dev.accessibility/topics">Mozilla Accessibility groups</a> or on the <a class="link-irc" href="irc://irc.mozilla.org/accessibility">Mozilla Accessibility IRC channel</a>.</p> diff --git a/files/pt-br/web/accessibility/xforms/index.html b/files/pt-br/web/accessibility/xforms/index.html new file mode 100644 index 0000000000..91b47d43f0 --- /dev/null +++ b/files/pt-br/web/accessibility/xforms/index.html @@ -0,0 +1,198 @@ +--- +title: XForms Accessibility +slug: Web/Accessibility/XForms +tags: + - Accessibility + - NeedsTranslation + - Obsolete + - TopicStub + - XForms +translation_of: Mozilla/Tech/Accessibility/XForms +--- +<p> </p> + +<h2 id="Intoduction" name="Intoduction">Intoduction</h2> + +<p><span class="seoSummary">This article provides a quick guide to how accessibility is handled in Gecko for XForms.</span>. Assistive technologies API for XForms is supported starting from Firefox 3 (Gecko 1.9). Implementation of accessible objects for XForms elements is based on top of the existing object hierarchy introduced in the Mozilla accessibility module. XForms elements behavior is implemented in accordance with <a class="external" href="http://www.mozilla.org/access/toolkit-checklist">accessible toolkit checklist</a>.</p> + +<p>In general, when elements are similar to HTML elements, they are exposed to MSAA/ATK in a similar way.</p> + +<h2 id="Get_Build" name="Get_Build">Get Build</h2> + +<p>Subsections below explain how you can obtain accessible XForms-enabled build. These are either downloading latest build of firefox or building it yourself.</p> + +<h3 id="Downloading_Builds" name="Downloading_Builds">Downloading Builds</h3> + +<div class="note">Notion: XForms is no longer distributed with Firefox build. You must build it yourself. See section below.</div> + +<p>For Firefox, you may directly download the nighly "trunk" build of Firefox and install the XForms extension which lives in 'xpi' directory of the build. Note, XForms accessibility is implemented only on trunk. Trunk builds are not considered stable and should not be installed on top of the Firefox used for daily browsing. Currently we have verified that XForms accessibility is working on the Windows platform, and Linux testing has not yet been done, although everything should work and is ready to be tested. You will find trunk builds of Firefox at <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/">ftp.mozilla.org</a>, trunk builds of XForms extension (Windows) at <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/windows-xpi/">ftp.mozilla.org</a> or trunk builds of XForms extension (Linux) <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/linux-xpi/">ftp.mozilla.org</a>.</p> + +<h3 id="Build_It_Yourself" name="Build_It_Yourself">Build It Yourself</h3> + +<p>If you would like to build firefox/seamonkey yourself then please ensure your .mozconfig file has the following option:</p> + +<ul> + <li>ac_add_options --enable-extensions=default,xforms,schema-validation</li> +</ul> + +<h2 id="How_To_Test" name="How_To_Test">How To Test</h2> + +<p>There are two approaches to test XForms accessibility. The first is to use and assistive technology such as a screen reader, or an accessibility testing tool, to make sure XForms elements have proper accessible objects. Or you may be guided by <a class="external" href="http://www.mozilla.org/access/toolkit-checklist">toolkit checklist</a> to check keyboard navigation for XForms controls.</p> + +<p>You can try the following link to test XForms accessibility:</p> + +<ul> + <li>visual XForms elements in XHTML document at <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=251493">bugzilla.mozilla.org</a></li> + <li>visual XForms elements in XUL document at <a class="link-https" href="https://bugzilla.mozilla.org/attachment.cgi?id=251497">bugzilla.mozilla.org</a></li> + <li>you can see XForms sample tests at <a class="external" href="http://www.mozilla.org/projects/xforms/samples.html">Mozilla XForms project</a></li> + <li>there are set of tests at <a class="external" href="http://beaufour.dk/xftst/">beaufour.dk</a></li> + <li>W3C's XForms test at <a class="external" href="http://www.w3.org/MarkUp/Forms/Test/XForms1.0/Edition2/front_html/XF102edTestSuite.html">w3.org</a></li> +</ul> + +<h2 id="Keyboard_Navigation_Issues" name="Keyboard_Navigation_Issues">Keyboard Navigation Issues</h2> + +<h3 id="Navigation_Sequence" name="Navigation_Sequence">Navigation Sequence</h3> + +<p>Though XForms spec declares <code>navindex</code> attribute to define the navigation sequence (see <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#attrs-ui-common">1.0 specs</a> or <a class="external" href="http://www.w3.org/TR/xforms11/#attrs-ui-common">1.1 specs</a>) but Rich Schwerdtfeger (<small>Distinguished Engineer, SWG Accessibility Architect/Strategist Chair, IBM Accessibility Architecture Review Board</small>) gave some clarification about <code>navindex</code>. He wrote:</p> + +<blockquote>Navindex was in XForms - it was stripped out as it was believed the focus model was dependent on the content which used it. So, yes we don't care about navindex in XForms. If you use xhtml1.x use tabindex. If you use Xhtml2 use nextfocus.</blockquote> + +<p>Therefore since Mozilla XForms works in XHTML (1.x) or XUL documents only then we use <code>tabindex</code> instead. Note, we support <code>-moz-user-focus</code> style neither for XHTML or XUL.</p> + +<h2 id="AT_API" name="AT_API">AT API</h2> + +<h3 id="Accessible_properties" name="Accessible_properties">Accessible properties</h3> + +<p>This section describes common rules how accessibility properties are formed for forms control elements.</p> + +<h4 id="name" name="name">name</h4> + +<p>It is formed from value of child XForms <code>label</code> element if the element doesn't have <code>labelledby</code> attribute.</p> + +<h4 id="description" name="description">description</h4> + +<p>It is formed from value of child XForms <code>hint</code> element if the element doesn't have <code>describedby</code> attribute.</p> + +<h4 id="state" name="state">state</h4> + +<p>It is formed as well from model item properties (MIPs) of instance node that XForms element is bound to as from valid/invalid or in-range/out-of-range states of instance node. Instance node states are mapped to accessibility state constants declared in <code>nsIAccessibleStates</code> interface like it shown below:</p> + +<ul> + <li>relevant - <a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/States#STATE_UNAVAILABLE">STATE_UNAVAILABLE</a></li> + <li>readonly - <a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/States#STATE_READONLY">STATE_READONLY</a></li> + <li>required - <a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/States#STATE_REQUIRED">STATE_REQUIRED</a></li> + <li>invalid - <a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/States#STATE_INVALID">STATE_INVALID</a></li> + <li>out of range - <a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/States#STATE_INVALID">STATE_INVALID</a></li> +</ul> + +<h4 id="attributes" name="attributes">attributes</h4> + +<p>Redefines <code><a class="external" href="http://www.w3.org/TR/aria-state/#datatype">datatype</a></code> ARIA attribute. Its value is XML Schema <a class="external" href="http://www.w3.org/TR/xmlschema-2/#built-in-datatypes">builit-in datatype</a> of instance node that XForms element is bound to.</p> + +<h4 id="children" name="children">children</h4> + +<p>Mozilla XForms implementation allows form control elements to have child elements. Therefore accessible children are formed from any accessible child elements of form control element and from elements that are introduced by its presentation.</p> + +<h3 id="Forms_Controls_Module" name="Forms_Controls_Module">Forms Controls Module</h3> + +<p>Some of form control elements may be represented in few ways by different widgets. This section lists accessible presentations for form control elements.</p> + +<h4 id="input" name="input">input</h4> + +<p>A key xforms element to show and change the instance data to which it is bound (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-input">spec</a>, the <a href="en/XForms/User_Interface_Elements/Input">docs</a>). The follwoing representations <code>input</code> element are accessible:</p> + +<ul> + <li><a href="en/Accessibility/XForms/TextField#text_field">text field</a> - see the <a href="en/XForms/User_Interface_Elements/Input">docs</a>.</li> + <li><a href="en/Accessibility/XForms/Checkbox#checkbox">checkbox</a> - see the <a href="en/XForms/User_Interface_Elements/Input">docs</a></li> + <li><a href="en/Accessibility/XForms/Datepicker#datepicker">datepicker</a> - see the <a href="en/XForms/User_Interface_Elements/Input">docs</a>.</li> + <li><a href="en/Accessibility/XForms/Calendar#calendar">calendar</a> - see the <a href="en/XForms/User_Interface_Elements/Input">docs</a>.</li> + <li><a href="en/Accessibility/XForms/DaysList#days_list_docs">days list</a> - see the <a href="en/XForms/User_Interface_Elements/Input">docs</a>.</li> + <li><a href="en/Accessibility/XForms/MonthsList#months_list">months list</a> - see the <a href="en/XForms/User_Interface_Elements/Input">docs</a>.</li> +</ul> + +<h4 id="secret" name="secret">secret</h4> + +<p>Used for inputting passwords (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-secret">spec</a>, the <a href="en/XForms/User_Interface_Elements/Secret">docs</a>). This element is represented by <a href="en/Accessibility/XForms/PasswordField">password field</a>.</p> + +<h4 id="textarea" name="textarea">textarea</h4> + +<p>Serves to show/change multiline text (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-textarea">spec</a>, the <a href="en/XForms/User_Interface_Elements/Textarea">docs</a>). This element is represented by multiline <a href="en/Accessibility/XForms/TextField">text field</a>.</p> + +<h4 id="output" name="output">output</h4> + +<p>Serves to show instance data that the element is bound to (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-output">spec</a>, the <a href="en/XForms/User_Interface_Elements/Output">docs</a>). It can have the following presentations:</p> + +<ul> + <li><a href="en/Accessibility/XForms/Text">text</a> - see the <a href="en/XForms/User_Interface_Elements/Output#text">docs</a>.</li> + <li><a href="en/Accessibility/XForms/Calendar">calendar</a> - see the <a href="en/XForms/User_Interface_Elements/Output#calendar">docs</a>.</li> +</ul> + +<h4 id="upload" name="upload">upload</h4> + +<p>Provides a means for the user to select a file (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-upload">spec</a>, the <a href="en/XForms/User_Interface_Elements/Upload">docs</a>). This element is represented by <a href="en/Accessibility/XForms/Upload">upload</a>.</p> + +<h4 id="range" name="range">range</h4> + +<p>Allows the user to choose a value from within a specific range of values (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-range">spec</a>, the <a href="en/XForms/User_Interface_Elements/Range">docs</a>). Currently it is represented by a <a href="en/Accessibility/XForms/Slider">slider</a> only.</p> + +<h4 id="trigger" name="trigger">trigger</h4> + +<p>Allows the user to initiate actions (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-trigger">spec</a>, the <a href="en/XForms/User_Interface_Elements/Trigger">docs</a>). This element is represented by <a href="en/Accessibility/XForms/Button">button</a>.</p> + +<h4 id="submit" name="submit">submit</h4> + +<p>Invokes the submission of the selected instance data to its target destination (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-submit">spec</a>, the <a href="en/XForms/User_Interface_Elements/Submit">docs</a>). This element is represented by <a href="en/Accessibility/XForms/Button">button</a>.</p> + +<h4 id="select" name="select">select</h4> + +<p>Allows the user to choose one or multiple values from a list of pre-defined values (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-selectMany">spec</a>, the <a href="en/XForms/User_Interface_Elements/Select">docs</a>). It can have the following representations:</p> + +<ul> + <li><a href="en/Accessibility/XForms/Listbox">listbox</a></li> + <li><a href="en/Accessibility/XForms/Checkgroup">checkboxes group</a></li> +</ul> + +<h4 id="select1" name="select1">select1</h4> + +<p>Allows the user to choose a single value from a list of pre-defined values (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-label">spec</a>, the <a href="en/XForms/User_Interface_Elements/Select1">docs</a>). It can have the following representations:</p> + +<ul> + <li><a href="en/Accessibility/XForms/Combobox">combobox</a></li> + <li><a href="en/Accessibility/XForms/Listbox">listbox</a></li> + <li><a href="en/Accessibility/XForms/Radiogroup">radio group</a></li> +</ul> + +<h3 id="Additional_Elements" name="Additional_Elements">Additional Elements</h3> + +<p>These elements may be used as child elements to the form controls described above. Some of these elements are not accessible itself but they makes accessibility properties for XForms elements that hold them.</p> + +<h4 id="label" name="label">label</h4> + +<p>Specifies the label for the xforms control (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-selectMany">spec</a>, the <a href="en/XForms/User_Interface_Elements/Label">docs</a>). Every form control other than the <code>output</code> element must contain a <code>label</code> element. The value of <code>label</code> element is used as name of accessible object.</p> + +<h4 id="help" name="help">help</h4> + +<p>Specifies contextual help for the containing form control (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-help">spec</a>, the <a href="en/XForms/User_Interface_Elements/Help">docs</a>). The <code>help</code> element has <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code> role.</p> + +<h4 id="hint" name="hint">hint</h4> + +<p>Similar to a tooltip (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">spec</a>, the <a href="en/XForms/User_Interface_Elements/Hint">docs</a>). The value of <code>hint</code> element is used as description of accessible object.</p> + +<h4 id="alert" name="alert">alert</h4> + +<p>This message will be shown when the form control cannot properly bind to instance data or when the instance data value is invalid or out of the specified range of selectable values (see the <a class="external" href="http://www.w3.org/TR/xforms/slice8.html#ui-common-elements-alert">spec</a>, the <a href="en/XForms/User_Interface_Elements/Alert">docs</a>). The <code>alert</code> element has <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code> role for both usual and inline <code>alert</code> elements.</p> + +<h4 id="message" name="message">message</h4> + +<p>Used in combination with event listeners to display a message to the user when the specified event occurs (see the <a class="external" href="http://www.w3.org/TR/xforms/slice10.html#action-info">spec</a>, the <a href="en/XForms/User_Interface_Elements/Message">docs</a>). The <code>message</code> element has <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ALERT">ROLE_ALERT</a></code> role.</p> + +<h2 id="Resources" name="Resources">Resources</h2> + +<p>Below you will find a list of XForms/Accessiblity resources:</p> + +<ul> + <li>Mozilla accessibility project at <a class="external" href="http://www.mozilla.org/access/">mozilla.org</a></li> + <li>XForms specification at <a class="external" href="http://www.w3.org/TR/xforms/">w3.org</a></li> + <li>Mozilla XForms project at <a class="external" href="http://www.mozilla.org/projects/xforms/">mozilla.org</a></li> + <li>UI XForms elements references at <a href="en/XForms/User_Interface_Elements">this site</a></li> +</ul> diff --git a/files/pt-br/web/accessibility/xforms/upload/index.html b/files/pt-br/web/accessibility/xforms/upload/index.html new file mode 100644 index 0000000000..2be80c89f4 --- /dev/null +++ b/files/pt-br/web/accessibility/xforms/upload/index.html @@ -0,0 +1,45 @@ +--- +title: Upload Representation +slug: Web/Accessibility/XForms/Upload +tags: + - Acessibilidade + - Acessibilidade_XForms + - Obsolento + - XForms +translation_of: Mozilla/Tech/Accessibility/XForms/Upload +--- +<p> </p> + +<p><a href="/pt-BR/docs/Accessibility:XForms#upload">« Accessibility XForms Support Page</a></p> + +<h2 id="Summary" name="Summary">Sumário</h2> + +<p>Provê meios para usuários selecionarem arquivos. Essa apresentação é usada para upload de elementos (veja o <a href="en/XForms/User_Interface_Elements/Upload">documento</a>). A representação do <em>upload </em>é combinada com o campo de texto para mostrar a URL do arquivo<em>uploaded</em>, o botão de upload e o botão de limpeza.</p> + +<h2 id="Exposed_interfaces" name="Exposed_interfaces">Interfaces Expostas</h2> + +<ul> + <li><a href="en/NsIAccessible">nsIAccessible</a></li> + <li><a href="en/NsIAccessibleHyperText">nsIAccessibleHyperText</a></li> +</ul> + +<h2 id="Accessibility_properties" name="Accessibility_properties">Propriedades de Acessibilidade</h2> + +<h3 id="nsIAccessible" name="nsIAccessible">nsIAccessible</h3> + +<ul> + <li><code>role</code> - <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_GROUPING">ROLE_GROUPING</a></code></li> + <li><code>name</code> - formado pelo valor do elemento sublinhado XForms <code>label.</code></li> + <li><code>description </code>- formado pelo valor do elemento sublinhado <code>XForms hint</code></li> + <li><code>state </code>- formed from MIPs of instance node that XForms element is bound to</li> + <li><code>value</code> - valor atual do nó limite.</li> +</ul> + +<h3 id="Accessible_children" name="Accessible_children">Accessible children</h3> + +<ul> + <li><code>text field</code> - <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_ENTRY">ROLE_ENTRY</a></code></li> + <li><code>upload button</code> - <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></li> + <li><code>clean button</code> - <code><a href="/pt-BR/docs/Web/Accessibility/AT-APIs/Gecko/Roles/ROLE_PUSHBUTTON">ROLE_PUSHBUTTON</a></code></li> + <li>qualquer elemento explícito para crianças que são representados para essa função.</li> +</ul> |