Acessibilidade

na web

Hiperlinks
Hipertexto
HTML 

Hypertext Markup language

Hypertext Transfer Protocol

( HTTP )

E ...?

"...o poder da web está na sua universalidade. o acesso por todas as pessoas, não obstante a sua deficiência, é um aspecto essencial."

Tim Berners-Lee 

aria

‘Accessible Rich Internet Applications’

• Attributes
• Roles
• Semantic

Attributes, como usar?

<span role="checkbox" 
      aria-checked="true"
      tabindex="0"
      id="simulandoCheckBox">
</span>

labelledby, como usar?

<figure aria-labelledby="minhaCasa" role="group">
    <img src="casa.jpg" alt="Minha casa">
    <figcaption id="minhaCasa">
      Foto da minha casa
    </figcaption>
</figure>

Roles, como usar?

<div role="contentinfo">
    Esse site foi feito por alunos da Ulbra.
</div>

+ properties

<ul>
    <li aria-haspopup="true">
      <a href="#">Mensagens</a>
      <ul>
        <li><a href="#">Enviar</a></li>

        <li><a href="#">Criar</a></li>
      </ul>

    </li>

</ul>

https://www.w3.org/TR/wai-aria/states_and_properties#aria-haspopup

Mensagens

Enviar

Criar

Home

Contato

Mensagens

Enviar

Criar

Home

Contato

<span class="glyphicon-plus-sign" aria-hidden="true"></span>

aria-hidden

Quantas propriedades existem?

(aria-* attributes)

Muitas.

https://www.w3.org/TR/wai-aria/states_and_properties

Isso faz sentido?

<footer role="button">

Não.

R: Isso substitui (override) a semântica do elemento.

Semantic

<p>Em <cite>Estrutura de Dados em C</cite> por E.S, tem uma parte que diz <q>melhorar rezar antes da prova</q> que faz alusão ao período pré-G2.</p>

Alt

<img src="penelope.jpg" alt="Minha cachorrinha Penelope brincando no parque">

<img src="penelope.jpg" alt="cachorra">

Agora, vamos aplicar ao nosso projeto =)