1. Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
www.mindfiresolutions.com
June 17th, 2014
Seminar on Web Accessibility

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. 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. 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. 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. 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. 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. Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
We the world:Total Global Population
7+ Billion
http://www.worldometers.info/world-population/

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. 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. 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. 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. 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. 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. 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. 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. 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. Captcha images
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

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. 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. 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. 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. 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. 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. Screen Reader Softwares
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

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. How does a screen reader work?
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

28. Using devices with Braille
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

29. Braille display
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

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. 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. 1. Word prediction aids
Assistive technology for people with Cognitive Disabilities
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

33. 2. Reading/writing comprehension aids
Assistive technology for people with Cognitive Disabilities
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions

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. 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. Thank you!!
Questions
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions
?

37. Thank you!!
Thank You
Presenter:Binita Tamang | Senior UI Designer | Mindfire Solutions