Construção de Front-end Guiado à Teste de Acessibilidade

download Construção de Front-end Guiado à Teste de Acessibilidade

of 15

Transcript of Construção de Front-end Guiado à Teste de Acessibilidade

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    1/33

    Construo de Front-end

    Guiado Testes deAcessibilidade

    Prof. Msc. Tiago [email protected]

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    2/33

    Agenda

    e!nio de Front-"nd#ntroduo

    Acessibilidade na $eb

    iretri%es de Acessibilidade

    Ferramentas Assisti&as

    Teste de Acessibilidade "studo de Caso ' Corretude de c(digos

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    3/33

    e!nio de Front-"nd

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    4/33

    e!nio deFront-"nd)

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    5/33

    #ntroduo

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    6/33

    #ntroduo

    No in*cio desta d+cada, o censo dos "stados nidos indiccada oito cidados americanos teria algum ti/o de de!ci0No 4rasil, cerca de 52,67 da /o/ulao /ossui ade!ci0ncia &isual, a/ro8imadamente 9: mil;

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    7/33

    Acessibilidade na $eb

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    8/33

    Acessibilidade na $eb

    termo acessibilidade tem gan;ado muito destaunacional atual, tendo em &ista ue a garantia de acescom necessidades especiais, em todas as institui

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    9/33

    Acessibilidade na $eb

    A acessibilidade na web, /ortanto, no se restringe a/enautili%ados em meios &irtuais e com a /resena da tecnologia, macon;ecimentos em demais Breas ue ser&em como a/oio /ara o de /roetos e /rBticas tecnol(gicas ue, /or sua &e%, /ermitem o das ati&idades &irtuais e, com isso, o uso mais dinDmico e com uda $eb.

    Para tal, so /ro/ostas legislaI de de%embro de 5I>9 Juso do 4railleKL Hei no :.2=6 de no&embro de 5I6 Js*mbolo internacionalKL Hei no :.6OI JCoordenadoria Nacional /ara #ntegrao da

    de e!ci0nciaKL Hei no :.6OI Jes/onsabilidades ao Go&ernoKL ecreto no 6.9I> de 9==2.

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    10/33

    iretri%es de

    Acessibilidade

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    11/33

    iretri%es de Acessibilidade J$

    A acessibilidade na $eb, /ara ue /ossa atendenecessidades de seus usuBrios /ortadores de de!ci0ncalguns /arDmetros ue norteiam tal iniciati&a no intuitoos indi&*duos desse uni&erso seam /lenamente atendigualitBria.

    $CAG J$eb Content AccessibilitQ GuidelinesKRerso 5.= e 9.=LPrioridades 5, 9 e .

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    12/33

    iretri%es de Acessibilidade J$

    Princpios Promo&er alternati&as eui&alentes a conte?dos auditi&o No recorrer a/enas corL tili%ar corretamente a marcao e fol;as de estiloL #ndicar claramente o idioma utili%adoL Criar tabelas /ass*&eis de transformao ;armoniosaL

    Assegurar ue /Bginas ue utili%em no&as tecnotransformao ;armoniosaL

    Assegurar o controle ao usuBrio sobre altera

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    13/33

    iretri%es de Acessibilidade J$

    PrincpiosProetar a /Bgina considerando a inde/end0ncia de dtili%ar solu

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    14/33

    iretri%es de Acessibilidade J$

    $eb Content AccessibilitQ Guidelines J$CAGK

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    15/33

    iretri%es de Acessibilidade Je

    No 4rasil, e8iste a e-MAG JManual de Acessibilidad"letrSnicoK ue, /or sua &e%, possui 8 princpios, tambna WCAG !", na inteno de tornar o conte?do $eb deno entanto formatado /ara atender ao /?blico nacional.

    elos A, AA e AAA.

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    16/33

    iretri%es de Acessibilidade

    $eb Content AccessibilitQ Guidelines J$CAGK e e-Mag

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    17/33

    iretri%es de Acessibilidade

    $eb Content AccessibilitQ Guidelines J$CAGK e e-Mag

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    18/33

    Ferramentas Assisti&as

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    19/33

    Ferramentas Assisti&as

    Tecnologia Assisti&a + um termo ainda no&o, utili%ado todo o arsenal de ecursos e er&ios ue con/ro/orcionar ou am/liar ;abilidades funcionais de de!ci0ncia e conseuentemente /romo&er Rida #n#ncluso 13.

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    20/33

    Teste de Acessibilidade

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    21/33

    Teste de Acessibilidade

    #este de Acessibilidade + um/rocesso continue e iterati&o ede&er ser /ensado desde aconce/o do $ebsiteColeta de informaoLPlane$amentoL

    esignL%esenvolvimentoL#estese /ublicaoL&anuten'(o.

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    22/33

    Teste de Acessibilidade

    #estes automticos esemiautomticosAccess MonitorLail&aLAcessibilidade.netL$ebUactL

    Vera 9.5 4etaLCQnt;iaaQsLRalet 2.9LcaaL"&aluera.

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    23/33

    Teste de Acessibilidade

    #estes de Acessibilidade no AccessMonitor

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    24/33

    "studo de Caso '

    Corretude de c(digos

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    25/33

    "studo de Caso

    R)C*&)+%A,-* ' "P"#TA PAW" """NRHR#M"NT $"4

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    26/33

    "studo de Caso

    R)C*&)+%A,-* . ' GAN#XA CY#G VTMH " HYG#CA " "MZNT#CA

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    27/33

    "studo de Caso

    R)C*&)+%A,-* / ' T#H#XA C"TAM"NT" N[RCA4"\AHV

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    28/33

    "studo de Caso

    R)C*&)+%A,-* 2 ' "NA " FMA HYG#CA " #NH"#TA " TA4HA\]

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    29/33

    "studo de Caso

    R)C*&)+%A,-* 0 - #PN#4#H#XA TA A FN\WP^G#NA R#A T"CHA

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    30/33

    "studo de Caso

    R)C*&)+%A,-* 0 - #PN#4#H#XA TA A FN\W

    P^G#NA R#A T"CHA

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    31/33

    "studo de Caso

    R)C*&)+%A,-* 1 '

    FN"C" ZNCA PAA ##"T A M 4HC "CNT"_

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    32/33

    "studo de Caso

    PBgina /ara teste e corre

  • 7/26/2019 Construo de Front-end Guiado Teste de Acessibilidade

    33/33

    efer0ncias

    153 $H $#" $"4 CNT#M et al. $eb content accessib

    J$CAGK 9.=. 9==.193 4ACV, Cat;arine F. et al. iretri%es de acessibilidade uma abcom/arati&a entre $CAG e e-MAG. #MPY# 4A#H"# " ##NFMA\], R, /. :-:2, 9==I.

    13 Assisti&a, Tecnologia e "ducao. is/on*&el em;tt/OO.assisti&a.com.brOtassisti&a.;tml. Acessado em 5 de

    123 TCH#FF", AlistairL VAT, ennefer. ome eections on "&a"8/erience. ;ic; is commonlQ `non as TinTide JToards t;e

    Trans-sectorial #T esign, /. >:.

    163 #4G". #nstituto brasileiro de geogra!a e estat*stica. censo de4rasil, 9=5=.