Entregue funcionalidades dinâmicas que continuem funcionando mesmo quando o JavaScript não estiver disponível.
Este board é uma lista de verificação para profissionais web: 17 itens para verificar em uma página ou componente dinâmico antes de a funcionalidade ser lançada, cobrindo a base HTML estática que a sustenta, o que acontece quando ela falha, se alguém percebe suas atualizações e se usuários de leitor de tela e usuários que navegam apenas por teclado conseguem usá-la.
Base HTML estática:
Conteúdo essencial, links e metadados chegam no HTML inicial
A página é utilizável, não apenas visível, quando o JavaScript não está disponível
Funcionalidades dinâmicas se sobrepõem a uma base funcional em vez de substituí-la
Nada essencial está oculto em widgets apenas em JavaScript que os rastreadores não conseguem acessar
Degradação graciosa:
Cada solicitação tem tratamento de erro explícito, para que uma falha nunca seja silenciosa nem gere um indicador de carregamento perpétuo
Existe uma alternativa funcional caso a funcionalidade dinâmica falhe totalmente
Os botões de voltar e avançar se comportam como esperado após atualizações dinâmicas
Elementos com aparência semelhante têm comportamento semelhante
Tornar atualizações visíveis:
O feedback aparece ao lado do item com o qual o usuário acabou de interagir
As atualizações usam tamanho, contraste ou movimento para chamar a atenção
Mensagens transitórias deixam um indicador persistente
Nenhuma interação exige acompanhar dois lugares ao mesmo tempo
ARIA e acessibilidade para leitores de tela:
Widgets personalizados possuem funções ARIA apropriadas
Áreas estruturais usam landmarks ou elementos semânticos do HTML5
Áreas que atualizam dinamicamente são marcadas com aria-live
A implementação foi testada com um leitor de tela real
A navegação apenas por teclado funciona em toda a interface, sem que o foco seja perdido ou fique preso
Como usar o board:
Para obter sua própria cópia, abra Board > Details > Duplicate. Tudo o que você precisa é de uma conta Free da Miro.
Para marcar um item, clique duas vezes na caixa e digite x.
Duplique o cartão para cada funcionalidade, componente ou sprint.
Este modelo acompanha o curso da Interaction Design Foundation UX Essentials: Accessibility, SEO and Dynamic Interfaces.
