Bruno Cota Xavier 5 Jun 2024, 4:14 am · editado

 

 

3 Important Reasons For Web Accessibility - AmDee LLC

 

Quer tornar seu site acessível ou verificar se ele já é?

 

Neste post, apresento um widget desenvolvido em JavaScript que não só tornará seu site mais acessível, mas também ajudará a validar se ele está seguindo alguns princípios de acessibilidade, como o HTML semântico.

 

O HTML semântico é uma prática de desenvolvimento web que utiliza elementos HTML de forma descritiva, atribuindo significado estrutural ao conteúdo da página. Em vez de utilizar elementos genéricos como <div> e <span>, os desenvolvedores empregam elementos semânticos como <header>, <footer>, <nav>, <article>, <section>, <aside>, entre outros, para descrever claramente o propósito de cada parte do conteúdo.

 

  • Instalação

Para instalar o widget em seu site, basta adicionar o seguinte código logo após a tag <body>:

<style>
  #translator-widget {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 10px;
  }
</style>
<div id="translator-widget"></div>
<script src="https://brunocotaxavier.github.io/index.js"></script>

 

Após salvar e atualizar seu site no canto inferior da direita vai possuir um botão escrito "Ativar Assistente" aperte para ativar e desativar. Após ativado é só ir clicando nas partes do seu site que ele vai começar a falar o conteudo que está sendo interagindo com o usuario.

 

Exemplo do botão: 

 

 

 

  • Alterando o estilo do botão

Você também pode estilizar o botão adicionando novos estilos ou alterando sua cor, posição ou qualquer outra coisa na tag <style>:

<style>
  #translator-widget {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: blue;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-radius: 10px;
  }

  • Conclusão

Neste artigo destaco a importância da acessibilidade para sites e apresento uma solução prática para tornar seu site mais acessível. O widget em JavaScript não só ajuda a melhorar a acessibilidade, mas também valida a conformidade com os princípios de HTML semântico.

 

Ao oferecer um botão de "Ativar Assistente", a ferramenta proporciona uma experiência inclusiva aos usuários, enquanto a personalização do estilo do botão permite integrá-lo harmoniosamente ao design do site. Investir em acessibilidade não apenas melhora a experiência do usuário, mas também fortalece a reputação e eficácia do site no mercado digital atual.