Desmistificar
Acessibilidade
@anarafaelaferro
ENEMM '19
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5525494/Logo_White.png)
@deemazesoftware
Acessibilidade?!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5841566/Screenshot_2019-03-01_at_19.06.08.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5500362/Screen_Shot_2018-11-18_at_18.05.52.png)
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 .
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5524232/outline_card.png)
✓
✗
1
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5524232/outline_card.png)
Complementar tamanho e forma .
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5524232/outline_card.png)
✓
✗
2
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5524232/outline_card.png)
Não tem de ser igual para todos os elementos.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5524232/outline_card.png)
✓
3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5521017/GDG1.png)
#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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5521017/GDG1.png)
✓ Focusable
✗ Not focusable
![](https://s3.amazonaws.com/media-p.slid.es/uploads/898863/images/5521022/GDG2.png)
.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,517