plonegovbr / brasil.gov.barra

Brasil.gov.br: Barra de Identidade
http://www.plone.org.br/gov/
7 stars 11 forks source link

Adicionar configuração para mostrar fallback da imagem do Brasil no rodapé (ou mesmo um "fallback" do próprio rodapé) #24

Open idgserpro opened 9 years ago

idgserpro commented 9 years ago

Adicionar configuração para mostrar ou não uma imagem fallback do Brasil no rodapé. A imagem do Brasil no rodapé é carregada pelo javascript da barra. No entanto, esse javascript pode falhar ou o usuário pode não ter aceitado o certificado da barra em https, fazendo com que essa imagem não seja carregada. Hoje é sempre mostrada a imagem que está no brasil.gov.temas. A ideia aqui é criar uma configuração para que se exiba ou não essa imagem fallback. A imagem teria que ser movida do brasil.gov.temas para o brasil.gov.barra, e teria que ser adicionada uma regra no brasil.gov.temas para exibir essa imagem do brasil.gov.barra. Houve uma discussão sobre esse assunto em:

https://github.com/plonegovbr/brasil.gov.temas/issues/109

A dúvida é: qual deve ser a configuração default? Mostrar ou não mostrar a imagem?

@caduvieira opinião?

caduvieira commented 9 years ago

Minha opinião é não mostrar a imagem por default.

Em 29 de julho de 2015 10:34, idgserpro notifications@github.com escreveu:

Adicionar configuração para mostrar ou não uma imagem fallback do Brasil no rodapé. A imagem do Brasil no rodapé é carregada pelo javascript da barra. No entanto, esse javascript pode falhar ou o usuário pode não ter aceitado o certificado da barra em https, fazendo com que essa imagem não seja carregada. Hoje é sempre mostrada a imagem que está no brasil.gov.temas https://github.com/plonegovbr/brasil.gov.temas/blob/master/src/brasil/gov/temas/themes/verde/img/brasil.png. A ideia aqui é criar uma configuração para que se exiba ou não essa imagem fallback. A imagem teria que ser movida do brasil.gov.temas para o brasil.gov.barra, e teria que ser adicionada uma regra no brasil.gov.temas para exibir essa imagem do brasil.gov.barra. Houve uma discussão sobre esse assunto em:

plonegovbr/brasil.gov.temas#109 https://github.com/plonegovbr/brasil.gov.temas/issues/109

A dúvida é: qual deve ser a configuração default? Mostrar ou não mostrar a imagem?

@caduvieira https://github.com/caduvieira opinião?

— Reply to this email directly or view it on GitHub https://github.com/plonegovbr/brasil.gov.barra/issues/24.

idgserpro commented 7 years ago

Com o atendimento de https://github.com/plonegovbr/brasil.gov.barra/pull/37 e consequentemente https://github.com/plonegovbr/brasil.gov.temas/pull/136, esse relato perde o sentido e pode ser fechado.

idgserpro commented 7 years ago

Estou reabrindo esse relato pois vimos reclamações por parte de alguns usuários que essa solução não atende quando o usuário tem o javascript desabilitado: não aparece imagem errada, mas também não aparece nada. Portanto, Estou reabrindo para ver a opinião de todos se vale a pena ir pra esse caminho.

Estava na dúvida se deveria abrir aqui ou em brasil.gov.temas, mas devido a esse item da documentação oficial da barra:

A Barra deve conter tanto o rodapé como a barra.

Acho que o ideal é aqui mesmo.

O que eu imagino como poderia ser essa solução: temos uma viewlet que renderiza esse rodapé alternativo, e o rules.xml do brasil.gov.temas pega esse rodapé se ele estiver renderizado. A condição de renderização será uma flag no painel de controle, "Fornecer rodapé local (Serve para situações onde a barra não pode ser renderizada ou quando javascript está desabilitado" ou algo do gênero.

Esse rodapé deve ser gerado da forma mais automatizada possível: o conteúdo do footer em html por exemplo está presente em https://softwarepublico.gov.br/gitlab/govbr/barra-govbr/blob/master/recipes/default/assets/conteudo-footer.html e, numa máquina Vagrant, consigo compilar o css do footer (já com as imagens em svg) usando o https://softwarepublico.gov.br/gitlab/govbr/barra-govbr/blob/master/recipes/default/compile.sh (é gerado o arquivo estilo-footer.css), portanto evitamos ao máximo a questão do retrabalho. Não é tão simples quanto apenas copiar o barra.js como fazemos para a barra local, mas também não achei tão complexo.

@hvelarde e @rodfersou, se for possível, dêem suas opiniões.

hvelarde commented 7 years ago

eu não tenho opinião sobre esse quesito em particular.

rodfersou commented 7 years ago

Hoje em dia é muito raro quem não habilite javascript. Na maioria dos casos, isso acontece com leitores de tela, utilizados por deficientes visuais.

Para esses casos, podemos colocar a imagem dentro de uma tag <noscript></noscript> como alternativa, ou ainda colocar somente um texto explicativo com o atributo title.

idgserpro commented 7 years ago

Hoje em dia é muito raro quem não habilite javascript. Na maioria dos casos, isso acontece com leitores de tela, utilizados por deficientes visuais.

O problema não é só quem tem javascript desabilitado, se o usuário não aceitar o certificado como indicado pelo link "Atualize sua barra de governo", o javascript não é carregado e o rodapé também não aparece: a idéia não é forçar nada mas dar a possibilidade de uso desse recurso de rodapé local pro gestor que decidir ir por esse caminho (sabendo dosar as vantagens e desvantagens). Assim, a idéia do <noscript> não funcionaria para esse caso.

Mas acho que independentemente do que decidirmos aqui, a idéia do <noscript> no rodapé indicando que ali temos a logo de governo seria uma boa. Qual texto você acha que seria o ideal para aparecer ali para editores de tela? Lembrando que é importante ser um texto genérico pra não termos que ficar removendo textos e criando releases devido a períodos eleitorais.

rodfersou commented 7 years ago

Descreva o conteúdo da imagem de uma forma que deficientes visuais possam imaginar seu conteúdo (audio descrição), algo como: "Imagem escrito Brasil em verde, com desenho da bandeira no meio do texto"

idgserpro commented 7 years ago

"Imagem escrito Brasil em verde, com desenho da bandeira no meio do texto"

Não é genérico, teríamos o mesmo problema que tivemos em https://github.com/plonegovbr/brasil.gov.temas/issues/106. Pensei em "Rodapé final, indicando informações sobre acesso a informação e logo oficial do governo, com exceção de perídos eleitorais" ou algo assim. Vamos estudar aqui e dar uma opinião.

rodfersou commented 7 years ago

entendi a idéia mas não estou mais convencido de que <noscript> é a resposta.. ele geralmente vem logo após a tag <script> e como voce citou acima, mesmo tendo javascript habilitado a mensagem é importante.

A cartilha do eMag pode dar uma luz de como adicionar um conteúdo alternativo nesse caso.

rodfersou commented 7 years ago

@felipeduardo alguma sugestão?

felipeduardo commented 7 years ago

Quem sabe algo semelhante ao bengala legal...

http://www.bengalalegal.com/desc-logo

2017-01-20 17:50 GMT-02:00 Rodrigo Ferreira de Souza < notifications@github.com>:

@felipeduardo https://github.com/felipeduardo alguma sugestão?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plonegovbr/brasil.gov.barra/issues/24#issuecomment-274163478, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmg5EOsrGH4S9C-aNiWqkJFSZi5zjIJks5rURAEgaJpZM4Fh-hf .

-- Felipe Duardo

rodfersou commented 7 years ago

@felipeduardo esse caso é um pouco diferente.. pelo que entendi, uma div inteira não carrega direito quando o usuário não habilita uma ação..

Como seria um conteúdo alternativo de um bloco inteiro ao invés de uma imagem?

felipeduardo commented 7 years ago

Sim, entendi, mas a mensagem que eu queria passar é que uma explicação textual, eu acho, ficaria melhor...

gostei da sugestão ("Rodapé final, indicando informações sobre acesso a informação e logo oficial do governo, com exceção de perídos eleitorais" ou algo assim)

Em 23 de janeiro de 2017 16:42, Rodrigo Ferreira de Souza < notifications@github.com> escreveu:

@felipeduardo https://github.com/felipeduardo esse caso é um pouco diferente.. pelo que entendi, uma div inteira não carrega direito quando o usuário não habilita uma ação..

Como seria um conteúdo alternativo de um bloco inteiro ao invés de uma imagem?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plonegovbr/brasil.gov.barra/issues/24#issuecomment-274578520, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmg5CSvr6bxzYxvsiU7b4TMD7sHPbj5ks5rVPSrgaJpZM4Fh-hf .

-- Felipe Duardo

thiagotpc commented 7 years ago

Olá, tentando contribuir com a questão, a convite do @rodfersou.

@rodfersou, não vejo problemas em utilizar o elemento NOSCRIPT desassociado a um "irmão" SCRIPT. Na verdade, o WCAG1 (https://www.w3.org/TR/WCAG10/#gl-new-technologies) dizia que sempre que existir um SCRIPT, deveria existir o NOSCRIPT. Mas não o contrário. De qualquer modo, a WCAG2, vigente, na minha visão não inclui regras deste tipo. O conteúdo precisa ser Perceptível, Operável, Compreensível e Robusto.

Sobre o conteúdo do NOSCRIPT, acho que poderia ser usado com o conteúdo textual sugerido por @idgserpro, com o texto mais adequado e isento possível. No entanto, fornecer apenas uma frase não torna seu conteúdo acessível, como lembra o WebAIM (http://webaim.org/techniques/javascript/alternatives).

Seria importante fornecer os links (âncoras) e as imagens que estariam ali apresentados pelo Javascript também via noscript. Algo como o que seria apresentado como default no rodapé. Deste modo, o conteúdo além de Perceptível passa a ser Operável. Além disso, em minha opinião, o componente torna-se Robusto na medida que pode ser interpretado de forma conviável por uma ampla variedade de agentes de usuário, incluindo os que possuem javascript desabilitado.

rodfersou commented 7 years ago

muito obrigado @thiagotpc

caduvieira commented 7 years ago

Discuti sobre descrever as imagens da barra com a equipe do eMAG já faz algum tempo. Todos eles me informaram que não traz muita informação descrever algo como: "retângulo verde com losango amarelo no meio e dentro desse um círculo azul contendo uma faixa branca com os dizeres ordem e progresso tendo estrelas brancas que representam os estados com o destaque para a estrela inferior no Sigma Octante solitária representando o Distrito Federal". Então não me preocuparia muito em descrever detalhadamente e creio que algo como o @idgserpro descreveu.

Mas faria descrição dos links somente. "Acesse aqui mais sobre a Lei de Acesso a informação" e "Acesse aqui mais sobre os programas e ações do governo" sem me preocupar em descrever a imagem pois a informação necessária e importante, nesse caso, não é a imagem em si mas sim a onde ela leva ou a intenção dela na página.

felipeduardo commented 7 years ago

@caduvieira, "Acesse aqui" não me parece ser um bom texto pensando em acessibilidade

Em 30 de janeiro de 2017 19:00, caduvieira notifications@github.com escreveu:

Discuti sobre descrever as imagens da barra com a equipe do eMAG já faz algum tempo. Todos eles me informaram que não traz muita informação descrever algo como: "retângulo verde com losango amarelo no meio e dentro desse um círculo azul contendo uma faixa branca com os dizeres ordem e progresso tendo estrelas brancas que representam os estados com o destaque para a estrela inferior no Sigma Octante solitária representando o Distrito Federal". Então não me preocuparia muito em descrever detalhadamente e creio que algo como o @idgserpro https://github.com/idgserpro descreveu.

Mas faria descrição dos links somente. "Acesse aqui mais sobre a Lei de Acesso a informação" e "Acesse aqui mais sobre os programas e ações do governo" sem me preocupar em descrever a imagem pois a informação necessária e importante, nesse caso, não é a imagem em si mas sim a onde ela leva ou a intenção dela na página.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/plonegovbr/brasil.gov.barra/issues/24#issuecomment-276188714, or mute the thread https://github.com/notifications/unsubscribe-auth/AAmg5PaDpqRIAFzlYX5hiR7sy2xyQZFEks5rXk9UgaJpZM4Fh-hf .

-- Felipe Duardo

caduvieira commented 7 years ago

Pela cartilha da emag em Recomendação 3.5 – Descrever links clara e sucintamente não tem problema em usar esse tipo de texto. O problema seria o link ser somente algo como: "Acesse aqui", "Saiba mais", "Clique aqui"

rodfersou commented 7 years ago

Poderia ser somente "Saiba mais sobre os programas e ações do governo"