Maximizando Acessibilidade em Lojas Payhip Parte 2 »Knitting-and.com

NOTA IMPORTANTE: A Payhip tem respondido tão bem às solicitações para tornar as lojas mais acessíveis que este tutorial não é mais relevante. Embora ainda existam alguns problemas, eles estão trabalhando ativamente para corrigi-los.

Depois de escrever a primeira parte do meu tutorial sobre como aumentar a acessibilidade nas lojas Payhip e fazer mais testes, descobri mais melhorias que podem ser feitas, então vamos lá!

Mais uma vez, estou fornecendo um código que você pode copiar e colar de forma que seja útil para o maior número de pessoas possível. Se você conhece CSS, tentarei explicar o que cada mudança está fazendo em relação à acessibilidade para que você possa editá-la ao seu gosto.

Se você não leu a primeira parte do meu tutorial sobre como aumentar a acessibilidade nas lojas Payhip, precisará ler primeiro para saber onde colar o código css mencionado ao longo deste tutorial.

A página da loja

Todas essas alterações devem ser coladas na caixa “personalizar css” da página da loja.

The Rainbow Stripe

A faixa de arco-íris no topo da página distrai muito, o que pode causar problemas para pessoas visualmente sensíveis. Vamos nos livrar disso.

div.stripe
{
display: none;
}

O botão de compartilhamento

O botão de compartilhamento nas lojas Payhip é um grande problema quando se trata de acessibilidade porque não tem nenhuma indicação de para que serve, a menos que você esteja familiarizado com o ícone de compartilhamento em dispositivos móveis. eu sou familiarizado com o ícone de compartilhamento no celular, mas ainda não entendi o que era até clicar nele. (Na verdade, só percebi que era isso hoje).

Dois botões retangulares.  O primeiro diz "Seguir", e o segundo tem um colchete deitado de lado e uma seta apontando para cima.

Não podemos editar o html para dar-lhe um nome, mas podemos ter certeza de que o texto é legível e seu propósito é óbvio. (Muito obrigado ao usuário superastrofemme do Twitter, que me ajudou com a mudança da fonte!)

/* Change Share Button to Say "Share" */
a.btn.btn-default.dripicons-upload.display-share-seller-profile-button::before
{
font-family: proxima-nova,Arial,Helvetica,sans-serif !important;
content: "Share";
color: #555;
}

Esta é a aparência do botão de compartilhamento agora. (A mudança nas cores do botão “seguir” foi abordada na parte 1 de Maximizando a acessibilidade nas lojas Payhip).

Dois botões retangulares.  O primeiro diz "Seguir", e o segundo botão diz "Compartilhado".

Mesmo que este botão agora tenha uma palavra visível, os leitores de tela ainda não conseguem dizer o que é. Infelizmente, não há nada que possamos fazer sobre isso, mas entrarei em contato com a Payhip para ver se eles podem consertar.

Os ícones da conta de mídia social

Por padrão, os ícones da conta de mídia social são círculos muito pequenos e claros. Quando você clica neles, eles vão para as contas de mídia social do proprietário da loja Payhip. No desktop, eles ficam no topo, no canto direito da página, enquanto no celular, eles ficam embaixo do nome da loja.

Vamos torná-los maiores e colocar um pouco mais de espaço entre eles. Isso os torna mais fáceis de ver e usar no celular. Estou aumentando o tamanho em 150% e tornando-os um pouco mais opacos. Eles serão mais fáceis de ver, mas não pretos, o que desviaria o foco do visitante do conteúdo principal da página.

/* Increase size and opacity of social sharing icons */
.ap-top-author-details .on-the-web-wrapper img 
{
width: 30px;
height: 30px;
margin-right: 15px;
opacity: .5;
}

Os ícones da conta de mídia social agora serão um pouco maiores e mais escuros como os da imagem abaixo. O número de ícones em sua página dependerá de quantas contas de mídia social você vinculou ao Payhip.

Dois ícones de círculo.  O da esquerda tem minúsculas "f" Logotipo do Facebook e o da direita com o logotipo do YouTube "botão play" logotipo.

O botão de coleção ativa

Quando você usa coleções no Payhip, o botão para a coleção que você está vendo atualmente é chamado de “botão de coleção ativa ‘. O fundo era um pouco claro demais em contraste com o texto branco. Esse código fará com que ele corresponda ao azul do preço e a outros elementos da página.

/* Darken backround on the active collection button */

.ap-collections-wrapper a.active, .ap-collections-wrapper a.active:hover {
border-color: #0a5f91;
background-color: #0a5f91;
}

Veja como o botão da coleção ativa ficará após as alterações. O fundo está um pouco mais escuro do que antes.

Três botões retangulares.  Da esquerda para a direita eles dizem "Todos os produtos, "Brinquedos", e "Chapéus".  o "Todos os produtos" O botão é o botão da coleção ativa e tem um texto claro em um fundo escuro.  Os outros botões têm texto escuro em fundo claro.

A seta para baixo “Mais”

Usar um link para mostrar a navegação do rodapé não é uma prática recomendada. A melhor coisa a fazer seria deixar os links visíveis o tempo todo, ou pelo menos dar um nome ao link de seta, mas não podemos fazer isso. Como não podemos, vamos alterar o texto do link para tornar mais óbvio o que clicar nele fará.

/* Change down arrow to text and make some room between links*/
.profile-page-footer a
{
margin-right: 20px;
}

.profile-page-footer a#footer-show-more-link
{
position: relative;
top: -1px;
}

.profile-page-footer a#footer-show-more-link:before
{
font-family: proxima-nova,Arial,Helvetica,sans-serif !important;
font-size:0.9em;
content: "(more…)";
}

A seta agora foi alterada para dizer “(mais…)”. Observe que meu fundo é verde. O seu será o cinza padrão ou a cor que você escolheu usar.

Texto: "Powered by Payhip (mais ...) As palavras "Payhip" está sublinhado.

Tal como acontece com o botão de compartilhamento, este link ainda não pode ser visto por leitores de texto e irei entrar em contato com Payhip sobre isso e outros problemas para ver o que eles podem fazer para corrigi-los.

Alteração dos links de rodapé para celular

Quando você tem links próximos uns dos outros, é necessário ter bastante espaço ao redor deles em sites para celular, porque os dedos são maiores do que os cursores. O código a seguir fará com que todos os links no rodapé pareçam botões se você estiver visualizando a página em um dispositivo com menos de 600 pixels de largura.

@media only screen and (max-width: 600px)
{
/* Change footer link styling for mobile */
.profile-page-footer a, #footer-more-section a
{
text-decoration:none;
color:#fff;
background-color: #0a5f91;
display:inline-block;
border-radius: 5px;
padding:15px;
margin:5px;
}
.profile-page-footer a#footer-show-more-link
{
display: block;
max-width:100%;
}

.profile-page-footer a#footer-show-more-link:before
{
color:#fff;
}
.profile-page-footer a, #footer-more-section a:selected
{
color: #0a5f91;
background-color: #D3D3D3;
}
}

Veja como os links de rodapé serão exibidos no celular. Novamente, sua cor de fundo será diferente da minha.

As palavras "Powered by Payhip" em uma linha com "(mais ...) embaixo.  As palavras "Payhip" e (mais ...) são textos claros e circundados por caixas com um fundo escuro.

As páginas do produto

Todas essas alterações devem ser coladas na caixa “personalizar css” para as páginas do produto.

The Rainbow Stripe

Vamos eliminar a faixa de arco-íris na página de produtos da mesma forma que fizemos na página da loja.

div.stripe
{
display: none;
}

Contraste do botão de texto e apresentação de slides

Quando você tiver carregado mais de uma imagem para um produto, haverá setas em caixas cinza claro em cada lado de suas imagens. O fundo desses e a cor do texto na página precisam ser ligeiramente mais escuros.

/* Change the colour of the slideshow arrows */
button.slick-arrow
{
background-color: #aaa;
}
button.slick-arrow:hover
{
background-color: #666;
}
/* Change the colour of text */
.view-page-wrapper .by-seller-section, .meat-skirt .description, .view-page-wrapper .view-page-meta .meta-file-size, span.dripicons-duplicate
{
color: #666;
}

A seta para baixo “Mais”

Assim como fizemos com a página da loja, precisamos alterar o texto da seta para baixo no rodapé para tornar seu propósito mais claro.

/* Change down arrow to text and make some room between links*/
.view-page-footer a
{
margin-right: 20px;
}
.view-page-wrapper .view-page-footer a#footer-show-more-link
{
position: relative;
top: -1px;
}
.view-page-footer a#footer-show-more-link:before
{
color: #555;
font-family: proxima-nova,Arial,Helvetica,sans-serif !important;
font-size: 0.9em;
content: "(more…)";
}

Alteração dos links de rodapé para celular

O código a seguir mudará os links no rodapé no celular para corresponder aos da página da loja

@media only screen and (max-width: 600px)
{
/* Change footer link styling for mobile */
.view-page-wrapper .view-page-footer a, #footer-more-section a
{
text-decoration:none;
color:#fff;
background-color: #0a5f91;
display:inline-block;
border-radius: 5px;
padding:15px;
margin:5px;
}
.view-page-footer a#footer-show-more-link
{
display: block;
max-width:100%;
}
.view-page-footer a#footer-show-more-link:before
{
color:#fff;
}
.view-page-footer a, #footer-more-section a:selected
{
color: #0a5f91;
background-color: #D3D3D3;
}
}

A página de checkout

Alteração dos links de rodapé para celular

Uma última mudança é fazer com que os links de rodapé na página de checkout correspondam ao resto do site.

@media only screen and (max-width: 600px)
{
/* Change footer link styling for mobile */
.checkout-footer .checkout-footer-left
{
background-color: #f4f4f4;
padding: 15px;
}
.checkout-footer .checkout-footer-right a
{
text-decoration:none;
color:#fff;
background-color: #0a5f91;
display:inline-block;
border-radius: 5px;
padding:15px;
margin:5px;
}
.checkout-footer .checkout-footer-right a :selected
{
color: #0a5f91;
background-color: #D3D3D3;
}
}

Como fazer essas alterações melhorou a acessibilidade?

Se você fosse verificar a acessibilidade da sua loja Payhip usando o Lighthouse nas ferramentas de desenvolvimento do Chrome, descobrirá que a pontuação foi melhorada em cerca de 5 pontos. Essa não é uma grande diferença e, honestamente, não é uma boa pontuação (57 no desktop e 75 no celular). As alterações que ainda precisam ser feitas estão simplesmente fora do nosso controle como proprietários de lojas Payhip.

O que nós tenho feito, no entanto, é fornecer algumas soluções alternativas para os problemas que permanecem e melhorar muitos dos recursos de acessibilidade que não podem ser medidos pelo software.

Se você adicionou todas as alterações, incluindo as da primeira parte do meu tutorial sobre como aumentar a acessibilidade em lojas Payhip, você se certificou de que:

  • Mesmo que suas fotos não tenham nenhuma etiqueta alt, os nomes de seus padrões estão imediatamente disponíveis na página principal da loja e as descrições das fotos estão disponíveis no bloco de texto nas páginas de seus produtos.
  • As pessoas que navegam por meio de tabulações em sua página em um teclado podem navegar por toda a página sem ficar presas.
  • Sempre que um link ou botão está sendo selecionado, ou um mouse passa sobre eles, há uma mudança óbvia na aparência deles.
  • É óbvio para que servem todos os links e botões, se você for avistado e com alguma tecnologia de assistência. Entrarei em contato com a Payhip para ver se eles podem tornar os links de compartilhamento e “mais” rodapés legíveis para leitores de tela.
  • É possível navegar na página e comprar um padrão usando o Leitor de tela NVDA, além dos links mencionados anteriormente. (NVDA é um leitor de tela gratuito e de código aberto usado por aproximadamente um terço dos usuários de leitores de tela. Você pode baixá-lo para testar se funciona com o seu site e o que acontece se não houver texto alternativo nas imagens).
  • Todos os elementos podem ser vistos por pessoas daltônicas.
  • Todas as fontes têm contraste e tamanho razoáveis ​​e aumentar o zoom da página as tornará maiores.
  • As páginas são totalmente visíveis, mesmo com zoom de 300%
  • Não existem vídeos ou elementos animados que serão reproduzidos sem o consentimento e conhecimento prévio do visitante.

Acompanharei a Payhip ao longo do tempo para ver se eles podem consertar alguns aspectos de acessibilidade das lojas quando seu orçamento permitir alterações de codificação. Enquanto isso, espero que as mudanças em meus tutoriais sejam úteis.

Sarah (assinatura)

About admin

Check Also

Padrões livres de crochê de cesta com arestas quadradas da avó

Granny Square Edged Basket com Granny Square Crochet ao redor como decoração como o nome …

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *