Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making the Website More Accessible with HTML5 & CSS3

Making the Website More Accessible with HTML5 & CSS3

This was presented at the Amigos Library Services' HTML5 & CSS3 Online Conference http://www.amigos.org/HTML5_CSS3 on February 8, 2013. It's basically how to make a site more accessible, focusing on HTML5 & CSS3, but not necessarily (or only) for persons with disabilities.
--
When the website was moved to a Content Management System, I updated our template to use HTML5 and CSS3. In particular, I used media queries to make the website responsive, and to fulfill some of the web accessibility guidelines. I also used some CSS3 to do some of the basic styling of the site, such as tables. Problems presented themselves, particularly with Internet Explorer. I spent a fair amount of time fixing IE issues, but left others to "degrade nicely".

Full writeup: http://cynng.wordpress.com/2013/02/27/making-the-website-more-accessible-with-html5-css3/

Cynthia "Arty" Ng

February 08, 2013
Tweet

More Decks by Cynthia "Arty" Ng

Other Decks in Technology

Transcript

  1. Š”’—ȱ‘Žȱ
    Ž‹œ’Žȱ˜›Žȱ
    ŒŒŽœœ’‹•Žȱ
    &\QWKLD 1J
    )HEUXDU\

    View Slide

  2. ˜••ȱ
    +RZ H[SHULHQFHG ZLWK +70/&66 DUH \RX"
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  3. ‘Šȱ’œȱȱ
    Ž‹ȱ ŒŒŽœœ’‹’•’¢ǵȱ
    ‡ 'LVDELOLWLHV $VVLVWLYH 7HFKQRORJLHV
    ‡ (YHU\RQH
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  4. ˜••ȱ
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  5. ‘¢ȱ‘˜ž•ȱ˜žȱ Š›Žǵȱ
    ‡ /HJLVODWLRQ 5HJXODWLRQV
    ‡ ,QFUHDVHG $FFHVV
    ‡ %HWWHU IRU (YHU\RQH
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide


  6. śȱ
    3URSHU 9DOLG 0DUNXS
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  7. ŽŒ’˜—ȱ •Ž–Ž—œȱ
    ‡ KHDGHU
    ‡ KJURXS
    ‡ QDY
    ‡ DUWLFOH
    ‡ VHFWLRQ
    ‡ DVLGH
    ‡ IRRWHU
    ‡ DGGUHVV
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide


  8. śȱ ŒŒŽœœ’‹’•’¢ȱ
    ZZZKWPODFFHVVLELOLW\FRP
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  9. ȱ
    $FFHVVLEOH 5LFK ,QWHUQHW $SSOLFDWLRQV
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  10. œ’—ȱ ȱ’—ȱ
    ȱ
    KWWSGYFVZRUJKJDULDXQRIILFLDOUDZILOHWLSLQGH[KWPO
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  11. '2&7<3( KWPO!
    KWPO ODQJ HQ !
    KHDG!
    WLWOH!(YHU\ 3DJH 6KRXOG +DYH D 7LWOHWLWOH!
    KHDG!
    ERG\!
    KHDGHU UROH EDQQHU !
    K!VLWH QDPHK!
    K!WDJOLQHK!
    QDY UROH QDYLJDWLRQ !
    D KUHI

    !*OREDO 1DY /LQND!
    D KUHI

    !6HFRQG 1DY /LQND!
    D KUHI

    !0RUH 1DY /LQND!
    QDY!
    KHDGHU!
    GLY LG FRQWHQW UROH PDLQ !
    DUWLFOH UROH DUWLFOH !
    \RXU FRQWHQW D EORJ SRVW IRU H[DPSOH !
    DUWLFOH!
    DUWLFOH UROH DUWLFOH !
    DQRWKHU VWDQGDORQH SLHFH !
    DUWLFOH!
    GLY!
    GLY LG VHFRQGDU\ UROH FRPSOHPHQWDU\ !
    W\SLFDOO\ \RXU VLGHEDU !
    GLY!
    IRRWHU UROH FRQWHQWLQIR !
    FRS\ULJKW DQG RWKHU LQIR
    IRRWHU!
    ERG\!
    KWPO!
    &\QWKLD 1J #7KH5HDO$UW\

    Y /
    /
    /L
    L
    L
    LQN
    RJ
    J
    J SRV
    QH SLHF
    I

    View Slide

  12. –‹ŽŽȱ ˜—Ž—ȱ
    6HH RWKHU SUHVHQWDWLRQV IRU
    ‡ DXGLR
    ‡ YLGHR
    ‡ FDQYDV
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  13. ’›Š–Žȱ
    &\QWKLD 1J #7KH5HDO$UW\

    )URP KWWSOLEUDU\U\HUVRQFDHUHVRXUFHVDFDGHPLFRQH
    œŒ›˜••’—ȱƽȱ—˜ȱ
    ƽȱ—˜
    œŒ›˜
    ˜•
    ••
    •’
    ’—
    —
    ȱƽ
    DZȱ˜ŸŽ›•˜ DZȱ‘’Ž—Dzȱ
    ǀȱ’›Š–ŽȱœŽŠ–•Žœœǁȱ

    View Slide

  14. ˜›–œȱ
    1HZ 7\SHV 1HZ $WWULEXWHV
    &\QWKLD 1J #7KH5HDO$UW\

    ‡ VHDUFK
    ‡ WHO
    ‡ XUO
    ‡ HPDLO
    ‡ GDWHWLPH YDULRXV
    ‡ QXPEHU
    ‡ FRORU
    ‡ SODFHKROGHU

    View Slide

  15. )URP KWWSF\QQJZRUGSUHVVFRPLQMHFWLQJSHUVRQDOLW\LQWRDOLEUDU\ZHEVLWH
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  16. ˜›–œȱ
    1HZ 7\SHV 1HZ $WWULEXWHV
    &\QWKLD 1J #7KH5HDO$UW\

    ‡ VHDUFK
    ‡ WHO
    ‡ XUO
    ‡ HPDLO
    ‡ GDWHWLPH YDULRXV
    ‡ QXPEHU
    ‡ FRORU
    ‡ >DQG PRUH@
    ‡ SODFHKROGHU
    ‡ DXWRIRFXV
    ‡ UHTXLUHG
    ‡ >DQG PRUH@

    View Slide

  17. ›Žšž’›Žȱƽȱȃ›Žšž’›ŽȄȱ
    )URP KWWSZHEGHVLJQWXWVSOXVFRPWXWRULDOVVLWHHOHPHQWVEULQJ\RXUIRUPVXSWRGDWH
    ZLWKFVVDQGKWPOYDOLGDWLRQ
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  18. řȱ
    $OO $ERXW 3UHVHQWDWLRQ
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  19. “ŠŒŽ—ȱŽ•ŽŒ˜›ȱ
    OL OL ^
    ERUGHUOHIW S[ VROLG GGG
    `
    &\QWKLD 1J #7KH5HDO$UW\

    K S
    K S ^
    PDUJLQWRS HP
    `
    Ž•Ž–Ž—ȱŗȱƸȱŽ•Ž–Ž—ȱŘȱǿȱȦȘȱ˜ž›ȱ ȱȘȦȱȀȱ

    View Slide

  20. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ
    QWKRIW\SH
    &\QWKLD 1J #7KH5HDO$UW\

    WDEOH!
    WU!
    WG!WG!
    WU!
    WU FODVV µHYHQµ!
    WG!WG!
    WU!
    WDEOH!

    View Slide

  21. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ
    DQ E
    &\QWKLD 1J #7KH5HDO$UW\

    Q






    QWKRIW\SH

    View Slide

  22. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ
    WUQWKRIW\SHRGG ^
    EDFNJURXQGFRORU )))$()
    `
    &\QWKLD 1J #7KH5HDO$UW\

    WUQWKRIW\SHQ ^
    EDFNJURXQGFRORU )))$()
    `
    QWKRIW\SH

    View Slide

  23. &\QWKLD 1J #7KH5HDO$UW\

    )URP KWWSOLEUDU\U\HUVRQFDLQIRFROOHFWLRQVEXGJHW

    View Slide

  24. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ
    SQWKRIW\SHRGG ^ FRORU UHG ` SQWKFKLOGRGG ^ FRORU UHG `
    &\QWKLD 1J #7KH5HDO$UW\

    5HG 3DQGDV
    DUH FXWH
    DUH VORWKV
    DUH SOD\IXO QRQHWKHOHVV
    5HG 3DQGDV
    DUH FXWH
    DUH VORWKV
    DUH SOD\IXO QRQHWKHOHVV
    ǀ’Ÿǁȱ
    ȱȱȱǀ‘ŘǁŽȱŠ—ŠœǀȦ‘Řǁȱ
    ȱȱȱǀ™ǁŠ›ŽȱŒžŽǯǀȦ™ǁȱ
    ȱȱȱǀ™ǁŠ›Žȱœ•˜‘œǯǀȦ™ǁȱ
    ȱȱȱǀ™ǁŠ›Žȱ™•Š¢ž•ȱ—˜—Ž‘Ž•ŽœœǯǀȦ™ǁȱ
    ǀȦ’Ÿǁȱ
    QWKFKLOG

    View Slide

  25. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ
    ‡ QWKODVWRIW\SH
    ‡ QWKODVWFKLOG
    ‡ ILUVWRIW\SH
    ‡ ILUVWFKLOG
    ‡ ODVWRIW\SH
    ‡ ODVWFKLOG
    ‡ RQO\RIW\SH
    ‡ RQO\FKLOG
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  26. ˜¡Ȭ’£’—ȱ
    )URP KWWSZZZKRQJNLDWFRPEORJFVVER[VL]LQJ
    &\QWKLD 1J #7KH5HDO$UW\

    ‹˜¡Ȭœ’£’—DZȱ‹˜›Ž›Ȭ‹˜¡Dzȱ

    View Slide

  27. Ž’ŠȱžŽ›’Žœȱ
    #PHGLD DOO DQG PD[ZLGWK S[ ^
    \RXU &66
    `
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  28. Ž’ŠȱžŽ›’Žœȱ
    &\QWKLD 1J #7KH5HDO$UW\

    KWWSJYVXHGXOLEUDU\

    View Slide

  29. Ž’ŠȱžŽ›’Žœȱ
    %UHDN 3RLQW :KHQ ,W /RRNV 6WXSLG
    &\QWKLD 1J #7KH5HDO$UW\

    S[
    S[
    S[
    HP
    HP
    HP
    6WROHQ IURP #PUHLGVPD KWWSPDWWKHZUHLGVURZFRPDUWLFOHV

    View Slide

  30. Ž’ŠȱžŽ›’Žœȱ
    &\QWKLD 1J #7KH5HDO$UW\

    ˜ž—Š’˜—ǯ£ž›‹ǯŒ˜–ȱ
    ’—ž’ŒœœǯŒ˜–ȱ

    View Slide

  31. Š••‹ŠŒ”ȱ
    )RU WKRVH 2OG %URZVHUV
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide


  32. śDZȱ—Ž›—Žȱ ¡™•˜›Ž›ȱ
    ‡ KWPOVKLY
    R KWWSVJLWKXEFRPD)DUNDVKWPOVKLY
    ‡ 5HSODFLQJ LIUDPH DWWULEXWHV ZLWK -DYD6FULSW
    R SUH,(
    R KWWSZZZG\QDPLFGULYHFRPIRUXPVHQWU\SKS"5HSODFLQJLIUDPH
    DWWULEXWHVZLWKMDYDVFULSW +70/
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  33. řȱ
    ´%XOOHWSURRIµ 6\QWD[
    #IRQWIDFH ^
    IRQWIDPLO\
    *UDXEODX :HE

    VUF XUO
    *UDXEODX:HEHRW"
    IRUPDW
    HRW

    XUO
    *UDXEODX:HEZRII
    IRUPDW
    ZRII

    XUO
    *UDXEODX:HEWWI
    IRUPDW
    WUXHW\SH

    `
    6RXUFH KWWSSDXOLULVKFRPEXOOHWSURRIIRQWIDFHLPSOHPHQWDWLRQV\QWD[
    RU XVH )RQW6TXLUUHOFRP
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  34. &\QWKLD 1J #7KH5HDO$UW\

    View Slide


  35. Ž•™Ž›œȱ
    UHVSRQGMV
    PHGLD TXHULHV LQ ROG ,(V
    ’‘ž‹ǯŒ˜–ȦœŒ˜“Ž‘•ȦŽœ™˜—ȱ
    &\QWKLD 1J #7KH5HDO$UW\

    •ŽŠŸŽ›˜žǯ’‘ž‹ǯŒ˜–Ȧ™›Ž’¡›ŽŽȱ
    –˜Ž›—’£›ǯŒ˜–ȱ

    View Slide

  36. Š”ŽŠ Š¢ȱ
    %H $FFHVVLEOH
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  37. ‘Ž›ȱ ŒŒŽœœ’‹’•’¢ȱ
    Žœ˜ž›ŒŽœȱ
    7KH 3DFLHOOR *URXS %ORJ ² SDFLHOORJURXSFRPEORJ
    7KH $FFHVVLELOLW\ 3URMHFW ² D\SURMHFWFRP
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide

  38. žŽœ’˜—œǵȱ
    &RQWDFW PH
    &\QWKLD 1J
    FVQJ#U\HUVRQFD
    #7KH5HDO$UW\
    DERXWPHF\QWKLDQJ
    &\QWKLD 1J #7KH5HDO$UW\

    View Slide