You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Web accessibility (also known as a11y) refers to the practice of creating websites that can be used by anyone — be that a person with a disability, a slow connection, outdated or broken hardware or simply someone in an unfavorable environment. For example, adding subtitles to a video would help both your deaf and hard-of-hearing users and your users who are in a loud environment and can't hear their phone. Similarly, making sure your text isn't too low contrast will help both your low-vision users and your users who are trying to use their phone in bright sunlight.
3
+
Acessibilidade web (também conhecida como a11y) refere-se à práticas na criação de websites que podem ser usados por qualquer pessoa - seja uma pessoa com uma incapacidade, uma conexão lenta, hardware desatualizado ou não funcionando corretamente ou simplesmente alguém em um ambiente adverso. Por exemplo, adicionar legendas à um vídeo ajudaria seus usuários surdos e com deficiência auditiva e aqueles que estão em um ambiente barulhento e não podem ouvir o telefone. Da mesma forma, certificar-se de que o seu texto não tenha um contraste muito baixo ajudará tanto os usuários com visão reduzida quanto os usuários que estão tentando usar o telefone sob luz solar intensa.
4
4
5
-
Ready start but aren’t sure where?
5
+
Pronto para começar, mas não tem certeza por onde?
6
6
7
-
Checkout the [Planning and managing web accessibility guide](https://www.w3.org/WAI/planning-and-managing/)provided by[World Wide Web Consortium (W3C)](https://www.w3.org/)
7
+
Confira o [Guia de planejamento e gerenciamento de acessibilidade web](https://www.w3.org/WAI/planning-and-managing/)fornecido pelo[World Wide Web Consortium (W3C)](https://www.w3.org/)
8
8
9
-
## Skip link
9
+
## Link Pular Conteúdo
10
10
11
-
You should add a link at the top of each page that goes directly to the main content area so users can skip content that is repeated on multiple Web pages.
11
+
Você deve adicionar um link na parte superior de cada página que vai diretamente para a área de conteúdo principal para que os usuários possam pular o conteúdo que se repete em várias páginas web.
12
12
13
-
Typically this is done on the top of `App.vue`as it will be the first focusable element on all your pages:
13
+
Normalmente, isso é feito no topo do `App.vue`pois será o primeiro elemento focável em todas as suas páginas:
14
14
15
15
```html
16
16
<ulclass="skip-links">
17
17
<li>
18
-
<ahref="#main"ref="skipLink">Skip to main content</a>
18
+
<ahref="#main"ref="skipLink">Pular para o conteúdo principal</a>
19
19
</li>
20
20
</ul>
21
21
```
22
22
23
-
To hide the link unless it is focused, you can add the following style:
23
+
Para esconder o link a menos que ele esteja focado, você pode adicionar o seguinte estilo:
24
24
25
25
```css
26
26
.skipLink {
@@ -40,7 +40,7 @@ To hide the link unless it is focused, you can add the following style:
40
40
}
41
41
```
42
42
43
-
Once a user changes route, bring focus back to the skip link. This can be achieved by calling focus to the `ref`provided below:
43
+
Depois que um usuário muda de rota, traga o foco de volta para o link de pular. Isso pode ser feito chamando a função _focus_ para a `ref`do elemento como exemplificado abaixo:
[Read documentation on skip link to main content](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
64
+
[Leia a documentação sobre pular para o conteúdo principal](https://www.w3.org/WAI/WCAG21/Techniques/general/G1.html)
65
65
66
-
## Structure Your Content
66
+
## Estruture Seu Conteúdo
67
67
68
-
One of the most important pieces of accessibility is making sure that design can support accessible implementation. Design should consider not only color contrast, font selection, text sizing, and language, but also how the content is structured in the application.
68
+
Uma das peças mais importantes da acessibilidade é garantir que o design possa oferecer suporte à implementação acessível. O design não deve considerar apenas o contraste das cores, a seleção das fontes, o tamanho dos textos e o idioma, mas também como o conteúdo é estruturado na aplicação.
69
69
70
-
### Headings
70
+
### Títulos
71
71
72
-
Users can navigate an application through headings. Having descriptive headings for every section of your application makes it easier for users to predict the content of each section. When it comes to headings, there are a couple of recommended accessibility practices:
72
+
Os usuários podem navegar em uma aplicação por meio de títulos. Ter títulos descritivos para cada seção de sua aplicação torna mais fácil para os usuários preverem o conteúdo de cada seção. Quando se trata de títulos, existem algumas práticas de acessibilidade recomendadas:
73
73
74
-
-Nest headings in their ranking order: `<h1>` - `<h6>`
75
-
-Don’t skip headings within a section
76
-
-Use actual heading tags instead of styling text to give the visual appearance of headings
74
+
-Aninhar títulos em sua ordem de classificação: `<h1>` - `<h6>`
75
+
-Não pular títulos dentro de uma seção
76
+
-Usar tags de títulos reais em vez de estilizar o texto para dar a aparência visual de títulos
77
77
78
-
[Read more about headings](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html)
78
+
[Leia mais sobre títulos](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html)
79
79
80
80
```html
81
81
<mainrole="main"aria-labelledby="main-title">
82
-
<h1id="main-title">Main title</h1>
82
+
<h1id="main-title">Título Principal</h1>
83
83
<sectionaria-labelledby="section-title">
84
-
<h2id="section-title"> Section Title </h2>
85
-
<h3>Section Subtitle</h3>
86
-
<!--Content-->
84
+
<h2id="section-title"> Título da Seção </h2>
85
+
<h3>Subtítulo da Seção</h3>
86
+
<!--Conteúdo-->
87
87
</section>
88
88
<sectionaria-labelledby="section-title">
89
-
<h2id="section-title"> Section Title </h2>
90
-
<h3>Section Subtitle</h3>
91
-
<!--Content-->
92
-
<h3>Section Subtitle</h3>
93
-
<!--Content-->
89
+
<h2id="section-title"> Título da Seção </h2>
90
+
<h3>Subtítulo da Seção</h3>
91
+
<!--Conteúdo-->
92
+
<h3>Subtítulo da Seção</h3>
93
+
<!--Conteúdo-->
94
94
</section>
95
95
</main>
96
96
```
97
97
98
98
### Landmarks
99
99
100
-
Landmarks provide programmatic access to sections within an application. Users who rely on assistive technology can navigate to each section of the application and skip over content. You can use [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)to help you achieve this.
100
+
_Landmarks_ fornecem acesso programável às seções de uma aplicação. Os usuários que dependem de tecnologias assistivas podem navegar para cada seção da aplicação e pular seu conteúdo. Você pode usar [_ARIA roles_](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles)para te ajudar à atingir isso.
| header | role="banner" |Prime heading: title of the page|
105
-
| nav | role="navigation" |Collection of links suitable for use when navigating the document or related documents|
106
-
| main | role="main" |The main or central content of the document. |
107
-
| footer | role="contentinfo" |Information about the parent document: footnotes/copyrights/links to privacy statement|
108
-
| aside | role="complementary" |Supports the main content, yet is separated and meaningful on its own content|
109
-
|_Not available_| role="search" |This section contains the search functionality for the application|
110
-
| form | role="form" |Collection of form-associated elements|
111
-
| section | role="region" |Content that is relevant and that users will likely want to navigate to. Label must be provided for this element|
112
-
113
-
:::tip Tip:
114
-
It is recommended to use landmark HTML elements with redundant landmark role attributes in order to maximize compatibility with legacy [browsers that don’t support HTML5 semantic elements](https://caniuse.com/#feat=html5semantic).
104
+
| header | role="banner" |Título principal: título da página|
105
+
| nav | role="navigation" |Coleção de links adequados para uso ao navegar no documento ou documentos relacionados|
106
+
| main | role="main" |O conteúdo principal ou central do documento. |
107
+
| footer | role="contentinfo" |Informações sobre o documento principal: notas de rodapé/direitos autorais/links para declaração de privacidade|
108
+
| aside | role="complementary" |Suporta o conteúdo principal, mas é separado e significativo em seu próprio conteúdo|
109
+
|_Não disponível_| role="search" |Esta seção contém a funcionalidade de pesquisa para a aplicação|
110
+
| form | role="form" |Coleção de elementos associados à formulários|
111
+
| section | role="region" |Conteúdo relevante e para o qual os usuários provavelmente desejam navegar. Um rótulo deve ser fornecido para este elemento|
112
+
113
+
:::tip Dica
114
+
É recomendado o uso de elementos HTML com atributos _role_ de referência redundantes para maximizar a compatibilidade com navegadores legados [que não oferecem suporte à elementos semânticos do HTML5](https://caniuse.com/#feat=html5semantic).
115
115
:::
116
116
117
-
[Read more about landmarks](https://www.w3.org/TR/wai-aria-1.2/#landmark_roles)
117
+
[Leia mais sobre _landmarks_](https://www.w3.org/TR/wai-aria-1.2/#landmark_roles)
0 commit comments