PORTARIA Nº 27/SMPED-GAB, DE 10 DE ABRIL DE 2025

Altera os anexos da Portaria nº 57/SMPED-GAB, de 14 de agosto de 2024.

Silvia Regina Grecco, Secretária Municipal da Pessoa com Deficiência, no uso das atribuições que lhe são conferidas por lei,

RESOLVE:

Art. 1º Os anexos I, II, III e IV da Portaria nº 57/SMPED-GAB, de 14 de agosto de 2024, que regulamenta o Decreto 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, passam a ter a seguinte redação:

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º 57/SMPED-GAB/2024

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 de navegadores web em conjunto com tecnologias assistivas. Este anexo I terá sua validade extinta mediante a publicação de norma Brasileira da ABNT que se sobreponha a este conteúdo.

Para a realização dos testes de navegação acessível e de entendimento de 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

Lista de verificação

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

1. Interação por teclado

É importante que a interface e o conteúdo possam ser navegados e operados utilizando somente o teclado. A navegação pelos componentes de interação da página é feita utilizando a tecla TAB para avançar o foco ao próximo componente e SHIFT + TAB para retroceder o foco ao componente anterior. A operação e o acionamento dos componentes de interação é feita utilizando as teclas ENTER, ESPAÇO, ESC e as direcionais, essencialmente.

1.1 É possível utilizar a tecla TAB e as demais teclas do teclado sem impedimento e acessar todos os links e elementos do 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 a 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) subnível(is)?

2.12 As cores do plano de fundo e do primeiro plano sã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 pagina é 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 tela 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 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ários e ela 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 AntiSpam 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?

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?

ANEXO II

MODELO DE TERMO DE COMPROMISSO - ART. 3º, IV, DA PORTARIA Nº 57/SMPED-GAB/2024

TERMO DE COMPROMISSO DE MANUTENÇÃO DA ACESSIBILIDADE DIGITAL

Eu (para pessoa física: nome completo, nacionalidade, CPF, estado civil, endereço completo / para pessoa jurídica: nome completo do representante legal, razão social, CNPJ, cargo, endereço completo da sede), responsável pelo sítio ou portal __________________________________, comprometo-me a, durante a vigência do prazo de validade do Selo de Acessibilidade Digital concedido ao sítio ou portal _______________________, a manter sua acessibilidade: no nível de aderência às diretrizes de acessibilidade digital igual ou superior ao verificado no momento da aprovação do Selo de Acessibilidade Digital e em cumprimento à lista de verificação manual de acessibilidade em portais e sítios eletrônicos ou à norma da ABNT superveniente.

Estou ciente de que o descumprimento deste compromisso poderá resultar na revogação do referido Selo de Acessibilidade Digital, conforme previsto no artigo 7º da PORTARIA Nº 57/SMPED-GAB/2024.

São Paulo, ____de _____________de 20__.

(Nome e assinatura do requerente)

ANEXO III

MODELO DE TERMO DE COMPROMISSO - ART. 8º DA PORTARIA Nº 57/SMPED-GAB/2024

ATESTADO DA ACESSIBILIDADE DIGITAL PARA FINS DE RENOVAÇÃO

Eu (para pessoa física: nome completo, nacionalidade, CPF, estado civil, endereço completo / para pessoa jurídica: nome completo do representante legal, razão social, CNPJ, cargo, endereço completo da sede), atesto que o sítio ou portal _____________________________ teve as páginas verificadas em auditoria técnica e que mantém o nível de aderência às diretrizes de acessibilidade digital igual ou superior ao verificado no momento da aprovação do Selo de Acessibilidade Digital e em cumprimento à lista de verificação manual de acessibilidade em portais e sítios eletrônicos ou à norma da ABNT superveniente.

Estou ciente de que o descumprimento deste compromisso poderá resultar na revogação do referido Selo de Acessibilidade Digital, conforme previsto no artigo 7º da PORTARIA Nº 57/SMPED-GAB/2024.

São Paulo, ____de _____________de 20__.

(Nome e assinatura do responsável pela auditoria)

ANEXO IV

MODELO DE AUTORIZAÇÃO DO ART. 3º, VII, DA PORTARIA Nº 57/SMPED- GAB/2024

AUTORIZAÇÃO PARA AMPLO ACESSO AO SÍTIO OU PORTAL

Eu (para pessoa física: nome completo, nacionalidade, CPF, estado civil, endereço completo / para pessoa jurídica: nome completo do representante legal, razão social, CNPJ, cargo, endereço completo da sede), responsável pelo sítio ou portal ___________________________________________, autorizo, de acordo com o previsto no inciso VII do artigo 3º da PORTARIA Nº 57/SMPED-GAB/2024, que a Secretaria Municipal da Pessoa com Deficiência - SMPED e a Comissão Permanente de Acessibilidade - CPA terão a garantia de amplo acesso às páginas a serem avaliadas, conforme indicação realizada pelo requerente (conforme § 3º do artigo 2º).

Por fim, segue abaixo o nome de usuário (login) e senha para propiciar o acesso da SMPED e da CPA a ambientes restritos com a plena garantia de que a referida liberação seja protegida e com as transações bloqueadas:

* nome de usuário (login):

* senha:

São Paulo,____de_______________de 20__.

(Nome e assinatura do requerente)”

Art. 2º Esta portaria entra em vigor na data de sua publicação.

SILVIA REGINA GRECCO

Secretária Municipal da Pessoa com Deficiência