Como estilo de acessibilidade: uma abordagem de componentes da Web

Cristiano Correia Blocked Unblock Seguir Seguindo 19 de dezembro de 2018

a11y e os novos padrões da Web

Os novos padrões da Web estão evoluindo rapidamente e, às vezes, é difícil conhecer o estado atual de um determinado assunto em um mar de assuntos. Muitas vezes percebo que a grande maioria dos projetos da web começa sem ter a Acessibilidade (a11y) em mente e torna-se intimidante voltar atrás e consertá-la.

Como ainda existem muitos projetos de Componentes da Web ainda por nascer, decidi reunir os 101 sobre esses assuntos específicos e orientar qualquer um que navegasse nesses mares pela primeira vez. Então, neste artigo, você encontrará:

  • O básico sobre acessibilidade
  • O básico sobre os componentes da Web
  • O que há de novo em relação ao CSS
  • Como você pode tornar seus Web Components mais acessíveis?

Vamos velejar

Noções básicas # 1. O que é acessibilidade na web?

“A acessibilidade costuma ser vista como fazer seu site funcionar nos leitores de tela. Na realidade, a acessibilidade na Web é um subconjunto da Experiência do usuário (UX), focada em tornar seus sites utilizáveis pelo maior número possível de pessoas, incluindo aquelas com deficiências. ”

A citação acima (de Dave Ruppert sobre “ Mito: Acessibilidade é 'pessoas cegas' ” para o projeto a11y) reflete o maior desafio sobre Acessibilidade na Web: saber exatamente o que é.

A acessibilidade da Web é essencialmente uma forma de fornecer acesso ao seu produto para todos os seus usuários em potencial.

As 5 categorias de acessibilidade a ter em conta são:

  • Visual (por exemplo, sem visão, miopia, daltonismo, etc.)
  • Auditivo
  • Motor
  • Cognitivo
  • Usuários temporariamente desativados (por exemplo, usuários de telefones com uma só mão)

Se precisarmos traduzi-los em um produto , isso geralmente significa estar preocupado com:

  • Semântica
  • Entradas de teclado
  • Alternativas de texto
  • Contraste de cor

Para levar isso em conta ao desenvolver um produto, você deve:

  • Certifique-se de transmitir o significado não só pela cor, mas também pela forma
  • Certifique-se de que seu produto é redimensionável
  • Certifique-se de que seus assuntos de conteúdo sejam distinguíveis
  • Certifique-se de seguir as diretrizes do W3C em geral

… E não se esqueça da Árvore de Acessibilidade! É o

“Estrutura produzida por APIs de acessibilidade de plataforma em execução paralela ao DOM, que expõe informações de acessibilidade a tecnologias assistenciais, como leitores de tela” ( origem ).

Básico # 2: Uma Breve História dos Componentes Web

Os Web Components, em sua essência, na verdade não são “nada”: os Web Components são um conjunto de novos Padrões da Web que nos ajudam a alcançar uma maneira nativa de fabricar Componentes . Em traços largos, eu definiria os componentes da Web como:

Uma maneira nativa de obter um conjunto pequeno e reutilizável de lógica, comportamentos e elementos de interface, por meio de uma série de padrões de navegadores .

Então, quais são os blocos de construção dos componentes da Web?

  • Templates em HTML
  • DOM da Sombra
  • Elementos personalizados
  • … E HTML Imports (-ish)

Templates em HTML

Os modelos em HTML são uma forma de reutilizar partes de HTML sem que o "modelo" original seja renderizado na página.

Funciona da seguinte maneira:

Que renderizará algo assim:

Você pode verificar como os modelos HTML estão sendo suportados pelos navegadores nesta página do cliente .

DOM da Sombra

O Shadow DOM é uma maneira de obter o escopo, o encapsulamento e a composição do CSS, facilitando a construção de componentes isolados.

Existem dois modos de alcançar o DOM Shadow: “fechado” e “aberto”. A diferença é que quando você element.shadowRoot o element.shadowRoot , o modo “open” retorna o nó HTML e o modo “closed” retorna null . Ambos os modos retornam null quando você tenta consultar o DOM. Tenha em mente que você precisa definir um modo para usar o Shadow DOM, pois não há valor padrão para ele.

Funciona da seguinte maneira:

Que renderizará algo assim:

E a árvore DOM será algo parecido com isto:

Você pode verificar como o Shadow DOM atualmente é suportado pelos navegadores nesta página de usuários .

Elementos personalizados

Elementos personalizados são o caminho para obter peças de lógica encapsuladas reutilizáveis e ter o melhor dos Modelos DOM e HTML Shadow, incluindo slots .

Tudo isso pode ser alcançado pelo seguinte:

Que renderizará algo assim:

Você pode ver o modelo “Slots” sendo substituído de acordo

Você pode verificar como os elementos personalizados são atualmente suportados pelos navegadores nessa página do cliente .

… E o -ish: Importações HTML vs. Módulos ES

As importações de HTML eram uma grande parte dos padrões de Componentes da Web, mas deixaram de ser suportadas e não estão mais listadas na página de Componentes da Web (sendo substituídas pelos Módulos ES ). Eles não são mais do que uma nota de rodapé neste momento na história do Web Components. Como Wilson Page, da equipe do Firefox OS, diz :

“Trabalhamos com componentes da web no Firefox OS há mais de um ano e descobrimos que usar a sintaxe de módulo existente (AMD ou Common JS) para resolver uma árvore de dependência, registrar elementos carregados usando uma tag <script> normal parece ser suficiente para fazer as coisas.

Se você quiser saber mais sobre o estado dos Módulos HTML Imports vs. ES, você pode conferir esta página .

Componentes da Web são muito mais do que isso. Certifique-se de continuar a pesquisar mais informações sobre eles, especialmente em relação a eventos personalizados , itens observados , testes e desempenho .

Rodada de bônus: as novas “teorias” do CSS

Se você voltar aos snippets de código neste artigo, já vislumbrou algumas novas ofertas de CSS:

  • O CSS com escopo definido (através do Shadow DOM) resolve um dos maiores problemas do CSS, o “excesso de regras”
  • Com : host , podemos selecionar para estilizar um host de sombra
  • Há também : host () e : host-context () – o primeiro direcionado ao host que é passado dentro dos parênteses (por exemplo: host (.some-custom-element)) e o segundo direcionado ao conteúdo de uma sombra host (por exemplo: host-context (h2) segmenta o h2 dentro de um host shadow)

"Teorias" você não deveria usar

Como os Web Components são padrões que estão em constante evolução, há algumas coisas que vêm e vão (como as já mencionadas importações HTML). Esse também é o caso de vários aspectos do CSS, e é especialmente verdadeiro para os Combinadores de Piercing de Sombra, que eram formas de estilizar elementos sombreados. Se você se deparar com estes, por favor evitá-los 🙂 Eles são:

  • ::sombra
  • / deep /
  • >>>

Mas espere, CSS Variables!

…e sim. Existem formas adequadas de estilizar elementos sombreados: Variáveis CSS. Você pode reutilizar o estilo genérico dentro (e na verdade, fora) dos Web Components. Vamos conferir como:

O h2 dentro do shadowRoot será renderizado como o conteúdo do — main-text-color se existir. Se não existir, será processado como azul. O resultado é algo assim:

Nesse caso, o conteúdo da variável – main-text-color é amarelo.

Você pode verificar como as Variáveis CSS são atualmente suportadas pelos navegadores nessa página do cliente .

:: part () e :: theme ()

:: part () e :: theme () são propostas muito recentes para CSS que vieram em nosso auxílio como alternativas para estilizar elementos sombreados. Em vez de tentar explicá-los, vou apenas redirecioná-lo para este artigo de Monica Dinculescu, que é excelente . São propostas muito recentes para o CSS, por isso é bem possível que, quando você ler este artigo, elas ainda não sejam suportadas pelo seu navegador.

Então, como podemos tornar nossos componentes acessíveis?

Primeiramente…

Noções básicas, básico, nº3. O básico sobre acessibilidade:

Existem algumas coisas que podemos fazer para o nosso produto desde o início, o que ajudará imenso a torná-lo acessível aos nossos usuários.

Uma coisa a lembrar é a teoria do mirtilo (uma ideia “ roubada” novamente de uma palestra de Monica Dunculescu):

Foto de Kaitlyn Chow em Unsplash

O que faz um bolinho de mirtilo não é adicionar mirtilos a um muffin existente, é na verdade cozinhar um bolinho de mirtilo desde o início. Tornar um produto acessível não está adicionando algumas funções e rótulos ARIA depois que ele é construído, mas na verdade ele está tendo acessibilidade desde o início.

Assim…

Função

O papel é uma maneira de dizer que um novo elemento se comporta como um diferente. Exemplo rápido:

TabIndex

O TabIndex é uma maneira de tornar um elemento focável (essencial para um leitor de tela). Se você defini-lo como 0, ele pode ser focado na ordem correta, se for -1, é focado fora da ordem normal (como em, você pode acionar programaticamente o foco do elemento). Se você configurá-lo para qualquer outro número positivo, você altera a ordem real do foco (altamente evitável). Exemplo rápido:

Indicador de foco

O indicador de foco é algo (normalmente) nativo para o navegador e serve como uma ajuda visual para qual elemento está focado no momento atual. Se você já pensou que o design não é perfeito , não o remova (por exemplo, no Chrome, você pode vê-lo como um brilho laranja ou azul ao redor de uma entrada) com { outline: none; } no CSS, por exemplo. É extremamente útil para todos que usam leitores de tela – se você quiser reformulá-lo, certifique-se de seguir as diretrizes de acessibilidade.

ÁRIA

Aria é uma maneira de melhorar a maneira como você rotula seus componentes. Há toneladas deles, então eu não vou te incomodar com a lista enorme 🙂 – você pode encontrá-los aqui – apenas um exemplo rápido:

Sem os rótulos ARIA, um leitor de tela perceberia a entrada como “5, slider”, mas com eles, ela seria lida como “ARIA: quantidade de problema. 5, controle deslizante. min: 0, max: 10 ”.

Aqui está um excelente (e rápido) tutorial sobre como rotular um elemento personalizado:

Entrada do teclado

Como mencionei no começo do artigo, é muito importante vincular o comportamento ao teclado. Os elementos nativos do HTML devem ter isso coberto, mas se você escrever um elemento personalizado, nunca esqueça que os eventos onkeydown , onkeypress e onkeyup são seus melhores amigos.

Então, o que é realmente novo?

A resposta curta:

Estendendo interfaces HTML.

A resposta longa:

Estendendo interfaces HTML 🙂

Deixe-me explicar.

Embora um elemento nativo deva estar totalmente acessível, ele pode não fornecer a funcionalidade exata de que você precisa ou aparentar da maneira desejada. Podemos, com certeza, escrever algo adaptado às nossas necessidades reais, mas teríamos que cuidar de todas as necessidades de acessibilidade, já que os elementos personalizados não têm semântica implícita ou suporte de teclado … Então, por que não podemos estender a funcionalidade de um elemento nativo? Agora nós podemos. Ou "pode".

Interfaces do elemento

Aqui está a lista das interfaces HTML existentes. Com eles, você pode estender o comportamento nativo. Podemos revisitar nosso exemplo para elementos personalizados e estender HTMLButtonElement para adicionar nosso próprio comportamento. Veja como:

Se você se lembrar dos exemplos anteriores, adicionei ( para efeito dramático 🙂 ) uma regra de CSS de que todo o texto seria branco. Isso vai contra o visual nativo de um botão e o torna ilegível. Ao estender o elemento normal com o texto sendo preto, nós o tornamos um pouco mais acessível (além disso, adicionei um rótulo extra nele).

As diferenças aqui são:

  • extends HTMLButtonElement vez de HTMLElement
  • Quando definimos o customElement, passamos como terceiro parâmetro um objeto com o qual o elemento é estendido (nesse caso, “botão”)
  • E nós o usamos referenciando um elemento de botão nativo com is="accessible-button" .

Isso processa algo como:

O primeiro botão não é estendido, por isso ainda tem a cor branca; O segundo é estendido para que agora tenha a cor preta (mais um rótulo ARIA) e o terceiro não funcione… Por quê? Porque a extensão de uma interface HTML precisa ser feita através do atributo is e não ser referenciada através da tag de elemento customizado normal.

Cuidado : se você verificar a página “ Estendendo elementos HTML personalizados ” pelo google, há uma nota muito importante:

Somente o Chrome 67 suporta elementos incorporados personalizados ( status ) no momento. O Edge e o Firefox irão implementá-lo, mas o Safari optou por não implementá-lo. Isso é lamentável para acessibilidade e aprimoramento progressivo. Se você acha que é útil estender elementos HTML nativos, dê sua opinião sobre 509 e 662 no Github.

Não é o recurso mais seguro para usar ainda, então sempre verifique onde seu produto deve ser usado antes de usar qualquer um dos recursos mencionados neste artigo, especialmente este.

Portanto, se os componentes da Web ainda não forem suportados em todos os lugares, o que devo fazer?

Há um estado intermediário 🙂

Polyfills

Em primeiro lugar, existem polyfills. Confira aqui .

Bibliotecas que facilitam sua vida

Elementos Angulares , Polímeros e Estêncil são apenas alguns exemplos de bibliotecas que podem ajudá-lo a usar elementos personalizados suportados em vários navegadores.

Da esquerda para a direita: elementos angulares, polímero e estêncil

Ferramentas

Há várias ferramentas para ajudá-lo a tornar seus componentes mais acessíveis. Um dos meus favoritos é o Accessibility Developer Tools , oferecido pelo Google Accessibility. É uma excelente extensão do Chrome.

Há também muitos linters por aí para ficar de olho em você (por exemplo, o projeto atual no qual estou trabalhando é o React, então estou usando o eslint-plugin-jsx-a11y para ficar de olho em mim) .

TL; DR

Essencial para acessibilidade são:

  • Semântica
  • Entradas de teclado
  • Alternativas de texto
  • Contraste de cor

Os blocos de construção dos componentes da Web são:

  • Templates em HTML
  • DOM da Sombra
  • Elementos personalizados
  • … E um pouco mais

O básico para o nosso código ser acessível é:

  • Usando o modelo de função
  • Tornando nossos elementos focáveis
  • Transmitindo uma ajuda visual para o elemento focalizado
  • Usando rótulos ARIA
  • Eventos de ligação ao teclado

Há também uma maneira de estender o comportamento nativo de um elemento através do Extending HTML Interfaces.

Finalmente, muitas pessoas sabem muito mais do que eu…

Em relação à acessibilidade dos componentes da Web:

Em relação à acessibilidade em geral:

Em relação aos componentes da Web em geral:

… E a apresentação.

Este artigo é baseado em uma palestra proferida em um encontro que aconteceu no dia 5 de dezembro de 2018 . Você pode encontrar essa apresentação aqui .

Obrigado pela leitura, até a próxima.