{"id":228,"date":"2025-08-20T18:17:21","date_gmt":"2025-08-20T18:17:21","guid":{"rendered":"https:\/\/cyan-wallaby-231954.hostingersite.com\/?p=228"},"modified":"2025-09-04T06:04:27","modified_gmt":"2025-09-04T06:04:27","slug":"accessible-web-book","status":"publish","type":"post","link":"https:\/\/mavicoutinho.com\/pt\/accessible-web-book\/","title":{"rendered":"Web Livro Acess\u00edvel"},"content":{"rendered":"

Projeto web desenvolvido pela Superintend\u00eancia de Ensino a Dist\u00e2ncia (SEAD)<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Problema<\/strong><\/h2>\n\n\n\n

O livro possu\u00eda algumas limita\u00e7\u00f5es e funcionalidades desatualizadas que n\u00e3o atendiam a necessidade de seus usu\u00e1rios. Estes usu\u00e1rios poderiam incluir pessoas com defici\u00eancia e\/ou pessoas idosas com condi\u00e7\u00f5es de sa\u00fade que tragam dificuldades de leitura.<\/p>\n\n\n\n

<\/p>\n\n\n\n

Minha fun\u00e7\u00e3o<\/strong><\/h2>\n\n\n\n

Pesquisadora, respons\u00e1vel por trabalhar em pesquisas sobre os perfis de usu\u00e1rios que seriam atendidos pelas melhorias do web livro acess\u00edvel, e designer, respons\u00e1vel pelo design de experi\u00eancia do usu\u00e1rio (UX) e interface de experi\u00eancia do usu\u00e1rio (UI).<\/p>\n\n\n\n

<\/p>\n\n\n\n

Outros membros da equipe<\/strong><\/h2>\n\n\n\n
    \n
  • Edson Rufino<\/strong> \u2013 Coordenador, pesquisador, e designer<\/li>\n\n\n\n
  • Hellen Rodex<\/strong> \u2013 Pesquisador(a) e designer<\/li>\n\n\n\n
  • Rafael Moraes<\/strong> \u2013 Pesquisador(a) e designer<\/li>\n\n\n\n
  • Semiramis Louzada<\/strong> \u2013 Pesquisador(a) e designer<\/li>\n<\/ul>\n\n\n\n

    <\/p>\n\n\n\n

    Pesquisa<\/strong><\/h2>\n\n\n\n

    A fase inicial do projeto envolveu coletar informa\u00e7\u00f5es sobre pessoas com defici\u00eancia e pessoas idosas.<\/strong><\/p>\n\n\n\n

    Cada membro da equipe contribuiu pesquisando diferentes perfis, identificando suas necessidades e validando o que o livro atual falhou em atender.<\/p>\n\n\n\n

    As Diretrizes de Acessibilidade para o Conte\u00fado da Web (WCAG)<\/strong> foram as nossas principais refer\u00eancias.<\/p>\n\n\n\n

    Em minha pesquisa, foquei em perfis de pessoas cegas, pessoas com baixa vis\u00e3o, e pessoas com defici\u00eancias motoras.<\/strong><\/p>\n\n\n\n

    <\/p>\n\n\n\n

    Resultados da pesquisa<\/strong><\/h2>\n\n\n\n

    Os seguintes aspectos foram identificados:<\/p>\n\n\n\n

      \n
    • Tipografia:<\/strong> Uso de fontes sem serifa<\/li>\n\n\n\n
    • Text resizing:<\/strong> Habilitar o aumento de texto<\/li>\n\n\n\n
    • Contraste:<\/strong> Garantir bom contraste, tamanho de fonte apropriada, e adequar o espa\u00e7amento entre letras e linhas<\/li>\n\n\n\n
    • Layout do conte\u00fado:<\/strong> Trazer mais clareza na estrutura ao aumentar o espa\u00e7o entre as se\u00e7\u00f5es de conte\u00fados<\/li>\n\n\n\n
    • Responsividade do conte\u00fado:<\/strong> Ajustar automaticamente para garantir bom funcionamento entre diferentes dispositivos m\u00f3veis e desktop<\/li>\n\n\n\n
    • Tipos de imagens:<\/strong> Evitar usar imagens no lugar de texto<\/li>\n\n\n\n
    • Descri\u00e7\u00e3o de imagem:<\/strong> Fornecer textos alternativos para descri\u00e7\u00e3o de imagens e gr\u00e1ficos<\/li>\n\n\n\n
    • Sele\u00e7\u00e3o de foco:<\/strong> Habilitar a tecla TAB<\/strong> para navegar entre elementos interativos<\/li>\n\n\n\n
    • Estrutura de t\u00edtulos (h1, h2...):<\/strong> Leitores de tela deveriam facilmente identificar t\u00edtulos para permitir que os usu\u00e1rios pulem entre as se\u00e7\u00f5es usando o teclado<\/li>\n\n\n\n
    • T\u00edtulos de p\u00e1gina:<\/strong> T\u00edtulos devem ser definidos corretamente, por serem os primeiros elementos lidos por leitores de tela<\/li>\n\n\n\n
    • Texto de link:<\/strong> Evitar links vagos como \"clique aqui\"; ao inv\u00e9s disso, usar links descritivos embutidos em textos com significados (ex.: \"Leia mais sobre esse t\u00f3pico\")<\/li>\n\n\n\n
    • Listas de conte\u00fado:<\/strong> Usar as tags de lista para que leitores de tela possam identific\u00e1-las corretamente<\/li>\n\n\n\n
    • Nomes acess\u00edveis em bot\u00f5es:<\/strong> Use aria-label<\/strong> para trazer nomes claros aos elementos interativos, sendo vis\u00edveis ou n\u00e3o<\/li>\n\n\n\n
    • Elementos labels:<\/strong> Elementos interativos precisam ter labels para er suporte a comandos de voz<\/li>\n\n\n\n
    • Cores recomendadas:<\/strong> N\u00e3o usar somente as cores para diferenciar os elementos; use formas<\/strong> tamb\u00e9m, j\u00e1 que alguns usu\u00e1rios podem ter dificuldade em perceber algumas cores.<\/li>\n<\/ul>\n\n\n\n

      Cores<\/strong><\/h2>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Acessibilidade<\/strong><\/h2>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Tipografia<\/strong><\/h2>\n\n\n\n
      \"\"<\/figure>\n\n\n\n

      Resultados<\/strong><\/h2>\n\n\n\n