Skip to content

Commit 88e404f

Browse files
stephanogiuseppeJhon Mike
authored andcommitted
Translation adjustments (reactjs#228)
1 parent 702b86c commit 88e404f

File tree

1 file changed

+19
-19
lines changed

1 file changed

+19
-19
lines changed

content/docs/accessibility.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ Para mais informações, veja a [doumentação para Fragments](/docs/fragments.h
113113

114114
### Rótulos {#labeling}
115115

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.
117117

118118
Os seguintes artigos nos mostram como fazer isso:
119119

@@ -128,22 +128,22 @@ Embora essas práticas HTML padrão possam ser usadas diretamente em React, obse
128128
<input id="nomeDaEntrada" type="text" name="nome"/>
129129
```
130130

131-
### Notificando o usuário de erros {#notifying-the-user-of-errors}
131+
### Notificando erros ao usuário {#notifying-the-user-of-errors}
132132

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:
134134

135135
- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
136136
- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
137137

138138
## Controle de Foco {#focus-control}
139139

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:
141141

142142
- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
143143

144144
### Foco no teclado e foco de contorno {#keyboard-focus-and-focus-outline}
145145

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:
147147

148148
<img src="../images/docs/keyboard-focus.png" alt="Contorno de foco azul envolta do link selecionado" />
149149

@@ -198,7 +198,7 @@ Então podemos nos concentrar em outro lugar em nosso componente quando necessá
198198
```javascript
199199
focus() {
200200
// 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
202202
this.textInput.current.focus();
203203
}
204204
```
@@ -240,11 +240,11 @@ Um ótimo exemplo de gerenciamento de foco é o [react-aria-modal](https://githu
240240
>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.
241241
242242

243-
## Movimentos do mouse e apontadores {#mouse-and-pointer-events}
243+
## Movimentos do mouse e ponteiro (cursor) {#mouse-and-pointer-events}
244244

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.
246246

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.
248248

249249
<img src="../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." />
250250

@@ -299,7 +299,7 @@ constructor(props) {
299299
}
300300
```
301301

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.
303303

304304
<img src="../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." />
305305

@@ -342,7 +342,7 @@ class ExamploDeBlur extends React.Component {
342342
}
343343
344344
render() {
345-
// React nos ajuda React cancelando o blur e
345+
// O React nos ajuda cancelando o blur e
346346
// focando nos eventos do elemento pai.
347347
return (
348348
<div onBlur={this.onBlurHandler}
@@ -365,15 +365,15 @@ class ExamploDeBlur extends React.Component {
365365
}
366366
```
367367

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.
369369

370370
<img src="../images/docs/blur-popover-close.gif" alt="Uma lista popover que fecha corretamente para usuários de mouse e teclado." />
371371

372372
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.
373373

374374
## Widgets mais complexos {#more-complex-widgets}
375375

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.
377377

378378
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).
379379
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
384384
- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
385385
- [Inclusive Components](https://inclusive-components.design/)
386386

387-
## Outros pontos para consideração {#other-points-for-consideration}
387+
## Outros pontos a serem consideração {#other-points-for-consideration}
388388

389389
### Definindo o idioma {#setting-the-language}
390390

@@ -425,10 +425,10 @@ Há várias ferramentas que podemos usar para ajudar na criação de aplicativos
425425

426426
Há várias ferramentas que podemos usar para ajudar na criação de aplicativos da Web acessíveis.
427427

428-
1. Disconecte o seu mouse.
428+
1. Desconecte o seu mouse.
429429
2. Usando `Tab` e `Shift+Tab` navegue pelo site.
430430
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.
432432

433433
### Assistência ao desenvolvimento {#development-assistance}
434434

@@ -455,9 +455,9 @@ Existem várias ferramentas que podem executar auditorias de acessibilidade em p
455455

456456
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.
457457

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`.
459459

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.
461461

462462
#### WebAIM WAVE {#webaim-wave}
463463

@@ -502,7 +502,7 @@ Consulte os seguintes guias sobre como ativar e usar o VoiceOver:
502502

503503
#### JAWS no Internet Explorer {#jaws-in-internet-explorer}
504504

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.
506506

507507
Consulte os seguintes guias sobre como ativar e usar o JAWS:
508508

0 commit comments

Comments
 (0)