Web Accessibility
-
Upload
mindfire-solutions -
Category
Software
-
view
221 -
download
0
description
Transcript of Web Accessibility
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutionswww.mindfiresolutions.com
June 17th, 2014Seminar on Web Accessibility
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!!
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.
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-ARIA5. Overview of Web Accessibility Guidelines and Standards6. Web Accessibility Checklist5. Common Web Accessibility Issues6. How to make Web Accessible?7. Types of Disabilities8. Assistive technologies for people with disabilities.9. Video to show how a screen reader works10. Video on Braille display11. Web Accessibility Tools12. Very common mistakes or ignorance we make during web development/ examples13. Useful links/resources
Topics we will be hitting on today
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
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
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
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
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
We the world:Total Global Population
7+ Billionhttp://www.worldometers.info/world-population/
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
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
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
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.
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?
6. Are captions provided for multimedia 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.
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.
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
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.
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
Captcha images
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
1. Blindness 2.
Color Blindness
Types of Disabilities
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
People who are blind need meaningfultext equivalents for images so a screen readercan “read” the the information they need tonavigate using the keyboard.
Inability to distinguish the differences between certain colors, so need higher contrast and alternative ways to identifying colors.
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.
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.
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.
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.
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
Screen Reader Softwares
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
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.
How does a screen reader work?
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
Using devices with Braille
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
Braille display
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
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
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.
1. Word prediction aids
Assistive technology for people with Cognitive Disabilities
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
2. Reading/writing comprehension aids
Assistive technology for people with Cognitive Disabilities
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
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 Sites For Testing AccessibilityThe following Web sites can test your web pages for accessibility without having to install anything.
● Colour Contrast Check - Web page for testing foreground and background color choices
● W3C HTML Validator - Validates your HTML coding● W3C Link Checker - Checks to see if there are any broken links● W3C CSS Validator - Validates your Cascading Style Sheet
code● Cynthia Says Portal - Online Web accessibility evaluation tool● WAVE - Online Web accessibility evaluation tool● AChecker - Online Web accessibility evaluation tool
Web Accessibility Tools
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
Creating Accessible Table:http://www.howtocreate.co.uk/accessibletable.htmlhttp://usability.com.au/2005/06/accessible-data-tables-2005/
Creating Accessible Formshttp://webaim.org/techniques/forms/controls
Tabindex example:http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_tabindexAwesome 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
Thank you!!
QuestionsPresenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
?
Thank you!!Thank You
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions