Practical Web Accessibility
•Download as ODP, PDF•
0 likes•499 views
The document discusses practical guidelines for web accessibility. It provides 14 guidelines for making web content more accessible, including using semantic HTML, adding alternative text for images, providing skip links to content, and ensuring keyboard navigation. It emphasizes that web accessibility is important for governments, education, and businesses to ensure access for all users, including those with disabilities or impairments. Testing tools are recommended to evaluate and improve a website's accessibility.
![About the speaker ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
Similar to Practical Web Accessibility
Similar to Practical Web Accessibility (20)
Recently uploaded
Recently uploaded (20)
Practical Web Accessibility
- 1. Practical Web Accessibility Friday December 25, 2009 Eng. Hatem Ben Yacoub Senior Systems Architect & IT Consultant
- 3. The Web access for all
- 4. This week ... `
- 5. A Geek can ...
- 6. Web Accessibility What about others ...
- 7. ” about one fifth (20%) of the population has some kind of disability ” WebAIM.org
- 8. Who's mostly concerned? Government & Education Information Commercial Service oriented Others
- 9. Simple Rules Be Semantic Do Not Assume Use Clear content Think about people Test your work
- 10. Guidelines WAI – WCAG (Web Content) – ATAG (authoring tools) – UAAG (User Agent) – EARL (Evaluation language) – WAI-RIA (Rich applications – Section 508 (US specific guidlines)
- 11. Accessibility Prirorities 1- The MUST have 2- Should haves 3- Good to have
- 12. Where do you want to be ? Accessibility levels A N.A AA AAA
- 14. XHTML 1.0, 1.1 Strict, transitional, frameset <html lang=”ar”> <div lang=”en”> 1- !Doctype and Language
- 15. 2- Div & Tables Use DIV for layout Summary and Caption for TABLE
- 16. 3- H1, H2, H3 ... Use headings in the correct order H1 H2 H3 H4 H5 H6 H3 H5 H4 H1 H2 H3 <h1></h1> !!
- 17. 4 – Image and alt Image that have a function MUST have alt
- 18. 5- Use descriptive alt Alt text should describe correctly what the image mean, not too short and not too long
- 19. 6- URLs title Use title to describe urls
- 20. 7- Accesskey & Tabindex <a href=“/” title=“Home” accesskey=“0”> Tabindex should be complete, logical, and intuitive.
- 21. 8- ability to naviguate with keyboard <ul> <li><a href="main.html" tabindex="1">Homepage</a></li> <li><a href="chapter1.html" tabindex="4">Chapter 1</a></li> <li><a href="chapter2.html" tabindex="3">Chapter 2</a></li> <li><a href="chapter3.html" tabindex="2">Chapter 3</a></li> </ul>
- 22. 9- "Skip to content"... <a href=“#content”>Skip to content</a> <a href=“#footer”>Skip to footer</a> <a href=“#menu”>Skip to menu</a> ......
- 23. 10- Label for Input <label for="firstname">First name:</label> <input type="text" name="firstname" id="firstname" />
- 24. 11- accronym and abbreviation Use of accronym and abbreviation <acronym> <abbr>
- 25. 12- fonts & size Use a limited number of fonts Use relative font size body {font-size: 62.5%}
- 26. 13- Javascript & display:none To be used in the right place <noscript>
- 27. 14- Web 2.0, Ajax, RIA Provide an accessible alternative
- 28. Should your website be 100% accessible ?
- 29. Firefox : Fangs, accessibility extension Internet explorer : AIS Web Accessibility Toolbar web : w3.org / totalvalidator.org wave.webaim.org Testing accessibility
- 30. Beyond accessibility Search Engine Optimized Access to highest number of visitors Better performance for your business Guarantee the web access for all
- 31. Questions ? Slides will be available shortly at jeddahgeeks.com hbyconsultancy.com slideshare.net/hatemben