REPUBLICADA POR TER SAÍDO COM INCORREÇÕES NO D.O.C EM 06/02/2019 – PÁG 3 - PORTARIA Nº 03/SMPED-GAB, DE 04 DE FEVEREIRO DE 2019.

Altera o inciso I e o parágrafo 2º, do inciso II, do artigo 6º e o ANEXO I da Portaria nº 08/SMPED-GAB, de 10 de maio de 2018, que regulamenta o Decreto Municipal nº 49.063, de 18 de dezembro de 2007, no que tange ao estabelecimento de critérios e procedimentos necessários para a concessão do Selo de Acessibilidade Digital.

Cid Torquato, Secretário Municipal da Pessoa com Deficiência do Município de São Paulo, no uso das atribuições que lhe são conferidas por lei,

RESOLVE:

Art. 1º - O § 2º, do artigo 6º, da Portaria nº 08/SMPED-GAB, de 10 de maio de 2018, passa a vigorar com a seguinte redação:

“Art. 6º................................................................................................................................

I - concessão do Selo de Acessibilidade Digital, submetendo-se o Parecer Técnico à CPA que deliberará, por meio eletrônico, pela concessão ou não, do Selo de Acessibilidade Digital, com envio da pauta e eventuais relatórios, no prazo de 5 (cinco) dias úteis;

...

§ 2º Recebida a Declaração referida no parágrafo anterior, a SMPED realizará nova avaliação e produzirá novo Parecer Técnico, que poderá concluir pela concessão do Selo de Acessibilidade Digital, ou por sua rejeição, submetendo-o à CPA que deliberará, por meio eletrônico, pela concessão ou não, do Selo de Acessibilidade Digital, com envio da pauta e eventuais relatórios, no prazo de 5 (cinco) dias úteis;”

Art. 2º - O ANEXO I da Portaria nº 08/SMPED-GAB, de 10 de maio de 2018, fica alterado na forma do Anexo Único a esta Portaria.

Art. 3º - Esta Portaria entrará em vigor na data de sua publicação.

ANEXO ÚNICO À PORTARIA Nº 03/SMPED-GAB, DE 04 DE FEVEREIRO DE 2019.

ANEXO I

LISTA DE VERIFICAÇÃO PARA ANÁLISE MANUAL DE ACESSIBILIDADE EM PORTAIS E SÍTIOS ELETRÔNICOS DO ART. 2º, § 2º, DA PORTARIA Nº 08/SMPED-GAB/2018.

Objetivo e Metodologia

Esta lista de verificação visa identificar barreiras de acessibilidade na navegação de portais e sítios eletrônicos. Baseia-se no uso do navegador Google Chrome e da extensão NoCoffee Vision Simulator. Para a realização dos testes de navegação acessível e de entendimento de um sítio ou portal eletrônico (análise manual/simulação da navegação pelo usuário), deve ser utilizado um dos seguintes leitores de tela:

- JAWS for Windows (pago - 30 dias grátis)

https://www.freedomscientific.com/Downloads/JAWS

- NVDA (grátis)

https://www.nvaccess.org/download/

- VoiceOver (nativo no MacOS e no iOS)

- TalkBack (nativo no Android)

Critérios – Lista para verificação manual de acessibilidade digital

As respostas às perguntas contidas na lista de verificação a seguir devem ser afirmativas (sim), exceto para as recomendações destacadas.

1. Navegação na página

Navegando pelos links do sítio ou portal eletrônico com as teclas TAB (para avançar) e SHIFT + TAB (para voltar).

1.1 É possível utilizar a tecla TAB e as demais teclas do teclado sem impedimento e acessar todos os links e elementos de formulário da página?

1.2 O conteúdo dos links é claro e informa qual página será aberta?

1.3 Caso haja links adjacentes (sequência de links), estes estão separados explicitamente de forma que não há cacofonia (confusão ou extrema repetição), quando se ouve uma sequência longa de links?

2. Estrutura, navegação por cabeçalhos e por blocos de conteúdos

Os níveis de cabeçalho (elementos HTML H1 a H6) devem ser utilizados de forma hierárquica, pois organizam a ordem de importância e subordinação dos conteúdos, facilitando a leitura e compreensão. Pelo leitor de tela, deve ser possível navegar de um cabeçalho a outro e verificar a estrutura da página. A maioria dos leitores de tela utiliza o atalho "H" do teclado em combinação com os números de 01 a 06. A codificação da Estrutura, dos cabeçalhos, dos blocos de conteúdos e dos outros elementos no código-fonte da página quando estão no padrão W3C e de forma semântica melhoram substancialmente a navegação e experiência do usuário com deficiência.

2.1 A hierarquia de cabeçalhos existe e está clara?

2.2 Os cabeçalhos estão ordenados e não há repetição do nível de cabeçalho \h1\>?

2.3 A leitura e tabulação estão ordenadas de forma lógica e intuitiva?

2.4 O título da tabela está definido e localizado no primeiro elemento da tabela?

2.5 Há um resumo dos dados de tabelas extensas e/ou é possível compreender a complexidade da tabela informacional?

2.6 Em tabelas de dados simples, estão associadas células de dados às células de cabeçalho?

2.7 Existe aviso antes da atualização automática periódica da página (‘refresh’), do redirecionamento automático para uma nova página e/ou na abertura de uma nova aba ou janela?

2.8 Todas as funções da página são disponibilizadas via teclado, sem bloquear o foco ou fixá-lo em um elemento da página?

2.9 Elementos que recebem o foco pelo teclado estão claramente marcados, ficando evidentes e passíveis de serem clicados?

2.10 Todos os scripts, conteúdos dinâmicos, interfaces de controle e outros elementos programáveis contidos nas páginas (por exemplo: plugins de visualização de PDF, gráficos de pizza dinâmicos, carrossel com troca de slide, entre outros) são acessíveis? Caso contrário, existe conteúdo equivalente?

2.11 É possível acessar todo o conteúdo em lista e em seu(s) sub-nível(is)?

2.12 As cores do plano de fundo e do primeiro plano estão suficientemente contrastantes?

2.13 Inexistem efeitos visuais piscantes, intermitentes ou cintilantes? 

2.14 O idioma principal da página está identificado?

2.15 Os elementos que possuem conteúdo em um idioma diferente do principal estão devidamente identificados?

2.16 Em resumo, é possível compreender a estrutura da página de forma que não gere confusão e se saiba qual informação será obtida ou quais ações e tarefas devem ser executadas com clareza?

2.17 Caso haja Pop-ups (moldais), estes são acessíveis?

2.18 As páginas são acessíveis e responsivas em dispositivos móveis

Nota: Recomenda-se aderência aos itens abaixo, porém não obrigatoriamente.

1. Crie âncoras para ir direto a um bloco de conteúdo como, por exemplo: o primeiro link da página é o "Ir para o conteúdo principal", o segundo link é o “Ir para o menu”, o terceiro link é o “Ir para pesquisa”, o quarto link é o “Ir para o rodapé”.

2. Utilização de elementos do tipo tabelas (<TABLE>) apenas para dados tabulares e não para efeitos de disposição dos elementos da página.

3. Abertura de novas instâncias de ‘abas ou janelas’ apenas com solicitação/ permissão do usuário.

4. O Html5 (ou o código-fonte da página) é desenvolvido seguindo os padrões da W3C e de forma semântica.

3. Imagens acessíveis

Os testes abaixo visam verificar se os textos alternativos que descrevem as imagens lidas pelo software leitor de tela correspondem exatamente ao que as imagens mostram. Imagens que fazem parte do contexto da página (como um logotipo ou a foto que ilustra uma notícia) são consideradas imagens relevantes. Imagens decorativas, como fundo da página e bordas, não são consideradas relevantes.

3.1 Todas as imagens relevantes têm um texto alternativo claro e relacionado à imagem?

3.2 Todas as informações textuais da página são acessíveis por leitores de telas  sem necessidade de OCR?

3.3 Há imagens mapeadas? Estão acessíveis?

3.4 Há infográficos (ou outros tipos de conteúdo visual complexo)? Estão acessíveis ou com texto equivalente?

4. Preenchimento e navegação em formulários

Ao se navegar por formulários, não deve haver barreiras que impeçam que o usuário passe de campo em campo e acione botões. As instruções devem ser claras e os rótulos devem estar relacionados com cada campo. Os softwares leitores de tela devem ler cada campo e relacioná-lo com seu devido rótulo.

4.1 Os campos de formulário da página possuem um título claro / compreensível?

4.2 As informações sobre o preenchimento dos formulários são claras?

4.3 Os campos de preenchimento obrigatório estão indicados não apenas por cor diferenciada?

4.4 Há alternativa em texto para os botões de imagem de formulário e essa descreve com clareza a ação que será executada?

4.5 As etiquetas de texto (labels ou rótulos) estão associadas aos seus campos correspondentes no formulário?

4.6 Os campos dos formulários com informações relacionadas estão agrupados logicamente, e o propósito ou natureza dos agrupamentos está explicitado claramente?

4.7 Mensagens de erro e avisos são claros? É possível acessá-los facilmente?

4.8 Quando ocorre erro ou engano em alguma digitação, é possível corrigi-lo?

4.9 Quando houver anti-spam para liberação de envio dos dados (captcha), estes itens estão disponíveis também em áudio e texto?

4.10 Os estados dos botões (desabilitado, mouse over, etc.) são indicados de forma clara e acessível?

4.11 Os estados dos botões (desabilitado, mouse over, etc.) são indicados de forma clara e acessível?

5. Tamanho e relacionamento de elementos

Verificação de problemas em relação ao tamanho dos elementos presentes no sítio ou portal eletrônico. Elementos muito pequenos podem prejudicar o uso para muitas pessoas.

Utilize o Google Chrome, e a extensão "NoCoffee Vision Simulator", opção "Flutter (nystagmus)" definida em 100, para dificultar a interação com os elementos presentes na página e movimente o cursor sobre os menores links e elementos da página durante o teste.

5.1 É fácil clicar nos elementos da página?

5.2 É possível aumentar e diminuir o tamanho das fontes do sítio ou portal através do browser sem que o conteúdo ou a funcionalidade sejam perdidos ou prejudicados? A técnica de “design responsivo” deve ser considerada para que o sítio ou portal se adapte ao tamanho da tela quando o usuário aumentar o tamanho das páginas (utilizando CTRL/COMMAND + para aumentar e CTRL/COMMAND - para diminuir).

5.3 O sítio ou portal se adapta adequadamente com zoom de 200%, exibindo as informações importantes e funcionalidades sem barras laterais de rolagem?

6. Conteúdo textual

6.1 Os textos contidos na página são de fácil compreensão e, para os textos de conhecimento mais avançados, estão disponibilizadas informações suplementares que expliquem ou ilustrem o conteúdo principal?

6.2 Na primeira ocorrência de siglas, abreviaturas ou palavras incomuns (ambíguas, desconhecidas ou utilizadas de forma muito específica), está disponibilizada sua explicação ou forma completa?

6.3 Os textos contidos na página possuem alinhamento consistente entre diferentes seções, preferencialmente alinhados à esquerda?

7. Legendas, transcrições e audiodescrição

Nota: Recomenda-se aderência aos itens abaixo, porém não obrigatoriamente.

Conteúdos em vídeo ou áudio devem ter alternativas textuais e em Língua de Sinais presentes na página. O usuário deve compreender o sentido das imagens em movimento e seus sons. Para conteúdos em vídeo com áudio (audiovisual), é necessária a inserção de legendas ou Closed Caption e da janela de Libras. Já para conteúdos informacionais sonoros (exemplo: arquivo MP3), deve haver uma transcrição em texto.

7.1 Todos os vídeos ou áudios possuem alternativa em texto?

7.2 A alternativa textual possui o mesmo conteúdo que está sendo apresentado pelo vídeo ou pelo áudio?

7.3 Existe tradução para Libras em todo conteúdo de áudio, vídeo e texto?

7.4 Existe audiodescrição em todos os vídeos? Para conteúdos informacionais apenas no formato vídeo, é necessário que exista audiodescrição. Ela é responsável por informar os eventos, acontecimentos e outras informações visuais em forma de áudio.

7.5 Há mecanismo para ativar, parar, pausar, silenciar ou ajustar o volume de qualquer som que se reproduza na página?