You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/accessibility.md
+19-19Lines changed: 19 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -113,7 +113,7 @@ Para mais informações, veja a [doumentação para Fragments](/docs/fragments.h
113
113
114
114
### Rótulos {#labeling}
115
115
116
-
Todos os elements de um formulário HTML, como `<input>`and`<textarea>`, precisam ser routalados. Precisamos fornecer rótulos descritivos pois são expostos aos leitores de tela.
116
+
Todos os elements de um formulário HTML, como `<input>`e`<textarea>`, precisam ser rotulados. Precisamos fornecer rótulos descritivos pois são expostos aos leitores de tela.
117
117
118
118
Os seguintes artigos nos mostram como fazer isso:
119
119
@@ -128,22 +128,22 @@ Embora essas práticas HTML padrão possam ser usadas diretamente em React, obse
### Notificando o usuário de erros {#notifying-the-user-of-errors}
131
+
### Notificando erros ao usuário {#notifying-the-user-of-errors}
132
132
133
-
Situações de erro precisam ser entendidas por todos os usuários. O artigos a seguir nos mostram como expor os erros aos leitores de tela:
133
+
Situações de erro precisam ser entendidas por todos os usuários. Os artigos a seguir nos mostram como expor os erros aos leitores de tela:
134
134
135
135
-[The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
136
136
-[WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
137
137
138
138
## Controle de Foco {#focus-control}
139
139
140
-
Certifique-se de que seu aplicativo da web possa seja totalmente navegável apenas com o teclado:
140
+
Certifique-se de que seu aplicativo da web seja totalmente navegável apenas com o teclado:
141
141
142
142
-[WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
143
143
144
144
### Foco no teclado e foco de contorno {#keyboard-focus-and-focus-outline}
145
145
146
-
Foco no teclado se refere ao elemento no DOM que foi selecionado e aceita ações do teclado. Nos podemos ver o contorno do foco nesta imagem:
146
+
Foco no teclado se refere ao elemento no DOM que foi selecionado e aceita ações do teclado. Podemos ver o contorno do foco na imagem a seguir:
147
147
148
148
<imgsrc="../images/docs/keyboard-focus.png"alt="Contorno de foco azul envolta do link selecionado" />
149
149
@@ -198,7 +198,7 @@ Então podemos nos concentrar em outro lugar em nosso componente quando necessá
198
198
```javascript
199
199
focus() {
200
200
// Focalize explicitamente a entrada de texto usando a API DOM
201
-
// Nota: estamos acessando "atual" DOM para obter o elemento
201
+
// Nota: estamos acessando o DOM "atual" para obter o elemento
202
202
this.textInput.current.focus();
203
203
}
204
204
```
@@ -240,11 +240,11 @@ Um ótimo exemplo de gerenciamento de foco é o [react-aria-modal](https://githu
240
240
>Use-o para reparar o comportamento do foco do teclado quando ele é alterado, e não para tentar antecipar como os usuários desejam usar os aplicativos.
241
241
242
242
243
-
## Movimentos do mouse e apontadores {#mouse-and-pointer-events}
243
+
## Movimentos do mouse e ponteiro (cursor) {#mouse-and-pointer-events}
244
244
245
-
Certifique-se de que todas as funcionalidades expostas através do movimento de mouse ou apontador também possam ser acessadas usando apenas o teclado. Se dependender apenas do movimento do mouse, haverá muitos casos em que usuários de teclado não poderam usar seu aplicativo.
245
+
Certifique-se de que todas as funcionalidades expostas através do movimento de mouse ou ponteiro também possam ser acessadas usando apenas o teclado. Se dependender apenas do movimento do mouse, haverá muitos casos em que usuários de teclado não poderão usar seu aplicativo.
246
246
247
-
Para ilustrar isso, vamos ver um exemplo clássico de quebra da acessibilidade causada por cliques. Esse é o padrão de clique externo, em que um usuário pode desativar um popover aberto clicando fora do elemento.
247
+
Para ilustrar isso, abaixo pode-se ver um exemplo clássico de quebra da acessibilidade causada por cliques. Esse é o padrão de clique externo, em que um usuário pode desativar um popover aberto clicando fora do elemento.
248
248
249
249
<imgsrc="../images/docs/outerclick-with-mouse.gif"alt=" Um botão de que abre uma lista pop-over implementada com o clique e operado com um mouse mostrando que a ação de fechamento funciona." />
250
250
@@ -299,7 +299,7 @@ constructor(props) {
299
299
}
300
300
```
301
301
302
-
Isso pode funcionar bem para usuários com dispositivos com apontadores, como um mouse. Mas, operá-lo apenas com o teclado quebra a funcionalidade ao passar para o próximo elemento, já que o objeto `window` nunca recebe um evento `click`. Isso pode levar a uma funcionalidade escondida que impede os usuários de usar seu aplicativo.
302
+
Isso pode funcionar bem para usuários com dispositivos com ponteiro, como um mouse. Mas, operá-lo apenas com o teclado quebra a funcionalidade ao passar para o próximo elemento, já que o objeto `window` nunca recebe um evento `click`. Isso pode levar a uma funcionalidade escondida que impede os usuários de usar seu aplicativo.
303
303
304
304
<imgsrc="../images/docs/outerclick-with-keyboard.gif"alt="A toggle button opening a popover list implemented with the click outside pattern and operated with the keyboard showing the popover not being closed on blur and it obscuring other screen elements." />
305
305
@@ -342,7 +342,7 @@ class ExamploDeBlur extends React.Component {
342
342
}
343
343
344
344
render() {
345
-
// React nos ajuda React cancelando o blur e
345
+
// O React nos ajuda cancelando o blur e
346
346
// focando nos eventos do elemento pai.
347
347
return (
348
348
<div onBlur={this.onBlurHandler}
@@ -365,15 +365,15 @@ class ExamploDeBlur extends React.Component {
365
365
}
366
366
```
367
367
368
-
Esse código expõe a funcionalidade para usuários de dispositivo de ponteiro e teclado. Observe também os `aria-*``props` adicionados para suportar usuários de leitores de tela. Por motivos de simplicidade a interação com as setas nas opções de popover não foram implementados.
368
+
Esse código expõe a funcionalidade para usuários de dispositivo de mouse e teclado. Observe também os `aria-*``props` adicionados para suportar usuários de leitores de tela. Por motivos de simplicidade a interação com as setas nas opções de popover não foram implementados.
369
369
370
370
<imgsrc="../images/docs/blur-popover-close.gif"alt="Uma lista popover que fecha corretamente para usuários de mouse e teclado." />
371
371
372
372
Este é um exemplo de muitos casos em que, depender apenas dos eventos de ponteiro e o mouse, pode quebrar a funcionalidade para usuários de teclado. Sempre testar com o teclado realçará imediatamente as áreas problemáticas que podem ser corrigidas usando manipuladores de eventos com reconhecimento de teclado.
373
373
374
374
## Widgets mais complexos {#more-complex-widgets}
375
375
376
-
Para uma experiência do usuário que seja mais complexa não significa que será menos acessível. Considerando que a acessibilidade é mais facilmente alcançada programando o mais próximo possível do HTML, até mesmo o widget mais complexo pode ser programado de forma acessível.
376
+
Uma experiência do usuário mais complexa não significa ser menos acessível. Considerando que a acessibilidade é mais facilmente alcançada programando o mais próximo possível do HTML, até mesmo o widget mais complexo pode ser programado de forma acessível.
377
377
378
378
Aqui, exigimos conhecimento de [ARIA Roles](https://www.w3.org/TR/wai-aria/#role), bem como [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
379
379
Estas são caixas de ferramentas preenchidas com atributos HTML que são totalmente suportados no JSX e nos permitem construir componentes em React totalmente funcionais e totalmente acessíveis.
@@ -384,7 +384,7 @@ Cada tipo de widget tem um padrão de design específico e espera-se que funcion
## Outros pontos para consideração {#other-points-for-consideration}
387
+
## Outros pontos a serem consideração {#other-points-for-consideration}
388
388
389
389
### Definindo o idioma {#setting-the-language}
390
390
@@ -425,10 +425,10 @@ Há várias ferramentas que podemos usar para ajudar na criação de aplicativos
425
425
426
426
Há várias ferramentas que podemos usar para ajudar na criação de aplicativos da Web acessíveis.
427
427
428
-
1.Disconecte o seu mouse.
428
+
1.Desconecte o seu mouse.
429
429
2. Usando `Tab` e `Shift+Tab` navegue pelo site.
430
430
3. Usando `Enter` para clicar elementos.
431
-
3. Se necessário, usando o teclado e as setas interaja com alguns elementos, como menus e dropdowns.
431
+
3. Se necessário, usando o teclado e as setas, interaja com alguns elementos, como menus e dropdowns.
432
432
433
433
### Assistência ao desenvolvimento {#development-assistance}
434
434
@@ -455,9 +455,9 @@ Existem várias ferramentas que podem executar auditorias de acessibilidade em p
455
455
456
456
Deque Systems oferece [aXe-core](https://github.com/dequelabs/axe-core) para testes de acessibilidade automatizados e de ponta a ponta de seus aplicativos. Este módulo inclui integrações para o Selenium.
457
457
458
-
[O mecanismo de acessibilidade](https://www.deque.com/products/axe/) or aXe, é uma extensão de navegador de inspetor de acessibilidade construída com `aXe-core`.
458
+
[O mecanismo de acessibilidade aXe](https://www.deque.com/products/axe/) é uma extensão de navegador de inspetor de acessibilidade construída com `aXe-core`.
459
459
460
-
Você também pode usar o [react-axe](https://github.com/dylanb/react-axe) módulo para logar essas descobertas de acessibilidade diretamente no console durante o desenvolvimento e avaliação.
460
+
Você também pode usar o [react-axe](https://github.com/dylanb/react-axe), um módulo para logar essas descobertas de acessibilidade diretamente no console durante o desenvolvimento e avaliação.
461
461
462
462
#### WebAIM WAVE {#webaim-wave}
463
463
@@ -502,7 +502,7 @@ Consulte os seguintes guias sobre como ativar e usar o VoiceOver:
502
502
503
503
#### JAWS no Internet Explorer {#jaws-in-internet-explorer}
504
504
505
-
[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/)or JAWS, is a prolifically used screen reader on Windows.
505
+
[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/)ou JAWS, é um leitor de tela muito popular, utilizado no sistema Windows.
506
506
507
507
Consulte os seguintes guias sobre como ativar e usar o JAWS:
0 commit comments