Desmistificar

Acessibilidade

@anarafaelaferro

ENEMM '19

@deemazesoftware

Acessibilidade?!

Possibilidade de alcance para utilização,

com segurança e autonomia.

#1

Beneficia apenas uma pequena porção de pessoas.

Uma doença, ferimento ou condição que torna mais difícil fazer uma tarefa para a pessoa que a tem.

LIMITAÇÃO

/ˌdɪs.əˈbɪl.ə.t̬i/

Permanentes

Temporárias

Contextuais

Permanentes

Cegueira ou visão reduzida

Daltonismo

Surdez

Dislexia

Distrofia muscular

Paralisia

≈ 15% da população mundial

e a aumentar!

Temporárias

Braço partido

Lesão por esforço repetitivo

Concussão

Contextuais

Usar telemóvel no exterior

Ver um vídeo num café barulhento

Carregar um bebé ou saco de compras

Permanent

Temporary

Situational

Usabilidade

Acessibilidade

Takeaways

.i

Qualquer pessoa pode ganhar uma limitação, e muito provavelmente ganhará.

Takeaways

.ii

Quando construimos accessibilidade, todos beneficiam.

#1

Beneficia apenas uma pequena porção de pessoas.​

#2

É o trabalho dos programadores.

.i

Cor.

cssstats.com

Your email

Next

Your name

Doggo ipsum snoot borking doggo dat tungg tho doggorino borkdrive, maximum borkdrive borkdrive.

Your email

Your name

John Doe

johndoe@mail.com

Your email

my@email

Your email

my@email

Next

Next

Your name

Rafaela Ferro

Your name

Rafaela Ferro

This email is not valid.

This email is not valid.

.i

Cor.

Validar os contrastes da nossa palette

Não depender de cor para:

  • Dar feedback

Verificar outra vez!

  • Indicar interatividade
  • Destacar conteúdo importante

.ii

Legendar conteúdo e controlos.

Labels acessíveis focam-se na ação e são concisos.

.iii

Estrutura do layout.

Tab order lógica

Skip link para conteúdo relevante no início

.iv

Design para diferentes tipos de interação.

* {
   outline: none;
}

Que elementos são focáveis?

▪︎  Links

▪︎  Buttons

▪︎  Form fields

▪︎  Menu items

▪︎  Widgets

▪︎  Things triggered by hover, like tooltips

Deve destacar-se.

1

Complementar tamanho e forma.

2

Não tem de ser igual para todos os elementos.

3

#2

É o trabalho dos programadores.

#3

É o trabalho dos designers.

.i

Usar os elementos HTML corretos.

<header>
<main>
<footer>
<nav>
<aside> 
<h>
<...>
<a>
<button>
<input>
!= <div>

.ii

Tab order lógica.

✓ Focusable

✗ Not focusable

.iii

Dar suporte a diferentes tipos de interação.

tabindex = 0
keyboard events
+
custom labels
+

WAI-ARIA Authoring Practices

#3

É o trabalho dos designers.

#4

É um extra

nice-to-have.

Inútil    &   Caro

Takeaways

.i

Design acessível não adiciona conteúdo ou funcionalidades.

Takeaways

.ii

A maioria dos desafios são resolvidos com boas práticas.

Takeaways

.iii

Bom para o negócio.

Inútil    &   Caro

Takeaways

.iv

É o nosso dever.

#4

É um extra

nice-to-have.

Como?

.i

Aprender.

.ii

Começar cedo.

.iii

Identificar user journeys cruciais. Começar agora.

.iv

Testar com pessoas reais, com limitações reais.

rafaelaferro.com

@anarafaelaferro

Obrigada!

Desmistificar Acessibilidade

By Ana Rafaela Ferro

Desmistificar Acessibilidade

Slides for ENEMM'19 Coimbra.

  • 2,374