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/

Transcript

1. Š”’—ȱ‘Žȱ Ž‹œ’Žȱ˜›Žȱ ŒŒŽœœ’‹•Žȱ &\QWKLD 1J )HEUXDU\   
2. ˜••ȱ +RZ H[SHULHQFHG ZLWK +70/&66 DUH \RX" &\QWKLD 1J #7KH5HDO$UW\ 
3. ‘Šȱ’œȱȱ Ž‹ȱ ŒŒŽœœ’‹’•’¢ǵȱ ‡ 'LVDELOLWLHV $VVLVWLYH 7HFKQRORJLHV ‡ (YHU\RQH &\QWKLD 1J #7KH5HDO$UW\ 
4. ˜••ȱ <RX ZRUN LQ" &\QWKLD 1J #7KH5HDO$UW\ 
5. ‘¢ȱ‘˜ž•ȱ˜žȱ Š›Žǵȱ ‡ /HJLVODWLRQ 5HJXODWLRQV ‡ ,QFUHDVHG $FFHVV ‡ %HWWHU IRU (YHU\RQH &\QWKLD 1J #7KH5HDO$UW\ 
6. śȱ 3URSHU 9DOLG 0DUNXS &\QWKLD 1J #7KH5HDO$UW\ 
7. ŽŒ’˜—ȱ •Ž–Ž—œȱ ‡ KHDGHU ‡ KJURXS ‡ QDY ‡ DUWLFOH ‡ VHFWLRQ ‡ DVLGH ‡ IRRWHU ‡ DGGUHVV &\QWKLD 1J #7KH5HDO$UW\ 
8. śȱ ŒŒŽœœ’‹’•’¢ȱ ZZZKWPODFFHVVLELOLW\FRP &\QWKLD 1J #7KH5HDO$UW\ 
9.  ȱ $FFHVVLEOH 5LFK ,QWHUQHW $SSOLFDWLRQV &\QWKLD 1J #7KH5HDO$UW\ 
10. œ’—ȱ  ȱ’—ȱ ȱ KWWSGYFVZRUJKJDULDXQRIILFLDOUDZILOHWLSLQGH[KWPO &\QWKLD 1J #7KH5HDO$UW\ 
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
12. –‹ŽŽȱ ˜—Ž—ȱ 6HH RWKHU SUHVHQWDWLRQV IRU ‡ DXGLR ‡ YLGHR ‡ FDQYDV &\QWKLD 1J #7KH5HDO$UW\ 
13. ’›Š–Žȱ &\QWKLD 1J #7KH5HDO$UW\  )URP KWWSOLEUDU\U\HUVRQFDHUHVRXUFHVDFDGHPLFRQH œŒ›˜••’—ȱƽȱ—˜ȱ ƽȱ—˜ œŒ›˜ ˜• •• •’ ’— — ȱƽ DZȱ˜ŸŽ›•˜ DZȱ‘’Ž—Dzȱ ǀȱ’›Š–ŽȱœŽŠ–•Žœœǁȱ
14. ˜›–œȱ 1HZ 7\SHV 1HZ $WWULEXWHV &\QWKLD 1J #7KH5HDO$UW\  ‡ VHDUFK ‡ WHO ‡ XUO ‡ HPDLO ‡ GDWHWLPH YDULRXV ‡ QXPEHU ‡ FRORU ‡ SODFHKROGHU
15. )URP KWWSF\QQJZRUGSUHVVFRPLQMHFWLQJSHUVRQDOLW\LQWRDOLEUDU\ZHEVLWH &\QWKLD 1J #7KH5HDO$UW\ 
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@
17. ›Žšž’›Žȱƽȱȃ›Žšž’›ŽȄȱ )URP KWWSZHEGHVLJQWXWVSOXVFRPWXWRULDOVVLWHHOHPHQWVEULQJ\RXUIRUPVXSWRGDWH ZLWKFVVDQGKWPOYDOLGDWLRQ &\QWKLD 1J #7KH5HDO$UW\ 
18. řȱ $OO $ERXW 3UHVHQWDWLRQ &\QWKLD 1J #7KH5HDO$UW\ 
19. “ŠŒŽ—ȱŽ•ŽŒ˜›ȱ OL  OL ^ ERUGHUOHIW S[ VROLG GGG ` &\QWKLD 1J #7KH5HDO$UW\  K  S K  S ^ PDUJLQWRS HP ` Ž•Ž–Ž—ȱŗȱƸȱŽ•Ž–Ž—ȱŘȱǿȱȦȘȱ˜ž›ȱ ȱȘȦȱȀȱ
20. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ QWKRIW\SH &\QWKLD 1J #7KH5HDO$UW\  WDEOH! WU! WG!WG! WU! WU FODVV µHYHQµ! WG!WG! WU! WDEOH!
21. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ DQ  E &\QWKLD 1J #7KH5HDO$UW\  Q                             QWKRIW\SH
22. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ WUQWKRIW\SH RGG ^ EDFNJURXQGFRORU )))$() ` &\QWKLD 1J #7KH5HDO$UW\  WUQWKRIW\SH Q ^ EDFNJURXQGFRORU )))$() ` QWKRIW\SH
23. &\QWKLD 1J #7KH5HDO$UW\  )URP KWWSOLEUDU\U\HUVRQFDLQIRFROOHFWLRQVEXGJHW
24. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ SQWKRIW\SH RGG ^ FRORU UHG ` SQWKFKLOG RGG ^ 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
25. ›žŒž›Š•ȱœŽž˜Ȭ •ŠœœŽœȱ ‡ QWKODVWRIW\SH ‡ QWKODVWFKLOG ‡ ILUVWRIW\SH ‡ ILUVWFKLOG ‡ ODVWRIW\SH ‡ ODVWFKLOG ‡ RQO\RIW\SH ‡ RQO\FKLOG &\QWKLD 1J #7KH5HDO$UW\ 
26. ˜¡Ȭ’£’—ȱ )URP KWWSZZZKRQJNLDWFRPEORJFVVER[VL]LQJ &\QWKLD 1J #7KH5HDO$UW\  ‹˜¡Ȭœ’£’—DZȱ‹˜›Ž›Ȭ‹˜¡Dzȱ
27. Ž’ŠȱžŽ›’Žœȱ #PHGLD DOO DQG PD[ZLGWK S[ ^  \RXU &66  ` &\QWKLD 1J #7KH5HDO$UW\ 
28. Ž’ŠȱžŽ›’Žœȱ &\QWKLD 1J #7KH5HDO$UW\  KWWSJYVXHGXOLEUDU\
29. Ž’ŠȱžŽ›’Žœȱ %UHDN 3RLQW :KHQ ,W /RRNV 6WXSLG &\QWKLD 1J #7KH5HDO$UW\  S[ S[ S[ HP HP HP 6WROHQ IURP #PUHLGVPD KWWSPDWWKHZUHLGVURZFRPDUWLFOHV
30. Ž’ŠȱžŽ›’Žœȱ &\QWKLD 1J #7KH5HDO$UW\  ˜ž—Š’˜—ǯ£ž›‹ǯŒ˜–ȱ ’—ž’ŒœœǯŒ˜–ȱ
31. Š••‹ŠŒ”ȱ )RU WKRVH 2OG %URZVHUV &\QWKLD 1J #7KH5HDO$UW\ 
32. śDZȱ —Ž›—Žȱ ¡™•˜›Ž›ȱ ‡ KWPOVKLY R KWWSVJLWKXEFRPD)DUNDVKWPOVKLY ‡ 5HSODFLQJ LIUDPH DWWULEXWHV ZLWK -DYD6FULSW R SUH,( R KWWSZZZG\QDPLFGULYHFRPIRUXPVHQWU\SKS"5HSODFLQJLIUDPH DWWULEXWHVZLWKMDYDVFULSW +70/  &\QWKLD 1J #7KH5HDO$UW\ 
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\ 
34. &\QWKLD 1J #7KH5HDO$UW\ 
35. Ž•™Ž›œȱ UHVSRQGMV PHGLD TXHULHV LQ ROG ,(V ’‘ž‹ǯŒ˜–ȦœŒ˜“Ž‘•ȦŽœ™˜—ȱ &\QWKLD 1J #7KH5HDO$UW\  •ŽŠŸŽ›˜žǯ’‘ž‹ǯŒ˜–Ȧ™›Ž’¡›ŽŽȱ –˜Ž›—’£›ǯŒ˜–ȱ
36. Š”ŽŠ Š¢ȱ %H $FFHVVLEOH &\QWKLD 1J #7KH5HDO$UW\ 
37. ‘Ž›ȱ ŒŒŽœœ’‹’•’¢ȱ Žœ˜ž›ŒŽœȱ 7KH 3DFLHOOR *URXS %ORJ ² SDFLHOORJURXSFRPEORJ 7KH $FFHVVLELOLW\ 3URMHFW ² D\SURMHFWFRP &\QWKLD 1J #7KH5HDO$UW\ 
38. žŽœ’˜—œǵȱ &RQWDFW PH &\QWKLD 1J FVQJ#U\HUVRQFD #7KH5HDO$UW\ DERXWPHF\QWKLDQJ &\QWKLD 1J #7KH5HDO$UW\