diff --git a/webaim/tecnicas/javascript/index.md b/webaim/tecnicas/javascript/index.md index 18d41b1..0170299 100644 --- a/webaim/tecnicas/javascript/index.md +++ b/webaim/tecnicas/javascript/index.md @@ -289,80 +289,81 @@ Mas só depois que você seleciona um item usando um mouse ou pressione Ent 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 - -Several event handlers are device independent, -including `onFocus`, `onBlur`, `onSelect`, `onChange`, and `onClick` -(when `onClick` is used with link or form elements). -When possible, use device independent event handlers. -Other event handlers are device dependent, meaning that they rely wholly upon a certain type of input. -For instance, `onMouseOver`, `onMouseOut`, and `onDblClick` rely upon the use of a mouse. -There are also some event handlers that are dependent upon use of the keyboard (`onKeyDown`, `onKeyUp`, etc.). -Multiple device dependent event handlers can be used together to allow both mouse and keyboard activation of JavaScript, -but this requires testing across different browsers and assistive technologies to ensure that accessibility is not limited in any way. - -## Other Issues - -### Dynamic Content and Accessibility - -CSS and JavaScript are sometimes used to display, hide, or move information based upon input from the user or pre-programmed commands. -This is sometimes called Dynamic HTML (DHTML). -Most drop-down or fly-out menus or other types of rich interactions involve scripting. Because most of these elements are modified based upon mouse input, -they are typically inaccessible to users who do not use a mouse. -When dynamic content and interactions is used, two items must be evaluated to determine its impact on accessibility: - -1. Is the event used to trigger a change device independent? If the mouse is required, then it is not fully accessible. -2. Is the dynamic content or functionality itself accessible? - If assistive technologies cannot adequately access dynamically triggered content or functionality, - then it is not fully accessible. - -### JavaScript Generated Content - -Content generated by JavaScript, such as through `document.write` or other functions is generally accessible to assistive technologies. -In some cases, however, if the dynamic content is constantly changing or if it changes while the user is reading it or has set focus to it, -this can interfere with navigation or browser functionality and cause accessibility problems. -For example, if an element that has keyboard focus is significantly changed, hidden,s -or removed from the page, keyboard focus may revert to the very beginning of the page. - -When using dynamic information, you must first ask yourself if it is necessary and vital to the function or content of the page. -If so, there is often a way to provide the content without using inaccessible JavaScript. -For instance, ensuring that the dynamic content is generated via user command or interaction, -rather than automatically or randomly, -can ensure that the content does not change when it is focused or being read. - -Additionally, sometimes dynamic content needs to receive keyboard focus. -For example, a dialog box that appears will likely need to be given focus -(using JavaScript `focus()`) after it appears to ensure it is navigated or read immediately. -Additional techniques may be necessary to ensure accessibility for such dynamic elements - -a modal dialog, for example, may need to be programmed to maintain keyboard focus -(rather than allowing focus into other parts of the page that are not available). - -### Pop-up Windows - -Pop-up windows provide a unique accessibility concern. -First of all, most usability experts would argue against the use of pop-up windows except in extreme cases. -For a visual user, it may be difficult to notice and navigate to the new window or tab. -For someone who is using assistive technologies, -the new window may be annoying and confusing because the default behavior for the link has been modified. -JavaScript implementation may make the new window difficult or impossible to resize or scale for someone using a screen enlarger. -For someone who is blind, there is typically an indication that a new window has opened, -but it may be burdensome to then return back to the original page. -When the screen reader user attempts to return to the previous page by selecting the back button, -it may be confusing to find that this does not work. - -When using JavaScript to open new windows, -you can modify the size and position of the new window. -You can also add or remove functionality of the window, such as the ability to resize, display scroll bars, show tool bars, etc. -Be very careful when changing the default behavior of the browser window. -If a user has low vision and must enlarge the content, -a small window that cannot be enlarged and does not display scroll bars would be very inaccessible. -Someone with a motor disability may rely upon large tool bars to accurately control the web browser, -so removing or modifying them may introduce difficulties for this user. - -As you can see, there are many difficulties in both usability and accessibility that arise through the use of pop-up windows. -Care must be taken in making the decision to use them. -If they are used, thorough user testing of your implementation is vital to ensure accessibility. -It is generally best to alert the user to the fact that a pop-up window will be opened. +### Usando manipuladores de eventos independentes do dispositivo + +Vários manipuladores de eventos são independente de dispositivo, +incluindo o `onFocus`, `onBlur`, `onSelect`, `onChange`, and `onClick` +(quando o `onClick` é usado com elementos link ou de formulário). +Quando possível, use manipuladores de eventos independentes do dispositivo. +Outros manipuladores de eventos são dependentes do dispositivo, significando que eles dependem inteiramente de um determinado tipo de entrada. +Por exemplo, `onMouseOver`, `onMouseOut` e `onDblClick` dependem do uso de um mouse. +Há também algum evento manipuladores que dependem do usam do teclado (`onKeyDown`, `onKeyUp`, etc.). +Vários manipuladores de eventos dependentes do dispositivo podem ser usados juntos para permitir a ativação do mouse e o teclado de JavaScript, +Mas isso requer testes em diferentes navegadores e tecnologias assistivas para garantir que a acessibilidade não é limitada de qualquer forma. + +## Outros Problemas + +### Conteúdo dinâmico e acessibilidade + +CSS e JavaScript são às vezes usados para exibir, ocultar ou mover as informações com base em entrada do usuário ou comandos pré-programados. +Isso às vezes é chamado de HTML dinâmico (DHTML). +A maioria dos menus suspensos ou fly-out ou outros tipos de interações ricas envolvem criação de scripts. Como a maioria destes elementos é modificada com base na entrada do mouse, +eles são normalmente inacessíveis aos usuários que não usar um mouse. +Quando o conteúdo dinâmico e interações é usado, dois itens devem ser avaliados para determinar o seu impacto na acessibilidade: + +1. O evento usado para disparar a mudança depende do dispositivo? Se mouse é requerido, então não é totalmente acessível. +2. O conteúdo criado dinamicamente ou a funcionalidade propriamente dita é acessível? + Se tecnologia assistiva não consegue acessar o conteúdo criado dinamicamente ou sua funcionalidade, + então não é completamente acessível. + +### Conteúdo gerado com JavaScript + + +Conteúdo gerado por JavaScript, como através de `document.write` ou outras funções é geralmente acessível para tecnologias assistivas. +Em alguns casos, no entanto, se o conteúdo dinâmico está constantemente mudando ou se muda enquanto o usuário está lendo ou tiver definido o foco, +isso pode interferir com a funcionalidade de navegação ou browser e causar problemas de acessibilidade. +Por exemplo, se um elemento que tenha o foco do teclado é significativamente alterado, ocultado, +ou removido da página, o foco do teclado pode reverter para o início da página. + +Ao usar informações dinâmicas, você primeiro deve perguntar-se se é necessário e vital para a função ou o conteúdo da página. +Em caso afirmativo, há muitas vezes uma forma de fornecer o conteúdo sem usar JavaScript inacessível. +Por exemplo, garantindo que o conteúdo dinâmico é gerado através do comando do usuário ou interação, +em vez de automaticamente ou aleatoriamente, +pode garantir que o conteúdo não muda quando é focado ou sendo lido. + +Além disso, o conteúdo dinâmico às vezes precisa receber o foco do teclado. +Por exemplo, uma caixa de diálogo que aparece provavelmente precisará ser dado foco +(usando JavaScript `focus()`) depois dela aparece para garantir que é navegada ou lida imediatamente. +Técnicas adicionais podem ser necessárias para assegurar a acessibilidade de tais elementos dinâmicos - +uma caixa de diálogo modal, por exemplo, pode precisar de ser programada para manter o foco do teclado +(ao invés de permitir o foco em outras partes da página que não estão disponíveis). + +### Janelas pop-up + +Janelas pop-up fornecem uma preocupação única de acessibilidade. +Em primeiro lugar, a maioria dos especialistas em usabilidade argumentam contra o uso de janelas pop-up, exceto em casos extremos. +Para um usuário visual, pode ser difícil de notar e de navegar para a nova janela ou aba. +Para alguém que está usando tecnologias assistivas, +a nova janela pode ser chata e confusa porque o comportamento padrão para o link foi modificado. +Implementação de JavaScript pode fazer nova janela difícil ou impossível para redimensionar ou escalar para alguém usando um ampliador de tela. +Para alguém que é cego, normalmente há uma indicação de que uma nova janela se abriu, +Mas pode ser onerosa para em seguida voltar para a página original. +Quando o usuário de leitor de tela tenta retornar à página anterior, selecionando o botão de voltar, +pode ser confuso para achar que isso não funciona. + +Ao usar JavaScript para abrir novas janelas, +Você pode modificar o tamanho e a posição da nova janela. +Você também pode adicionar ou remover a funcionalidade da janela, como a capacidade de redimensionar, Exibir barras de rolagem, mostrar barras de ferramentas, etc. +Tenha muito cuidado ao alterar o comportamento padrão da janela do navegador. +Se um usuário tem baixa visão e deve ampliar o conteúdo, +uma pequena janela que não pode ser ampliada e não exibe barras de rolagem seria muito inacessível. +Alguém com deficiência motora pode confiar em barras de ferramenta grande para controlar com precisão o navegador da web, +Então, removendo ou modificando-os pode apresentar dificuldades para este usuário. + +Como você pode ver, existem muitas dificuldades em usabilidade e acessibilidade que surgem com o uso de janelas pop-up. +Deve-se tomar cuidado em tomar a decisão de usá-las. +Se elas são usadas, teste de usuário completo da sua implementação é vital para garantir a acessibilidade. +É geralmente melhor alertar o usuário para o fato de que uma janela pop-up será aberta. ### Redirecting and Refreshing Browser Windows