Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Accessible Websites Martin Leyrer
Agenda <ul><li>About me
What you are not going to hear
What is “Accessibility” (a11y)
Web Content A11y Guidelines (WCAG)
Best Practices
Tools
Wrap Up and Q&A </li></ul>
About Me <ul><li>Martin Leyrer – just “Martin” is fine :)
From Vienna, Austria
Notes Dev. & Admin. since 1995 (R3.1)
Web Developer even longer
Work for a large IT service organization
One large Client </li></ul>
The “NOT” Slide <ul><li>I am NOT a W3C spokesperson
I am NOT a WCAG editor
I am NOT certifying your site “accessible”
No definitive answers, only “best practices”
Focus on technical issues </li></ul>
What is “Accessibility” <ul><li>Accessibility make content accessible to a wider range of people with disabilities, includ...
Following these guidelines will also often make your Web content more usable to users in general. </li></ul>
Accessibility Is More! <ul><li>It's not about the “Disability Discrimination Act 1995” (UK), the “Americans with Disabilit...
It's not making Websites “uglier”
Upcoming SlideShare
Loading in …5
×

Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event, March 30th, 2010

1,845 views

Published on

EU-Legislation demands 'accessible' websites, often leaving details or exact specifications on what that means out. In this session, we will have a look at the most often cited 'specifications', the Web Content Accessibility Guidelines (WCAG) 1.0 and 2.0 and how to interpret them. I will show a few free tools that can help a Notes Developer to asses what needs to be done to make a website 'compliant'. And of course I will offer quick tips and easy to implement 'hacks' to make an existing web application more 'accessible', sharing along the way a few best practices and experiences from the work I have done so far.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Accessible Websites With Lotus Notes/Domino, presented at the BLUG day event, March 30th, 2010

  1. 1. Accessible Websites Martin Leyrer
  2. 2. Agenda <ul><li>About me
  3. 3. What you are not going to hear
  4. 4. What is “Accessibility” (a11y)
  5. 5. Web Content A11y Guidelines (WCAG)
  6. 6. Best Practices
  7. 7. Tools
  8. 8. Wrap Up and Q&A </li></ul>
  9. 9. About Me <ul><li>Martin Leyrer – just “Martin” is fine :)
  10. 10. From Vienna, Austria
  11. 11. Notes Dev. & Admin. since 1995 (R3.1)
  12. 12. Web Developer even longer
  13. 13. Work for a large IT service organization
  14. 14. One large Client </li></ul>
  15. 15. The “NOT” Slide <ul><li>I am NOT a W3C spokesperson
  16. 16. I am NOT a WCAG editor
  17. 17. I am NOT certifying your site “accessible”
  18. 18. No definitive answers, only “best practices”
  19. 19. Focus on technical issues </li></ul>
  20. 20. What is “Accessibility” <ul><li>Accessibility make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.
  21. 21. Following these guidelines will also often make your Web content more usable to users in general. </li></ul>
  22. 22. Accessibility Is More! <ul><li>It's not about the “Disability Discrimination Act 1995” (UK), the “Americans with Disabilities Act of 1990” or any other law.
  23. 23. It's not making Websites “uglier”
  24. 24. It's not that hard
  25. 25. It's about enabling people to communicate! </li></ul>
  26. 26. Web Content Accessibility Guidelines <ul><li>Recommendations for making Web content more accessible
  27. 27. 1.0 was vague, hard to test
  28. 28. Succeeded by 2.0
  29. 29. Lot of content but very detailed
  30. 30. Lots of tests and best practices
  31. 31. Adaptable
  32. 32. Motivates to implement more </li></ul>
  33. 33. Standards Compliance <ul><li>Yes, it's still a topic
  34. 34. Using Xpages? Then you are fine.
  35. 35. “ Classic Web Apps.” have work to do </li><ul><li>DominoCompleteDoctype=1
  36. 36. Do the HTML, CSS, JS yourself
  37. 37. Content-Types! </li></ul><li>Test AND Fix! </li></ul>
  38. 38. Tables (1) <ul><li>Still using them for Layout?
  39. 39. You can and should use tables ...
  40. 40. … for data!
  41. 41. Supply some metadata and you are fine </li></ul>
  42. 42. Tables (2) <table summary=&quot;Description&quot;> <caption>Searchresultlist</caption> <colgroup> <col width=&quot;0px&quot; class=&quot;nowrap&quot;> <col width=&quot;40%&quot;> <col width=&quot;60%&quot;> </colgroup> <thead> <tr> <th><span id=&quot;numhead&quot; class=&quot;hide&quot;>Nr</span></th> <th>Headline 1</th> <th>Headline 2</th> </tr> </thead> <tbody> ......
  43. 43. The Good, The Bad and ... <ul><li>Javascript is not as “bad” as you may think
  44. 44. Don't rely on it
  45. 45. Xpages/Dojo -> Dijit Accessibility (a11y) </li></ul>
  46. 46. Ugly Code Have you read our <a href=&quot;javascript:window.open( 'terms.html', 'popup', 'height=500,width=400,toolbar=no' );&quot;>terms and conditions</a>?
  47. 47. Only Slightly Better Code ... Have you read our <a href=&quot;#&quot; onclick=&quot;window.open( 'terms.html', 'popup', 'height=500,width=400,toolbar=no' ); return false;&quot; >terms and conditions</a>?
  48. 48. Now This Code Is Fine ... Have you read our <a href=&quot;terms.html&quot; onclick=&quot;window.open( 'terms.html', 'popup', 'height=500,width=400,toolbar=no' ); return false;&quot; >terms and conditions</a>?
  49. 49. But This Code Would Be Better Have you read our <a href=&quot;terms.html&quot; class=&quot;sidenote&quot; >terms and conditions</a>?
  50. 50. window.onload = function() { var links = document.getElementsByTagName('a'); for (var i = 0, link; link = links[i]; i++) { if (link.className == 'sidenote') { link.onclick = function() { var href = this.href; window.open(href, 'popup', 'height=500,width=400,toolbar=no'); return false; } } } }
  51. 51. Unobstrusive Javascript <ul><li>Make your App. work without Javascript
  52. 52. “ Progressive Enhancement” afterwards
  53. 53. Don't write inline JS
  54. 54. Modify DOM after page has loaded
  55. 55. Unobtrusive JavaScript with jQuery </li></ul>
  56. 56. Page Structure <ul><li>Have you checked the Tab-sequence? </li><ul><li>tabindex=&quot;x&quot; </li></ul><li>Keyboard Shortcuts
  57. 57. Navigation-Shortcuts for Screenreaders <span class=&quot;show_screenreader_only&quot;><a href=&quot;#nav&quot; title=&quot;jump to Navigation&quot;>to Navigation</a></span> </li></ul>
  58. 58. “ Soft” Topics <ul><li>Foreground/Background Contrast
  59. 59. Colours
  60. 60. Alt-Text for Images
  61. 61. “ Simple” Text </li></ul>
  62. 62. Links (1) <ul><li>Firefox & Web Developer Toolbar
  63. 63. Internet Explorer Developer Toolbar
  64. 64. Lynx
  65. 65. NonVisual Desktop Access (NVDA)
  66. 66. Coblis — Color Blindness Simulator
  67. 67. Colour Contrast Analyser FF Extension
  68. 68. Contrast Analyser </li></ul>
  69. 69. Links (2) <ul><li>IBM Human Ability and Accessibility Center Developer guidelines for Web checklist
  70. 70. W3C WCAG Homepage
  71. 71. WAI-ARIA - Accessible Rich Internet Applications Suite
  72. 72. Local Accessibility Groups </li></ul>
  73. 73. Wrap Up And Q&A <ul><li>Accessibility is not hard
  74. 74. But it is also never finished.
  75. 75. WCAG is your friend
  76. 76. (Do use unobtrusive JavaScript) </li></ul>
  77. 77. Thank You! <ul><li>Contact me: </li><ul><li>Email: leyrer@gmail.com
  78. 78. Blog: http://martin.leyrer.priv.at
  79. 79. Twitter: @leyrer
  80. 80. Skype: martin.leyrer
  81. 81. Jabber: m3@cargal.org </li></ul></ul>

×