Practical Web Accessibility

968 views

Published on

Practical web accessibility presentation in the second Jeddah Geeks Meetup

Published in: Technology, Design
2 Comments
0 Likes
Statistics
Notes
  • Ikbel this session was about accessibility, there was a session just before mine about usability. Your notes about usability and it's true that there is a compromise between the two topics and yep sometimes we have to choose :)

    I might mentioned this briefly in my talk, but obviously can't cover everything in less than 30 minutes.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Slide 23,
    Putting Labels inside inputs is being more frequent now in most of sites to reduce used space in a web page (look at Facebook for example).

    Good presentation, but along with accessibility, now we speak also about usability, where user first look, and which links/buttons he click first.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
968
On SlideShare
0
From Embeds
0
Number of Embeds
55
Actions
Shares
0
Downloads
30
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

Practical Web Accessibility

  1. 1. Practical Web Accessibility Friday December 25, 2009 Eng. Hatem Ben Yacoub Senior Systems Architect & IT Consultant
  2. 2. About the speaker <ul>Ben Yacoub Hatem Energy Engineer (ENIM 2001) Senior Systems Architect IT Consultant e-Government Specialist (6 Years experience in e-Gov) PHP Expert (9 years experience, php tunisia founder) Entrepreneur (Manager Dynamix SARL 2003-2005) Open Source Evangelist http://hbyconsultancy.com <li>http://twitter.com/hatem </li></ul>
  3. 3. The Web access for all
  4. 4. This week ... `
  5. 5. A Geek can ...
  6. 6. Web Accessibility What about others ...
  7. 7. ” about one fifth (20%) of the population has some kind of disability ” WebAIM.org
  8. 8. Who's mostly concerned? Government & Education Information Commercial Service oriented Others
  9. 9. Simple Rules Be Semantic Do Not Assume Use Clear content Think about people Test your work
  10. 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. 11. Accessibility Prirorities 1- The MUST have 2- Should haves 3- Good to have
  12. 12. Where do you want to be ? Accessibility levels A N.A AA AAA
  13. 13. Practical guidelines
  14. 14. XHTML 1.0, 1.1 Strict, transitional, frameset <html lang=”ar”> <div lang=”en”> 1- !Doctype and Language
  15. 15. 2- Div & Tables Use DIV for layout Summary and Caption for TABLE
  16. 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. 17. 4 – Image and alt Image that have a function MUST have alt
  18. 18. 5- Use descriptive alt Alt text should describe correctly what the image mean, not too short and not too long
  19. 19. 6- URLs title Use title to describe urls
  20. 20. 7- Accesskey & Tabindex <a href=“/” title=“Home” accesskey=“0”> Tabindex should be complete, logical, and intuitive.
  21. 21. 8- ability to naviguate with keyboard <ul> <li><a href=&quot;main.html&quot; tabindex=&quot;1&quot;>Homepage</a></li> <li><a href=&quot;chapter1.html&quot; tabindex=&quot;4&quot;>Chapter 1</a></li> <li><a href=&quot;chapter2.html&quot; tabindex=&quot;3&quot;>Chapter 2</a></li> <li><a href=&quot;chapter3.html&quot; tabindex=&quot;2&quot;>Chapter 3</a></li> </ul>
  22. 22. 9- &quot;Skip to content&quot;... <a href=“#content”>Skip to content</a> <a href=“#footer”>Skip to footer</a> <a href=“#menu”>Skip to menu</a> ......
  23. 23. 10- Label for Input <label for=&quot;firstname&quot;>First name:</label> <input type=&quot;text&quot; name=&quot;firstname&quot; id=&quot;firstname&quot; />
  24. 24. 11- accronym and abbreviation Use of accronym and abbreviation <acronym> <abbr>
  25. 25. 12- fonts & size Use a limited number of fonts Use relative font size body {font-size: 62.5%}
  26. 26. 13- Javascript & display:none To be used in the right place <noscript>
  27. 27. 14- Web 2.0, Ajax, RIA Provide an accessible alternative
  28. 28. Should your website be 100% accessible ?
  29. 29. Firefox : Fangs, accessibility extension Internet explorer : AIS Web Accessibility Toolbar web : w3.org / totalvalidator.org wave.webaim.org Testing accessibility
  30. 30. Beyond accessibility Search Engine Optimized Access to highest number of visitors Better performance for your business Guarantee the web access for all
  31. 31. Questions ? Slides will be available shortly at jeddahgeeks.com hbyconsultancy.com slideshare.net/hatemben

×