-
Notifications
You must be signed in to change notification settings - Fork 3
/
checklist-conteudo.html
220 lines (216 loc) · 11 KB
/
checklist-conteudo.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
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<meta charset="UTF-8">
<title>Lista de requisitos Conteúdo</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 conteudo">
<!-- Template layout Boot4
<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 "Conteúdo"</h1>
<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-conteudo.xlsx">Recolha de evidências da Lista de requisitos “Conteúdo” (xlsx, 103KB)</a></p>
<p>Requisitos a cumprir:</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n1">1 - Clareza do Conteúdo</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_1_Clareza_Conteudo/01_clarezaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n11">1.1 O sítio <em>Web</em> apresenta um resumo breve do seu propósito, visível sem se fazer <em lang="en">scroll</em></h3>
<p>Num primeiro vislumbre do sítio <em lang="en">Web</em> deve ser visível uma breve definição do seu propósito que dê a indicação ao utilizador de que sítio <em lang="en">Web</em> se trata e quais são as tarefas que se podem levar a efeito.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_1_Clareza_Conteudo/02_clarezaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n12">1.2 Os termos mais complexos têm uma definição agregada</h3>
<p>Quando são usados termos complexos ou técnicos que não sejam de uso corrente, estes devem ter agregada uma definição. Todos os termos definidos desta forma devem fazer parte de um glossário disponível no sítio <em>Web</em>.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_1_Clareza_Conteudo/03_clarezaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n13">1.3 Cada bloco de conteúdo contém a sua data de atualização</h3>
<p>Cada bloco de conteúdo isolado ou conjunto de blocos de conteúdo relacionado deverá ter a data da sua atualização associada, expressa num tamanho de letra 2 pontos abaixo ao do corpo do texto, com contraste mais reduzido mas nunca inferior a 4,5:1.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_1_Clareza_Conteudo/04_clarezaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n14">1.4 A informação sobre a entidade responsável pelo conteúdo está em todas as páginas</h3>
<p>A identificação da entidade responsável pelos conteúdos produzidos, incluindo uma hiperligação para a página de contactos deverá constar do rodapé de todas as páginas.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n2">2 - Usabilidade do Conteúdo</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_2_Usabilidade_Conteudo/01_usabilidaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n21">2.1 O tipo de letra do corpo do documento é adequado e o tamanho da letra é, no mínimo, de 12 pontos</h3>
<p>De forma a assegurar a boa legibilidade do texto para todos os utilizadores, o tamanho de letra do texto que compõe o corpo do documento deverá ser, no mínimo, de 12 pontos, assegurando sempre que os mesmos são escaláveis para tamanhos superiores, sempre que o utilizador considere necessário.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_2_Usabilidade_Conteudo/02_usabilidaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n22">2.2 A informação secundária (datas, autores) utiliza, no mínimo, um tamanho de letra de 10 pontos</h3>
<p>A informação secundária, como os autores de textos ou de imagens, as datas de publicação ou outros tipos de meta-informação, podem usar tamanhos de letra mais pequenos, mas, no mínimo, com 10 pontos, assegurando sempre que os mesmos são escaláveis para tamanhos superiores, sempre que o utilizador considere necessário.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_2_Usabilidade_Conteudo/03_usabilidaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n23">2.3 Blocos e linhas de texto com largura não superior a 100 caracteres</h3>
<p>Para manter o conforto de leitura, os blocos ou linhas de texto não deverão ter mais de 100 caracteres de largura. Os 80 caracteres correspondem à dimensão que se apresenta nos estudos como a mais confortável para os utilizadores.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_2_Usabilidade_Conteudo/04_usabilidaconteudo.svg">
</div>
<div class="col-sm">
<h3 id="n24">2.4 O espaçamento entre linhas não é inferior a 1.5x o tamanho da letra</h3>
<p>Para assegurar a leitura confortável de blocos de texto deve ser usado um espaçamento entre linhas de 1.5x o tamanho da letra.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n3">3 - Estrutura da Navegação</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_3_Estrutura_Navegacao/01_estruturanavegacao.svg">
</div>
<div class="col-sm">
<h3 id="n31">3.1 Nenhum nível de navegação tem mais de 9 opções</h3>
<p>A navegação principal deve ser equilibrada, nem com demasiadas opções de topo sem opções secundárias, nem com poucas opções de topo e muitas opções secundarias. Nenhum nível de navegação deve ter mais de 9 opções.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_3_Estrutura_Navegacao/02_estruturanavegacao.svg">
</div>
<div class="col-sm">
<h3 id="n32">3.2 A navegação principal está sempre visível e sempre no mesmo local</h3>
<p>As opções de primeiro nível da navegação principal estão sempre visíveis e encontram-se sempre no mesmo local em todas as páginas. A posição atual do utilizador na estrutura de navegação deve ser evidenciada.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_3_Estrutura_Navegacao/03_estruturanavegacao.svg">
</div>
<div class="col-sm">
<h3 id="n33">3.3 As hiperligações de texto não devem ser diferenciadas apenas com base na cor</h3>
<p>As hiperligações de texto devem apresentar um contraste mínimo de 4,5:1 com a envolvente e uma representação visual complementar à cor - idealmente as hiperligações devem apresentar-se sublinhadas. As hiperligações em texto devem apresentar-se da mesma forma em todo o sítio <em>Web</em>.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n4">4 - Estrutura da Informação</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_4_Estrutura_Informacao/01_estruturainformacao.svg">
</div>
<div class="col-sm">
<h3 id="n41">4.1 Os documentos longos têm um índice no topo com hiperligações internas para o mesmo</h3>
<p>Os documentos com mais de três ecrãs de altura deverão ter a hierarquia de cabeçalhos espelhada num índice no topo da página com hiperligações internas para as respetivas secções e subsecções.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_4_Estrutura_Informacao/02_estruturainformacao.svg">
</div>
<div class="col-sm">
<h3 id="n42">4.2 O <em lang="en">layout</em> do sítio <em>Web</em> é adaptável a plataformas móveis sem necessidade de efetuar varrimento horizontal</h3>
<p>O <em lang="en">layout</em> do sítio <em>Web</em> deve ser adaptável aos tamanhos mais comuns de visualização, adaptando-se a várias larguras de ecrã sem que surjam barras de varrimento horizontais.</p>
</div>
</div>
<div class="row">
<div class="col-sm">
<h2 id="n5">5 - Elementos Interativos</h2>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_5_Elementos_Interativos/01_elementosinterativos.svg">
</div>
<div class="col-sm">
<h3 id="n51">5.1 Não existem elementos interativos acionados apenas com a passagem do rato (<em lang="en">hover</em>)</h3>
<p>Não devem existir elementos de interação, como hiperligações ou botões, que aparecem apenas quando se passa por cima com um dispositivo apontador. Este método de interação não está disponível em aparelhos com interação por toque.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_5_Elementos_Interativos/02_elementosinterativos.svg">
</div>
<div class="col-sm">
<h3 id="n52">5.2 Os elementos interativos têm uma dimensão mínima de 44px CSS (44 pontos) (vertical e horizontal)</h3>
<p>De forma a assegurar que todos os elementos interativos são facilmente acionáveis por qualquer tipo de dispositivo apontador ou toque, estes devem ter a dimensão mínima de 44px CSS de altura e de largura.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_5_Elementos_Interativos/03_elementosinterativos.svg">
</div>
<div class="col-sm">
<h3 id="n53">5.3 Há apenas um botão de ação principal por página e o mesmo encontra-se destacado</h3>
<p>Deve existir apenas um botão de ação principal por página e o mesmo deve apresentar-se numa cor contrastante. Todos os outros botões devem ser considerados como secundários.</p>
</div>
</div>
<div class="row">
<div class="col-sm-2">
<img alt="" src="https://selo.usabilidade.gov.pt/img/selos/bronze/Bronze_5_Elementos_Interativos/04_elementosinterativos.svg">
</div>
<div class="col-sm">
<h3 id="n54">5.4 Elementos gráficos interativos têm de aparentar ser clicáveis</h3>
<p>Os elementos gráficos clicáveis devem ser percecionáveis como tal, através da forma, da cor ou do aparente volume.</p>
</div>
</div>
</body>
</html>