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
Concussão
…
Usar telemóvel no exterior
Ver um vídeo num café
Carregar um bebé ou
…
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
Não depender de cor para:
- Dar feedback
Verificar
-
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