アクセシブルな入力フォームを作ろう 2015年6月21日 第6回 D2Dアクセシビリティ勉強会
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1. 2015621 6 D2D 2. 2 3. 3 SAWADA STANDARD DESIGN @SawadaStdDesign WAIC WG22011 2013 2014 4. 4 5. 5 D2D 6. 6 7. 7 . . . 8. 8 JIS 9. 9 4 10. 10 JIS X 8341-3:2010 A 201211 11. 11 H36 H44label H65labeltitle 7.1.1.1 12. 12 H44label H65labeltitle H71fieldsetlegend H85optgroupselectoption 7.1.3.1 13. 13 G133 G198 7.2.2.1 14. 14 tabindex G59 H4 C27DOM 7.2.4.3 15. 15 G80H32 H84select G13 7.3.2.2 16. 16 G83 G84 G85 7.3.3.1 17. 17 G89 G184 G162 G83 H44label H65labeltitle H71fieldsetlegend G167 7.3.3.2 18. 18 . . . 19. 19 20. 20 D2D 21. 21 1. 2.3 3. 4. 5. 6. 22. 22 1. forid 23. 23 2. 3 requiredNVDA required + aria-required="true" 24. 24 3. type=email 25. 25 4. type=tel 26. 26
A
5. fieldset PC-Talker7VoiceOver fieldset 27. 27 6. input[type="submit"] { background: #000000 url(/img/arrow.gif") no-repeat scroll 94% 50%; border-bottom-left-radius: 10px; border-top-right-radius: 10px; color: #ffffff; display: block; } 28. 28 D2D . . . 29. 29 30. 30 1. Notes on Using ARIA in HTML [] label 2.WAI-ARIA aria-labelaria-labelledby aria-describedby roleradiogroup 3. html5 WAIC WAI-ARIA 31. 31 32. 32
--
title title - - 33. 33
aria-describedby 34. 34 placeholder. . . 35. 35 1.placeholder 2. 3. 4.inputlabelplaceholder PC-Talker7NVDA titlejQuery 36. 36
HTML5requiredpattern JavaScript role=alertNVDA 37. 37 38. 38 39. 39 40. 40 41. 41 WAIC label HTMLid label Google 42. 42 43. 43
Related Documents
