WCAG Guide for UX/UI DesignersGuia sobre WCAG para UX/UI Designers

When I became fully responsible for a project’s design and had to guarantee it was actually accessible, I learned that knowing accessibility matters and knowing how to execute it are very different things. Searching for help mostly turned up content that was either too superficial or the WCAG itself, the gold standard that doesn’t separate design’s responsibility from development’s.Quando passei a ser inteiramente responsável pelo design de um projeto e precisei garantir que ele fosse realmente acessível, aprendi que saber da importância da acessibilidade e saber executá-la são coisas bem diferentes. Buscar ajuda trazia, em sua maioria, conteúdo superficial demais, ou a própria WCAG, o padrão ouro que não separa a responsabilidade do design da responsabilidade do desenvolvimento.

The ChallengeO Desafio

Project GoalObjetivo do Projeto

Design ProcessProcesso de Design

Auditing existing materialsAnálise de materiais existentes

Following the Double Diamond process, six existing accessibility materials for UX designers (in English and Portuguese) were evaluated using an adapted version of LORI, the Learning Object Review Instrument (Leacock & Nesbit, 2007), used to define the evaluation criteria. The clearest gap identified was that only 1 of the 6 materials included visual examples, hurting content quality, since relying only on textual description kept them conceptual and abstract.Seguindo o processo Double Diamond, seis materiais existentes sobre acessibilidade para UX designers (em inglês e português) foram avaliados com base em uma adaptação do LORI, o Instrumento de Revisão de Objetos de Aprendizagem (Leacock & Nesbit, 2007), utilizado para definir os critérios de avaliação. A lacuna mais clara identificada foi que apenas 1 dos 6 materiais incluía exemplos visuais, prejudicando a qualidade do conteúdo, visto que, apenas por descrição textual, estes permaneciam conceituais e abstratos.

Narrowing the WCAGRecorte da WCAG

Of the WCAG 2.2’s success criteria, 46 were categorized as applying directly to interface design, without requiring knowledge of development or programming, while criteria under the field of UX Writing, such as writing alt text for images, were also included. Criteria related to audio, video, and more complex animation were excluded, since these aren’t achievable in medium to high-fidelity prototypes on tools like Figma. Criteria that depended on an external resource, such as increasing body text size, were still included when they directly influenced layout decisions.Dos critérios de sucesso da WCAG 2.2, foram categorizados 46 como aplicáveis diretamente ao design de interfaces sem necessidade de ter conhecimento sobre desenvolvimento ou programação, enquanto critérios que abrangem o campo do UX Writing, tal qual a escrita de textos alternativos para imagens, foram incluídos. Foram excluídos critérios que se relacionam com conteúdo de áudio, vídeo e animações mais complexas, visto que estes não são viáveis para protótipos de média ou alta fidelidade em plataformas de prototipação como o Figma. Critérios que dependiam de algum recurso externo, como por exemplo, o aumento do tamanho da tipografia de corpo de texto, mas que influenciavam diretamente em decisões de layout, foram contemplados.

These 46 were narrowed down to 12 by how often each was cited across the six audited materials, then grouped under three of the WCAG’s own principles: Perceivable, Operable, and Understandable.Esses 46 foram reduzidos a 12 com base na frequência com que apareciam nos seis materiais analisados, agrupados sob três dos princípios da própria WCAG: Perceptível, Operável e Compreensível.

The GuideO Guia

The finished guide is a 6-page PDF where each of the 12 criteria follows the same structure: its name and number in WCAG 2.2, conformance level (A/AA/AAA), a plain-language explanation, specific guidance for designers, and, whenever possible, visual examples.O material construído consiste em um PDF de 6 páginas no qual cada um dos 12 critérios segue a mesma estrutura: seu nome e número na WCAG 2.2, nível de conformidade (A/AA/AAA), explicação em linguagem simples, orientação específica para os designers e, sempre que possível, exemplos visuais.

ResultsResultados

LinkedIn postPost no LinkedIn