Web Accessibility

545 views
449 views

Published on

Web Accessibility in its simplest definition is all about making sure websites work for the widest possible audience. This seminar would involve a quick introduction to Web Accessibility, Web Accessibility Issues, Guidelines etc.

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

No Downloads
Views
Total views
545
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Web Accessibility

  1. 1. Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions www.mindfiresolutions.com June 17th, 2014 Seminar on Web Accessibility
  2. 2. Hi Everyone! I am Binita Tamang, Senior UI Designer. I am working with Mindfire Solutions since 2012 and my intro would be incomplete if I wouldn’t say I was the first employee to join Mindfire Solutions, Bangalore branch. I work closely with the Opensource Team led by Sathees and I love doing design works. My hobbies include music, dance, sketching, interiors etc. Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions Hi!!
  3. 3. Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions Idea behind the seminar on web accessibility “For anything beautiful, useful and amazing to be created, it’s very essential to actually feel for it. We have to invest our emotions along with our intellect to create something that will impact a lot of people in any which way possible.” The purpose of the seminar is to give an overview of Web Accessibility, but with it lies the latent motive of awakening Empathy towards our users- their needs, their environment and their limitations. The idea is to develop sites/app keeping the end users in context so as to make it accessible to as many people as possible.
  4. 4. 1. What is Web Accessibility? Why Web Accessibility is a must? 2. What is an accessible design? 3. Statistics of global population, web users etc. 4. Defining WAI-ARIA 5. Overview of Web Accessibility Guidelines and Standards 6. Web Accessibility Checklist 5. Common Web Accessibility Issues 6. How to make Web Accessible? 7. Types of Disabilities 8. Assistive technologies for people with disabilities. 9. Video to show how a screen reader works 10. Video on Braille display 11. Web Accessibility Tools 12. Very common mistakes or ignorance we make during web development/ examples 13. Useful links/resources Topics we will be hitting on today Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  5. 5. Web accessibility means that people with disabilities can use the Web. More specifically, it means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. What is Web Accessibility? Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  6. 6. Accessible web design is the practice of designing and developing websites that are usable by everyone. People who use the web have a variety of characteristics. As web developers, we cannot assume that all our users access our content using the same web browser or operating system that we do, nor can we assume they use a traditional monitor for output or keyboard and mouse for input. For example: ● Users who are blind might access a web page using an audible interface such as screen reader software or a tactile interface such as a refreshable Braille output device. ● Users with low vision might view the page with large fonts or a high-contrast color scheme. ● Users with physical disabilities might navigate the web without a mouse, instead using a keyboard, speech recognition technology, or other assistive technologies. So, while designing we have to keep in mind certain web accessibility guidelines to make it accessible to everyone. What is accessible design? Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  7. 7. If we see closely, Web is a really very important resource in many aspects of life: education, employment, government, commerce, health care, recreation, and more. It is essential that the Web be accessible in order to provide equal access and equal opportunity to people with disabilities. An accessible Web can also help disabled people to actively participate in society and can equally take the benefits of the vast resources of the web..in a way , its our responsibility to make things a bit easier for them…!! Why is Web Accessibility important? Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  8. 8. Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions We the world:Total Global Population 7+ Billion http://www.worldometers.info/world-population/
  9. 9. People around: Of the 7+ billion people-Web Users Count Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions And 1 of the 10 uses “local languages” as their primary language. 6 billion people have a cellphone 1.2+billion people are with disabilities 600+million people are above the age of 60 1+billion people are mobile workers 900+million people have low literacy or illiterate 5 billion have never used internet 1 billion have used the internet for less than 5 years
  10. 10. WAI stands for Web Accessibility Initiative (WAI). In order to include the masses with disabilities into the web world, W3C initiated the Web Accessibility Initiative (WAI) that is emphasizing on creating ARIA which is Accessible Rich Internet Applications WAI-ARIA defines a way to make Web content and Web applications more accessible to people with disabilities. It especially helps with dynamic content and advanced user interface controls developed with Ajax, HTML, JavaScript, and related technologies. It defines bunch of markup extensions (mostly as attributes on HTML5 elements), which can be used by the web app developer to provide additional information about the semantic of the various elements to assistive technologies like screen readers. What is WAI-ARIA? Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  11. 11. Quotation from Tim Berners-Lee Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. “ Tim Berners-Lee, W3C Director and inventor of the World Wide Web
  12. 12. Overview of Web Accessibility Guidelines and Standards Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions Web accessibility is formally defined by the World Wide Web Consortium (W3C), whose Web Content Accessibility Guidelines (WCAG) 2.0became an official W3C Recommendation in December 2008. WCAG 2.0 organizes web accesibility success criteria into four general principles: ● Perceivable: Content must be perceivable to all users ie. users should be able to be aware of the content or get accesss to the content regardless of a variety of senses, output devices, and settings. ● Operable: User interface components, including menus, links, and controls must be operable by all users. Keep in mind that users operate such controls using a variety of input devices, including mouse, keyboard, stylus, touch screen, speech, and other assistive technologies. ● Understandable: Content and the user interface must be usable and easy to understand. ● Robust: Content must use standard technologies and be coded in a way that will increase the likelihood of its being supported across all web-enabled technologies, including assistive technologies and future technologies.
  13. 13. 1. Does the keyboard provide access to navigation, in particular the tab, arrow, and enter keys without the use of a mouse? 2. Using the keyboard for navigation, does the cursor move in a logical flow or order? 3. Do all elements (links, radio buttons, text boxes, and drop down menus) work when selected? 4. Does the link text explain and provide context? 5. Is ALT text provided for all non-text elements? Web Accessibility Checklist Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions Now here a web accessibility checklist that helps to test and identify some of the most commonly occurring accessibility issues for website and web-based applications. Every web page or web application is different and you may or may not need to address every item on this checklist; however, it can be utilized throughout the life-cycle for any web-based project.
  14. 14. Web Accessibility Checklist (contd.) Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions 7. Is the web page organized such that it is readable without the use of an associated stylesheet? 8. Are there color elements that cannot be identified? 9. Are data tables coded with column headings and row names in the scope? 10. Does the web page have frames? 11. If there is a timed response, are users prompted to request more time? 12. Are electronic form elements organized in a logical tab order and labeled? 13. Are links provided for applets, plug-ins, or third-party software that might be required to access content on the web page? The checklist above highlight a list of items that ought to be reviewed for all web pages and web-based applications. To know about the complement W3C’s checklist visit http://www.w3.org/TR/WCAG10/full-checklist.html.
  15. 15. 1. Failure to include text alternatives for images 2. Use of CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) 3. Failure to provide adequate alternative for other inaccessible content 4. Failure to use HTML Header elements appropriately 5. Failure to explicitly associate form inputs with their labels (or use the input title attribute) 6. Failure to ensure sufficient difference between foreground (text) colour and background colour 7. Failure to identify data tables with Summary or Caption 8. Failure to mark-up data tables correctly 9. Failure to ensure sites can be used without the mouse 10. Use of onChange event handlers with select menus Common Web Accessibility issues Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  16. 16. How to make Web Accessible Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions 1. Images & animations: Use the alt attribute to describe the function of each visual. 2. Multimedia. Provide captioning and transcripts of audio, and descriptions of video. 3. Hypertext links. Give your links unique and descriptive names:eg:For example, if you are pointing visitors to a page called "About Us": Try not to say: "Click here to read about our company." Instead, say: "To learn more about our company, read About Us." 4. Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible. 5. User color with care. Make sure the background and text color have a lot of contrast for easy reading. 6. Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported. 7. Frames. Use the noframes element and meaningful titles. 8. Tables. Make line-by-line reading sensible. Summarize.Use tables for tabular data, not for layout.
  17. 17. 9. Design your forms for accessibility. 10. Ensure that all content can be accessed with the keyboard alone in a logical way. 11. Use ARIA roles and landmarks. 12. Make dynamic content accessible. 13. Choose a content management system that supports accessibility.14. Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG How to make Web Accessible Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  18. 18. Captcha images Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  19. 19. 1. Blindness 2. Color Blindness Types of Disabilities Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions People who are blind need meaningful text equivalents for images so a screen reader can “read” the the information they need to navigate using the keyboard. Inability to distinguish the differences between certain colors, so need higher contrast and alternative ways to identifying colors.
  20. 20. 3. Low Vision or poor eyesight 4.Impacts of Aging Types of Disabilities (contd.) Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions People with low vision need larger fonts and higher contrast. A gradual change that can impact the traditional areas of vision, hearing, motor and cognitive abilities.
  21. 21. 5. Deafness or hard of hearing 6. Motor Disabilities Types of Disabilities (contd.) Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions People who are deaf or hard of hearing require visual representations of auditory information. People with difficulties in moving,controlling or co-ordinating movement of the body and may experience difficulties using the mouse or even the keyboards.
  22. 22. Types of Disabilities (contd.) Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions 7. Cognitive Disabilities Impacts the ability to access, process or remember information, and limits the ability to perceive, recognize, understand, interpret or respond to information. Accessibility for users with cognitive disabilities can be a far greater challenge than for those with other types of disabilities, but still we can help them with user centered and accessible design.
  23. 23. Types of Disabilities (contd.) Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions 8. Situational Disability Prevent you from functioning in your usual manner..Examples are Loud/quite environment, temporary injury, multitasking, driving and non-native language. Have you ever been in a noisy room and not heard your mobile phone ring? That's an example of a situational disability.Situational disability is a term used to describe a temporary state imposed by a person's current environment that results in an accessibility issue. It is not physiological or pathological like other disabilities.
  24. 24. There are various assistive technologies which help in rendering the content to the people with disabilities. Like, 1. Screen readers 2. Braille displays 3. Screen magnifiers 4. Optical Character Recognition Assistive technology for Vision impaired or Blind Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  25. 25. Screen Reader Softwares Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  26. 26. Screen Magnifiers Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions A screen magnifier is software that interfaces with a computer's graphical output to present enlarged screen content. It is a type of assistive technology suitable for visually impaired people with some functional vision; visually impaired people with little or no functional vision usually use a screen reader.
  27. 27. How does a screen reader work? Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  28. 28. Using devices with Braille Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  29. 29. Braille display Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  30. 30. 1. Closed captioning 2. Transcripts 3. ShowSounds Assistive technology for Deaf or hard of hearing Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions Closed captions are a text version of the spoken part of a television, movie, or computer presentation. Closed captioning was developed to aid hearing-impaired people, but it's useful for a variety of situations. For example, captions can be read when audio can't be heard, either because of a noisy environment, such as an airport, or because of an environment that must be kept quiet, such as a hospital, library. Transcripts: a written or printed version of material originally presented in another medium. ShowSounds: http://support.microsoft.com/kb/308897
  31. 31. Closed captioning, transcripts, showing sound Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions Ever noticed audio/visual captioning when the video screen i s going on in television? Never understood why when the loud video screen is flashing on screen, the captioning was needed. Now do. There are people among us, who need it the most.
  32. 32. 1. Word prediction aids Assistive technology for people with Cognitive Disabilities Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  33. 33. 2. Reading/writing comprehension aids Assistive technology for people with Cognitive Disabilities Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  34. 34. Accessibility Checker http://wave.webaim.org/ http://achecker.ca/checker/index.php [enter url to check it] http://web.calstatela.edu/accessibility/tools.php Fully Accessible Sites http://www.couchsurfing.org/ http://www.usa.gov/ http://www.ibm.com Some with accessibility issues http://www.irctc.co.in http://www.mindfiresolutions.com http://www.hasgeek.com Web Accessibility Tools Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  35. 35. Creating Accessible Table: http://www.howtocreate.co.uk/accessibletable.html http://usability.com.au/2005/06/accessible-data-tables-2005/ Creating Accessible Forms http://webaim.org/techniques/forms/controls Tabindex example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_tabindex Awesome resource for web accessibility content: http://www.bbc.co.uk/accessibility/ Case Studies: http://www.bbc.co.uk/accessibility/best_practice/case_studies/ Quick links/resources Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
  36. 36. Thank you!! Questions Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions ?
  37. 37. Thank you!! Thank You Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

×