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!!


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


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?


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?


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?



We the world:Total Global Population

7+ Billionhttp://www.worldometers.info/world-population/

People around: Of the 7+ billion people-Web Users Count


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?


Quotation from Tim Berners-Lee


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


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.

http://www.w3.org/TR/WCAG20/

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


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.)


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.

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


How to make Web Accessible


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


Captcha images


1. Blindness 2.

Color Blindness

Types of Disabilities


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.)


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



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.



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.



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.

http://accessibility.co.uk/wiki/hardware:mobile-devices

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


Screen Reader Softwares


Screen Magnifiers


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?


http://youtube.com/v/VvWCnFjAGgo

Using devices with Braille


Braille display


http://youtube.com/v/Gd10syL5RLY

1. Closed captioning

2. Transcripts

3. ShowSounds

Assistive technology for Deaf or hard of hearing


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


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


2. Reading/writing comprehension aids

Assistive technology for people with Cognitive Disabilities


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



http://achecker.ca/checker/index.php

http://web.calstatela.edu/accessibility/tools.php

http://www.couchsurfing.org/

http://www.usa.gov/

http://www.ibm.com/

http://www.irctc.co.in/

http://www.mindfiresolutions.com/

http://www.hasgeek.com/

http://www.snook.ca/technical/colour_contrast/colour.html

http://validator.w3.org/

http://validator.w3.org/checklink

http://jigsaw.w3.org/css-validator/

http://www.cynthiasays.com/


http://achecker.ca/checker/index.php

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


http://www.howtocreate.co.uk/accessibletable.html

http://usability.com.au/2005/06/accessible-data-tables-2005/

http://webaim.org/techniques/forms/controls

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_tabindex

http://www.bbc.co.uk/accessibility/

http://www.bbc.co.uk/accessibility/best_practice/case_studies/

Thank you!!

QuestionsPresenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

?

Thank you!!Thank You


Web Accessibility

Software

web accessible

peopleweb users

web world

web applications

web page

web content

web browser

web developers