Tweet
Tweet

Slide 1

Slide 1 text

ACESSIBILIDADE WAI-ARIA

Slide 2

Slide 2 text

DIEGO EIS slideshare.net/diegoeis bit.ly/locawebstyle @diegoeis @tableless tableless.com.br

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ESTENDENDO O SIGNIFICADO

Slide 5

Slide 5 text

NOVAS TAGS DO HTML5 As novas tags do HTML5 ajudaram a externar a semântica dos elementos.

Slide 6

Slide 6 text

div#cabecalho div#rodape div#sidebar div#content div#sidebar

Slide 7

Slide 7 text

div div div div div

Slide 8

Slide 8 text

header#cabecalho footer#rodape aside#sidebar article#content aside#sidebar

Slide 9

Slide 9 text

header footer aside article aside

Slide 10

Slide 10 text

MICRODATA As microdatas nos ajudaram a marcar micro informações no meio do conteúdo.

Slide 11

Slide 11 text

Olá, eu me chamo Diego Eis, sou brasileiro, trabalho na Locaweb como Coordenador do Time de Front-end. Tenho um website chamado Tableless e você pode entrar em contato comigo pelo email contato@tableless.com.br. name jobTitle URL worksFor email nacionality

Slide 12

Slide 12 text

MAS E AS INTERAÇÕES Como você avisa para um leitor de tela ou outros meios de acesso sobre as interações que acontecem na tela? ! Por exemplo: uma modal abrindo, validações de formulários, submenu, tabs, collapse etc…

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

WAI-ARIA

Slide 17

Slide 17 text

INTERAÇÕES WAI-ARIA aumenta a acessibilidade em conteúdos dinâmicos nos componentes interfaces.

Slide 18

Slide 18 text

ROLES São atributos que representam ações nos elementos HTML. Elas são categorizadas em 4 tipos.

Slide 19

Slide 19 text

ABSTRACT Para definição de conceitos gerais. Não devemos usar para marcar conteúdo. WIDGET Para elementos de interface soltos, como caixas de alerta, botões, checkbox, links, tabs etc. DOCUMENT STRUCTURE Para estruturas de organização da página. Estruturas que não são interativas. LANDMARK Pra regiões de páginas que são pontos importantes para onde o usuário navegaria, por exemplo: buscas, main, sidebar, formulários etc…

Slide 20

Slide 20 text

  • Primeira Aba
  • Primeira Aba

Conteúdo, my friend…

Slide 21

Slide 21 text

! ! ! ! ! ! !
  • Primeira Aba
    • ! !
      ! ! !

    Slide 22

    Slide 22 text

    ! Opção 2 ! Opção 2 !

    Slide 23

    Slide 23 text

    LISTA COMPLETA DAS ROLES http:// bit.ly /wai-aria-roles ! http://www.w3.org/TR/wai-aria/roles#roles_categorization

    Slide 24

    Slide 24 text

    STATES AND PROPERTIES Muitas vezes precisamos customizar formulários ou outros elementos com algum código que não é o padrão. Por exemplo, customizar checkboxes ou radio buttons. Quando isso acontece, precisamos indicar que estes elementos devem ter o mesmo peso de significado dos elementos originais.

    Slide 25

    Slide 25 text

    Option Unchecked ! Option Checked

    Slide 26

    Slide 26 text

    Um exemplo simples com texto

    …

    !
    …

    Slide 27

    Slide 27 text

    Enviar !

    Esta é uma descrição explicando a ação…

    Slide 28

    Slide 28 text

    • Mensagens
      • Enviar
      • Criar
      • Editar
      • Relatórios

    Slide 29

    Slide 29 text

    LISTA DE STATES E PROPERTIES http:// bit.ly /wai-aria-states-properties ! http://www.w3.org/TR/wai-aria/states_and_properties

    Slide 30

    Slide 30 text

    USE SEMPRE AS TAGS APROPRIADAS Não substitua a semântica natural dos elementos. ! Eu sei que WAI-ARIA é muito, muito bom. Mas não prefira usá- las ao invés de usar os elementos padrão do HTML. Eles trazem mais semântica do que elementos neutros usando WAI-ARIA.

    Slide 31

    Slide 31 text

    Botão Botão

    Slide 32

    Slide 32 text

    INTERAÇÃO COM O TECLADO Todas as interações com WAI-ARIA devem ser usadas via teclado. ! Todos os "widgets" devem responder aos comandos e combinações padrão de teclas dos sistemas operacionais. Por exemplo, se você desenha um botão com uma tag span e coloca um role=“button”, este elemento deve trabalhar como um botão, ou seja, se o usuário der foco a este elemento e apertar ENTER, o botão deve agir.

    Slide 33

    Slide 33 text

    INSERINDO WAI-ARIA VIA JAVASCRIPT Prefira colocar estes atributos via Javascript. Não há problema algum fazer dessa forma. ! Por outro lado, se você sabe que o seu público usa Javascript desabilitado (o que é muito, muito difícil), prefira colocar diretamente no código HTML

    Slide 34

    Slide 34 text

    PARA PESQUISAR MAIS http://tableless.com.br/wai-aria-estendendo-o-significado-das-interacoes/ ! http://oaa-accessibility.org/examples/ ! http://www.w3.org/TR/wai-aria/ ! https://developer.mozilla.org/en-US/docs/Accessibility/ARIA

    Slide 35

    Slide 35 text

    ENTÃO, FECHOU! A palestra vai ficar aqui: slideshare.net/diegoeis ! @diegoeis @tableless tableless.com.br ! bit.ly/locawebstyle