Developing an Accessible Web  Arnold Bailey [email_address]
Contents <ul><li>Importance of accessible webs </li></ul><ul><li>Overview of assistive technology (AT) </li></ul><ul><li>D...
Scope of Disabilities <ul><li>20% of the population have a disability. </li></ul><ul><ul><li>1 in 10  people have a severe...
Ethical “In accordance with right” <ul><li>Aids employment opportunity </li></ul><ul><ul><li>70% unemployment rate for bli...
Legal <ul><li>Federal American for Disabilities Act (ADA) Section 504. </li></ul><ul><li>Section 508 for companies dealing...
Professional (Programming) <ul><li>Accessibility requires  </li></ul><ul><ul><li>Good coding practices </li></ul></ul><ul>...
Assitive Software   <ul><li>Screen Readers </li></ul><ul><ul><li>JAWS(IE), Windows Eyes(IE), Orca(Linux) </li></ul></ul><u...
Assistive Technology <ul><li>Braille note-taking </li></ul><ul><li>Scanner/OCR software </li></ul><ul><li>Refreshable brai...
Screen Reader Demo “ System Access To Go” by Serotek, Inc. (5 minute snippet to demonstrate a screen reader)
An Accessible Page
HTML Guidelines <ul><li>Informative Title </li></ul><ul><li>Use ALT tag on images </li></ul><ul><li>Use Skip Navigation </...
An Accessible Form
HTML Form Guidelines <ul><li>Do use  </li></ul><ul><ul><li>Label on Forms </li></ul></ul><ul><ul><li>meaningful Text error...
Macromedia Flash Issues
Macromedia Flash <ul><li>Don’t use  </li></ul><ul><ul><li>navigation within the object. </li></ul></ul><ul><li>Do use  </l...
Testing <ul><li>Disable CSS. Check basic function. </li></ul><ul><li>Disable  Javascript. Check basic function. </li></ul>...
Web Accessibility Guidelines <ul><li>World Wide Web Consortium </li></ul><ul><ul><li>W3C Web Accessibility Guidelines (WAG...
Accessible Rich Internet Applications <ul><li>Problem:   </li></ul><ul><ul><li>Javascript poses a problem to screen reader...
Summary <ul><li>Conform to standards </li></ul><ul><li>Understand the intent of the guidelines Awareness of accessibility ...
Upcoming SlideShare
Loading in …5
×

Developing an Accessible Web

904 views

Published on

Discussion of web accesibility issues to "Introduction to Web Design" students.

Published in: Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
904
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
17
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Developing an Accessible Web

  1. 1. Developing an Accessible Web Arnold Bailey [email_address]
  2. 2. Contents <ul><li>Importance of accessible webs </li></ul><ul><li>Overview of assistive technology (AT) </li></ul><ul><li>Demonstration of AT web interaction </li></ul><ul><li>Accessible web page examples </li></ul><ul><li>Guidelines for good web design </li></ul><ul><li>Summary </li></ul>
  3. 3. Scope of Disabilities <ul><li>20% of the population have a disability. </li></ul><ul><ul><li>1 in 10 people have a severe disability. </li></ul></ul><ul><ul><li>1 in2 persons over 65 have reduced capabilities </li></ul></ul><ul><ul><li>10 million Blind or Visually Impaired </li></ul></ul><ul><ul><li>1.5 million without sight </li></ul></ul>
  4. 4. Ethical “In accordance with right” <ul><li>Aids employment opportunity </li></ul><ul><ul><li>70% unemployment rate for blind/vi </li></ul></ul><ul><ul><li>The technology is there and inexpensive. </li></ul></ul><ul><li>Enhances the Quality of Life: </li></ul><ul><ul><li>Information (news, transportation) </li></ul></ul><ul><ul><li>Communication (Email, groups, networking) </li></ul></ul><ul><ul><li>Education and Training </li></ul></ul>
  5. 5. Legal <ul><li>Federal American for Disabilities Act (ADA) Section 504. </li></ul><ul><li>Section 508 for companies dealing with the federal and many state agencies. </li></ul><ul><li>State “section 508” laws that are eminent. </li></ul>
  6. 6. Professional (Programming) <ul><li>Accessibility requires </li></ul><ul><ul><li>Good coding practices </li></ul></ul><ul><ul><li>A degree of proficiency in the language </li></ul></ul><ul><li>Developers with program accessibility expertise are in demand. </li></ul><ul><li>D.I.R.T.F.T.S. (Develop It Right The First Time, Stupid!) </li></ul>
  7. 7. Assitive Software <ul><li>Screen Readers </li></ul><ul><ul><li>JAWS(IE), Windows Eyes(IE), Orca(Linux) </li></ul></ul><ul><ul><li>Voice Over(Mac), Narrator(Vista) </li></ul></ul><ul><ul><li>Systems Access(IE), IBM WATS(IE) </li></ul></ul><ul><li>Magnifiers (XP, ZoomText,MAC) </li></ul><ul><li>Voice Recognition (Dragon Natural,Vista, MS Word) </li></ul>
  8. 8. Assistive Technology <ul><li>Braille note-taking </li></ul><ul><li>Scanner/OCR software </li></ul><ul><li>Refreshable braille displays </li></ul><ul><li>Braille translation software </li></ul><ul><li>Braille embossers </li></ul><ul><li>http://www.blind411.org/ITinit/assistive.htm </li></ul>
  9. 9. Screen Reader Demo “ System Access To Go” by Serotek, Inc. (5 minute snippet to demonstrate a screen reader)
  10. 10. An Accessible Page
  11. 11. HTML Guidelines <ul><li>Informative Title </li></ul><ul><li>Use ALT tag on images </li></ul><ul><li>Use Skip Navigation </li></ul><ul><li>Navigation Using Lists </li></ul><ul><li>Highlight Link </li></ul><ul><li>Prefer CSS vs Tables </li></ul><ul><li>Use Heading Levels </li></ul><ul><li>Contrast </li></ul><ul><li>No Fixed Font Size </li></ul><ul><li>Audio alternative </li></ul><ul><li>For Tables use % if you have to. </li></ul><ul><li>Keystroke Shortcuts possible conflict </li></ul><ul><li>“ Back to ..” links </li></ul>
  12. 12. An Accessible Form
  13. 13. HTML Form Guidelines <ul><li>Do use </li></ul><ul><ul><li>Label on Forms </li></ul></ul><ul><ul><li>meaningful Text error messages </li></ul></ul><ul><ul><li>a “Submit/Go” button </li></ul></ul><ul><li>Don’t use </li></ul><ul><ul><li>Flash to create a form. </li></ul></ul>
  14. 14. Macromedia Flash Issues
  15. 15. Macromedia Flash <ul><li>Don’t use </li></ul><ul><ul><li>navigation within the object. </li></ul></ul><ul><li>Do use </li></ul><ul><ul><li>accessibility functions of the development tool to externalize to the screen reader: </li></ul></ul><ul><ul><ul><li>Text </li></ul></ul></ul><ul><ul><ul><li>Image descriptions </li></ul></ul></ul><ul><ul><li>Doctype to describe the object. </li></ul></ul>
  16. 16. Testing <ul><li>Disable CSS. Check basic function. </li></ul><ul><li>Disable Javascript. Check basic function. </li></ul><ul><li>Get a person who uses a screen reader. </li></ul>
  17. 17. Web Accessibility Guidelines <ul><li>World Wide Web Consortium </li></ul><ul><ul><li>W3C Web Accessibility Guidelines (WAG) </li></ul></ul><ul><ul><li>W3C WAI ARIA – Accessible Rich Internet Applications </li></ul></ul><ul><ul><ul><li>Objects and Widgets </li></ul></ul></ul><ul><ul><ul><li>Flash, Ajax,J avascript, Web 2.0 </li></ul></ul></ul><ul><ul><ul><li>HTML 5 Draft </li></ul></ul></ul>
  18. 18. Accessible Rich Internet Applications <ul><li>Problem: </li></ul><ul><ul><li>Javascript poses a problem to screen readers. It can change page contents and focus without the screen reader knowledge. </li></ul></ul><ul><ul><li>AJAX (An RIA) uses Javascript extensively. </li></ul></ul><ul><li>Future: </li></ul><ul><ul><li>WAI-ARIA, Web 2.0 and HTML 5 address the problem. It’s a cooperative effort between developers and screen reading software. </li></ul></ul>
  19. 19. Summary <ul><li>Conform to standards </li></ul><ul><li>Understand the intent of the guidelines Awareness of accessibility is important. </li></ul><ul><li>Use good coding practices </li></ul><ul><li>Then use common sense, conscience and professional ethics balancing with business needs. </li></ul>

×