Atualizar 'Desenvolvimento do Portal Modelo 4'

Desenvolvimento-do-Portal-Modelo-4.md

@@ -14,8 +14,149 @@ https://www.figma.com/design/0aHHfz6LSd5cbFrypgh2KD/interlegis?node-id=292-1205&
 
 ### Acessibilidade
 
+O site deverá ter uma barra superior com itens de acessibilidade, descritos abaixo.
+
+A sugestão é desenvolver um produto Plone/Volto separado, para poder ser aplicado em qualquer projeto.
+
+#### Items da Barra de Acessibilidade
+
+
+##### Atalhos pro site
+
+(https://emag.governoeletronico.gov.br/#s4.1)
+
++ "Ir para o conteúdo principal"
++ "Ir para o rodapé"
++ "Ir para menu"
++ "Ir para a pesquisa"
+
+##### "Acessibilidade"
+
+(https://emag.governoeletronico.gov.br/#s4.5)
+
+Abre uma página explicando atalhos de acessibilidade. Exemplos:
+- https://www12.senado.leg.br/institucional/responsabilidade-social/acessibilidade/pages/acessibilidade-no-portal-do-senado
+- https://www2.camara.leg.br/acessibilidade/recursos-de-acessibilidade
+
+##### Modo de Alto Contraste
+
+(https://emag.governoeletronico.gov.br/#s4.2)
+
+Ativa o modo alto contraste. Neste modo, as seguintes configurações devem ser aplicadas:
+- Fundo preto para todos os elementos da página
+- Letras brancas para todos os elementos da página, exceto links, que devem ser amarelos.
+
+Um exemplo de implementação, no site do MPF:
+
+Javascript (`script.js`)
+
+```javascript
+
+/* ---------- Alto contraste do site ---------- */
+	$(".contraste").click(function(event) {
+		$("body").toggleClass('alto-contraste');
+		if ($.cookie('contraste') == "true") {
+			$.cookie('contraste', 'false', { expires: 7, path: '/' });
+		}else{
+			$.cookie('contraste', 'true', { expires: 7, path: '/' });
+		};
+	});
+	// Carrega dados gravados no cookie caso exista
+	if ($.cookie('contraste') == "true") { $("body").addClass('alto-contraste'); };
+    
+```
+
+CSS
+
+```css
+.alto-contraste {
+  background: #000 !important;
+}
+.alto-contraste h1, .alto-contraste h2, .alto-contraste h3, .alto-contraste h4, .alto-contraste h5, .alto-contraste span, .alto-contraste div, .alto-contraste a, .alto-contraste li, .alto-contraste p {
+  color: #fff !important;
+}
+.alto-contraste div, .alto-contraste body, .alto-contraste ul, .alto-contraste footer, .alto-contraste header, .alto-contraste article {
+  background-color: #000 !important;
+  border-color: #fff;
+}
+.alto-contraste .barra-superior .container {
+  background-image: url('../images/bkg-barra-superior.png?1430751482');
+}
+.alto-contraste nav li:hover {
+  background: #000;
+}
+.alto-contraste .principal {
+  border: 1px solid #fff;
+}
+.alto-contraste .principal .destaque-3-noticia {
+  width: 180.4px;
+}
+.alto-contraste .slider-destaque {
+  border: 1px solid #fff;
+}
+.alto-contraste .slider-destaque article, .alto-contraste .slider-destaque .auxiliar {
+  border: 1px solid #fff;
+}
+.alto-contraste footer {
+  border-top: 1px solid #fff;
+}
+```
+
+##### Aumento e diminuição do tamanho da fonte
+
+Exemplo de implementação, tirado do site do MPF:
+
+Javascript (`script.js`)
+
+```javascript
+
+	/*---------- Aumentar e diminuir fontes ---------- */
+	var para_aumentar = [$("h1"), $("h2"), $("h3"), $("h4"), $("h5"), $("p"), $("a"), $("li")];
+
+	if ($.cookie('font-size')) {
+		var contador_font = parseInt($.cookie('font-size'));
+	}else{ 
+		var contador_font = 0
+	};
+	
+	$(".font-mais").click(function(event) {
+		//Define um limite de aumento em ate 3x
+		if (contador_font < 3) {
+			contador_font += 1
+			aumenta_ou_diminui_font("aumentar", para_aumentar);
+			$.cookie('font-size', contador_font, { expires: 7, path: '/' })
+		};
+	});
+	$(".font-menos").click(function(event) {
+		//Define um limite de reducao
+		if (contador_font > 0) {
+			aumenta_ou_diminui_font("diminuir", para_aumentar);
+			contador_font -= 1;
+			$.cookie('font-size', contador_font, { expires: 7, path: '/' })
+		};
+	});
+	// Carrega dados gravados no cookie caso exista
+	if ($.cookie('font-size') != 0) {
+		var cont = $.cookie('font-size');
+		while(cont > 0){
+			aumenta_ou_diminui_font("aumentar", para_aumentar);
+			cont -= 1
+		}
+	};
+    
+```
+
+#### Fontes
+
 https://emag.governoeletronico.gov.br/
 
-https://www.lagoadaconfusao.to.leg.br/ (plugin de acessibilidade)
-https://www.sapezal.mt.leg.br/ (outro plugin de acessibilidade)
-https://www.camarasuzano.sp.gov.br/ (exemplo de câmara atendendo acessibilidade)
+Algumas câmaras municipais que atendem os critérios:
+- https://www.lagoadaconfusao.to.leg.br/ (plugin de acessibilidade)
+- https://www.sapezal.mt.leg.br/ (outro plugin de acessibilidade)
+- https://www.camarasuzano.sp.gov.br/ (exemplo de câmara atendendo acessibilidade)
+
+
+O site do MPF, https://www.mpf.mp.br/pgr/#, tem muitas funcionalidades de acessibilidade.
+
+
+