From dd8d38eddba004b63afab0f0c3f6c3d5d11383c6 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Thu, 23 Jan 2020 20:46:55 +0000
Subject: [PATCH 01/46] Translation of the first paragrapher of accessibility

---
 content/docs/accessibility.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index a8c73e64b..2c220539c 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -4,11 +4,11 @@ title: Accessibility
 permalink: docs/accessibility.html
 ---
 
-## Why Accessibility? {#why-accessibility}
+## Porque Acessibilidade? {#why-accessibility}
 
-Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
+A acessibilidade na web (tambem conhecido por [**a11y**](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias assistivas interpretem as páginas da web.
 
-React fully supports building accessible websites, often by using standard HTML techniques.
+O React suporta totalmente a construção de websites acessíveis, muitas vezes com apenas técnias de HTML padrão.
 
 ## Standards and Guidelines {#standards-and-guidelines}
 

From 9480c5ea62d984a3b0f2e1532d0a7e6e88c0e647 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Sun, 26 Jan 2020 13:29:12 +0000
Subject: [PATCH 02/46] Update content/docs/accessibility.md

Co-Authored-By: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 2c220539c..8e7c1267f 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -6,7 +6,7 @@ permalink: docs/accessibility.html
 
 ## Porque Acessibilidade? {#why-accessibility}
 
-A acessibilidade na web (tambem conhecido por [**a11y**](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias assistivas interpretem as páginas da web.
+A acessibilidade na web (também conhecida por [**a11y**](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias assistivas interpretem as páginas da web.
 
 O React suporta totalmente a construção de websites acessíveis, muitas vezes com apenas técnias de HTML padrão.
 

From f2160fb548ab9a64993ac636b1d0cc856f028eb1 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Wed, 11 Mar 2020 23:27:45 +0000
Subject: [PATCH 03/46] Finish WCAG and WAI-ARIA paragraph

---
 content/docs/accessibility.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 8e7c1267f..827aacde4 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -6,7 +6,7 @@ permalink: docs/accessibility.html
 
 ## Porque Acessibilidade? {#why-accessibility}
 
-A acessibilidade na web (também conhecida por [**a11y**](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias assistivas interpretem as páginas da web.
+A acessibilidade na web (também conhecida por [** a11y **](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias assistivas interpretem as páginas da web.
 
 O React suporta totalmente a construção de websites acessíveis, muitas vezes com apenas técnias de HTML padrão.
 
@@ -14,9 +14,9 @@ O React suporta totalmente a construção de websites acessíveis, muitas vezes
 
 ### WCAG {#wcag}
 
-The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
+O [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) fornece as diretrizes necessárias para a criação de sites acessíveis.
 
-The following WCAG checklists provide an overview:
+As seguintes checklists das WCAG fornecem uma visão geral:
 
 - [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
 - [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
@@ -24,9 +24,9 @@ The following WCAG checklists provide an overview:
 
 ### WAI-ARIA {#wai-aria}
 
-The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
+O documento [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) contém as técnicas necessárias para criar widgets totalmente acessíveis.
 
-Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
+Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Apesar da maioria das proriedades e atributos do DOM no React serem em camelCase, estes atributos devem ser em hyphen-cased (tambem conhecido como kebab-case, lisp-case, etc) pois estão em HTML:
 
 ```javascript{3,4}
 <input

From fa70024c81f6afbe2b9164046cba8de559d8d444 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Thu, 12 Mar 2020 00:52:56 +0000
Subject: [PATCH 04/46] Add Semantic HTML Paragraph

---
 content/docs/accessibility.md | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 827aacde4..bd7eba27c 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -39,16 +39,15 @@ Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Ape
 />
 ```
 
-## Semantic HTML {#semantic-html}
-Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information
-in our websites will often give us accessibility for free.
+## Semântica HTML {#semantic-html}
+A semântica é a base de uma aplicação web acessível. Se usarmos corretamente os elementos HTML para reforçar o significado da informação colocada nos nossos websites, muitas das vezes a acessibilidade pode ser gratuita.
 
 - [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-Sometimes we break HTML semantics when we add `<div>` elements to our JSX to make our React code work, especially when working with lists (`<ol>`, `<ul>` and `<dl>`) and the HTML `<table>`.
-In these cases we should rather use [React Fragments](/docs/fragments.html) to group together multiple elements.
+Às vezes, quebramos a semântica HTML para adicionar elementos `<div>` ao nosso JSX apenas para fazer funcionar no React, especialmente quando trabalharmos com listas (`<ol>`, `<ul>` and `<dl>`) e com `<table>`.
+Nestes casos devemos usar [React Fragments](/docs/fragments.html) para agrupar vários elementos.
 
-For example,
+Por exemplo,
 
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
@@ -73,14 +72,14 @@ function Glossary(props) {
 }
 ```
 
-You can map a collection of items to an array of fragments as you would any other type of element as well:
+Podemos mapear uma coleção de itens para um array de fragments tal como fariamos para qualquer outro tipo de elemento:
 
 ```javascript{6,9}
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Fragments should also have a `key` prop when mapping collections
+        // Quando estamos a iterar um array, os Fragments devem ter a propriedade `key` adicionada
         <Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -91,7 +90,7 @@ function Glossary(props) {
 }
 ```
 
-When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it:
+Quando não é necessario passar propriedades para a tag Fragment podemos usar a [syntax curta](/docs/fragments.html#short-syntax), se a configuração suportar:
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -104,7 +103,7 @@ function ListItem({ item }) {
 }
 ```
 
-For more info, see [the Fragments documentation](/docs/fragments.html).
+Para mais informação, veja a [documentação sobre Fragments](/docs/fragments.html).
 
 ## Accessible Forms {#accessible-forms}
 

From 7bb20b06308b5de0ec48ff62157fbe17eea78ed6 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Thu, 12 Mar 2020 01:05:45 +0000
Subject: [PATCH 05/46] Add Labeling Paragraph

---
 content/docs/accessibility.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index bd7eba27c..fba9068d4 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -105,22 +105,22 @@ function ListItem({ item }) {
 
 Para mais informação, veja a [documentação sobre Fragments](/docs/fragments.html).
 
-## Accessible Forms {#accessible-forms}
+## Formulários Acessíveis {#accessible-forms}
 
-### Labeling {#labeling}
-Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
+### Rótulos {#labeling}
+Todos os elementos de um formulário HTML como `<input>` e `<textarea>`, precisam de ser rótulados. É necessário fornecer rótulos descritivos pois estes são expostos aos leitores de ecrã.
 
-The following resources show us how to do this:
+Os seguintes artigos mostram como os devemos aplicar:
 
 - [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
 - [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
 - [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
+Embora estas práticas HTML padrão possam ser usadas diretamente no React, observa que o atributo `for` está escrito como `htmlFor` em JSX:
 
 ```javascript{1}
-<label htmlFor="namedInput">Name:</label>
-<input id="namedInput" type="text" name="name"/>
+<label htmlFor="inputNome">Nome:</label>
+<input id="inputNome" type="text" name="nome"/>
 ```
 
 ### Notifying the user of errors {#notifying-the-user-of-errors}

From 552ae4a156b8fe57b71f5d127fe0c6c523387410 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Thu, 12 Mar 2020 13:02:04 +0000
Subject: [PATCH 06/46] Add Focus Control and Keyboard Focus Paragraph

---
 content/docs/accessibility.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index fba9068d4..6c3805c9c 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -123,26 +123,26 @@ Embora estas práticas HTML padrão possam ser usadas diretamente no React, obse
 <input id="inputNome" type="text" name="nome"/>
 ```
 
-### Notifying the user of errors {#notifying-the-user-of-errors}
+### Notificar erros ao utilizador {#notifying-the-user-of-errors}
 
-Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
+Situações de erro precisam de ser entendidas por todos os utilizadores. Os artigos seguintes mostam como export os erros aos leitores de ecrã:
 
 - [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
 - [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
 
-## Focus Control {#focus-control}
+## Controlo de Foco {#focus-control}
 
-Ensure that your web application can be fully operated with the keyboard only:
+Certifique-se que a aplicação web possa ser utilizada apenas com o teclado:
 
 - [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 
-### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}
+### Foco no teclado e foco no contorno {#keyboard-focus-and-focus-outline}
 
-Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
+Foco no teclado refere-se ao elemento DOM que foi selecionado e que aceita ações do teclado. Podemos ver o contorno na imagem a seguir:
 
-<img src="../images/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
+<img src="../images/docs/keyboard-focus.png" alt="Contorno azul à volta do link selecionado" />
 
-Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
+Apenas use CSS que elimine este contorno, por exemplo definindo `outline: 0`, se for substituir por outra implementação de foco.
 
 ### Mechanisms to skip to desired content {#mechanisms-to-skip-to-desired-content}
 

From 6e21d2771010eeaf2e93f3ca50fcf88c27c4e8eb Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Thu, 12 Mar 2020 16:07:27 +0000
Subject: [PATCH 07/46] Add Programmatically Managing Focus Paragraph

---
 content/docs/accessibility.md | 51 +++++++++++++++++------------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 6c3805c9c..c1aa830ed 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -130,7 +130,7 @@ Situações de erro precisam de ser entendidas por todos os utilizadores. Os art
 - [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
 - [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
 
-## Controlo de Foco {#focus-control}
+## Controlo de foco {#focus-control}
 
 Certifique-se que a aplicação web possa ser utilizada apenas com o teclado:
 
@@ -140,44 +140,44 @@ Certifique-se que a aplicação web possa ser utilizada apenas com o teclado:
 
 Foco no teclado refere-se ao elemento DOM que foi selecionado e que aceita ações do teclado. Podemos ver o contorno na imagem a seguir:
 
-<img src="../images/docs/keyboard-focus.png" alt="Contorno azul à volta do link selecionado" />
+<img src="../images/docs/keyboard-focus.png" alt="Contorno azul à volta da ligação selecionada." />
 
 Apenas use CSS que elimine este contorno, por exemplo definindo `outline: 0`, se for substituir por outra implementação de foco.
 
-### Mechanisms to skip to desired content {#mechanisms-to-skip-to-desired-content}
+### Mecanismos para avançar para o conteudo desejado {#mechanisms-to-skip-to-desired-content}
 
-Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
+Providencie mecanismos para permitir que os utilizadores consigam ignorar as secções de navegação, acelarando assim a navegação com o teclado.
 
-Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with internal page anchors and some styling:
+Skiplinks ou Skip Navigation Links são ligações escondidos que só ficam visiveis quando os utilizadores de teclado interagem com a página. São muito fáceis de implementar com alguns estilos e âncoras:
 
 - [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
-Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
+Use também elementos e pontos de referência como `<main>` e `<aside>`, para demarcar zonas da página, sendo que as tecnologias de acessibilidade permitem assim que o utilizador navege rapidamente nessas seções.
 
-Read more about the use of these elements to enhance accessibility here:
+Saiba mais sobre o uso destes elementos para melhorar a acessibilidade aqui:
 
 - [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
-### Programmatically managing focus {#programmatically-managing-focus}
+### Controlar programaticamente o foco {#programmatically-managing-focus}
 
-Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this, we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
+As nossas aplicações React modificam continuamente o HTML DOM durante o tempo de execução, às vezes perdendo o foco do teclado ou adicionado o foco a um elemento inesperado. Para corrigir isso, é necessário programar o foco do teclado na direção certo. Por exemplo, colocar o foco do teclado no botão que faz abrir uma modal depois dessa mesma modal ser fechada.
 
-MDN Web Docs takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+Pode encontrar mais informações de como implementar no MDN Web Docs [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
-To set focus in React, we can use [Refs to DOM elements](/docs/refs-and-the-dom.html).
+Para colocar o foco no React, podemos usar [Refs para elementos no DOM](/docs/refs-and-the-dom.html).
 
-Using this, we first create a ref to an element in the JSX of a component class:
+Desta maneira, em primeiro lugar no componente de JSX criamos a referência:
 
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Create a ref to store the textInput DOM element
+    // Criamos a ref para gravar o elemento DOM textInput
     this.textInput = React.createRef();
   }
   render() {
-  // Use the `ref` callback to store a reference to the text input DOM
-  // element in an instance field (for example, this.textInput).
+  // Use o callback `ref` para gravar a referência do elemento
+  // text input nesta instancia (por exemplo, this.textInput).
     return (
       <input
         type="text"
@@ -188,17 +188,17 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-Then we can focus it elsewhere in our component when needed:
+Depois podemos colocar o foco quando for necessário:
 
  ```javascript
  focus() {
-   // Explicitly focus the text input using the raw DOM API
-   // Note: we're accessing "current" to get the DOM node
+   // Explicitamente devemos usar a DOM API nativa para colocar o foco
+   // Nota: estamos a aceder ao "current" para obter o elemento DOM
    this.textInput.current.focus();
  }
  ```
 
-Sometimes a parent component needs to set focus to an element in a child component. We can do this by [exposing DOM refs to parent components](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) through a special prop on the child component that forwards the parent's ref to the child's DOM node.
+Às vezes um componente pai precisa de colocar o foco a um elemento no componente filho. Podemos fazer isso [expondo as referências DOM aos componentes pais](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) através de uma `prop` especial no componente filho que encaminhe o componente pai ao elemento DOM do componente filho.
 
 ```javascript{4,12,16}
 function CustomTextInput(props) {
@@ -221,19 +221,18 @@ class Parent extends React.Component {
   }
 }
 
-// Now you can set focus when required.
+// Agora podemos colocar o foco quando for necessário.
 this.inputElement.current.focus();
 ```
 
-When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC does not implement ref forwarding, the above pattern can still be used as a fallback.
+Ao usar um HOC para estender componentes, é recomendado [encaminhar a ref](/docs/forwarding-refs.html) para o elemento embrulhado usando a função de React `forwardRef`. se um third party HOC  não implementar o `forwardRef`, o padrão acima pode ser usado como fallback.
 
-A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
-the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that initially triggered the modal.
+Um ótimo exemplo de controlar o foco é o [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Este é um exemplo relativamente raro de uma janela modal totalmente acessível. Não só coloca o foco inicial no botão de cancelar (prevenindo assim que o utilizador ative acidentalmente a ação de sucesso) mas também bloqueia o foco do teclado dentro da modal, e ainda reinicia o foco ao elemento que primeiramente acionou a modal.
 
->Note:
+>Nota:
 >
->While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
->users want to use applications.
+>Embora seja um recurso de acessibilidade muito importante, esta técnica deve ser usada de maneira criteriosa. Use-o para corrigir o comportamento do foco quando este está distorcido, e não para tentar
+>antecipar como os utilizadores querem usar a aplicação.
 
 ## Mouse and pointer events {#mouse-and-pointer-events}
 

From 729e6829d6d96e1c73052e3e18edbdc4077a4f45 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 15:20:07 +0000
Subject: [PATCH 08/46] WiP Mouse And Pointer Events Paragraph

---
 content/docs/accessibility.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index c1aa830ed..97148fda8 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -234,15 +234,15 @@ Um ótimo exemplo de controlar o foco é o [react-aria-modal](https://github.com
 >Embora seja um recurso de acessibilidade muito importante, esta técnica deve ser usada de maneira criteriosa. Use-o para corrigir o comportamento do foco quando este está distorcido, e não para tentar
 >antecipar como os utilizadores querem usar a aplicação.
 
-## Mouse and pointer events {#mouse-and-pointer-events}
+## Eventos do rato e cursor {#mouse-and-pointer-events}
 
-Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where keyboard users cannot use your application.
+Certifique-se de que todas as funcionalidades expostas atráves dos eventos do rato ou cursor também possam ser acedidas usando apenas o teclado. Se depender apenas no rato, vai haver muitos casos em que os utilizadores não consigam utilizar a sua aplicação.
 
-To illustrate this, let's look at a prolific example of broken accessibility caused by click events. This is the outside click pattern, where a user can disable an opened popover by clicking outside the element.
+Para ilustrar isto, abaixa pode ver um exemplo clássico de quebra da acessibilidade causada por um click. Este é o padrão de click externo, em que o utilizador pode desativar uma popover aberto ao carregar fora do elemento.
 
-<img src="../images/docs/outerclick-with-mouse.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with a mouse showing that the close action works." />
+<img src="../images/docs/outerclick-with-mouse.gif" alt="Um botão que abre uma lista popover implementada com um padrão de click externo e operado por um rato a mostrar quee a ação de fechar funciona." />
 
-This is typically implemented by attaching a `click` event to the `window` object that closes the popover:
+Isto geralmente é implementado ao anexar um evento `click` ao objeto `window` que fecha a popover:
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
@@ -293,11 +293,11 @@ class OuterClickExample extends React.Component {
 }
 ```
 
-This may work fine for users with pointer devices, such as a mouse, but operating this with the keyboard alone leads to broken functionality when tabbing to the next element as the `window` object never receives a `click` event. This can lead to obscured functionality which blocks users from using your application.
+Isso pode funcionar bem para os utilizadores com dispositivos com ponteiro, como por exemplo um rato, mas se for apenas com um teclado pode quebrar a funcionalidade ao utilizar o `tab` para o próximo elemento, sendo que o objecto `window` não recebe o evento `click`. Pode também levar a uma funcionalidade escondida que impede os utilizadores de utilizar a aplicação. 
 
-<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." />
+<img src="../images/docs/outerclick-with-keyboard.gif" alt="Um botão que abre uma lista popover implementada com um padrão de click externo e também com a possibilidade de ser operada apenas com o teclado." />
 
-The same functionality can be achieved by using appropriate event handlers instead, such as `onBlur` and `onFocus`:
+A mesma funcionalidade pode ser obtida com os eventos apropriados, como `onBlur` e `onFocus`:
 
 ```javascript{19-29,31-34,37-38,40-41}
 class BlurExample extends React.Component {

From c339ef16d4499f2e7afb229b5cf16460d1449ed6 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 16:41:15 +0000
Subject: [PATCH 09/46] Finish Mouse and Pointer Events

---
 content/docs/accessibility.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 97148fda8..359de4c18 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -318,10 +318,10 @@ class BlurExample extends React.Component {
     }));
   }
 
-  // We close the popover on the next tick by using setTimeout.
-  // This is necessary because we need to first check if
-  // another child of the element has received focus as
-  // the blur event fires prior to the new focus event.
+  // Fechamos a popover no proximo tick usando o setTimeout.
+  // É necessário porque precisamos primeiro de verificar o
+  // outro filho do elemento que recebeu o foco
+  // visto que o evento blue foi acionado antes do novo evento de foco.
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -330,14 +330,14 @@ class BlurExample extends React.Component {
     });
   }
 
-  // If a child receives focus, do not close the popover.
+  // Se o elemento filho receber foco, não fechamos a popover.
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
 
   render() {
-    // React assists us by bubbling the blur and
-    // focus events to the parent.
+    // O React ajuda-nos a cancelar o evento blur
+    // e a colocar o foco no elemento pai.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -359,11 +359,11 @@ class BlurExample extends React.Component {
 }
 ```
 
-This code exposes the functionality to both pointer device and keyboard users. Also note the added `aria-*` props to support screen-reader users. For simplicity's sake the keyboard events to enable `arrow key` interaction of the popover options have not been implemented.
+Este código expõe a funcionalidade para os utilizadores com dispositivos de cursor (rato) e teclado. Observe também as props `aria-*` adicionadas para suportar utilizadores com leitores de ecrã. Por motivos de simplificação as interações das `arrow keys` nas opções da popover não foram implementadas. 
 
-<img src="../images/docs/blur-popover-close.gif" alt="A popover list correctly closing for both mouse and keyboard users." />
+<img src="../images/docs/blur-popover-close.gif" alt="Uma lista popover correamente fechada com o rato e com o teclado." />
 
-This is one example of many cases where depending on only pointer and mouse events will break functionality for keyboard users. Always testing with the keyboard will immediately highlight the problem areas which can then be fixed by using keyboard aware event handlers.
+Este é um exemplo de muitos casos em que depender apenas dos eventos de cursor, pode quebrar a funcionalidade para os utilizadores de teclado. Deve ir testando sempre com o teclado porque vai realçar logo as áreas problemáticas que podem ser corrigidas usando os eventos de reconhecimento de teclado.
 
 ## More Complex Widgets {#more-complex-widgets}
 

From 9a8ebf3d73a2b0dcd65ffa129ab8e46c34e68753 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 19:35:50 +0000
Subject: [PATCH 10/46] Add More Complex Widgets

---
 content/docs/accessibility.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 359de4c18..583c9996f 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -365,14 +365,14 @@ Este código expõe a funcionalidade para os utilizadores com dispositivos de cu
 
 Este é um exemplo de muitos casos em que depender apenas dos eventos de cursor, pode quebrar a funcionalidade para os utilizadores de teclado. Deve ir testando sempre com o teclado porque vai realçar logo as áreas problemáticas que podem ser corrigidas usando os eventos de reconhecimento de teclado.
 
-## More Complex Widgets {#more-complex-widgets}
+## Widgets mais complexos {#more-complex-widgets}
 
-A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible, even the most complex widget can be coded accessibly.
+Uma experiencia de utilização mais complexa não significa que seja menos acessível. Considerando que a acessibilidade é alcançada mais facilmente se programado o mais proximo possivel do HTML, até mesmo o widget mais complexo pode ser programado de forma acessível.
 
-Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
-These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
+Aqui é necessário conhecimento de [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) bem como [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
+Estas são ferramentas com atrributos HTML que são totalmente suportadas em JSX e permitem construir componentes em React totalmente funcionais e totalmente acessíveis.
 
-Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
+Cada tipo de widget tem um design específico e espera-se que funcione de uma certa forma:
 
 - [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
 - [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)

From 372097e3b8a53e3799fb7ca34df63c5331961007 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 19:49:01 +0000
Subject: [PATCH 11/46] Update accessibility.md

---
 content/docs/accessibility.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 583c9996f..6c27305ea 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -378,21 +378,21 @@ Cada tipo de widget tem um design específico e espera-se que funcione de uma ce
 - [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
-## Other Points for Consideration {#other-points-for-consideration}
+## Outros pontos a ter em consideração {#other-points-for-consideration}
 
-### Setting the language {#setting-the-language}
+### Definir o idioma {#setting-the-language}
 
-Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
+Indique o idioma dos textos da página, pois o software de leitura de ecrã usa essa definição para escolher a voz correta:
 
 - [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
 
-### Setting the document title {#setting-the-document-title}
+### Definir o titulo do documento {#setting-the-document-title}
 
-Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
+Defina o `<title>` para descrever corretamente o conteúdo atual da página, pois isso garante que o utilizador tenha noção do contexto da página atual:
 
 - [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
+Podemos definir o titulo em React usando o [React Document Title Component](https://github.com/gaearon/react-document-title).
 
 ### Color contrast {#color-contrast}
 

From b0bcfe85893a86daa1128431e382dd2b4f5d7bec Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 20:26:34 +0000
Subject: [PATCH 12/46] Development and Testing Tools

---
 content/docs/accessibility.md | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 6c27305ea..bd94b728f 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -394,26 +394,27 @@ Defina o `<title>` para descrever corretamente o conteúdo atual da página, poi
 
 Podemos definir o titulo em React usando o [React Document Title Component](https://github.com/gaearon/react-document-title).
 
-### Color contrast {#color-contrast}
+### Contraste de Cor {#color-contrast}
 
 Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
+Certifique-se de que todo o texto  no site tem o contraste suficiente para ser legível por utilizadores com baixa visão:
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
+Pode ser um trabalho arduo calcular adequadamente todas as combinações de cores no website. Utilize ferramentas como o [Colorable](https://jxnblk.com/colorable/).
 
-Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
+As ferramentas aXe e WAVE mencionadas abaixo também incluem testes de contraste.
 
-If you want to extend your contrast testing abilities you can use these tools:
+Se quiser estender as suas habilidades de teste de contraste, pode usar estas ferramentas: 
 
 - [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
 
-## Development and Testing Tools {#development-and-testing-tools}
+## Ferramentas de Desenvolvimento e Testes {#development-and-testing-tools}
 
-There are a number of tools we can use to assist in the creation of accessible web applications.
+Existe várias ferramentas que pode usar para o ajudar na criação de aplicações web acessíveis.
 
 ### The keyboard {#the-keyboard}
 

From 398fc1610020005c4fc7ec7b4b5745c2b72be190 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 22:17:19 +0000
Subject: [PATCH 13/46] Add Testing Accessibility In The Browser Paragraph

---
 content/docs/accessibility.md | 47 +++++++++++++++++------------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index bd94b728f..172a6f719 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -416,24 +416,25 @@ Se quiser estender as suas habilidades de teste de contraste, pode usar estas fe
 
 Existe várias ferramentas que pode usar para o ajudar na criação de aplicações web acessíveis.
 
-### The keyboard {#the-keyboard}
+### Teclado {#the-keyboard}
 
 By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
+De longe o mais facil e também a verificação mais importante. Deve testar se todo o website pode ser utilizado apenas com o teclado, fazendo o seguinte:
 
-1. Disconnecting your mouse.
-1. Using `Tab` and `Shift+Tab` to browse.
-1. Using `Enter` to activate elements.
-1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
+1. Desconecte o rato.
+1. Use o `Tab` e o `Shift+Tab` para navegar.
+1. Use o `Enter` para clicar em elementos.
+1. Se necessário, use as setas do teclado e interaja com alguns elementos, como por exemplo menus e dropdowns.
 
-### Development assistance {#development-assistance}
+### Assistência ao desenvolvimento {#development-assistance}
 
-We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also have access to the following tool:
+Pode verificar algumas funcionalidades de acessibilidade diretamente no código JSX. Na maioria dos casos, os intellisense utilizados nos IDE's já fornecem verificações para os ARIA roles, estados e propriedades. Pode tambem usar as seguintes ferramentas:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
-The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many IDE's allow you to integrate these findings directly into code analysis and source code windows.
+O plugin [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) para o ESLint fornece feedback sobre o linting da AST em relação a problemas de acessibilidade no JSX. A maioria dos IDE's permite a integração dos resultados diretamente nas janelas de código.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules, you can create an `.eslintrc` file in the root of your project with this content:
+[Create React App](https://github.com/facebookincubator/create-react-app) tem este plugin com um subconjunto de regras já ativadas. Se quiser pode ainda adicionar mais regras de acessibilidade, adicionando o ficheiro `.eslintrc` na pasta root do seu projeto com o seguinte conteúdo:
 
   ```json
   {
@@ -442,39 +443,37 @@ The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y)
   }
   ```
 
-### Testing accessibility in the browser {#testing-accessibility-in-the-browser}
+### Testar acessibilidade no browser {#testing-accessibility-in-the-browser}
 
-A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
-test the technical accessibility of your HTML.
+Existem várias ferramentas que podem executar auditorias de acessibilidade nas páginas web no browser. Por favor, use-as em combinação com outros testes de acessibilidade, sendo que o browser só irá testar as acessibilidades do conteúdo HTML.
 
-#### aXe, aXe-core and react-axe {#axe-axe-core-and-react-axe}
+#### aXe, aXe-core e react-axe {#axe-axe-core-and-react-axe}
 
-Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
+Deque Systems oferece [aXe-core](https://github.com/dequelabs/axe-core) para testes de acessibilidade automatizados e testes end-to-end de acessibilidade nas suas aplicações. Este modúlo inclui integrações com o Selenium.
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
+[O Motor de Acessibilidade](https://www.deque.com/products/axe/) ou aXe, é uma extensão de browser desenvolvida com o `aXe-core`.
 
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+Pode tambem usar o modúlo [react-axe](https://github.com/dylanb/react-axe) para reportar todos os erros de acessibilidade encontados na consola durante o desenvolvimento e o debugging.
 
 #### WebAIM WAVE {#webaim-wave}
 
-The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
+O [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) é outra extensão de acessibilidade para o browser
 
-#### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
+#### Inspetores de Acessibilidade e Árvore de Acessibilidade {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
-to assistive technology, such as screen readers.
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) é um subconjunto da árvore DOM que contém objectos de acessibilidade para cada elemento DOM que deve ser disponibilidade para a tecnologia assistiva como os leitores de ecrã.
 
-In some browsers we can easily view the accessibility information for each element in the accessibility tree:
+Em alguns browsers podemos facilmente visualizar as informações de acessibilidade em cada elemento na árvore de acessibilidade:
 
 - [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
 - [Using the Accessibility Inspector in Chrome](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference#pane)
 - [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
 
-### Screen readers {#screen-readers}
+### Leitores de ecrã {#screen-readers}
 
-Testing with a screen reader should form part of your accessibility tests.
+Testar com um leitor de ecrã deve fazer parte dos testes de acessibilidade.
 
-Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
+Note que a combinação entre os browsers e os leitores de ecrã tem importância. É recomendado que teste a sua aplicação no browser mais adequando ao seu leitor de ecrã.
 
 ### Commonly Used Screen Readers {#commonly-used-screen-readers}
 

From d89466c915110761fd0d42513942e78d833846ee Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 22:38:49 +0000
Subject: [PATCH 14/46] Add Commonly Used Screen Readers

---
 content/docs/accessibility.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 172a6f719..ce5279e05 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -475,43 +475,43 @@ Testar com um leitor de ecrã deve fazer parte dos testes de acessibilidade.
 
 Note que a combinação entre os browsers e os leitores de ecrã tem importância. É recomendado que teste a sua aplicação no browser mais adequando ao seu leitor de ecrã.
 
-### Commonly Used Screen Readers {#commonly-used-screen-readers}
+### Leitores de ecrã mais comuns {#commonly-used-screen-readers}
 
-#### NVDA in Firefox {#nvda-in-firefox}
+#### NVDA no Firefox {#nvda-in-firefox}
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
+[NonVisual Desktop Access](https://www.nvaccess.org/) ou NVDA é um leitor de ecrã open source que é bastant utilizado.
 
-Refer to the following guides on how to best use NVDA:
+Consulte os seguintes guias de como usar o NVDA:
 
 - [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
 - [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
-#### VoiceOver in Safari {#voiceover-in-safari}
+#### VoiceOver no Safari {#voiceover-in-safari}
 
-VoiceOver is an integrated screen reader on Apple devices.
+VoiceOver é um leitor de ecrã integrado nos dispositivos da Apple.
 
-Refer to the following guides on how to activate and use VoiceOver:
+Consulte os seguintes guias sobre como ativar e utilizar o VoiceOver:
 
 - [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
 - [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
 - [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
-#### JAWS in Internet Explorer {#jaws-in-internet-explorer}
+#### JAWS no Internet Explorer {#jaws-in-internet-explorer}
 
-[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) ou JAWS, é um leitor de ecrã muito popular no sistema operativo Windows.
 
-Refer to the following guides on how to best use JAWS:
+Consulte os seguintes guias de como usar o JAWS:
 
 - [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
 - [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
-### Other Screen Readers {#other-screen-readers}
+### Outros Leitores de Ecrã {#other-screen-readers}
 
-#### ChromeVox in Google Chrome {#chromevox-in-google-chrome}
+#### ChromeVox no Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox](https://www.chromevox.com/) é um leitor de ecrã integrado no Chromebooks e está disponível como [extensão](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) para o Google Chrome.
 
-Refer to the following guides on how best to use ChromeVox:
+Consulte os seguintes guias de como usar o ChromeVox:
 
 - [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
 - [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)

From 65707dc8c46495c4cb041342ccd1fd43011fcdc0 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Fri, 13 Mar 2020 23:34:05 +0000
Subject: [PATCH 15/46] Fix typos

---
 content/docs/accessibility.md | 97 +++++++++++++++++------------------
 1 file changed, 48 insertions(+), 49 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index ce5279e05..406f997fe 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -6,11 +6,11 @@ permalink: docs/accessibility.html
 
 ## Porque Acessibilidade? {#why-accessibility}
 
-A acessibilidade na web (também conhecida por [** a11y **](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias assistivas interpretem as páginas da web.
+A acessibilidade na web (também conhecida por [** a11y **](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias de acessibilidade interpretem as páginas da web.
 
-O React suporta totalmente a construção de websites acessíveis, muitas vezes com apenas técnias de HTML padrão.
+O React suporta totalmente a construção de websites acessíveis, muitas vezes com apenas técnicas de HTML padrão.
 
-## Standards and Guidelines {#standards-and-guidelines}
+## Padrões e Diretrizes {#standards-and-guidelines}
 
 ### WCAG {#wcag}
 
@@ -26,7 +26,7 @@ As seguintes checklists das WCAG fornecem uma visão geral:
 
 O documento [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) contém as técnicas necessárias para criar widgets totalmente acessíveis.
 
-Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Apesar da maioria das proriedades e atributos do DOM no React serem em camelCase, estes atributos devem ser em hyphen-cased (tambem conhecido como kebab-case, lisp-case, etc) pois estão em HTML:
+Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Apesar da maioria das propriedades e atributos do DOM no React serem em camelCase, estes atributos devem ser em hyphen-cased (também conhecido como kebab-case, lisp-case, etc) pois estão em HTML:
 
 ```javascript{3,4}
 <input
@@ -40,11 +40,12 @@ Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Ape
 ```
 
 ## Semântica HTML {#semantic-html}
+
 A semântica é a base de uma aplicação web acessível. Se usarmos corretamente os elementos HTML para reforçar o significado da informação colocada nos nossos websites, muitas das vezes a acessibilidade pode ser gratuita.
 
 - [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 
-Às vezes, quebramos a semântica HTML para adicionar elementos `<div>` ao nosso JSX apenas para fazer funcionar no React, especialmente quando trabalharmos com listas (`<ol>`, `<ul>` and `<dl>`) e com `<table>`.
+Às vezes, quebramos a semântica HTML para adicionar elementos `<div>` ao nosso JSX apenas para fazer funcionar no React, especialmente quando trabalharmos com listas (`<ol>`, `<ul>` e `<dl>`) e com `<table>`.
 Nestes casos devemos usar [React Fragments](/docs/fragments.html) para agrupar vários elementos.
 
 Por exemplo,
@@ -72,7 +73,7 @@ function Glossary(props) {
 }
 ```
 
-Podemos mapear uma coleção de itens para um array de fragments tal como fariamos para qualquer outro tipo de elemento:
+Podemos mapear uma coleção de itens para um array de fragments tal como faríamos para qualquer outro tipo de elemento:
 
 ```javascript{6,9}
 function Glossary(props) {
@@ -90,7 +91,7 @@ function Glossary(props) {
 }
 ```
 
-Quando não é necessario passar propriedades para a tag Fragment podemos usar a [syntax curta](/docs/fragments.html#short-syntax), se a configuração suportar:
+Quando não é necessário passar propriedades para a tag Fragment podemos usar a [syntax curta](/docs/fragments.html#short-syntax), se a configuração suportar:
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -108,7 +109,7 @@ Para mais informação, veja a [documentação sobre Fragments](/docs/fragments.
 ## Formulários Acessíveis {#accessible-forms}
 
 ### Rótulos {#labeling}
-Todos os elementos de um formulário HTML como `<input>` e `<textarea>`, precisam de ser rótulados. É necessário fornecer rótulos descritivos pois estes são expostos aos leitores de ecrã.
+Todos os elementos de um formulário HTML como `<input>` e `<textarea>`, precisam de ser rotulados. É necessário fornecer rótulos descritivos pois estes são expostos aos leitores de ecrã.
 
 Os seguintes artigos mostram como os devemos aplicar:
 
@@ -125,46 +126,46 @@ Embora estas práticas HTML padrão possam ser usadas diretamente no React, obse
 
 ### Notificar erros ao utilizador {#notifying-the-user-of-errors}
 
-Situações de erro precisam de ser entendidas por todos os utilizadores. Os artigos seguintes mostam como export os erros aos leitores de ecrã:
+Situações de erro precisam de ser entendidas por todos os utilizadores. Os artigos seguintes mostram como exportar os erros aos leitores de ecrã:
 
 - [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
 - [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
 
-## Controlo de foco {#focus-control}
+## Controlo de focus {#focus-control}
 
 Certifique-se que a aplicação web possa ser utilizada apenas com o teclado:
 
 - [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 
-### Foco no teclado e foco no contorno {#keyboard-focus-and-focus-outline}
+### Focus no teclado e focus no contorno {#keyboard-focus-and-focus-outline}
 
-Foco no teclado refere-se ao elemento DOM que foi selecionado e que aceita ações do teclado. Podemos ver o contorno na imagem a seguir:
+Focus no teclado refere-se ao elemento DOM que foi selecionado e que aceita ações do teclado. Podemos ver o contorno na imagem a seguir:
 
 <img src="../images/docs/keyboard-focus.png" alt="Contorno azul à volta da ligação selecionada." />
 
-Apenas use CSS que elimine este contorno, por exemplo definindo `outline: 0`, se for substituir por outra implementação de foco.
+Apenas use CSS que elimine este contorno, por exemplo definindo `outline: 0`, se for substituir por outra implementação de focus.
 
-### Mecanismos para avançar para o conteudo desejado {#mechanisms-to-skip-to-desired-content}
+### Mecanismos para avançar para o conteúdo desejado {#mechanisms-to-skip-to-desired-content}
 
-Providencie mecanismos para permitir que os utilizadores consigam ignorar as secções de navegação, acelarando assim a navegação com o teclado.
+Providencie mecanismos para permitir que os utilizadores consigam ignorar as secções de navegação, acelerando assim a navegação com o teclado.
 
-Skiplinks ou Skip Navigation Links são ligações escondidos que só ficam visiveis quando os utilizadores de teclado interagem com a página. São muito fáceis de implementar com alguns estilos e âncoras:
+Skiplinks ou Skip Navigation Links são ligações escondidos que só ficam visíveis quando os utilizadores de teclado interagem com a página. São muito fáceis de implementar com alguns estilos e âncoras:
 
 - [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
-Use também elementos e pontos de referência como `<main>` e `<aside>`, para demarcar zonas da página, sendo que as tecnologias de acessibilidade permitem assim que o utilizador navege rapidamente nessas seções.
+Use também elementos e pontos de referência como `<main>` e `<aside>`, para demarcar zonas da página, sendo que as tecnologias de acessibilidade permitem assim que o utilizador navegue rapidamente nessas secções.
 
 Saiba mais sobre o uso destes elementos para melhorar a acessibilidade aqui:
 
 - [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
-### Controlar programaticamente o foco {#programmatically-managing-focus}
+### Controlar programaticamente o focus {#programmatically-managing-focus}
 
-As nossas aplicações React modificam continuamente o HTML DOM durante o tempo de execução, às vezes perdendo o foco do teclado ou adicionado o foco a um elemento inesperado. Para corrigir isso, é necessário programar o foco do teclado na direção certo. Por exemplo, colocar o foco do teclado no botão que faz abrir uma modal depois dessa mesma modal ser fechada.
+As nossas aplicações React modificam continuamente o HTML DOM durante o tempo de execução, às vezes perdendo o focus do teclado ou adicionado o focus a um elemento inesperado. Para corrigir isso, é necessário programar o focus do teclado na direção certo. Por exemplo, colocar o focus do teclado no botão que faz abrir uma modal depois dessa mesma modal ser fechada.
 
 Pode encontrar mais informações de como implementar no MDN Web Docs [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
-Para colocar o foco no React, podemos usar [Refs para elementos no DOM](/docs/refs-and-the-dom.html).
+Para colocar o focus no React, podemos usar [Refs para elementos no DOM](/docs/refs-and-the-dom.html).
 
 Desta maneira, em primeiro lugar no componente de JSX criamos a referência:
 
@@ -177,7 +178,7 @@ class CustomTextInput extends React.Component {
   }
   render() {
   // Use o callback `ref` para gravar a referência do elemento
-  // text input nesta instancia (por exemplo, this.textInput).
+  // text input nesta instância (por exemplo, this.textInput).
     return (
       <input
         type="text"
@@ -188,17 +189,17 @@ class CustomTextInput extends React.Component {
 }
 ```
 
-Depois podemos colocar o foco quando for necessário:
+Depois podemos colocar o focus quando for necessário:
 
  ```javascript
  focus() {
-   // Explicitamente devemos usar a DOM API nativa para colocar o foco
+   // Explicitamente devemos usar a DOM API nativa para colocar o focus
    // Nota: estamos a aceder ao "current" para obter o elemento DOM
    this.textInput.current.focus();
  }
  ```
 
-Às vezes um componente pai precisa de colocar o foco a um elemento no componente filho. Podemos fazer isso [expondo as referências DOM aos componentes pais](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) através de uma `prop` especial no componente filho que encaminhe o componente pai ao elemento DOM do componente filho.
+Às vezes um componente pai precisa de colocar o focus a um elemento no componente filho. Podemos fazer isso [expondo as referências DOM aos componentes pais](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components) através de uma `prop` especial no componente filho que encaminhe o componente pai ao elemento DOM do componente filho.
 
 ```javascript{4,12,16}
 function CustomTextInput(props) {
@@ -221,26 +222,26 @@ class Parent extends React.Component {
   }
 }
 
-// Agora podemos colocar o foco quando for necessário.
+// Agora podemos colocar o focus quando for necessário.
 this.inputElement.current.focus();
 ```
 
 Ao usar um HOC para estender componentes, é recomendado [encaminhar a ref](/docs/forwarding-refs.html) para o elemento embrulhado usando a função de React `forwardRef`. se um third party HOC  não implementar o `forwardRef`, o padrão acima pode ser usado como fallback.
 
-Um ótimo exemplo de controlar o foco é o [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Este é um exemplo relativamente raro de uma janela modal totalmente acessível. Não só coloca o foco inicial no botão de cancelar (prevenindo assim que o utilizador ative acidentalmente a ação de sucesso) mas também bloqueia o foco do teclado dentro da modal, e ainda reinicia o foco ao elemento que primeiramente acionou a modal.
+Um ótimo exemplo de controlar o focus é o [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Este é um exemplo relativamente raro de uma janela modal totalmente acessível. Não só coloca o focus inicial no botão de cancelar (prevenindo assim que o utilizador ative acidentalmente a ação de sucesso) mas também bloqueia o focus do teclado dentro da modal, e ainda reinicia o focus ao elemento que primeiramente acionou a modal.
 
 >Nota:
 >
->Embora seja um recurso de acessibilidade muito importante, esta técnica deve ser usada de maneira criteriosa. Use-o para corrigir o comportamento do foco quando este está distorcido, e não para tentar
+>Embora seja um recurso de acessibilidade muito importante, esta técnica deve ser usada de maneira criteriosa. Use-o para corrigir o comportamento do focus quando este está distorcido, e não para tentar
 >antecipar como os utilizadores querem usar a aplicação.
 
 ## Eventos do rato e cursor {#mouse-and-pointer-events}
 
-Certifique-se de que todas as funcionalidades expostas atráves dos eventos do rato ou cursor também possam ser acedidas usando apenas o teclado. Se depender apenas no rato, vai haver muitos casos em que os utilizadores não consigam utilizar a sua aplicação.
+Certifique-se de que todas as funcionalidades expostas através dos eventos do rato ou cursor também possam ser acedidas usando apenas o teclado. Se depender apenas no rato, vai haver muitos casos em que os utilizadores não consigam utilizar a sua aplicação.
 
 Para ilustrar isto, abaixa pode ver um exemplo clássico de quebra da acessibilidade causada por um click. Este é o padrão de click externo, em que o utilizador pode desativar uma popover aberto ao carregar fora do elemento.
 
-<img src="../images/docs/outerclick-with-mouse.gif" alt="Um botão que abre uma lista popover implementada com um padrão de click externo e operado por um rato a mostrar quee a ação de fechar funciona." />
+<img src="../images/docs/outerclick-with-mouse.gif" alt="Um botão que abre uma lista popover implementada com um padrão de click externo e operado por um rato a mostrar que a ação de fechar funciona." />
 
 Isto geralmente é implementado ao anexar um evento `click` ao objeto `window` que fecha a popover:
 
@@ -293,7 +294,7 @@ class OuterClickExample extends React.Component {
 }
 ```
 
-Isso pode funcionar bem para os utilizadores com dispositivos com ponteiro, como por exemplo um rato, mas se for apenas com um teclado pode quebrar a funcionalidade ao utilizar o `tab` para o próximo elemento, sendo que o objecto `window` não recebe o evento `click`. Pode também levar a uma funcionalidade escondida que impede os utilizadores de utilizar a aplicação. 
+Isso pode funcionar bem para os utilizadores com dispositivos com ponteiro como, por exemplo um rato, mas se for apenas com um teclado pode quebrar a funcionalidade ao utilizar o `tab` para o próximo elemento, sendo que o objecto `window` não recebe o evento `click`. Pode também levar a uma funcionalidade escondida que impede os utilizadores de utilizar a aplicação. 
 
 <img src="../images/docs/outerclick-with-keyboard.gif" alt="Um botão que abre uma lista popover implementada com um padrão de click externo e também com a possibilidade de ser operada apenas com o teclado." />
 
@@ -320,8 +321,8 @@ class BlurExample extends React.Component {
 
   // Fechamos a popover no proximo tick usando o setTimeout.
   // É necessário porque precisamos primeiro de verificar o
-  // outro filho do elemento que recebeu o foco
-  // visto que o evento blue foi acionado antes do novo evento de foco.
+  // outro filho do elemento que recebeu o focus
+  // visto que o evento blur foi acionado antes do novo evento de focus.
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -330,14 +331,14 @@ class BlurExample extends React.Component {
     });
   }
 
-  // Se o elemento filho receber foco, não fechamos a popover.
+  // Se o elemento filho receber focus, não fechamos a popover.
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
 
   render() {
     // O React ajuda-nos a cancelar o evento blur
-    // e a colocar o foco no elemento pai.
+    // e a colocar o focus no elemento pai.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -361,16 +362,16 @@ class BlurExample extends React.Component {
 
 Este código expõe a funcionalidade para os utilizadores com dispositivos de cursor (rato) e teclado. Observe também as props `aria-*` adicionadas para suportar utilizadores com leitores de ecrã. Por motivos de simplificação as interações das `arrow keys` nas opções da popover não foram implementadas. 
 
-<img src="../images/docs/blur-popover-close.gif" alt="Uma lista popover correamente fechada com o rato e com o teclado." />
+<img src="../images/docs/blur-popover-close.gif" alt="Uma lista popover corretamente fechada com o rato e com o teclado." />
 
 Este é um exemplo de muitos casos em que depender apenas dos eventos de cursor, pode quebrar a funcionalidade para os utilizadores de teclado. Deve ir testando sempre com o teclado porque vai realçar logo as áreas problemáticas que podem ser corrigidas usando os eventos de reconhecimento de teclado.
 
 ## Widgets mais complexos {#more-complex-widgets}
 
-Uma experiencia de utilização mais complexa não significa que seja menos acessível. Considerando que a acessibilidade é alcançada mais facilmente se programado o mais proximo possivel do HTML, até mesmo o widget mais complexo pode ser programado de forma acessível.
+Uma experiência de utilização mais complexa não significa que seja menos acessível. Considerando que a acessibilidade é alcançada mais facilmente se programado o mais próximo possível do HTML, até mesmo o widget mais complexo pode ser programado de forma acessível.
 
 Aqui é necessário conhecimento de [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) bem como [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
-Estas são ferramentas com atrributos HTML que são totalmente suportadas em JSX e permitem construir componentes em React totalmente funcionais e totalmente acessíveis.
+Estas são ferramentas com atributos HTML que são totalmente suportadas em JSX e permitem construir componentes em React totalmente funcionais e totalmente acessíveis.
 
 Cada tipo de widget tem um design específico e espera-se que funcione de uma certa forma:
 
@@ -392,18 +393,17 @@ Defina o `<title>` para descrever corretamente o conteúdo atual da página, poi
 
 - [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-Podemos definir o titulo em React usando o [React Document Title Component](https://github.com/gaearon/react-document-title).
+Podemos definir o título em React usando o [React Document Title Component](https://github.com/gaearon/react-document-title).
 
 ### Contraste de Cor {#color-contrast}
 
-Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
-Certifique-se de que todo o texto  no site tem o contraste suficiente para ser legível por utilizadores com baixa visão:
+Certifique-se de que todo o texto no site tem o contraste suficiente para ser legível por utilizadores com baixa visão:
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-Pode ser um trabalho arduo calcular adequadamente todas as combinações de cores no website. Utilize ferramentas como o [Colorable](https://jxnblk.com/colorable/).
+Pode ser um trabalho árduo calcular adequadamente todas as combinações de cores no website. Utilize ferramentas como o [Colorable](https://jxnblk.com/colorable/).
 
 As ferramentas aXe e WAVE mencionadas abaixo também incluem testes de contraste.
 
@@ -418,17 +418,16 @@ Existe várias ferramentas que pode usar para o ajudar na criação de aplicaç
 
 ### Teclado {#the-keyboard}
 
-By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
-De longe o mais facil e também a verificação mais importante. Deve testar se todo o website pode ser utilizado apenas com o teclado, fazendo o seguinte:
+De longe o mais fácil e também a verificação mais importante. Deve testar se todo o website pode ser utilizado apenas com o teclado, fazendo o seguinte:
 
 1. Desconecte o rato.
 1. Use o `Tab` e o `Shift+Tab` para navegar.
 1. Use o `Enter` para clicar em elementos.
-1. Se necessário, use as setas do teclado e interaja com alguns elementos, como por exemplo menus e dropdowns.
+1. Se necessário, use as setas do teclado e interaja com alguns elementos como, por exemplo menus e dropdowns.
 
 ### Assistência ao desenvolvimento {#development-assistance}
 
-Pode verificar algumas funcionalidades de acessibilidade diretamente no código JSX. Na maioria dos casos, os intellisense utilizados nos IDE's já fornecem verificações para os ARIA roles, estados e propriedades. Pode tambem usar as seguintes ferramentas:
+Pode verificar algumas funcionalidades de acessibilidade diretamente no código JSX. Na maioria dos casos, os intellisense utilizados nos IDE's já fornecem verificações para os ARIA roles, estados e propriedades. Pode também usar as seguintes ferramentas:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 
@@ -453,15 +452,15 @@ Deque Systems oferece [aXe-core](https://github.com/dequelabs/axe-core) para tes
 
 [O Motor de Acessibilidade](https://www.deque.com/products/axe/) ou aXe, é uma extensão de browser desenvolvida com o `aXe-core`.
 
-Pode tambem usar o modúlo [react-axe](https://github.com/dylanb/react-axe) para reportar todos os erros de acessibilidade encontados na consola durante o desenvolvimento e o debugging.
+Pode também usar o modulo [react-axe](https://github.com/dylanb/react-axe) para reportar todos os erros de acessibilidade encontrados na consola durante o desenvolvimento e o debugging.
 
 #### WebAIM WAVE {#webaim-wave}
 
-O [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) é outra extensão de acessibilidade para o browser
+O [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) é outra extensão de acessibilidade para o browser.
 
 #### Inspetores de Acessibilidade e Árvore de Acessibilidade {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) é um subconjunto da árvore DOM que contém objectos de acessibilidade para cada elemento DOM que deve ser disponibilidade para a tecnologia assistiva como os leitores de ecrã.
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) é um subconjunto da árvore DOM que contém objetos de acessibilidade para cada elemento DOM que deve ser disponibilidade para a tecnologia assistida como os leitores de ecrã.
 
 Em alguns browsers podemos facilmente visualizar as informações de acessibilidade em cada elemento na árvore de acessibilidade:
 
@@ -479,7 +478,7 @@ Note que a combinação entre os browsers e os leitores de ecrã tem importânci
 
 #### NVDA no Firefox {#nvda-in-firefox}
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) ou NVDA é um leitor de ecrã open source que é bastant utilizado.
+[NonVisual Desktop Access](https://www.nvaccess.org/) ou NVDA é um leitor de ecrã open source que é bastante utilizado.
 
 Consulte os seguintes guias de como usar o NVDA:
 

From b946b661ef4d3995bfce9eb8b1c77eb6bb31d5d8 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:25:46 +0100
Subject: [PATCH 16/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 406f997fe..1baeab974 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -319,7 +319,7 @@ class BlurExample extends React.Component {
     }));
   }
 
-  // Fechamos a popover no proximo tick usando o setTimeout.
+  // Fechamos a popover no próximo tick usando o setTimeout.
   // É necessário porque precisamos primeiro de verificar o
   // outro filho do elemento que recebeu o focus
   // visto que o evento blur foi acionado antes do novo evento de focus.

From 7233810a7ac4b59dfff1e57f55f46f3287ac952d Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:26:55 +0100
Subject: [PATCH 17/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 1baeab974..48917b2ec 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -364,7 +364,7 @@ Este código expõe a funcionalidade para os utilizadores com dispositivos de cu
 
 <img src="../images/docs/blur-popover-close.gif" alt="Uma lista popover corretamente fechada com o rato e com o teclado." />
 
-Este é um exemplo de muitos casos em que depender apenas dos eventos de cursor, pode quebrar a funcionalidade para os utilizadores de teclado. Deve ir testando sempre com o teclado porque vai realçar logo as áreas problemáticas que podem ser corrigidas usando os eventos de reconhecimento de teclado.
+Este é um exemplo de muitos casos em que depender apenas dos eventos de cursor, pode quebrar a funcionalidade para os utilizadores de teclado. Deve-se ir testando sempre com o teclado para realçar imediatamente as áreas problemáticas que podem ser corrigidas usando os eventos de reconhecimento de teclado.
 
 ## Widgets mais complexos {#more-complex-widgets}
 

From f8b9b8016a1fa7ef154f5a3d00b6a0889ddc4185 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:28:06 +0100
Subject: [PATCH 18/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 48917b2ec..9d263bda4 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -418,7 +418,7 @@ Existe várias ferramentas que pode usar para o ajudar na criação de aplicaç
 
 ### Teclado {#the-keyboard}
 
-De longe o mais fácil e também a verificação mais importante. Deve testar se todo o website pode ser utilizado apenas com o teclado, fazendo o seguinte:
+A verificação mais fácil e também mais importante é testar todo o teu website para verificar se pode ser utilizado apenas com o teclado, fazendo o seguinte:
 
 1. Desconecte o rato.
 1. Use o `Tab` e o `Shift+Tab` para navegar.

From 5fcf79435791bc6f958fe5d8e9a527deed071032 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:28:33 +0100
Subject: [PATCH 19/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 9d263bda4..8211de0f7 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -147,7 +147,7 @@ Apenas use CSS que elimine este contorno, por exemplo definindo `outline: 0`, se
 
 ### Mecanismos para avançar para o conteúdo desejado {#mechanisms-to-skip-to-desired-content}
 
-Providencie mecanismos para permitir que os utilizadores consigam ignorar as secções de navegação, acelerando assim a navegação com o teclado.
+Providencia mecanismos para permitir que os utilizadores consigam ignorar as secções de navegação, acelerando assim a navegação com o teclado.
 
 Skiplinks ou Skip Navigation Links são ligações escondidos que só ficam visíveis quando os utilizadores de teclado interagem com a página. São muito fáceis de implementar com alguns estilos e âncoras:
 

From 2d498dd28773ddd64ef361d5f0cb267ae905e24b Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:28:42 +0100
Subject: [PATCH 20/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 8211de0f7..d0597416d 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -163,7 +163,7 @@ Saiba mais sobre o uso destes elementos para melhorar a acessibilidade aqui:
 
 As nossas aplicações React modificam continuamente o HTML DOM durante o tempo de execução, às vezes perdendo o focus do teclado ou adicionado o focus a um elemento inesperado. Para corrigir isso, é necessário programar o focus do teclado na direção certo. Por exemplo, colocar o focus do teclado no botão que faz abrir uma modal depois dessa mesma modal ser fechada.
 
-Pode encontrar mais informações de como implementar no MDN Web Docs [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+Podes encontrar mais informações de como implementar no MDN Web Docs [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
 
 Para colocar o focus no React, podemos usar [Refs para elementos no DOM](/docs/refs-and-the-dom.html).
 

From bc215cb0f870fe7bd1f98f7de7f1eaf902bf2c05 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:29:06 +0100
Subject: [PATCH 21/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index d0597416d..3e1ae7811 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -226,7 +226,7 @@ class Parent extends React.Component {
 this.inputElement.current.focus();
 ```
 
-Ao usar um HOC para estender componentes, é recomendado [encaminhar a ref](/docs/forwarding-refs.html) para o elemento embrulhado usando a função de React `forwardRef`. se um third party HOC  não implementar o `forwardRef`, o padrão acima pode ser usado como fallback.
+Ao usar um HOC para estender componentes, é recomendado [encaminhar a ref](/docs/forwarding-refs.html) para o elemento embrulhado usando a função de React `forwardRef`. Se um HOC de terceiros não implementar o `forwardRef`, o padrão acima pode ser usado como fallback.
 
 Um ótimo exemplo de controlar o focus é o [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Este é um exemplo relativamente raro de uma janela modal totalmente acessível. Não só coloca o focus inicial no botão de cancelar (prevenindo assim que o utilizador ative acidentalmente a ação de sucesso) mas também bloqueia o focus do teclado dentro da modal, e ainda reinicia o focus ao elemento que primeiramente acionou a modal.
 

From 130a1ecb180ac8523d3422b1d06cf9200ecf4564 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:29:13 +0100
Subject: [PATCH 22/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 3e1ae7811..b472a59d5 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -153,7 +153,7 @@ Skiplinks ou Skip Navigation Links são ligações escondidos que só ficam vis
 
 - [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
-Use também elementos e pontos de referência como `<main>` e `<aside>`, para demarcar zonas da página, sendo que as tecnologias de acessibilidade permitem assim que o utilizador navegue rapidamente nessas secções.
+Usa também elementos e pontos de referência como `<main>` e `<aside>`, para demarcar zonas da página, sendo que as tecnologias de acessibilidade permitem assim que o utilizador navegue rapidamente nessas secções.
 
 Saiba mais sobre o uso destes elementos para melhorar a acessibilidade aqui:
 

From c5a8ad1e886045ecaca301eed8b6bae1edaa58b7 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:29:22 +0100
Subject: [PATCH 23/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index b472a59d5..5cdb77d0f 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -143,7 +143,7 @@ Focus no teclado refere-se ao elemento DOM que foi selecionado e que aceita aç
 
 <img src="../images/docs/keyboard-focus.png" alt="Contorno azul à volta da ligação selecionada." />
 
-Apenas use CSS que elimine este contorno, por exemplo definindo `outline: 0`, se for substituir por outra implementação de focus.
+Usa apenas CSS que elimine este contorno, por exemplo definindo `outline: 0`, se for substituir por outra implementação de focus.
 
 ### Mecanismos para avançar para o conteúdo desejado {#mechanisms-to-skip-to-desired-content}
 

From 0920047805a5d790c4cf9448e50a8864f7e69eb4 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:29:59 +0100
Subject: [PATCH 24/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 5cdb77d0f..49185a8a0 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -433,7 +433,7 @@ Pode verificar algumas funcionalidades de acessibilidade diretamente no código
 
 O plugin [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) para o ESLint fornece feedback sobre o linting da AST em relação a problemas de acessibilidade no JSX. A maioria dos IDE's permite a integração dos resultados diretamente nas janelas de código.
 
-[Create React App](https://github.com/facebookincubator/create-react-app) tem este plugin com um subconjunto de regras já ativadas. Se quiser pode ainda adicionar mais regras de acessibilidade, adicionando o ficheiro `.eslintrc` na pasta root do seu projeto com o seguinte conteúdo:
+[Create React App](https://github.com/facebookincubator/create-react-app) tem este plugin com um subconjunto de regras já ativadas. Se quiser pode ainda adicionar mais regras de acessibilidade, adicionando o ficheiro `.eslintrc` na pasta raíz do seu projeto com o seguinte conteúdo:
 
   ```json
   {

From 10a34a079cf07f32e7f156c5daafc0b17c4f137f Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:30:22 +0100
Subject: [PATCH 25/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 49185a8a0..ae10b2d9f 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -133,7 +133,7 @@ Situações de erro precisam de ser entendidas por todos os utilizadores. Os art
 
 ## Controlo de focus {#focus-control}
 
-Certifique-se que a aplicação web possa ser utilizada apenas com o teclado:
+Certifica-te que a aplicação web possa ser utilizada apenas com o teclado:
 
 - [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 

From 3ba204a6cde720c8470477e785ce4e6cb1d03b40 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:30:49 +0100
Subject: [PATCH 26/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index ae10b2d9f..eb8f12703 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -452,7 +452,7 @@ Deque Systems oferece [aXe-core](https://github.com/dequelabs/axe-core) para tes
 
 [O Motor de Acessibilidade](https://www.deque.com/products/axe/) ou aXe, é uma extensão de browser desenvolvida com o `aXe-core`.
 
-Pode também usar o modulo [react-axe](https://github.com/dylanb/react-axe) para reportar todos os erros de acessibilidade encontrados na consola durante o desenvolvimento e o debugging.
+Podes também usar o módulo [react-axe](https://github.com/dylanb/react-axe) para reportar todos os erros de acessibilidade encontrados na consola durante o desenvolvimento e a depuração.
 
 #### WebAIM WAVE {#webaim-wave}
 

From fe2830003023816505aed909d9a48dcf90730343 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:31:10 +0100
Subject: [PATCH 27/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index eb8f12703..c784b3be5 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -26,7 +26,7 @@ As seguintes checklists das WCAG fornecem uma visão geral:
 
 O documento [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) contém as técnicas necessárias para criar widgets totalmente acessíveis.
 
-Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Apesar da maioria das propriedades e atributos do DOM no React serem em camelCase, estes atributos devem ser em hyphen-cased (também conhecido como kebab-case, lisp-case, etc) pois estão em HTML:
+Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Apesar da maioria das propriedades e atributos do DOM no React serem em camelCase, estes atributos devem ser em hyphen-case (também conhecido como kebab-case, lisp-case, etc) pois estão em HTML:
 
 ```javascript{3,4}
 <input

From 5bdf8befa03ae2767c3c2bfc53b836d26b942227 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:32:28 +0100
Subject: [PATCH 28/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index c784b3be5..03e6a3de3 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -237,7 +237,7 @@ Um ótimo exemplo de controlar o focus é o [react-aria-modal](https://github.co
 
 ## Eventos do rato e cursor {#mouse-and-pointer-events}
 
-Certifique-se de que todas as funcionalidades expostas através dos eventos do rato ou cursor também possam ser acedidas usando apenas o teclado. Se depender apenas no rato, vai haver muitos casos em que os utilizadores não consigam utilizar a sua aplicação.
+Certifique-se de que todas as funcionalidades expostas através dos eventos do rato ou cursor também possam ser acedidas usando apenas o teclado. Se depender apenas no rato, vai haver muitos casos em que os utilizadores não consigam utilizar a tua aplicação.
 
 Para ilustrar isto, abaixa pode ver um exemplo clássico de quebra da acessibilidade causada por um click. Este é o padrão de click externo, em que o utilizador pode desativar uma popover aberto ao carregar fora do elemento.
 

From 7e784f5c08adbd8ec2a29a5710fa098209a729a4 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:32:59 +0100
Subject: [PATCH 29/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 03e6a3de3..0961e07f6 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -294,7 +294,7 @@ class OuterClickExample extends React.Component {
 }
 ```
 
-Isso pode funcionar bem para os utilizadores com dispositivos com ponteiro como, por exemplo um rato, mas se for apenas com um teclado pode quebrar a funcionalidade ao utilizar o `tab` para o próximo elemento, sendo que o objecto `window` não recebe o evento `click`. Pode também levar a uma funcionalidade escondida que impede os utilizadores de utilizar a aplicação. 
+Isso pode funcionar bem para os utilizadores com dispositivos com ponteiro como, por exemplo um rato, mas se for apenas com um teclado pode quebrar a funcionalidade ao utilizar o `tab` para o próximo elemento, sendo que o objecto `window` não recebe o evento `click`. Pode também levar a uma funcionalidade escondida que impede os utilizadores de utilizar a tua aplicação. 
 
 <img src="../images/docs/outerclick-with-keyboard.gif" alt="Um botão que abre uma lista popover implementada com um padrão de click externo e também com a possibilidade de ser operada apenas com o teclado." />
 

From 22db32aab0d3e65091b0c12d9e75759cd01bcf39 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:33:15 +0100
Subject: [PATCH 30/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 0961e07f6..4c36e592a 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -397,7 +397,7 @@ Podemos definir o título em React usando o [React Document Title Component](htt
 
 ### Contraste de Cor {#color-contrast}
 
-Certifique-se de que todo o texto no site tem o contraste suficiente para ser legível por utilizadores com baixa visão:
+Certifica-te de que todo o texto no site tem o contraste suficiente para ser legível por utilizadores com baixa visão:
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)

From 49406c2e2fc3d23e05a904235a6273384c0060a2 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:33:33 +0100
Subject: [PATCH 31/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 4c36e592a..363229565 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -403,7 +403,7 @@ Certifica-te de que todo o texto no site tem o contraste suficiente para ser leg
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-Pode ser um trabalho árduo calcular adequadamente todas as combinações de cores no website. Utilize ferramentas como o [Colorable](https://jxnblk.com/colorable/).
+Pode ser um trabalho árduo calcular adequadamente todas as combinações de cores no website. Usa ferramentas como o [Colorable](https://jxnblk.com/colorable/).
 
 As ferramentas aXe e WAVE mencionadas abaixo também incluem testes de contraste.
 

From 0e5aad64eb3cf83864fb83f2c655b1c1816d7058 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:33:47 +0100
Subject: [PATCH 32/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 363229565..8e961301a 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -407,7 +407,7 @@ Pode ser um trabalho árduo calcular adequadamente todas as combinações de cor
 
 As ferramentas aXe e WAVE mencionadas abaixo também incluem testes de contraste.
 
-Se quiser estender as suas habilidades de teste de contraste, pode usar estas ferramentas: 
+Se tu quiseres estender as suas habilidades de teste de contraste, podes usar estas ferramentas: 
 
 - [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)

From bf11038ca3296ac4b77b68ab2b0d6317d27bcb6e Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:34:00 +0100
Subject: [PATCH 33/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 8e961301a..43b3b3688 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -420,7 +420,7 @@ Existe várias ferramentas que pode usar para o ajudar na criação de aplicaç
 
 A verificação mais fácil e também mais importante é testar todo o teu website para verificar se pode ser utilizado apenas com o teclado, fazendo o seguinte:
 
-1. Desconecte o rato.
+1. Desconecta o rato.
 1. Use o `Tab` e o `Shift+Tab` para navegar.
 1. Use o `Enter` para clicar em elementos.
 1. Se necessário, use as setas do teclado e interaja com alguns elementos como, por exemplo menus e dropdowns.

From 9e2d9c1152162bbad9361656349194a90b84a927 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:34:14 +0100
Subject: [PATCH 34/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 43b3b3688..a1982b73d 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -421,7 +421,7 @@ Existe várias ferramentas que pode usar para o ajudar na criação de aplicaç
 A verificação mais fácil e também mais importante é testar todo o teu website para verificar se pode ser utilizado apenas com o teclado, fazendo o seguinte:
 
 1. Desconecta o rato.
-1. Use o `Tab` e o `Shift+Tab` para navegar.
+1. Usa o `Tab` e o `Shift+Tab` para navegar.
 1. Use o `Enter` para clicar em elementos.
 1. Se necessário, use as setas do teclado e interaja com alguns elementos como, por exemplo menus e dropdowns.
 

From e38be329be38f6ca46ddee6facf3e1d12b6f7977 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:34:29 +0100
Subject: [PATCH 35/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index a1982b73d..8fc85ed26 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -422,7 +422,7 @@ A verificação mais fácil e também mais importante é testar todo o teu websi
 
 1. Desconecta o rato.
 1. Usa o `Tab` e o `Shift+Tab` para navegar.
-1. Use o `Enter` para clicar em elementos.
+1. Usa o `Enter` para clicar em elementos.
 1. Se necessário, use as setas do teclado e interaja com alguns elementos como, por exemplo menus e dropdowns.
 
 ### Assistência ao desenvolvimento {#development-assistance}

From 366a2e349f0746379726346e6fc988e675c69281 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:34:50 +0100
Subject: [PATCH 36/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 8fc85ed26..4fe3e2004 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -423,7 +423,7 @@ A verificação mais fácil e também mais importante é testar todo o teu websi
 1. Desconecta o rato.
 1. Usa o `Tab` e o `Shift+Tab` para navegar.
 1. Usa o `Enter` para clicar em elementos.
-1. Se necessário, use as setas do teclado e interaja com alguns elementos como, por exemplo menus e dropdowns.
+1. Se necessário, usa as setas do teclado e interaja com alguns elementos como, por exemplo menus e dropdowns.
 
 ### Assistência ao desenvolvimento {#development-assistance}
 

From 4135d063478198485559d26d19047f64ec92c23d Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:35:13 +0100
Subject: [PATCH 37/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 4fe3e2004..7c3cf0d11 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -427,7 +427,7 @@ A verificação mais fácil e também mais importante é testar todo o teu websi
 
 ### Assistência ao desenvolvimento {#development-assistance}
 
-Pode verificar algumas funcionalidades de acessibilidade diretamente no código JSX. Na maioria dos casos, os intellisense utilizados nos IDE's já fornecem verificações para os ARIA roles, estados e propriedades. Pode também usar as seguintes ferramentas:
+Podemos verificar algumas funcionalidades de acessibilidade diretamente no código JSX. Na maioria dos casos, os intellisense utilizados nos IDE's já fornecem verificações para os ARIA roles, estados e propriedades. Podemos também usar as seguintes ferramentas:
 
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
 

From 19c071905ae0fc0d4e8e8cbc9e23a2f2addf29a6 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:35:37 +0100
Subject: [PATCH 38/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 7c3cf0d11..881f64912 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -444,7 +444,7 @@ O plugin [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a
 
 ### Testar acessibilidade no browser {#testing-accessibility-in-the-browser}
 
-Existem várias ferramentas que podem executar auditorias de acessibilidade nas páginas web no browser. Por favor, use-as em combinação com outros testes de acessibilidade, sendo que o browser só irá testar as acessibilidades do conteúdo HTML.
+Existem várias ferramentas que podem executar auditorias de acessibilidade nas páginas web no browser. Use-as em combinação com outros testes de acessibilidade, uma vez que o browser só irá testar as acessibilidades do conteúdo HTML.
 
 #### aXe, aXe-core e react-axe {#axe-axe-core-and-react-axe}
 

From c3ae6ebf5c89617a395dc33ff7ce278657f38b86 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:35:52 +0100
Subject: [PATCH 39/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 881f64912..080f59bc9 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -472,7 +472,7 @@ Em alguns browsers podemos facilmente visualizar as informações de acessibilid
 
 Testar com um leitor de ecrã deve fazer parte dos testes de acessibilidade.
 
-Note que a combinação entre os browsers e os leitores de ecrã tem importância. É recomendado que teste a sua aplicação no browser mais adequando ao seu leitor de ecrã.
+Note que a combinação entre os browsers e os leitores de ecrã tem importância. É recomendado que testes a tua aplicação no browser mais adequando ao teu leitor de ecrã.
 
 ### Leitores de ecrã mais comuns {#commonly-used-screen-readers}
 

From 213142c7926724facec516fd0b54c3af82fde9f4 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:36:05 +0100
Subject: [PATCH 40/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 080f59bc9..3593d31bf 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -489,7 +489,7 @@ Consulte os seguintes guias de como usar o NVDA:
 
 VoiceOver é um leitor de ecrã integrado nos dispositivos da Apple.
 
-Consulte os seguintes guias sobre como ativar e utilizar o VoiceOver:
+Consulta os seguintes guias sobre como ativar e utilizar o VoiceOver:
 
 - [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
 - [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)

From c594763980794eff65d03f82e57cc455ce7f0eec Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:36:17 +0100
Subject: [PATCH 41/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 3593d31bf..ddd2d94b1 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -4,7 +4,7 @@ title: Accessibility
 permalink: docs/accessibility.html
 ---
 
-## Porque Acessibilidade? {#why-accessibility}
+## Porquê Acessibilidade? {#why-accessibility}
 
 A acessibilidade na web (também conhecida por [** a11y **](https://en.wiktionary.org/wiki/a11y)) é o design e a criação de websites que podem ser usados por todos. O suporte à acessibilidade é necessário para permitir que as tecnologias de acessibilidade interpretem as páginas da web.
 

From 72e17ea5ee3600d02dc9bd92059a96f5f48f5a72 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:36:33 +0100
Subject: [PATCH 42/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index ddd2d94b1..b6494caa6 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -499,7 +499,7 @@ Consulta os seguintes guias sobre como ativar e utilizar o VoiceOver:
 
 [Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) ou JAWS, é um leitor de ecrã muito popular no sistema operativo Windows.
 
-Consulte os seguintes guias de como usar o JAWS:
+Consulta os seguintes guias sobre como usar o JAWS:
 
 - [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
 - [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)

From 09ba99f7436f6c677be9ffc234e14b7c9140d0a3 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:36:47 +0100
Subject: [PATCH 43/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index b6494caa6..c9429b36b 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -508,7 +508,7 @@ Consulta os seguintes guias sobre como usar o JAWS:
 
 #### ChromeVox no Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox](https://www.chromevox.com/) é um leitor de ecrã integrado no Chromebooks e está disponível como [extensão](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) para o Google Chrome.
+[ChromeVox](https://www.chromevox.com/) é um leitor de ecrã integrado nos Chromebooks e está disponível como [extensão](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) para o Google Chrome.
 
 Consulte os seguintes guias de como usar o ChromeVox:
 

From 8b58fa694ef0f53f81d56e60befd81b477e71509 Mon Sep 17 00:00:00 2001
From: Francisco Madeira <xico2k@gmail.com>
Date: Tue, 30 Jun 2020 15:38:10 +0100
Subject: [PATCH 44/46] Update content/docs/accessibility.md

Co-authored-by: Francisco Joshua <f.joshua.jr@gmail.com>
---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index c9429b36b..cfeeb5903 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -91,7 +91,7 @@ function Glossary(props) {
 }
 ```
 
-Quando não é necessário passar propriedades para a tag Fragment podemos usar a [syntax curta](/docs/fragments.html#short-syntax), se a configuração suportar:
+Quando não é necessário passar props para a tag Fragment podemos usar a [síntaxe curta](/docs/fragments.html#short-syntax), se a configuração suportar:
 
 ```javascript{3,6}
 function ListItem({ item }) {

From 7ecf0ce98d973907d6213df67c070788f607cc18 Mon Sep 17 00:00:00 2001
From: Francisco Joshua <f.joshua.jr@gmail.com>
Date: Tue, 30 Jun 2020 16:50:29 +0200
Subject: [PATCH 45/46] Update content/docs/accessibility.md

---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index cfeeb5903..7d6bd9b96 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -41,7 +41,7 @@ Nota que todos os atributos HTML `aria-*` são totalmente suportados em JSX. Ape
 
 ## Semântica HTML {#semantic-html}
 
-A semântica é a base de uma aplicação web acessível. Se usarmos corretamente os elementos HTML para reforçar o significado da informação colocada nos nossos websites, muitas das vezes a acessibilidade pode ser gratuita.
+A semântica HTML é a base de uma aplicação web acessível. Se usarmos corretamente os elementos HTML para reforçar o significado da informação colocada nos nossos websites, a acessibilidade pode vir de forma gratuita.
 
 - [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
 

From f6b3035d85c40aecbef27c12c05757a9099a4202 Mon Sep 17 00:00:00 2001
From: Francisco Joshua <f.joshua.jr@gmail.com>
Date: Tue, 30 Jun 2020 16:50:50 +0200
Subject: [PATCH 46/46] Update content/docs/accessibility.md

---
 content/docs/accessibility.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 7d6bd9b96..fe239e591 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -104,7 +104,7 @@ function ListItem({ item }) {
 }
 ```
 
-Para mais informação, veja a [documentação sobre Fragments](/docs/fragments.html).
+Para mais informação, vê a [documentação sobre Fragments](/docs/fragments.html).
 
 ## Formulários Acessíveis {#accessible-forms}