talitapagani / gaia Goto Github PK
View Code? Open in Web Editor NEWGAIA - Guidelines for Accessible Interfaces for Autistics
License: GNU General Public License v2.0
GAIA - Guidelines for Accessible Interfaces for Autistics
License: GNU General Public License v2.0
Como reproduzir:
O que ocorre:
O que deveria ocorrer
Ao manter o lang
do documento em inglês, leitores de tela poderão ler o documento com sotaque inglês, o que é um problema para compreender o texto.
<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage" >
O ideal é mudar para pt ou equivalente, como pt-br, em caixa baixa, com hífen em vez de underline.
Referências adicionais:
Isto não é algo crítico, mas pode ser interessante proteger o e-mail com javascript ou mesmo imagem. É comum que CMSs façam isso no automático em artigos escritos através deles, mas ao escrever HTML direto isso pode passar desapercebido.
<a itemprop="email" class="email" href="mailto:[email protected]">[email protected]</a>
Da forma como está, uma sonda nem precisa ter trabalho para entender que isto é um e-mail
Como reproduzir:
O que ocorre:
O que deveria ocorrer
I need to add the GA script so I can collect and measure how many people are accessing the website.
Código
<footer>
<p>Made with <a href="http://jekyllrb.com/" target="_blank" class=" externalLink">Jekyll</a> and <span class="love">❤</span> by <a href="http://willianjusten.com" target="_blank" class=" externalLink">Willian Justen</a> and customized for GAIA by <a href="http://talitapagani.com">Talita Pagani</a></p>
</footer>
Resultado visual:
Sugestão
Usar via CSS underline
, exceto em estado :hover
Todas as páginas do site, tem o seguinte código:
<h1 class="logo"> <a href="/"></a></h1>
@media only screen and (min-width: 37.5rem)
.bar-header .logo a:after {
content: 'Projeto GAIA';
}
Porém isso gera problemas com leitores de tela e mecanismos de busca.
Sugestão:
Ou usar texto puro, ou usar uma imagem com alt, que já é o suficiente para resolver esse problema. O exemplo abaixo funciona caso queira usar imagem em vez de texto puro
<h1 class="brand pull-left">
<a href="/">
<img alt="Programador & consultor focado em Web Standards .::. Joomla!, PHP, Javascript, UI/UX" title="Voltar à página inicial" width="150" height="64" src="data:image/png;base64,iVBORw0...">
</a>
</h1>
Ele usará no outline o texto Programador & consultor focado em Web Standards .::. Joomla!, PHP, Javascript, UI/UX enquanto ao passar o mouse por cima, ao menos para usuários desktop, irá indicar Voltar à página inicial
Como reproduzir:
O que ocorre:
O que deveria ocorrer
A tag HTML <title></title>
, ao menos na página principal em http://talitapagani.com/gaia/, está vazia. Não testei nas demais páginas
Cor de fundo: #808080
Cor do texto: #f2f2f2
Tamanho da fonte: 1.25rem (computado 18px)
Resultado: Passa em AA, mas não em AAA, mesmo para texto grande
Isso não realmente um problema, mas pode ser interessante simplesmente omitir essa tag visualmente em vez de deixar como está, ou melhorar o contraste.
E eu concordo que poderia não ser considerado texto essencial para a compreensão da página e com isso não obrigar ter que ter contraste, mas ao menos ali não parece ter motivação de design muito forte para não seguir isso, em especial porque todo site tem contraste excelente.
Isso talvez seja exagero, mas como se trata de um site focado em acessibilidade, e até mesmo atenção, eu vou dar feedback tanto do ponto de vista de desenvolvedor como de usuário. Eu não diria a mesma coisa para um site que não tivesse esse foco didático.
Na página inicial e na de tags, tudo que é um texto azul, é um link clicável. As tags, por exemplo, tem uma aparência especial, que lembram botões. Os títulos, por outro lado, são apenas azuis. Eu descobri que eram links apenas por exploração. Veja a imagem:
Porém, nas páginas de artigos, se eu seguir a mesma lógica, os elementos de titulos internos dos artigos são azuis também, mas não são links.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.