Um roteiro para um site de comércio eletrônico altamente acessível

18-tips-to-boost-your-website-accessibility

Ter um site de comércio eletrônico com uma acessibilidade patética para seus clientes-alvo é como ter um carro bonito que não tenha um mecanismo de desempenho. Ninguém gostaria de visitar um site que leva muito tempo para carregar corretamente e muitas vezes frustra um usuário. Se você quiser melhorar a sorte da sua entidade de negócios, você precisa trabalhar no sentido de melhorar a acessibilidade do seu site para obter excelentes taxas de conversão e vendas de produtos. Com o suporte de um design de site de comércio eletrônico eficaz, navegação no site, processo de checkout mais rápido, impressionante tempo de carregamento e desempenho do site, você pode facilmente alcançar o sucesso notável em termos de tráfego do site, taxas de conversão, envolvimento do cliente e vendas de produtos. Aqui está um relato detalhado do que todos os ingredientes são necessários para uma acessibilidade do site alucinante.

1. Melhorar o alcance e a qualidade do material textual

Qualquer site sem conteúdo ou texto impressionante e envolvente é simplesmente inútil. Além disso, os algoritmos recentes do Google, como o Panda, o Hummingbird e outros, têm comprovado a superioridade do conteúdo para gerar as taxas de conversão e tráfego do site necessárias. Lembre-se de prestar atenção adequada ao conteúdo, bem como gráficos ou imagens para aumentar o número de leitores do seu conteúdo escrito. Dê uma olhada nas várias maneiras pelas quais você pode realizar essa tarefa crucial sem problemas.

  • Use imagens otimizadas de alta qualidade para aumentar o valor e o apelo de seu conteúdo escrito. Além disso, use uma tag alt de imagem eficaz, juntamente com a legenda e a descrição para melhorar a facilidade de SEO do seu conteúdo.
  • Ofereça vídeos curtos de alta qualidade com o seu conteúdo (Vídeo do produto) para tornar o conteúdo mais atraente e valioso.
  • Faça uso de um conteúdo de áudio alternativo eficaz que não afete o desempenho geral e o tempo de carregamento do seu site.
  • Utilize os serviços de uma transcrição de texto simples ou feed RSS para tornar o conteúdo do site disponível para um grande número de visitantes.
  • Inclua uma legenda para otimizar a experiência de vídeo de seus clientes-alvo.

2. Empregue maneiras de ler conteúdo para seus clientes-alvo

Existem inúmeras pessoas que podem não conseguir ler o conteúdo do seu site adequadamente devido à deficiência visual, ao tamanho pequeno da fonte ou ao tipo de fonte ilegível do texto escrito. Para garantir uma acessibilidade perfeita ao site para esse tipo de cliente, é obrigatório ter uma versão em áudio da página e do conteúdo do site. Este arquivo de áudio gravado pode transmitir convenientemente a mensagem escrita do seu site e suas páginas internas para seus clientes-alvo. Além disso, existem vários softwares leitores de tela como Microsoft Narrator, JAWS da Freedom Scientific, VoiceOver para sistemas Mac, Orca (código aberto) para sistemas baseados em Unix, NVDA (código aberto), Dolphin Supernova da Dolphin e vários outros.

3. Tome as medidas necessárias para melhorar a navegação do seu site (especialmente formulários) –

De que vale um site se ele não permitir que os visitantes naveguem por ele de maneira perfeita? Seria um desperdício total do seu tempo, dinheiro e esforços se navegar em torno de seu site é uma tarefa desafiadora. Pode haver inúmeros fatores em seu site que podem agir como um grande obstáculo para a navegação perfeita do seu site. Você precisa dar atenção especial a esses elementos específicos do site, como formulários de inscrição, página de checkout, imagens, vídeos, links e outras áreas para garantir a navegação sem esforço do seu site.

Entre eles, diz-se que os formulários têm um efeito drástico no desempenho e navegação do website. Você precisa eliminar campos desnecessários, rótulos ilógicos e outros fatores para que os visitantes possam preencher os formulários do site sem qualquer contratempo. Além disso, você precisa evitar restrições de limite de tempo e usar cabeçalhos corretos para o seu conteúdo em seu site para facilitar uma navegação mais rápida. Para aumentar a acessibilidade dos formulários do seu site, você precisa executar as etapas a seguir.

  • Use um rótulo bem posicionado e descritivo com cada campo em seu formulário.
  • Para estabelecer um relacionamento efetivo entre o texto do rótulo e o campo de formulário, você pode usar uma tag <label> ou uma propriedade <ARIA>.
  • Certifique-se de que a ordem de tabulação do formulário esteja em sincronização adequada com a ordem dos campos do formulário.
  • Para campos semelhantes ou relacionados em um formulário, você pode agrupá-los usando os conjuntos de campos. Por exemplo, campos como "Nome da rua / Localidade", "Aldeia / Cidade" e "Estado / Província" podem ser combinados em um único campo de "Endereço de correspondência".
  • Informe os usuários sobre campos obrigatórios em seu formulário através da ajuda do símbolo de asteriscos (*). Além disso, você pode tornar os campos desejados obrigatórios usando a propriedade ARIA. Use ARIA required = ”true” para campos de formulário obrigatórios e ARIA required = ”false” se o campo for de natureza opcional.
  • Fornecer informações ao cliente sobre o envio bem-sucedido do formulário ou qualquer erro relacionado à submissão. Mostrar erros no local e posição relevantes em seu formulário para aumentar as chances de uma resolução de erro mais rápida que possa ajudar no envio rápido de formulários.
  • Evite o uso de códigos CAPTCHA para validação de formulário devido a problemas de inacessibilidade e desempenho. Existem outras alternativas como Doce Captcha, PlayThru, NuCaptcha, caixas de seleção JavaScript do lado do cliente e outras que podem ser usadas para validar dados de formulário. Para entender mais sobre como tornar seus formulários livres de spam, você pode confira este link.

4. Selecione a cor que está em ressonância com o conteúdo do seu site, imagens, planos de fundo e outros elementos

Para garantir a legibilidade efetiva do seu site, é importante escolher a cor apropriada para seus elementos de plano de fundo e de primeiro plano. Lembre-se de usar uma cor contrastante para o seu texto e seu plano de fundo para melhorar a acessibilidade do seu site. Cuidado com o uso de cores semelhantes para o texto eo fundo do seu site, como usar a cor do texto preto, juntamente com violeta, marrom ou qualquer outra cor escura afetará a usabilidade do seu site, em grande medida. A relação de contraste normal ao usar a cor para os elementos de plano de fundo e de primeiro plano deve ser em torno de 7: 1 mas também uma relação de contraste de 4.5: 1 também fará justiça à visibilidade de seu conteúdo e garantirá a acessibilidade efetiva de seu site. Você pode verificar a combinação de cores com a ajuda deteste a / b de ferramentas de mapa de calor. ?By?these tools you will be able to know more effective areas and less effective areas and make the required changes on the website.

5. Assegure-se de que o tamanho correto da fonte de seu conteúdo

tamanho da fonte de conteúdo

Seria praticamente imaturo e ingênuo esperar que seus leitores tenham uma visão excepcional do 6 / 6 para que possam ler sem esforço o pequeno tamanho do tamanho da fonte do seu site. Não faça com que seus clientes se esforcem muito ao ler o conteúdo do seu site. Para facilitar a acessibilidade ao conteúdo do site, é necessário usar tamanhos de fonte relativos expressos em termos de porcentagens ou ems, em vez de usar tamanhos de fonte absolutos expressos em termos de pontos ou pixels. Devido a esta prática acima, é praticamente muito mais fácil para os usuários fazerem as mudanças desejadas nos tamanhos de fonte conforme suas necessidades e visão. Então, é a necessidade da hora de se concentrar no tamanho da fonte também e não apenas em melhorar o apelo visual do seu site.

6. Papel da tecnologia assistiva no site acessibilidade-

A tecnologia assistiva também conhecida como tecnologia adaptativa (AT) é, na verdade, uma bênção para pessoas com vários tipos de deficiências ligadas a distúrbios visuais, cognitivos, motores ou outros transtornos físicos e mentais para acessar as várias áreas de um site sem esforço. movimento do mouse, posicionamento ou cliques. A tecnologia representa um grupo de dispositivos assistivos, adaptativos e de reabilitação, voltados para pessoas com diferentes deficiências, juntamente com o processo envolvido na localização, seleção e utilização desses dispositivos. Essa tecnologia proporcionou um grande senso de liberdade a todas as pessoas com deficiência, com a ajuda de vários aprimoramentos que mudaram a forma como essas pessoas interagiam com vários dispositivos digitais.

Vários dispositivos, como leitores de tela, sistema braille, software de ampliação de tela, software de reconhecimento de fala, acesso por comutador e outros, têm feito um tremendo trabalho ao fornecer uma acessibilidade perfeita a pessoas com vários tipos de deficiências. Para obter mais informações sobre os diferentes tipos de tecnologias assistivas que atuam como guias de luz para pessoas com deficiência, tudo o que você precisa fazer é seguir essa simples ligação.

Para direcionar um número maior de pessoas para o local desejado dos seus links, certifique-se de que seus links tenham um rótulo e uma cor adequados para indicar seus clientes-alvo sobre eles. Use um texto mais contextual do que frases simples como "clique aqui", "leia mais", "saiba mais" e outras declarações que podem fazer com que seus clientes-alvo cliquem em um link específico. link para obter maior atenção do cliente e vincular a acessibilidade.

8. Use HTML para melhorar a acessibilidade de seus dados tabulares

Faça questão de usar apenas HTML para tabelas de dados em vez de usar as imagens. Essa abordagem será extremamente útil para os visitantes que estão usando as tecnologias assistivas para acessar o conteúdo da tabela. Além disso, tente incluir cabeçalhos de coluna adequados para melhorar a acessibilidade do conteúdo da tabela. Também é aconselhável não usar o formato tabular para o layout ou estrutura da página, pois causa problemas no acesso efetivo do conteúdo.

Para tornar suas tabelas de dados mais acessíveis para seus usuários, você precisa marcar as células de cabeçalho da tabela de forma eficaz. Além disso, você precisa usar o valor do atributo scope para o cabeçalho da coluna ou cabeçalho da linha da sua tabela. Se você quiser melhorar a acessibilidade do seu campo "data" na sua tabela, você precisa alterar <td> Data </ ​​td> para <th scope = "col"> Data </ ​​th> na sua parte de codificação. Para informar os usuários sobre sua tabela de dados, você precisa incluir uma descrição ou legenda de tabela relevante por meio do uso da tag <caption>.

<table>

<caption> Horário de aula </ caption>

<tr> ….

9. Verifique a acessibilidade da sua página através do uso do WAVE-

A ferramenta de avaliação de acessibilidade da Web (WAVE) é uma ferramenta notável que pode ajudar os desenvolvedores da Web a melhorar a acessibilidade de seu site. Esta ferramenta de avaliação de sites fornece informações e comentários cruciais sobre a acessibilidade da sua página, inserindo o URL da sua página da Web na home page da ferramenta Wave. Se você tiver dúvidas, perguntas e dúvidas sobre esta ferramenta de avaliação de sites, confira este link útil, https://wave.webaim.org/help. Além disso, os usuários iniciantes que não estão familiarizados com esta ferramenta pioneira de acessibilidade e avaliação do site podem obter a ajuda deste link para obter conhecimento necessário sobre a verificação da acessibilidade de seu site. Outras ferramentas além do WAVE que podem ser a luz orientadora para melhorar a acessibilidade do seu site são o CynthiaSays, o Tenon e muito mais.

10. Trabalhe para tornar seu conteúdo para download acessível a seus clientes-alvo

Seria de interesse do seu site se você pudesse tomar as medidas necessárias para disponibilizar seu conteúdo para download em seu site, como a documentação de termos e condições, manual de uso do produto, especificação da categoria do produto ou qualquer outro documento acessível aos usuários interessados. Não os faça vagar aqui e ali em busca de softwares necessários para acessar um determinado documento, mas certifique-se de tornar seu conteúdo para download acessível através de um software comum disponível. Sempre use arquivos separados por vírgula ou delimitados por tabulações, arquivos PDF e outros formatos que não precisem de nenhum software proprietário licenciado do fornecedor em questão. Para tornar seu conteúdo acessível através do formato PDF, você precisa seguir as várias diretrizes mencionadas neste link crucial, https://webstandards.sonoma-county.org/content.aspx?sid=1014&id=1123.

11. Utilize os serviços de marcos ARIA-

Graças à introdução do novo ARIA (Accessible Rich Internet Applications), uma especificação do World Wide Web Consortium (W3C), que é um órgão global da Web, os aplicativos da Web agora podem ser facilmente interagidos e compartilhados através do teclado. Você pode facilmente tornar seu site mais fácil de navegar pelo teclado através do uso de funções de marco ARIA. Tudo o que você precisa fazer é adicionar um atributo HTML para qualquer uma das funções de ponto de referência, por exemplo, role = "navegação", role = "main" ou role = "search" para direcionar o usuário para a seção específica da página um único toque de tecla. Vamos verificar este código HTML que pode adicionar o atributo de função de marco apropriado na seção "principal" e "pesquisa" de um website.

<div id = "maincontent" role = "main">

<form action = "search.php" role = "pesquisa">

12. Aprenda a usar os serviços do Learning Management Systems (LMS) e do Content Management Systems para melhorar a acessibilidade do seu website.

Para melhorar a acessibilidade do seu site de comércio eletrônico, você precisa aproveitar os serviços de uma plataforma de comércio eletrônico eficaz que consiste em vários recursos. Além disso, você pode ter os serviços de vários sistemas de gerenciamento de conteúdo como WordPress, Joomla, Drupal e outros para fornecer acesso fácil a vários temas, modelos, plugins de comércio eletrônico e outras opções. Plugins são vistos para fornecer um nível avançado de acessibilidade, desempenho e usabilidade para um site para melhorar o desempenho geral de um website.

No entanto, certifique-se de que você está aproveitando a experiência de um design de plug-in excepcional e serviços de desenvolvimento como Knowband, que tem anos de experiência nesta área. Alguns dos excelentes plugins fornecidos por ele são os seguintes:

Magento Algumas das incríveis Extensões Magento que são fornecidos pela Knowband são Magento Abandoned Cart, Magento Auto Subscribe, Magento One Page Supercheckout, Magento Google Analytic Enhanced Ecommerce e muito mais.

OpenCart Aqui estão alguns dos Extensões OpenCart?that can help in enhancing the productivity of your OpenCart store to a great extent. They are OpenCart Ajax Cart+, OpenCart One Page Supercheckout Pro, OpenCart Social Loginizer, OpenCart Price Alert and such others.

PrestaShop Se você está tendo uma loja PrestaShop, estas são algumas das Suplementos PrestaShop?that can be the game changer for your online store and can improve the accessibility and performance of your website. Take a look at these plugins which are PrestaShop Abandoned Cart, PrestaShop Return Manager, PrestaShop One Page Supercheckout and many others.

13. Melhore o alcance do seu site em vários dispositivos baseados em dispositivos móveis

Devido ao constante aumento no número de clientes móveis, é de responsabilidade exclusiva de cada entidade comercial on-line tornar seu site acessível a vários dispositivos móveis disponíveis. Use várias ferramentas, como Usabilidade em dispositivos móveis, teste otimizado para dispositivos móveis, PageSpeed ​​Insights, teste de velocidade do website Pingdom e outras ferramentas de SEO para dispositivos móveis para melhorar o desempenho de seu website para dispositivos móveis. Se você quiser saber mais sobre como melhorar seus resultados de SEO para dispositivos móveis, acesse este link informativo. Além disso, o uso dos serviços de rede de entrega de conteúdo (CDN) junto com o formato de imagem webp para o navegador Google Chrome pode ter um efeito significativo na acessibilidade do seu site em vários dispositivos móveis.

14. Use o texto alternativo apropriado para imagens

Apesar disso, diz-se que "Uma imagem pode dizer milhares de palavras em si", mas essas imagens precisam do suporte do texto Alt para ajudar o usuário a entender a intenção ou a mensagem correta por trás dessas imagens. É preciso notar que a mensagem que deve ser transmitida com uma imagem em particular precisa ser usada no texto alternativo dessa imagem.Semelhança, se a imagem em questão consistir em algum texto, esse texto em particular também deve ser usado. ser incluído no texto alternativo.Certifique-se de que as imagens que são usadas como links sejam fornecidas com texto alternativo apropriado para que o leitor de tela possa ler a mensagem associada de sua imagem em vez de ler o nome de arquivo da sua imagem. como um atributo alt pode ser usado em uma imagem para melhorar seu apelo e compreensão entre os clientes-alvo.

<img src = "webaimlogo.jpg" alt = "WebAIM – Acessibilidade à Web em mente">

No entanto, você pode deixar o texto alternativo vazio para suas imagens se a imagem for usada

15. Inicie as etapas para tornar seu website mais acessível por meio de

Existem inúmeros usuários que gostam de navegar em um site específico através do uso de teclas de atalho ou teclas de acesso. Essas chaves de acesso são elementos HTML que não são usados ​​efetivamente durante o processo de desenvolvimento de sites para garantir um acesso perfeito a determinadas seções do site por meio do teclado. Para usar os serviços das chaves de acesso, você precisa seguir estas etapas.

– Pressione a tecla de função (Alt no caso do Windows e Ctrl se o sistema for um Mac) junto com a tecla específica de letra ou número associada a uma seção específica do site.

Além disso, os programadores podem facilmente adicionar a funcionalidade das chaves do Access em seu site, adicionando um código HTML simples na tag de âncora de navegação do site em questão. O código de amostra é mostrado abaixo.

<a href="index.html" accesskey="1"> Página inicial </a>

No entanto, o que limita o uso de chaves do Access em um nível global é que não há nenhum conjunto universal de chaves atribuídas que podem ser usadas para implementar a funcionalidade de chaves do Access em um site. Além disso, não existe esse mecanismo pelo qual os usuários podem ser informados sobre as teclas do teclado que são usadas como teclas de acesso para navegar em um site. No entanto, existem alguns países, como o Reino Unido, onde a autoridade em questão recomendou um conjunto de chaves de acesso que podem ser atribuídas para uma navegação perfeita no site por meio do teclado. Aqui está uma lista dessas chaves de acesso.

S – Saltar a navegação

1 – Página Inicial

2 – Notícias / Atualizações

3 – Mapa do Site

4 – Pesquisar

5 – Perguntas Frequentes (FAQ)

6 – Ajuda

7 – Procedimento de Reclamações

8 – Termos e Condições

9 – Formulário de Comentários

10 – Informações Chave de Acesso

16. Incluir cabeçalhos corretamente para organizar sua estrutura de conteúdo

Para um acesso perfeito ao conteúdo do seu site, use a estrutura de títulos. Use tags de cabeçalho HTML como <h1>, <h2>, <h3> e outras, em local apropriado em seu conteúdo, para a organização efetiva de seu conteúdo e para melhor legibilidade. Siga a ordem correta de seus títulos e mantenha a apresentação longe da estrutura de título através do uso de CSS. Algumas das diretrizes que precisam ser seguidas ao criar uma nova classe CSS para o seu conteúdo são as seguintes.

  • Sempre use a tag <h1> para o título principal da página. Mantenha a tag de título <h1> reservada para o título do site e outras páginas individuais.
  • Inclua títulos para a devida indicação e organização de sua estrutura de conteúdo.
  • Siga uma ordem apropriada ao usar as manchetes e nunca pule da tag de cabeçalho <h1> para <h3> diretamente, pois isso dá uma sensação de sentimento aos leitores de que algum conteúdo específico está ausente no meio.

17. Faça uso de índices de guias para a navegação contínua em torno de seu website.

Para determinar a ordem adequada de navegação em torno de campos de formulário através do uso da tecla tab, é importante utilizar os índices de tabulação. Esse recurso desempenha um papel importante ao navegar pelos formulários de um site. No entanto, se o design de sua página estiver equipado com uma ordem lógica adequada e uma hierarquia forte devido à presença de títulos e subtítulos, não há muito o que se preocupar com esse índice de guias.

Como, formulários consistem em numerosos elementos pequenos como caixas de seleção e botões de rádio que precisam de posicionamento preciso do mouse e clique por humanos, realizando o mesmo seria difícil para uma pessoa com deficiência motora. Em situações como essa, a vida dessas pessoas pode ter muito alívio se uma indexação de tabulação adequada for executada no formulário, o que pode permitir que o usuário interaja com cada elemento do formulário por meio de toques simples no teclado.

Gostou disso? Você também vai gostar disso

Joe Parker

We boast of the best in the industry plugins for eCommerce systems and has years of experience working with eCommerce websites. We provide best plugins for platforms like - Magento, Prestashop, OpenCart and Shopify. We also provide custom module development and customization services for the website and modules.

Leave a Reply

Your email address will not be published. Required fields are marked *