Your SlideShare is downloading. ×
0
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,489

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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,489
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Understanding accessibility requires an awareness of the special needs of multiple user groups, including people with disabilities and mature users with age-related disabilities. A person with a disability may encounter one or more barriers that can be eliminated or minimized by the software or Web developer, the assistive technology, or the underlying operating system software and hardware platform. The four main categories of disabilities are visual, hearing, mobility, and cognitive.
  • It&apos;s about god webdesign. It&apos;s about the willingness tp make your website available to everybody.
  • Transcript of "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>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×