5 Ferramentas de Acessibilidade para Designers

A tecnologia é uma aliada quando falamos em inclusão. São sites, aplicativos e dispositivos tecnológicos feitos para pessoas com diferentes tipos de habilidades e incapacidades.

É importante desenvolver recursos que tornam seu design acessível para o maior número de pessoas.

Em vez de criar tudo do zero, aqui está uma lista de ferramentas interessantes de acessibilidade para designers. Desde a criação de combinações de cores de acordo com os padrões WCAG até a adição de diferentes modos de leitura, essas ferramentas são essenciais para todos os designers

1) Stark
Stark uma ferramenta de acessibilidade repleta de recursos que ajuda designers da web e de dispositivos móveis a adicionar recursos de acessibilidade. Quer você esteja projetando um produto do zero ou atualizando seu sistema de design existente, isso oferece uma maneira descomplicada de criar produtos acessíveis em qualquer nível.

2) ColorSafe
Para tornar sua loja virtual acessível para usuários com diferentes recursos visuais, o ColorSafe oferece uma série de recursos que são muito fáceis de integrar em seu design. Ele permite que você crie visualmente lindas paletas de cores acessíveis, bem como taxas de contraste de texto e fundo com base nas diretrizes WCAG.

3) Contrast
Tal como o nome indica, o Contrast é uma ferramenta de acessibilidade que elimina o trabalho manual dos testes de relação de contraste de cores e o faz de forma rápida e automática.

Por ser uma ferramenta amigável, a ferramenta fornece informações precisas de contraste de cores (pontuação de contraste) de acordo com os padrões WCGA e atualiza todo o aplicativo em um instante.

4) Contrast Grid
Quando você trabalha em um grande projeto de design de aplicativo móvel ou web, você tem muitas opções a fazer em termos de combinações de cores. Contrast Grid é uma ferramenta que permite testar várias combinações de cores de primeiro e segundo plano.

A ferramenta baseada na web tem uma interface simples na qual você pode inserir manualmente diferentes cores que deseja usar como linhas e colunas e criará uma grade compatível com WCAG 2.) requisitos mínimos de contraste. Você pode então copiar o código da grade para HTML ou CSS.

5) Who Can Use
Who Can Use é uma ferramenta interessante que ajuda designers da web e gráficos a entender como diferentes combinações de cores e contrastes de cores afetam pessoas com diferentes deficiências visuais.

Mantendo as recomendações das WCAG em consideração, esta ferramenta intuitiva apresenta um seletor de cores de fundo com controle deslizante e informa a taxa de contraste e a graduação WCAG de cada cor. Além disso, com cada cor você consegue ver como essa cor será vista por pessoas de diferentes tipos de visão junto com uma simulação.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.

5 Ferramentas de Acessibilidade para Designers

março 30, 2022 Comércio Eletrônico, Recursos

Faça Você Mesmo - DICA #5 Time-based Media - Acessibilidade e SEO

 O Time-based Media é uma das diretrizes de acessibilidade de acordo com o critério 1.2 das diretrizes WCAG 2.0.

Essa diretriz está relacionada aos vídeos, áudios, slides (apresentações) ou qualquer outra mídia que tenha a duração (tempo) como uma propriedade.

Se sua loja virtual possui uma apresentação multimídia como um vídeo falando sobre sua empresa ou sobre um produto, alguns clientes não serão capazes de perceber ou terão dificuldade em perceber as imagens ou o áudio.

Ao fornecer alternativas, seu conteúdo melhora a acessibilidade para uma gama de indivíduos com e sem deficiência.

• Clientes que tem problemas para entender de forma visual incluem pessoas com deficiências visuais, certas deficiências cognitivas, dificuldades de linguagem e dificuldades de aprendizagem. Ao incluir alternativas de texto tornam a apresentação multimídia acessível a essas pessoas.
• Clientes que tem problemas para entender a faixa de áudio incluem pessoas com deficiência auditiva ou surdas ou que tem certas dificuldades cognitivas, de linguagem ou de aprendizagem. Ao incluir alternativas de texto e legendas são as duas maneiras mais comuns de aprimorar a acessibilidade para pessoas que tem problemas para processar a parte de áudio de uma apresentação multimídia.
• Clientes surdos e cegos podem ter problemas ou serem incapazes de entender uma comunicação visual, a faixa de áudio ou ambas. Um tipo especial de alternativa de texto, a alternativa para Time-based Media, pode tornar a multimídia acessível para pessoas surdas e cegas.
• Clientes que tem o português ou outro idioma como uma segunda língua se beneficiam de alternativas em texto, especialmente aqueles que entendem melhor ao lê-lo do que ao ouvi-lo.
• Alguns clientes aprendem visualmente, eles estão "programados" para entender melhor olhando do que ouvindo ou fazendo. Outros são aprendizes auditivos, eles aprendem melhor ouvindo do que vendo ou fazendo. As alternativas de texto ajudam a todos a obter o máximo de uma apresentação multimídia.
• Alternativas de texto e legendas são convenientes. Por exemplo, um vídeo legendado pode ser entendido em um ambiente barulhento ou em um ambiente silencioso.
• As alternativas de texto tornam a multimídia pesquisável. Quando os motores de busca de pesquisa indexam seu conteúdo, eles não podem “ler” seus vídeos e áudios. Os mecanismos de pesquisa só entendem texto (embora a tecnologia de reconhecimento de imagem esteja surgindo).

A Seção 1.2 das Diretrizes WCAG 2.0 estabelece os seguintes requisitos:

Time-based Media inclui:

• Conteúdo apenas de áudio
• Conteúdo apenas de vídeo
• Conteúdo de áudio e vídeo

Apenas áudio pré-gravado

• Um texto alternativo fornece uma identificação descritiva
• Uma versão em texto apresenta informações equivalentes

Apenas vídeo pré-gravado

• Um texto alternativo fornece uma identificação descritiva
• Uma versão em texto apresenta informações equivalentes ou uma faixa de áudio é fornecida

Áudio-vídeo pré-gravado

• Um texto alternativo fornece uma identificação descritiva
• É fornecida uma descrição de texto ou áudio-descrição
• Legendas ou interpretação em linguagem de sinais é fornecida

Para facilitar o entendimento, em termos gerais, Time-based Media é qualquer elemento incorporado na loja virtual que se move, faz barulho, exibe conteúdo sincronizado com outro elemento da loja ou exibe conteúdo que muda sem intervenção do usuário.

Certas considerações de acessibilidade precisam ser feitas ao construir o conteúdo, para que todos tenham acesso a esse conteúdo, independentemente do seu nível de habilidade.

Conheça mais sobre a Diretriz 1.2 Time-Based Media.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.    

Faça Você Mesmo - DICA #5 Time-based Media - Acessibilidade e SEO

outubro 14, 2020 Comércio Eletrônico, Recursos

Acessibilidade para lojas virtuais

Sua loja permite que todos os usuários tenham acesso às informações da mesma forma?

Se você respondeu "não" ou não sabe responder essa pergunta, está na hora de deixar o seu e-commerce mais acessível.

Vitor Mendrone, evangelista de tecnologia do Fastcommerce, mostrou nesse webinar quando custa a acessibilidade, quais os benefícios e como sua loja pode atender aos critérios de acessibilidade com mudanças simples.

Veja o conteúdo:

Clique aqui e faça o download da apresentação

Acessibilidade para lojas virtuais

abril 26, 2016 Palestras

Faça Você Mesmo - DICA #7 Distinguível - Acessibilidade

 

Tornar o conteúdo "distinguível" é uma forma de melhorar a acessibilidade da sua loja virtual.

Isso significa que o seu conteúdo precisa ser legível por pessoas com uma ampla variedade de deficiências visuais, bem como pelo público não deficiente em geral também.

As deficiências visuais podem incluir daltonismo, baixa visão, visão turva e muitas outras.

Existem quatro critérios principais para tornar sua loja virtual distinguível. Eles são:

Contraste entre a cor do texto e o fundo. 

Pessoas com deficiência visual têm dificuldade em distinguir cores e formas que não tenham contraste suficiente. Em muitas situações, um elemento no design pode passar despercebido.

Texto amarelo em um fundo azul pode ser um modelo padrão em um hotsite, mas é altamente problemático para pessoas com baixa visão ou daltonismo amarelo-azul. Hiperlinks azuis em um fundo azul são igualmente problemáticos.

O verificador de contraste de cor do WebAim permite que você verifique se as cores escolhidas para o texto ou imagens na sua loja virtual atendem aos requisitos de contraste. Se você não estiver familiarizado com a notação hexadecimal para cores, você também pode usar ContrastChecker.com e clicar na paleta de cores para abrir um seletor de cores RBG.

Tamanho da fonte sem prejudicar a legibilidade.

Os clientes com problema de baixa visão podem dar zoom na sua loja virtual através do navegador de até 200% e ainda assim navegar, interagir e comprar na loja.

À medida que envelhecemos, fica mais difícil distinguir o texto impresso (ou na tela) em tamanhos menores.

Os padrões de acessibilidade da web reconhecidos internacionalmente, conhecidos como Web Content Accessibility Guidelines (WCAG), exigem que o texto possa ser redimensionado sem tecnologia assistiva em até 200% sem perda de conteúdo ou funcionalidade.

As páginas da sua loja virtual precisam ser totalmente legíveis e funcionais quando alguém aumenta o texto usando o zoom do navegador da web.

Botões claros e fáceis.

Por favor, não invente a roda!

Os botões devem ser semelhantes a botões, os links devem ser semelhantes a links e todos os destinos clicáveis na sua loja virtual devem ser grandes o suficiente para serem imediatamente reconhecíveis como um destino clicável.

Tornar alvos clicáveis (ou seja, botões de ação, botões de envio de formulários, links, etc.) pequenos torna difícil para a maioria dos adultos clicar corretamente no alvo. Isso torna virtualmente impossível para pessoas com deficiência motora.

Cor como única característica distintiva.

Aproximadamente 8% dos homens e 0,5% das mulheres são afetados pelo daltonismo (ou deficiência de cor).

O daltonismo não se limita simplesmente às cores vermelho e verde, elas ocorrem em uma variedade de cores. Dessa forma, você não pode presumir que um único indivíduo possa ver uma cor específica como a cor que você espera.

O conteúdo acessível não usa a cor como única característica distintiva. Apresentações e conteúdos acessíveis não usam frases como "como você pode ver na linha vermelha" ou "como você pode ver na linha azul".

Os sites acessíveis não usam a cor vermelha para indicar avisos importantes ou erros. O Simulador de Daltonismo Coblis pode pegar seus gráficos, tabelas e imagens e mostrar a você como eles se parecem para pessoas com uma variedade de deficiências de cores.

Conheça mais sobre a Diretriz 1.4 Distinguível.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.    

Faça Você Mesmo - DICA #7 Distinguível - Acessibilidade

outubro 28, 2020 Comércio Eletrônico, Recursos

Faça Você Mesmo - DICA #4 Alt Text - Acessibilidade e SEO

 

O Alt text (texto alternativo), também conhecido como "atributos alt" e "descrições alt", são utilizados para descrever uma imagem.

O preenchimento da tag alt é essencial para os motores de busca (Google, Bing, DuckDuckGo, Yahoo), a função dessa tag é descrever o que tem dentro da imagem.

Com a evolução da tecnologia e a inteligência artificial, a cada dia os motores de busca estão mais inteligentes. Isso não quer dizer que ela não precise da sua ajudinha.

A utilização do texto alternativo vai melhorar a experiência do usuário e consequentemente obter benefícios relacionados ao SEO.

Conhecemos algumas práticas recomendadas como utilizar palavras-chave no nome da imagem, mas somente a palavra-chave no texto alternativo é bom?

A resposta para pergunta é sim e não. A tecnologia para reconhecer uma imagem está em constante evolução e tem melhorado a cada dia, mas elas ainda não conseguem detalhar com precisão o conteúdo que tem dentro.

Voltando para resposta, sim, você pode utilizar apenas uma palavra-chave, e não, não é aconselhável deixar a interpretação exclusivamente nas mãos dos motores de busca. Se eles não entenderem ou errarem o que sua imagem é, é possível que você classifique por palavras-chave indesejadas ou perca completamente a classificação.

Exemplo com apenas a palavra-chave:

<img src="tenis.jpg" alt="tênis">

Este texto alternativo é apenas "bom" porque não é descritivo. a imagem é um tênis. Mas, há mais a ser dito sobre a imagem.

Exemplo descrevendo a imagem:

<img src="tenis.jpg" alt="Tênis de corrida para performance ideal para corredores com pisada neutra">

Este texto alternativo é uma alternativa melhor porque é muito mais descritivo do que está na imagem. Isso não é apenas um tênis (como o primeiro exemplo demonstrou), é um tênis de corrida para performance ideal para corredores com pisada neutra.

Agora sabemos que é melhor descrever uma imagem para os motores de busca, mas esse não é o único motivo, um motivo extremamente importante é que muitas vezes são esquecidos a questão de acessibilidade, e esse fator não pode ser ignorado.

Transformar a loja virtual mais acessível é um trabalho diário, o objetivo é descrever as imagens para os visitantes que não conseguem vê-las. Esses usuários não utilizam os navegadores tradicionais que utilizamos, são navegadores específicos, isso inclui leitores de tela e navegadores que bloqueiam imagens. Ou seja, o texto alternativo é a única solução, incluir texto alternativo nas imagens garante que todos os usuários, independentemente da capacidade visual, possam apreciar o conteúdo da sua loja virtual.

Boas práticas para escrever seu texto alternativo:

• Adicione texto alternativo descritivo às imagens
• Descreva a imagem o mais especificamente possível
• Mantenha-o (relativamente) curto. Os leitores de tela mais populares cortam o texto alternativo em cerca de 125 caracteres
• Use suas palavras-chave, o texto alternativo oferece uma oportunidade de incluir palavra-chave em uma página
• Evite o excesso de palavras-chave.
• Não negligencie os botões do formulário. Se um formulário em seu site usa uma imagem como botão "enviar", atribua a ele um atributo alt. Os botões de imagem devem ter um atributo alt que descreva a função do botão, como "comprar", "inscrever-se" etc.
• Fornece uma forma alternativa de CAPTCHA que produz o código CAPTCHA como áudio  

Conheça mais sobre a Diretriz 1.1 Alternativas de texto.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.    

Faça Você Mesmo - DICA #4 Alt Text - Acessibilidade e SEO

setembro 30, 2020 Comércio Eletrônico, Recursos

Palestra: Usabilidade e acessibilidade vendem e muito!

Olá pessoal!

Nossa última palestra foi realizada por um de nossos colaboradores, o Adriano Yamuto.

Como tivemos ótimas dicas de usabilidade e acessibilidade que têm grande impacto nas vendas de uma loja, gostaríamos de compartilhar o vídeo da palestra com vocês.

Não deixe de conferir:

Até a próxima palestra.

Palestra: Usabilidade e acessibilidade vendem e muito!

agosto 09, 2012 Palestras

Faça Você Mesmo - DICA #6 Adaptável - Acessibilidade

 

Criar algo complexo e de difícil compreensão é fácil, o complicado é criar algo simples!

Ao desenvolver um design que seja adaptável e que pode ser apresentado de diferentes maneiras sem perder informações ou a estrutura, essa é a parte complicada.

A Diretriz 1.3 Adaptável visa garantir que a estrutura e a relação do conteúdo não mudem quando fornecida de uma maneira alternativa, que a sequência de leitura correta seja mantida e que o conteúdo não dependa exclusivamente de dados sensoriais.

Exemplos de conteúdo adaptável:

• Os campos obrigatórios em um formulário não são apenas distinguidos por um contorno vermelho, mas também por um asterisco.
• Um documento de texto simples segue as convenções de formatação padrão que permitirão que as tecnologias assistivas o convertam em sua seqüência adequada.
• Se várias colunas forem usadas para exibir o conteúdo, a progressão linear do conteúdo vai de cima para baixo e então para o topo da próxima coluna.
• Um texto de várias páginas usa um ícone de seta para indicar onde clicar para continuar na próxima página. Além do ícone, a seta é rotulada como "continuar" ou "próximo" e inclui instruções sobre como navegar para a próxima página.

Os clientes podem alterar a aparência da tela do computador ou as configurações do navegador para atender às suas necessidades, como ampliar a página ou utilizar o modo noturno.

Você deve se perguntar: Quando todo o estilo (CSS) não for mostrado na página, o conteúdo estará de fácil entendimento na estrutura?

O conteúdo deve ser claro quando visto em telas pequenas ou diferentes resoluções, como um dispositivo móvel, tablet, notebook e desktop.

As instruções para manusear precisam ser claras e oferecer opções. Algumas ações podem ser tornar inacessíveis para pessoas com deficiência ou um dispositivo que não ofereça suporte. Por exemplo:

"Clique no botão redondo para continuar"

O botão deve ser claramente rotulado para que seja óbvio que é o botão que você precisa pressionar. Se houver vários botões, certifique-se de que todos estejam claramente identificados para distinguir suas funções.

"Ouça as instruções de áudio para orientação"

Isso é obviamente problemático, o áudio ficará inacessível para pessoas com deficiência auditiva, enquanto o texto pode ser lido, mas também falado por um leitor de tela, se necessário.

"Deslize do lado direito da tela para revelar o menu"

Alguns usuários podem não conseguir deslizar a tela devido a deficiência ou porque o dispositivo não suporta o toque. Uma alternativa deve ser fornecida, como um atalho de teclado ou botão que pode ser ativado pelo teclado ou outros meios.

Faça uma análise na sua loja virtual e verifique quais mudanças precisam ser feitas para melhorar a acessibilidade.

Conheça mais sobre a Diretriz 1.3 Adaptável.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.

Faça Você Mesmo - DICA #6 Adaptável - Acessibilidade

outubro 21, 2020 Comércio Eletrônico, Recursos

Uso de Alto Contraste de Cores para um Design mais Acessível

 

Uma alta taxa de rejeição é frequentemente causada pela baixa acessibilidade visual de uma loja virtual. Quando as fontes são muito pequenas ou dificilmente legíveis, quando há muitas distrações ou espaço em branco insuficiente, muitas pessoas simplesmente deixam a loja sem pensar duas vezes.

Um dos motivos mais frequentes para o abandono precoce são os esquemas de cores mal selecionadas que diminuem a legibilidade do conteúdo.

De acordo com as estatísticas da OMS, existem cerca de 285 milhões de pessoas com deficiência visual em todo o mundo, muitas das quais são parcial ou totalmente daltônicas.

Pessoas com deficiência visual veem as cores de forma diferente, portanto, evitar baixo contraste de cores em nossos designs é inevitável se quisermos oferecer aos nossos clientes um site acessível e amigável.

Padrões da Web para contraste de cores

A taxa de contraste de cores mede a diferença de contraste entre duas cores. Quanto mais alto for o valor, mais fácil será distinguir o objeto (texto, imagem, gráfico) em primeiro plano e em segundo plano.

As cores podem contrastar de muitas maneiras diferentes, como matiz, valor e saturação. A taxa de contraste de cores é calculada por uma fórmula fornecida pelo W3C, a principal organização de padrões internacionais para a World Wide Web.

Pode assumir um valor entre 1: 1 (nenhum contraste, o primeiro plano e o fundo têm a mesma cor) e 21: 1 (o contraste máximo que existe apenas entre preto e branco).

O nível AA requer uma proporção de pelo menos 4,5: 1 para texto normal e 3: 1 para texto grande. É muito mais fácil ler textos grandes como legendas, por isso precisa de um contraste de cor menor.

Se você deseja atingir o nível AAA, que é o nível aprimorado, precisa projetar seu esquema de cores com mais cuidado, pois exige uma relação de contraste de pelo menos 7: 1 para texto normal e 4,5: 1 para texto grande. Se um texto fizer parte de um logotipo ou nome de marca, não há requisito mínimo de contraste de cor em nenhum dos níveis WCAG.

Só podemos chamar uma loja virtual visualmente acessível se a relação de contraste de cor entre cada objeto de primeiro plano e seu plano de fundo atingir pelo menos o Nível AA.

Benefícios da alta taxa de contraste de cor

Garantindo melhor legibilidade você não envolve apenas usuários com deficiência visual, mas também pessoas que leem seu conteúdo em telas pequenas, como em um smartphone ou um smartwatch, entre más condições de iluminação e em monitores de qualidade inferior.

As pessoas também leem mais rápido quando há maior contraste entre o texto e o fundo, então provavelmente levará mais tempo para que se cansem do conteúdo da loja virtual.

Existem muitas ferramentas gratuitas excelentes em toda a web que podem ajudar os designers a verificar a relação de contraste de cores de seus sites

O mais importante a lembrar é que você sempre precisa comparar a cor do primeiro plano, como a cor do texto, com a área ao redor (cor do plano de fundo).

WebAim (Web Accessibility In Mind) é uma organização que promove a acessibilidade na web que oferece aos desenvolvedores um verificador de contraste de cores simples.

O Verificador de contraste de cores do WebAim informa se suas cores passam nos testes WCAG AA e AAA, tanto para textos normais quanto grandes.

Se você deseja criar um site visualmente acessível, é sempre uma boa ideia evitar o uso de cores apenas para transmitir funcionalidade ou significado. Os ícones que mudam de cor com base em seu estado atual são exemplos típicos disso.

Se for possível, sempre crie pistas visuais adicionais que ajudem as pessoas que veem as cores de maneira diferente a compreender a funcionalidade.

Nunca se esqueça de prestar especial atenção ao contraste de cores dos botões, links e menus, pois são os meios de navegação do seu site. Se os usuários não conseguirem navegar facilmente em seu site, você os perderá rapidamente. As cores acessíveis para botões de call to action também são cruciais para boas taxas de conversão.

É uma boa prática de fluxo de trabalho testar a taxa de contraste de cores o mais cedo possível no processo de design, pois será difícil persuadir seu cliente a alterar o esquema de cores do site posteriormente no processo de design.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.

Uso de Alto Contraste de Cores para um Design mais Acessível

março 09, 2022 Comércio Eletrônico, Recursos

Construindo uma Loja Virtual Responsável - Como a sua Empresa pode fazer a diferença?

 

Em um mundo cada vez mais consciente e preocupado com questões sociais e ambientais, as empresas têm a oportunidade e a responsabilidade de adotar práticas mais éticas e sustentáveis. Este artigo explora como uma loja virtual pode se tornar socialmente responsável, destacando estratégias que vão além do aspecto comercial, focando no impacto positivo na sociedade e no meio ambiente.

1. Sustentabilidade Ambiental:

• Práticas sustentáveis em toda a cadeia de fornecimento.
• Oferta de produtos eco-friendly.
• Embalagens sustentáveis e certificações de produtos.

2. Ética na Cadeia de Fornecimento:

• Garantia de práticas éticas de produção.
• Transparência sobre a origem dos produtos.

3. Diversidade e Inclusão:

• Promoção da diversidade na equipe e na representação de produtos.
• Apoio a causas que promovem igualdade e inclusão.

4. Conscientização do Consumidor:

• Informação detalhada sobre produtos e práticas sustentáveis.
• Incentivo a escolhas conscientes.

5. Filantropia e Doações:

• Doações para organizações de caridade.
• Envolvimento em iniciativas sociais e comunitárias.

6. Proteção dos Dados do Cliente:

• Garantia de segurança e privacidade dos dados.
• Transparência sobre a coleta e uso de informações pessoais.

7. Acessibilidade Online:

• Garantia de acessibilidade para pessoas com deficiência.
• Experiência de navegação inclusiva.

8. Transparência e Comunicação:

• Transparência sobre práticas comerciais e políticas.
• Canais eficazes para receber feedback dos clientes.

9. Eficiência Energética:

• Adoção de práticas que reduzam o consumo de energia.

10. Programas de Educação do Consumidor:

• Desenvolvimento de programas educacionais online.

Conclusão: Ao incorporar essas práticas em sua loja virtual, você não apenas constrói uma marca mais forte e confiável, mas também contribui para um mundo mais justo e sustentável. A responsabilidade social não é apenas uma estratégia de negócios, mas uma maneira de fazer a diferença. Faça parte dessa mudança e inspire seus clientes a fazerem escolhas conscientes. Sua loja virtual pode ser mais do que um local de transações; pode ser um agente de transformação positiva na sociedade.

Este artigo foi escrito por Luciana Hamassaki, da equipe de marketing do Fastcommerce.

Construindo uma Loja Virtual Responsável - Como a sua Empresa pode fazer a diferença?

fevereiro 29, 2024 Comércio Eletrônico, Recursos

Faça Você Mesmo - DICA #8 Acessível por Teclado - Acessibilidade

 

Navegar apenas com o teclado é fundamental para a acessibilidade. Ele se torna um componente essencial para alguns usuários.

Os usuários cegos, deficientes visuais (baixa visão) ou com mobilidade reduzida usam as setas tradicionais do teclado e as teclas de tab para navegar na loja virtual.

A diferença entre o teclado e o mouse é que quando o usuário navega pelo teclado, o acesso aos links na tela é sequencial.

O usuário precisa percorrer todos os links que estão disponíveis na loja até encontrar o que deseja.

O mouse por outro lado permite o acesso direto aos links.

Até a loja virtual mais sofisticada se torna inútil para um usuário que não pode acessar seus controles e interagir com ela.

A ordem de leitura é determinada pela ordem DOM

Não importa como você vai estruturar seu HTML. O teclado ou leitor de tela navegará pela loja virtual com base em onde o código aparece no HTML.

Se existe um texto no topo e a posição é alterada via CSS. Nesse caso, os usuários de teclado e leitor de tela encontrarão esse texto na parte superior. A alteração da posição com CSS não será levada em conta.

Cuidado com o Tabindex

Evite usar valores do tabindex maiores que 0. Isso pode fazer com que a ordem de leitura não corresponda à ordem de tabulação.

Ao fazer isso, vai dificultar para os usuários que dependem de tecnologias para navegar pelo conteúdo da página. 

Use controles HTML nativos

Usar frameworks e bibliotecas personalizadas na maioria dos casos significa que você terá que fazer um trabalho extra para torná-las acessíveis.

Ao utilizar controles HTML nativos, como um controle de dropdown, os usuários de teclado e leitor de tela não terão problemas para usar o controle porque é um padrão estabelecido.

Tente não usar DIVs clicáveis como botões. Basta usar os botões porque eles já são anunciados automaticamente como botões, aparecem na ordem das guias e funcionam com a tecla Enter.

Os usuários de teclado devem ser capazes de acessar os elementos interativos, não apenas a navegação principal. Dessa forma, os elementos do formulário, menus suspensos, botões, caixas de diálogo e outros widgets devem ser acessíveis.

Um problema é causado por widgets com elementos <div> ou <span>. Eles podem ser atribuídos ao foco do teclado por meio de tabindex. Alternativamente, usar apenas links, botões e campos de formulário HTML garantirá que todos os elementos possam ser tabulados.

Você já navegou na sua loja virtual através do teclado?

Você sabe dizer se ela é acessível?

Conheça mais sobre a Diretriz 2.1 Acessível por Teclado.

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.    

Faça Você Mesmo - DICA #8 Acessível por Teclado - Acessibilidade

novembro 04, 2020 Comércio Eletrônico, Recursos

Usabilidade e acessibilidade vendem, e muito!

Sua loja não deve ser um quebra-cabeça para ser desvendado pelo o cliente.

É preciso fornecer meios para que todos os seus clientes possam comprar com facilidade na sua loja, mesmo aqueles com problemas de visão, ou com dificuldades para operar um computador. Estes clientes representam um percentual importante de seus visitantes e não podem ser esquecidos!

Na próxima quinta-feira (14/6) faremos uma apresentação com o intuito de melhorar sua loja virtual e seus resultados financeiros.

Mostraremos nesta palestra dicas de usabilidade e acessibilidade que poderão ter grande impacto nas vendas da loja.


Clique aqui para visualizar a apresentação

Em breve vamos liberar a gravação.

Usabilidade e acessibilidade vendem, e muito!

junho 14, 2012 Palestras

Faça Você Mesmo - DICA #2 Call To Action

Você sabe o que é Call to Action?

De uma forma bem simples o Call to Action conhecido pela abreviação CTA, é uma frase ou palavra que será um chamariz para o seu botão ou link.

Isso significa que você deseja que o cliente tenha uma ação e essa ação pode variar conforme sua estratégia.

Pense na jornada do cliente ao visitar a loja, o cliente pode assinar uma newsletter, pode clicar em um botão e ver as promoções, pode comprar um produto, pode finalizar uma compra, etc.

Todas essas ações precisam ser definidas estrategicamente, segundo dados do Sebrae, a taxa de conversão do comércio eletrônico brasileiro é de 1,65%.

Muitas lojas não chegam a essa taxa de conversão, possivelmente porque a loja virtual não se comunica de forma clara para o seu público-alvo.

Uma maneira de testar para ver qual é o melhor CTA, é através de um Teste A/B. Esse teste permite criar dois botões diferentes e com dois CTAs. No final de um período é possível identificar qual trouxe mais resultado.

Provavelmente o exemplo mais conhecido em uma loja virtual é o Comprar na página de detalhes do produto. O CTA vai ser o guia de direção, ele vai brilhar em todas as etapas, quando o cliente acessar a página o CTA precisa se destacar.

Conforme foi explicado, não há uma resposta definitiva de qual termo usar, cores ou tamanhos, a melhor maneira é testar com o Teste A/B. Essa é a única forma de ter dados concretos.

O que ocorre, muitas vezes o termo X funciona para a loja Y, mas esse termo não necessariamente vai funcionar para sua loja virtual.

Quais são os princípios básicos para um Call To Action eficaz?

- Cores
Não existe uma cor definitiva que converta melhor, é importante garantir que você esteja usando uma cor que seja compatível com seus clientes e sua marca.

Crie um contraste do botão com o fundo da loja, quando o cliente acessar a página ele precisa encontrar o botão assim que a página for acessada.

Muito cuidado em inserir animações e cores que não representam sua marca, isso pode confundir o cliente.

- Botões simples
O design do botão precisa ser na medida, certifique-se de manter o texto dentro do botão e agradável também. Um simples "Compre Agora", "Adicione ao Carrinho", "Compre" funcionam muito bem.

- Acima da dobra (The fold)
Quando desenvolver o design, tente deixar as informações principais acima da dobra. O The Fold como é conhecido, é o ponto que é visto em qualquer site/loja que vem depois da rolagem para baixo. Ou seja, qualquer conteúdo acima da dobra é o que os visitantes visualizam imediatamente.

Esse é um ponto que envolve design, usabilidade e acessibilidade, a ideia é chamar atenção dos clientes acima da dobra e é provável que eles continuem navegando pela loja virtual.

Exemplos de Call to Actions

COMPRAR!
COMPRE JÁ!
COMPRE!
FRETE GRÁTIS
VER MAIS!
MAIS DETALHES!
FINALIZAR COMPRA
APROVEITE!
NÃO PERCA!
OPORTUNIDADE ÚNICA!

Agora que você está familiarizado com o CTA, faça uma análise e verifique se é possível aplicar algumas dessas técnicas em sua loja virtual.

Boas Vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.   

Faça Você Mesmo - DICA #2 Call To Action

julho 22, 2020 Comércio Eletrônico, Recursos

As Melhores Fontes do Google em 2022

 

A tipografia no seu projeto seja online ou impressa, diz muito quem você é.

Ela é essencial para o seu projeto, e tem uma grande importância na construção da sua marca.

Se você quer sair do comum e se destacar, o Google fonts é um excelente local para encontrar a fonte perfeita para o seu projeto.

A melhor parte, é que as fontes são gratuitas. Atualmente são mais de 1350 famílias de fontes disponíveis no site. Tenho certeza que uma fonte vai se encaixar no que você precisa!

Então para ajudar a você, nós reunimos uma seleção de fontes que são especiais.

Antes de passar uma lista de fontes, você precisa entender o impacto que uma fonte bem selecionada pode trazer de benefícios para você.

A tipografia é uma das características cruciais do design UX. Selecionar a melhor fonte para sua loja virtual, melhora a experiência do usuário. É a famosa combinação perfeita.

Quando os designers selecionam fontes para a loja, algumas perguntas precisam ser feitas, como pesos de fontes, legibilidade da altura x, taxa de contraste, escala de fonte em vários dispositivos.

É sempre melhor usar uma faixa específica de pesos, correspondências com acessibilidade, altura x, usar um padrão de taxa de contraste torna a legibilidade eficaz em vários dispositivos.

Conheça as fontes que selecionamos para o seu projeto:

Roboto

Open Sans

Lato

Montserrat

Work Sans

Rubik

Inter

Fira Sans

Boas vendas!

Este artigo foi escrito por Adriano Yamuto, da equipe de desenvolvimento do Fastcommerce.

As Melhores Fontes do Google em 2022

maio 11, 2022 Comércio Eletrônico, Recursos