Practical Web Accessibility
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Practical Web Accessibility

Uploaded on

Practical web accessibility presentation in the second Jeddah Geeks Meetup

Practical web accessibility presentation in the second Jeddah Geeks Meetup

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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.
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 47 38 7 2

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Practical Web Accessibility Friday December 25, 2009 Eng. Hatem Ben Yacoub Senior Systems Architect & IT Consultant
  • 2. About the speaker
      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
  • 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 ”
  • 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
  • 13. Practical guidelines
  • 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=&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. 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. 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. 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 : / 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