-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathchecklist-10aspetos.html
352 lines (348 loc) · 18 KB
/
checklist-10aspetos.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<title>Lista de requisitos 10 aspetos críticos de acessibilidade funcional</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="checklist.css">
</head>
<body class="container funcional">
<!-- Layout template
<div class="row">
<div class="col-sm">
(...)
</div>
</div>
<div class="row">
<div class="col-sm-2">
(...)
</div>
<div class="col-sm">
(...)
</div>
</div>
-->
<div class="row">
<div class="col-sm">
<p><a href="/kit-selo/checklists/">voltar ao índice</a></p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h1>Lista de requisitos "10 aspetos críticos de acessibilidade funcional"</h1>
</div>
</div>
<div class="row">
<div class="col-sm">
<p><strong>Nota</strong>: Para recolha de evidências relativa a esta lista de requisitos utilize o ficheiro excel: <a href="/kit-selo/checklists/sintese-10aspetos.xlsx">Recolha de evidências da Lista de requisitos “10 aspetos críticos de acessibilidade funcional” (xlsx, 136KB)</a></p>
<p>A <em lang="en">checklist</em> "10 aspetos críticos de acessibilidade funcional" é a lista de verificação a que se faz alusão no artigo 9.º, n.º 1, alínea b) do Decreto-Lei n.º 83/2018 e deve ser usada de acordo com a metodologia referenciada no diploma:</p>
<blockquote>
<ul>
<li>"1. Para os sítios <em>Web</em>, as entidades referidas no artigo 2.º devem adotar os seguintes procedimentos de monitorização:
<ul class="list-none">
<li>(...)</li>
<li>b) Procedimento simplificado manual, correspondente a uma avaliação manual pericial a uma amostra de páginas que permita responder à diversidade de elementos constantes da lista de verificação para sítios <em>Web</em> publicada no sítio <em>Web</em> <a href="http://www.acessibilidade.gov.pt" target="_blank">www.acessibilidade.gov.pt</a>;"</li>
</ul>
</li>
</ul>
</blockquote>
<p>Nesta lista estão os <strong>10 aspetos críticos de acessibilidade funcional</strong> encontrados nos diversos estudos aos sítios Web da Administração Pública Portuguesa elaborados pela equipa da Unidade ACESSO - que integra atualmente a Equipa de Experiência Digital da AMA - durante os últimos 20 anos. Esta lista baseia-se também na lista de verificação do W3C <a href="https://www.w3.org/WAI/test-evaluate/preliminary/"><em lang="en">Easy Checks - A First Review of Web Accessibility</em></a>.</p>
<p>Requisitos a cumprir:</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n1">1 - Menus de Navegação</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_menusnavegacao.svg">
</div>
<div class="col-sm">
<h3 id="n11">1.1 O menu de navegação deve estar estruturado como uma lista de opções</h3>
<p>Para que possa ser bem interpretado por tecnologias de apoio, os menus e submenus devem estar estruturados com elementos nativos, do tipo <ul>, ou com a semântica e o estado dos elementos identificados com técnicas em ARIA.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_menusnavegacao.svg">
</div>
<div class="col-sm">
<h3 id="n12">1.2 É possível selecionar as opções e as subopções do menu quer com rato quer com teclado</h3>
<p>Deve ser possível percorrer a estrutura de navegação quer com um dispositivo apontador quer com o teclado.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/03_menusnavegacao.svg">
</div>
<div class="col-sm">
<h3 id="n13">1.3 As imagens-<em>link</em>, caso existam no menu, devem ter o correspondente equivalente alternativo em texto</h3>
<p>As imagens corretamente legendadas permitem ser interpretadas como texto, tornando todas as opções de navegação acessíveis.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n2">2 - Títulos e Subtítulos</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_titulossubtitulos.svg">
</div>
<div class="col-sm">
<h3 id="n21">2.1 Existe um título <h1> marcado na página</h3>
<p>O título principal de cada página, que sumariza o seu conteúdo, deve ser identificado como o primeiro nível dos títulos (h1). Não deverá ser utilizado mais do que um <h1> por página.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_titulossubtitulos.svg">
</div>
<div class="col-sm">
<h3 id="n22">2.2 Existe uma marcação hierarquizada de títulos e subtítulos na página (<h1>...<h6>)</h3>
<p>Os títulos são empregues de forma hierárquica para melhor estruturar os conteúdos, das informações mais gerais às mais particulares. Deverão ser usados de forma consistente por todo o sítio <em>Web</em>.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n3">3 - Tabelas de Dados</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_tabelasdados.svg">
</div>
<div class="col-sm">
<h3 id="n31">3.1 As células que constituem os cabeçalhos da tabela estão marcadas com o elemento <th></h3>
<p>Identificar os cabeçalhos de uma tabela ajuda a melhor identificar os eixos que caracterizam a informação em cada célula.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_tabelasdados.svg">
</div>
<div class="col-sm">
<h3 id="n32">3.2 A legenda da tabela está marcada com o elemento <caption></h3>
<p>Todas as tabelas deverão conter uma legenda descritiva do seu conteúdo, incluindo as fontes da informação, se necessário.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n4">4 - Formulários</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_formularios.svg">
</div>
<div class="col-sm">
<h3 id="n41">4.1 Ao clicar com o rato na etiqueta, o cursor surge no respetivo campo de edição</h3>
<p>De forma a tornar a seleção de campos pequenos mais fácil, a legenda deverá estar associada ao campo respetivo com o elemento <label>, pois desta forma aumenta-se a sua área clicável. Para os utilizadores de leitores de ecrã (pessoas cegas) a associação da etiqueta ao campo de edição é também fundamental.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_formularios.svg">
</div>
<div class="col-sm">
<h3 id="n42">4.2 É possível identificar os campos de preenchimento obrigatório quando se usa apenas um leitor de ecrã</h3>
<p>Os campos obrigatórios devem ser preferencialmente agrupados na parte inicial de um formulário e claramente identificados como tal. Se não for possível, cada campo deverá estar identificado textualmente ou como Obrigatório ou como Opcional. Não deverão ser usados apenas símbolos ou cores como elemento identificador.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/03_formularios.svg">
</div>
<div class="col-sm">
<h3 id="n43">4.3 É possível localizar e ler as mensagens de erro usando apenas um leitor de ecrã</h3>
<p>Os erros identificados no decorrer do preenchimento de um formulário deverão preferencialmente ser listados de forma condensada, direcionando cada elemento da lista ao respetivo campo. Cada campo deverá associar a mensagem de erro a si próprio. As mensagens de erro deverão ser breves e claras.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n5">5 - Gráficos e Imagens-<em>Link</em></h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_graficosimagenslink.svg">
</div>
<div class="col-sm">
<h3 id="n51">5.1 A imagem ou gráfico tem um equivalente alternativo em texto curto e correto</h3>
<p>As imagens não decorativas deverão ter uma descrição breve associada, nomeadamente através do uso do atributo <ALT>. Esta legenda deve descrever fielmente o propósito da imagem no contexto em que se encontra.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_graficosimagenslink.svg">
</div>
<div class="col-sm">
<h3 id="n52">5.2 O gráfico é acompanhado de uma descrição longa</h3>
<p>Gráficos resultantes de análise de dados deverão ser acompanhados da tabela de dados que lhe deu origem, de forma a preservar o acesso à informação completa.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/03_graficosimagenslink.svg">
</div>
<div class="col-sm">
<h3 id="n53">5.3 As imagens-<em>link</em> têm um equivalente alternativo correto</h3>
<p>As hiperligações compostas apenas por uma imagem obrigam que esta tenha um equivalente alternativo em texto que represente fielmente o destino da hiperligação.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n6">6 - Contraste</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_contraste.svg">
</div>
<div class="col-sm">
<h3 id="n61">6.1 No corpo de um documento, o rácio de contraste entre a cor do texto normal (menor que 18 pontos ou menor que 14 pontos negrito) e a cor do fundo é superior a 4,5:1</h3>
<p>Deve assegurar-se no corpo do documento que o rácio de contraste entre a cor do texto e a cor de fundo é, no mínimo, de 4,5:1, de forma a assegurar a sua legibilidade para utilizadores com deficiências da visão.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_contraste.svg">
</div>
<div class="col-sm">
<h3 id="n62">6.2 O rácio de contraste entre a cor do texto de tamanho grande (maior ou igual que 18 pontos ou maior ou igual que 14 pontos negrito) e a cor do fundo é superior a 3:1</h3>
<p>Os textos de tamanho superior a 18 pontos, ou os textos de tamanho superior a 14 pontos mas a negrito, devem assegurar um rácio de contraste mínimo de 3:1 entre a cor do texto e a cor do fundo.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n7">7 - <em lang="en">Players</em></h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_players.svg">
</div>
<div class="col-sm">
<h3 id="n71">7.1 Deve ser possível ativar os botões de controlo do leitor quer com o rato quer com o teclado</h3>
<p>Os leitores de multimédia não devem iniciar automaticamente a reprodução dos elementos e têm de ser operáveis usando apenas um rato ou usando apenas um teclado.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_players.svg">
</div>
<div class="col-sm">
<h3 id="n72">7.2 O vídeo ou o áudio deve conter preferencialmente legendas fechadas sincronizadas. Caso não seja possível, no mínimo, deve disponibilizar-se uma transcrição textual</h3>
<p>O uso de legendas fechadas destina-se essencialmente a pessoas surdas. Recomendam-se para a produção das referidas legendas técnicas de tradaptação conhecidas para o efeito bem como o enriquecimento das legendas de sons cuja mensagem não seja percetível visualmente (por ex., o toque de uma campaínha de uma porta).</p>
<p>Para vídeos com mensagens eminentemente visuais (por ex., um vídeo com música de fundo que passa um conjunto de mensagens apenas percetíveis à visão), os mesmos devem ter uma versão equivalente alternativa com produção de audiodescrição. A audiodescrição é fundamental para que pessoas cegas ou com baixa visão possam percecionar a mensagem veiculada.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n8">8 - Estrutura da Página</h3>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_estruturapagina.svg">
</div>
<div class="col-sm">
<h3 id="n81">8.1 Quando se retira a CSS, todos os elementos HTML devem alinhar à esquerda</h3>
<p>Quando se desativam todos os estilos visuais, o conteúdo da página é apresentado alinhado à esquerda e apresenta-se de forma linear.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/02_estruturapagina.svg">
</div>
<div class="col-sm">
<h3 id="n82">8.2 Quando se retira a CSS, a informação aparece numa ordem lógica</h3>
<p>Tendo em conta que o posicionamento de elementos no código pode não refletir a ordem visual de leitura, deve ser assegurada a ordem correta do conteúdo quando se desativam os estilos visuais.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/03_estruturapagina.svg">
</div>
<div class="col-sm">
<h3 id="n83">8.3 Quando se retira a CSS, deve ser possível reconhecer a semântica dos diversos elementos</h3>
<p>Os elementos que estruturam o conteúdo devem estar semanticamente bem estruturados, usando os elementos de HTML apropriados a cada tipo de conteúdo, como títulos, parágrafos, listas, ...</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/04_estruturapagina.svg">
</div>
<div class="col-sm">
<h3 id="n84">8.4 Quando se retira a CSS, a informação relevante permanece visível</h3>
<p>Toda a informação visível deve permanecer na página sob forma textual, quando se desativam os estilos visuais.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/05_estruturapagina.svg">
</div>
<div class="col-sm">
<h3 id="n85">8.5 A maquetização da página é feita sem recorrer ao elemento <table></h3>
<p>A estrutura de composição gráfica da página não é feita recorrendo a elementos de tabela mas sim a uma maior diversidade de elementos semânticos (por ex., <main>) e genéricos (por ex., <div>), que permitem a recomposição visual para diferentes tipos e dimensões de ecrã.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n9">9 - Modais</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="91_modal.svg">
</div>
<div class="col-sm">
<h3 id="n91">9.1 Quando a caixa de diálogo é aberta, o foco (cursor do Browser) move-se para um elemento dentro da caixa de diálogo</h3>
<p>Assim que a caixa de edição se sobrepõe à janela, o cursor do Browser deve saltar para dentro da caixa de diálogo.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="92_modal.svg">
</div>
<div class="col-sm">
<h3 id="n91">9.2 Quando uma caixa de diálogo está aberta, a navegação com teclado (Browser ou Tecnologia de apoio) tem de ficar circunscrita aos elementos que compõem a caixa de diálogo</h3>
<p>Quando a caixa de diálogo está aberta, todos os outros elementos que se encontram fora da caixa devem permanecer inertes. Mesmo os elementos interativos (links, botões ou campos de edição) devem deixar de ser focáveis quer com teclado quer com o rato. Quando a caixa de diálogo está aberta, se ativar um leitor de ecrã e ele efetuar a leitura ou permitir focar elementos interativos que estão fora da caixa de diálogo, algo está errado.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="93_modal.svg">
</div>
<div class="col-sm">
<h3 id="n91">9.3 A caixa de diálogo tem de ter um mecanismo que permita sair ou fechar a caixa, quer através de teclado quer através de um dispositivo apontador</h3>
<p>A caixa de diálogo deve ter um mecanismo que permita sair ou fechar a caixa. Pode ser um botão "Fechar". Para além do botão "Fechar" é possível adicionar a tecla de atalho "ESC".</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="94_modal.svg">
</div>
<div class="col-sm">
<h3 id="n91">9.4 Quando a caixa de diálogo fecha, o foco (cursor do Browser) deve voltar ao elemento interativo que a invocou</h3>
<p>É útil que ao sair da modal, o utilizador seja posicionado no elemento que usou para invocar a modal. A modal é uma espécie de parêntesis, à conversa principal. É bom que o utilizador, depois do "parêntesis", possa voltar à conversa principal, no exato ponto onde a deixou.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n10">10 - Ficheiros PDF</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/wp-content/uploads/2024/01/01_ficheirospdf.svg">
</div>
<div class="col-sm">
<h3 id="n101">10.1 Nos ficheiros PDF é possível, no mínimo, extrair o conteúdo textual para formato TXT</h3>
<p>Os ficheiros PDF devem ter o seu texto inteiramente extraível para que se possa passar o respetivo conteúdo para um processador de texto sem perda de informação.</p>
</div>
</div>
</body>
</html>