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.

1. Accessible Websites Martin Leyrer

3. What you are not going to hear

4. What is “Accessibility” (a11y)

5. Web Content A11y Guidelines (WCAG)

6. Best Practices

7. Tools

8. Wrap Up and Q&A

10. From Vienna, Austria

11. Notes Dev. & Admin. since 1995 (R3.1)

12. Web Developer even longer

13. Work for a large IT service organization

14. One large Client

16. I am NOT a WCAG editor

17. I am NOT certifying your site “accessible”

18. No definitive answers, only “best practices”

19. Focus on technical issues

21. Following these guidelines will also often make your Web content more usable to users in general.

23. It's not making Websites “uglier”

24. It's not that hard

25. It's about enabling people to communicate!

27. 1.0 was vague, hard to test

28. Succeeded by 2.0

29. Lot of content but very detailed

30. Lots of tests and best practices

31. Adaptable

32. Motivates to implement more

34. Using Xpages? Then you are fine.

36. Do the HTML, CSS, JS yourself

39. You can and should use tables ...

40. … for data!

41. Supply some metadata and you are fine

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> ......

44. Don't rely on it

45. Xpages/Dojo -> Dijit Accessibility (a11y)

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. 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. 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. 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. 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; } } } }

52. “ Progressive Enhancement” afterwards

53. Don't write inline JS

54. Modify DOM after page has loaded

55. Unobtrusive JavaScript with jQuery

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>

59. Colours

60. Alt-Text for Images

61. “ Simple” Text

63. Internet Explorer Developer Toolbar

64. Lynx

65. NonVisual Desktop Access (NVDA)

66. Coblis — Color Blindness Simulator

67. Colour Contrast Analyser FF Extension

68. Contrast Analyser

70. W3C WCAG Homepage

71. WAI-ARIA - Accessible Rich Internet Applications Suite

72. Local Accessibility Groups

74. But it is also never finished.

75. WCAG is your friend

76. (Do use unobtrusive JavaScript)

78. Blog: http://martin.leyrer.priv.at

79. Twitter: @leyrer

80. Skype: martin.leyrer

81. Jabber: m3@cargal.org