From 871e1ccbcde5080f0c851ec42fe66e59c61f4a6a Mon Sep 17 00:00:00 2001 From: Emerson Rocha Luiz Date: Tue, 11 Oct 2016 01:38:58 -0300 Subject: [PATCH] =?UTF-8?q?#22=20tradu=C3=A7=C3=A3o,=20traduzido=20`onClic?= =?UTF-8?q?k`=20and=20`onDblClick`=20e=20`onChange`=20and=20`onSelect`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webaim/tecnicas/javascript/index.md | 85 +++++++++++++++-------------- 1 file changed, 43 insertions(+), 42 deletions(-) diff --git a/webaim/tecnicas/javascript/index.md b/webaim/tecnicas/javascript/index.md index b6f1d52..18d41b1 100644 --- a/webaim/tecnicas/javascript/index.md +++ b/webaim/tecnicas/javascript/index.md @@ -118,13 +118,13 @@ Esses problemas incluem: Geralmente, uma página web contendo Javascript será totalmente acessível se o script da página funcionar independente de qual dispositivo for utilizado. Ou seja, que não requere somente o uso do mouse ou somente o uso do teclado para ser utilizada e que as informações(conteúdo) for disponível para tecnologias assistivas. Infelizmente, não há um meio simples que possa ser aplicado para resolver todos problemas de acessibilidade associados ao Javascript. -O único modo de garantir a acessibilidade do JavaScript é análisar cada página que utiliza scripts e inventar uma solução única para cada problema encontrado. +O único modo de garantir a acessibilidade do JavaScript é análisar cada página que utiliza scripts e inventar uma solução única para cada problema encontrado. ### JavaScript que não altera a acessibilidade -### Visão Geral -Event handlers acompanham código HTML existente ou conteúdo gerado dinâmicamente +### Visão Geral + +Event handlers acompanham código HTML existente ou conteúdo gerado dinâmicamente são ativados pelo navegador ou pelo usuário - por exemplo quando uma página carrega, quando um usuário clica o mouse, ou quando são 20h. Alguns event handlers dependem do uso do mouse ou do teclado. @@ -219,8 +220,8 @@ Considerações adicionais são necessárias para acessibilidade. Para usuários que não possuem deficiência visual, o conteúdo adicional pode ser fornecido diretamente de um modo acessível, como texto alternativo, por ARIA label ou descrição, ou até um meio fora da tela. -Entretanto, para usuários que navegam conhecendo somente o conteúdo do teclado, deve haver algum mecanismo para que eles -possam acessar e ver o novo conteúdo ou a nova funcionalidade reveladas. +Entretanto, para usuários que navegam conhecendo somente o conteúdo do teclado, deve haver algum mecanismo para que eles +possam acessar e ver o novo conteúdo ou a nova funcionalidade reveladas. Em adicição a `onMouseOver`e `onMouseOut`, use `onFocus` e `onBlur`. Essas ações são ativadas quando o teclado é utilizado para navegar de ou para um elemento. @@ -231,7 +232,7 @@ Simplesmente, ativando a mudança com um link comum e usando mouse and keyb Ocasionalmente, scripting é usado para exibir interações complexas, como drop-down ou fly-out menu. Apesar de ser possível fazer com que essas funcionalidades sejam acessíveis, as vezes, uma alternativa acessível pode ser mais amigável. -Por exemplo, ao invés de forçar usuários a navegar por um longo e complexo menu de navegação, +Por exemplo, ao invés de forçar usuários a navegar por um longo e complexo menu de navegação, você pode garantir que esse sistema de menu não (NOT) é diretamente acessível pelo teclado (nem lido por um screen reader) mas prover um link padrão de funcionalidade no nível superior de um menu. (e.g., "Produtos"). Esse link levaria o usuário a uma página secundária que forneceria links padrões para páginas incluidas no menu complexo. @@ -250,43 +251,43 @@ ou quando o usuário aperta 'tab' para ir de um item a outro. Ambos desses event handlers are device independent, ou seja, eles podem ser ativados com o mouse, o teclado, ou qualquer tecnologia assistiva. As ações que são provenientes da execução desses event handlers devem ser analisadas para determinar se elas causam algum problema de acessibilidade. -Geralmente, esses eventos não causam problema algum a não ser que eles estejam modificando o comportamento padrão do navegador +Geralmente, esses eventos não causam problema algum a não ser que eles estejam modificando o comportamento padrão do navegador ou estão interferindo com o navegador de teclado dentro da página. Exemplos de tais problemas podem estar automaticamente colocando o foco em outras áreas da página com `onFocus` e `onBlur`, prendendo o usuário dentro do formulário, dynamically revealing form controls immediately upon a user leaving (blurring) a form control, etc. Keyboard and screen reader testing will be necessary to ensure these interactions are built in an accessible manner. -### `onClick` and `onDblClick` - -The `onClick` event handler is triggered when the mouse is pressed when over an HTML element. -`onClick` is intended to be a mouse dependent event handler. -However, if the `onClick` event handler is used with keyboard-navigable links or form controls, -then most major browsers and assistive technologies trigger `onClick` if the Enter key is pressed when the link or control has focus. -In these cases, `onClick` is a device independent event handler. - -Nevertheless, the Enter key will not always trigger the `onClick` event if it is used with non-link and non-control elements, -such as plain text, table cells, or `
` elements, -even if they made keyboard navigable using tabindex or are focused using scripting. -In these cases, it will be necessary to detect the Enter and Space key presses while focus is placed on them. - -The `onDblClick` event handler is associated with the double click of a mouse on a selected HTML element. -There is no device independent or keyboard equivalent to `onDblClick`, so it must be avoided. - -### `onChange` and `onSelect` - -The `onChange` event handler is triggered when a form element is selected and changed, -for example, when a radio button is initially selected, when the text changes within a text box or text area, -or when the active item in a select menu changes. -Although these event handlers are device independent and can be activated using the mouse, keyboard, or other device, -the actions that are performed as a result of these event handlers must be analyzed to determine if they cause accessibility problems. - -A common use of `onChange` is on select menus to trigger navigation when the active option within the menu is changed. -These menus can cause keyboard accessibility issues because you cannot scroll through the list using a keyboard without selecting one of the options, -and thus triggering the `onChange` event. -Some browsers (including Firefox) override these jump menus so they are not activated on keyboard change, -but only after you either select an item using a mouse or press Enter if using the keyboard. -However, these types of JavaScript 'jump' menus can be made keyboard accessible by removing `onChange` and -providing a submit button separate from the list of choices that activates the currently selected item. +### `onClick` e `onDblClick` + +O manipulador de evento `onClick` é disparado quando o mouse é pressionado sobre um elemento HTML. +`onClick` destina-se a ser um manipulador de evento dependente do dispositivo mouse. +No entanto, se o manipulador de eventos `onClick` é usado com links navegáveis via teclado ou controles de formulário, +a maioria dos principais navegadores e tecnologias assistivas irão disparar `onClick` se a tecla Enter é pressionada quando o link ou o controle tem foco. +Nesses casos, o `onClick` é um manipulador de eventos independente de dispositivo. + +No entanto, o Enter não disparará sempre o evento `onClick` se este for usado em algo que não é um link ou controle de formulário, +como texto puro, cécula de tabela, ou elementos `
`, +mesmo se eles forem navegaveis com teclado usando tabindex ou focados com uso de scription +Nestes casos, será necessário detectar o se teclas Enter e Space são pressionadas enquanto há foco neles + +O manipulador de eventos onDblClick` está associado ao clique do mouse no elemento HTML selecionado. +Não existe um manipulador de eventos independente de dispositivo ou equivalente com teclado ao `onDblClick`, por isso deve ser evitado + +### `onChange` e `onSelect` + +O manipulador de eventos `onChange` é acionado quando um elemento do formulário é selecionado e alterado, +por exemplo, quando um radio button é inicialmente selecionado, quando o texto é alterado dentro de uma caixa de texto ou a área de texto, +ou quando um item ativo em um menu de seleção é alterado. +Embora esses manipuladores de eventos são independentes do dispositivo e podem ser ativados usando o mouse, teclado ou outro dispositivo, +as ações que são executadas como resultado desses manipuladores de evento devem ser analisadas para determinar se eles causam problemas de acessibilidade. + +Um uso comum de `onChange` é selecionar menus que disparam navegação quando a opção ativa dentro do menu é alterada. +Estes menus podem causar problemas de acessibilidade de teclado, porque você não pode rolar pela lista usando um teclado sem selecionar uma das opções, +e, assim, provocando o evento `onChange`. +Alguns navegadores (incluindo o Firefox) subistituem estes menus de salto para que eles não sejam ativados na mudança do teclado, +Mas só depois que você seleciona um item usando um mouse ou pressione Enter se usando o teclado. +No entanto, esses tipos de menus JavaScript "de salto" podem ser feitos acessíveis para teclado removendo `onChange` e +fornecendo um botão enviar separado da lista de escolhas que ativa o item atualmente selecionado. ### Using Device Independent Event Handlers