Como aplicar semântica e acessibilidade ao projeto?

[napalmdev]

Fala galera, por vezes eu leio artigos relacionados a WAI-ARIA, Microdata e afins, e recentemente eu li este ótimo artigo da Dani Guerrato sobre o schema.org e achei muito bacana, porém como nunca participei de algum projeto de grande porte, nunca utilizei nada do tipo, mas agora acredito que terei que utilizar essas soluções, ai fica a dúvida:

Como vocês aplicam essas soluções de semântica e acessibilidade em seus projetos? Vocês planejam e pesquisam sobre quais "items" irão utilizar em suas tags antes de começar a codar? Ou vão fazendo isso de forma linear conforme vão preparando suas páginas? Ou ainda se existe alguma forma automatizada de aplicá-las?

Enfim, não sei ficou meio confuso, mas é isso ai.

[felipefialho]

Ótimo!

Vamos lá.

Semântica

Acho que nem precisa aprofundar muito nessa questão né? O HTML deve ser estruturado para poder ser lido independente do CSS e do JavaScript. Os headings devem ser usados de forma lógica, assim como os elementos do HTML5.

Mas também deve se tomar cuidado com relação ao uso exagerado desses novos elementos. Eles servem para dar semântica. Substituir <div>por <section> sem nenhum motivo só vai atrapalhar.

Roles

Acho que role é o minimo esperado. Devem fazer parte do desenvolvimento, logo em seguida da criação de um componente as roles devem ser adicionadas, de forma natural e automática. Isso já ajuda muito.

Obvio que existem milhares de roles, não é necessário adicionar todas. Mas pelo menos as macros.

schema.org

Tenho usado muito o schema.org, ajuda a dar ainda mais contexto ao projeto. Nesse caso ao adiciono no fim de tudo, pouco antes do projeto ser lançado, assim tenho uma ideia melhor do funcionamento de cada sessão.

Navegação

Ponto importante, nós podemos adicionar :focus nas coisas para garantir que a navegação de teclado funcione bem, mas nem sempre é assim. Se você usa submenus ou qualquer situação de navegação que não pode ser controlada pelo :focus, é muito necessário fazer um fallback para o teclado usando JavaScript, assim garantimos acesso total ao conteúdo.

Outros

Importante usar também atributos como aria-hidden, e etc, para ajudar o leitor de tela ou os mecanismos de busca a entenderem melhor o que pode ser descartado.

---

Fazer um site com o minimo de acessibilidade (pelo menos o que está do seu alcance), ajuda o próprio projeto a ser melhor indexado e ter uma estrutura melhor desenvolvida. Vale a pena ;)

[rickbenetti]

Sobre schema.org eu utilizo em todos os sites que faço e principalmente utilizei nas lojas virtuais que fiz GrandCru foi um case legal, pois na época 2014 ninguém pensava em usar num ecommerce magento, a receita na maioria das empresas de magento é pegar o padrão e alterar pouca coisa eu tentei customizar ao máximo e fiz o possível pra aplicar semântica no código dando sentido do início ao fim.

Também para auxiliar desenvolvedores de lojas virtuais com magento (serve pra WooCommerce também) fiz um posts há um bom tempo exemplificando a utilização.

Fique no topo da busca orgânica

De mais a explicação do @lfeh ficou demais, não preciso acrescentar muito.

[dionarodrigues]

Ótima explicação @lfeh . Pensamos bem parecidos nessa questão.
E, @napalmdev , tendo em mente o que o @lfeh comentou, é sempre interessante planejar antes do desenvolvimento para que tudo funcione corretamente e evite ter que refazer trechos do HTML/JS.

[afonsopacifer]

Lembrando que quando falamos em acessibilidade, além do padrão WAI-ARIA temos também que dar uma olhada nas guidelines da W3C, para isso temos as Diretrizes de Acessibilidade para Conteúdo Web ou WCAG 2.0.

Falando nisso, existe um excelente projeto com vários links e dicas sobre o assunto: awesome-a11y :)

[napalmdev]

boa galera, +1 pros links @afonsopacifer , @diogorodrigues vlw pelo toque, acho q vou acabar fazendo assim mesmo, @rkb81 legal cara, vou dar uma olhada nesse post ai. E @lfeh, sensacional cara resposta completíssima, vou avaliar com carinho e dar uma aprofundada nas opções ;D

[dionarodrigues]

Ótima dica esse projeto heim @afonsopacifer . Valeu!!

[felipefialho]

Muito bom @afonsopacifer!

[afonsopacifer]

Agradeçam a nosso amigo @brunopulis por ter criado essa referência irada :)

[brunopulis]

@afonsopacifer Opa valeu por divulgar o projeto! É super bem vindo os PR neles. E aproveitando também criei um Slack sobre acessibilidade web quem quiser é só entrar,

@napalmdev Quanto ao uso dos Roles da WAI-ARIA, eu recomendo dar uma olhada no blog do Paciello Group existem diversos artigos entre eles dois que você deve olhar.

• Easy Content Organisation with HTLM5
• Anybody can be an a11y slacker

O uso das roles deve ser feita com cuidado, atualmente não é mais necessário utilizar em blocos gerais como no header, footer e etc, segundo o Steve Faulkner somente usar os roles em casos especificos, porque os browser's modernos colocam eles automaticamente. Vou procurar o artigo que ele fala isso e posto por aqui :)

[napalmdev]

Boa @brunopulis, vlw mesmo, vou dar uma olhada nesses artigos ai ______