Your SlideShare is downloading. ×
0
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Understanding Web Accessibility
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Understanding Web Accessibility

334

Published on

This presentation will help you understand: …

This presentation will help you understand:
- The legal requirements behind Web Accessibility
- How do people with disabilities use the web and what assistive technologies they use
- How good usability makes up for better accessibility and improves site’ SEO
- Financial benefits of having an accessible website

Published in: Internet, Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
334
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UNDERSTANDING WEB ACCESSIBILITY
  • 2. This presentation will help you understand:  The legal requirements behind Web Accessibility  How do people with disabilities use the web and what assistive technologies they use  How good usability makes up for better accessibility and improves site’ SEO  Financial benefits of having an accessible website
  • 3. Benefits of an accessible website  Expand potential market share (1.3 million Ontarians with disabilities + seniors and people with cognitive problems)  Increases findability with search engine optimization (SEO)  Focuses on better website usability  Increases positive company image  Eliminates potentially high legal expenses
  • 4. Purpose and legislature  The goal of web accessibility is to provide a better access to information for people with disabilities.  The government of Ontario has embarked on the road to make Ontario a fully accessible province. The new regulations are outlined in the Accessibility for Ontarians With Disabilities Act (AODA)
  • 5. Web Accessibility guidelines  The actual guidelines are outlined in the Web Content Accessibility Guidelines 2.0 (WCAG 2.0)  These are established by the Accessibility Initiative of the World Wide Web Consortium (W3C)  There are three levels of accessibility Level A, Level AA Level AAA
  • 6.  Government of Ontario and the Legislative Assembly  January 1, 2012 New internet and intranet websites must conform with WCAG 2.0 Level AA other than Captions (Live), and Audio Descriptions (Pre- recorded)  January 1, 2016 All internet websites and web content must conform with WCAG 2.0 Level AA, other than Captions (Live), and Audio Descriptions (Pre- recorded).  January 1, 2020 All internet and intranet websites and web content must conform with WCAG 2.0 Level AA AODA - timelines to meet the requirements
  • 7.  Public sector organizations, businesses and non-profit organizations (50+ staff)  January 1, 2014 All new websites must conform with Web Content Accessibility Guidelines, Level A  January 1, 2021 All websites must conform with Web Content Accessibility Guidelines, Level A A other than Captions (Live) and Audio Descriptions (Pre-recorded) AODA - timelines to meet the requirements
  • 8. Who are the people with disabilities? Unless we understand how people with disabilities navigate websites and what assistive technologies they use, we cannot build accessible websites. There are four main groups of disabilities: visual audio motor cognitive
  • 9. Visually impaired use screen magnifying software or screen readers such as Jaws. Screen readers read websites in a linear order - from top to bottom, left to right. Remember this when building the information structure of the website. Blind, low vision, color-blind
  • 10. Braille devices allow blind users read websites. Just like search engines, screen readers and Braille devices can only interpret written text. Provide alt text for all non-text elements. This is one of the main accessibility requirements that will also improve your site’s SEO. Blind, low vision, color-blind
  • 11. Deaf or hard-of-hearing Users can read text but require captions and transcript to interpret audio and video content. Always provide transcription for video and audio content. Transcriptions add keyword-rich content to your site which improves your SEO.
  • 12. Limited fine motor skills, slow response time Trackball mouse is used by people with shaky hands or arthritis. These can be people with disabilities but also many seniors.
  • 13. Some people use mouse stick to tap and navigate sites via keyboard. Think about the effort it takes to navigate the website. Limited fine motor skills, slow response time
  • 14. Head wand works in a similar way and again, requires enormous effort to tap through the website. Websites must be keyboard accessible. Aim for a minimum amount of clicks required to get to information. Limited fine motor skills, slow response time
  • 15. If a person can move only the head he can tap on a switch placed to the side of the head. The switch connects to a software that navigates the site. Limited fine motor skills, slow response time
  • 16. Sip and puff device can interpret users breath patterns to navigate the web Limited fine motor skills, slow response time Keep in mind that common tasks take disabled users longer to complete for. Make sure they are able extend the time limit e.g. when filling-out forms.
  • 17. Eye tracking software follows the movement of the eye and allows the person to navigate websites. Limited fine motor skills, slow response time In the past, people with disabilities depended on others to read them a paper of fill out an application. Assistive technologies give them great independence.
  • 18. Learning disabilities, distractibility, inability to remember or focus  Good usability is paramount for web accessibility  People who have problems using websites that are overly complex or poorly organized  Website must be logically organized, easy to navigate, written in simple language  No objects flashing more than 3x per second as it can cause epileptic seizures
  • 19. The key web accessibility principles Perceivable Content is readable for assistive technologies Graphics and images have alt text Audio and video content is accompanied by transcript or captions Operable Website is keyboard accessible It is easy to navigate Users have enough time to read and use content Does not cause seizures
  • 20. Understandable Structure is logical and follows linear order Does not contain extraneous text Robust Website does not require specific technology and can be used by assistive technologies The key web accessibility principles
  • 21. Perceivable provide alt text for non-text elements E.g. alt text for this image would be: “venus project by jacques fresco”
  • 22. When graphics contain useful information have this info available in text form E.g. Use longdesc=http://www.website.com/graph_explanation or describe the graphic as part of the content
  • 23. Do not use alt text for decorative images E.g. This image has no meaning so the alt text should be empty “ “ Our business promises the best service you will find on the planet. Our team is professionally trained to offer excellent customer service throughout the contract negotiation process. Customer satisfaction is our top priority and is guaranteed, or your money back.”
  • 24. Do not rely on color to carry out meaning
  • 25. Do not use color to emphasize required fields in forms
  • 26. Accessible forms  Screen readers read forms in linear order  Form must be keyboard accessible  Keep labels close to the fields  Ask for minimum info – too much info means a lot of effort  Help correct errors  When offering options (radio buttons, checkboxes) keep them close together
  • 27. Use proper color contrast Contrast ratio for normal-size text should be at least 4.5:1
  • 28. Operable  Website is keyboard accessible  Users can increase font size and adjust color contrast  Avoid splash pages and intro music (interfere with screen readers)  Content does not open in new window (users can’t find way back)  Content does not change without direct input (avoid pop-up windows)
  • 29. Understandable  Website is logically organized  Home page should confirm the company name and the purpose of the website  Website with extensive navigation allows for “skip to content”  Menus have descriptive titles  Internal pages have consistent layout
  • 30. Website copy  Main titles are in H1 heading, are meaningful and contain keywords  Subheadings are in H2 heading, meaningful and contain keywords  Content is further divided into blocks or paragraphs constructed around a single major idea  Aim for 9th grade reading skills  Write clearly using short sentences Using H1, H2, H3 … headings helps on-site SEO and allows users to scan through the content as screen readers can be set to read headings only. Simple language leads to better usability and SEO.
  • 31.  Avoid acronyms and abbreviations; or explain them  Avoid slang, industry jargon or marketing fluff  Use active voice, use positive terms  Ensure that every word and paragraph is necessary  Give direct instructions Simple writing helps people with cognitive problems better understand the website. Clear language is greatly appreciated by most people. Website copy
  • 32. Notice the descriptive menu items, meaningful links and intro paragraphs on this government website.
  • 33. Links  Avoid ‘click here’, ‘go’, ‘read more’ or images as links as they do not make sense out of context  Create meaningful links within text  Differentiate links by color and underline  Don’t place more than 20 links on a page  Use enough space between links Users can have the screen readers read only the links. Therefore, links have to make sense out of context. Sufficient space, large font, underlining make clicking on the link easier. Meaningful, keyword-rich links also help your SEO.
  • 34. Links
  • 35. Let’s sum up the benefits of an accessible website  Expand potential market share. It is estimated that 20% of population have some kind of disability. These are potential customers.  Improve your positions in search results (SEO)  Better website usability  Positive company image  Eliminate potentially high legal expenses  And most importantly – it’s the right thing to do
  • 36. Penalties for non-compliance with AODA Individuals or unincorporated organizations Impact of Contravention: Major Moderate Minor Major $2,000 $1,000 $500 Moderate $1,000 $500 $250 Minor $500 $250 $200 Corporations Impact of Contravention: Major Moderate Minor Major $15,000 $10,000 $5,000 Moderate $10,000 $5,000 $2,500 Minor $2,000 $1,000 $500
  • 37. Tools and resources  http://webaim.org/  http://www.w3.org/WAI/  http://wave.webaim.org/  http://www.checkmycolours.com/  http://juicystudio.com/services/luminositycontrastratio.php #specify
  • 38. Andrea Dubravsky www.adwebcom.com info@adwebcom.com Phone: 289 428 1100

×