It has become crucial that Web should be accessible to the disabled. For this, websites need to be tested for Web Accessibility. Let us explore how Web Accessibility Testing can be done in a most effective way to maximize the benefits.
2. Introducing web accessibility
Web Accessibility refers to the facility with the help of which people
with disability can easily access web. In other words, people with
disabilities can easily perceive and understand the content available on
the Web.
✓ Millions of people with disabilities get benefit with web accessibility.
For instance, visually impaired, deaf, color blinded etc.
✓ Also, beneficial to those without disabilities, in certain critical
circumstances. For instance, if someone has broken arm or someone
has got eye flu, etc.
www.multidots.com
4. Need of Web Accessibility testing
• Web accessibility testing makes sure that people
with different disabilities are able to use the web
in a comfortable manner.
• It helps the companies or website owners to
comply with legal obligations and make web
accessible to the disabled across the globe.
www.multidots.com
5. How to do web accessibility testing?
It can be performed in two
ways:
1)Manual Testing
2)Automated Testing
www.multidots.com
6. Manual testing
It is the evaluation of a website
or a web application, using a
combination of keyboard-only
interactions, assistive
computer technologies, web
browser plugins to ascertain
the functional accessibility of
the site.
www.multidots.com
7. Automated Testing
Automated tests include the use of
various accessibility tools or web
browser testing tools to evaluate the
technical accessibility issues of a
website or application. Automated
testing should be performed during
the development process.
www.multidots.com
8. ✓ Provision of keyboard equivalents for all mouse operations and
windows
✓ Provision of instructions as part of user documentation or
manual
✓ Logical ordering of tabs ensuring smooth navigation
✓ Shortcut keys for menus
✓ Support for all operating system
✓ Response time is clearly mentioned
Check List for Testing Accessibilty
www.multidots.com
9. ✓ Labels to be written correctly in the application
✓ Flexible colors for all users
✓ Appropriate usage of image or icons
✓ Provision of audio alerts for an application
✓ Adjustable audio or video controls
✓ Default fonts for printing and text displays
[Continued..]
www.multidots.com
10. ✓ User can adjust or disable flash, rotating or moving displays
✓ Highlighting can be viewed with inverted colors
✓ Test multimedia pages with no speaker in websites
✓ Audio and Video related content properly heard by the disabled
✓ Training to be given to users with disabilities to make them familiar with
software or application
www.multidots.com
[Continued..]
11. How to test the Accessibility?
There are various ways of testing the Accessibility depending upon the type
of disability. Sometimes accessibility testing could be challenging for testers
because they might be unfamiliar with the disabilities. The following are the
general categories of disabilities:
• Visual
• Hearing/ Auditory
• Mobility
• Cognitive
www.multidots.com
12. Manual Testing
It is usually done by an accessibility test expert, who is technically sound
with different accessibility compliances and nitty-gritty. This helps in
attaining end-to-end testing of any website. Further, the use of assistive
tools and technologies like screen readers, magnifiers can help in
interacting with the application in the realistic setup and real time
challenges.
www.multidots.com
13. List of manual tests
1. HTML validation
2. Headings
3. Fonts
4. Contrast
5. Alternative text
6. Audio/Video captions
7. Skip Navigation
www.multidots.com
14. 8. Hyperlink and Tab key enablement
9. Keyboard operations
10. Form Labels
11. Disable styles and linearize tables
12. Content Scaling
13. Testing with assistive technologies
www.multidots.com
[Continued..]
15. 1 ) HTML Validation:
Validate your HTML code with the help of HTML validator provided by W3C. It
has a simple user interface for validating the HTML code.
Follow the steps below:
• Open the website - W3C HTML validator
• Enter the URL of the web or mobile application in the Address box
• Click on the “check” button
www.multidots.com
17. 2) Headings:
Check whether the headings are in correct order in the web or mobile
application. This can be done in the W3C HTML validator under the More
Options by checking the “Show Outline” options.
3) Font Size:
Check for the text Size and form field text size by increasing the text size. Also,
test for the large fonts in the browser by changing the text size to “Largest”.
www.multidots.com
18. 4) Contrast:
Check whether changing the color scheme to high contrast does not affect the
display of page contents and the information is conveyed in a proper manner.
5) Alternative text:
It is the text associated with an image. Check for AltText of Images, so that
these images are readily accessed by the people having visual disabilities.
Screen readers can be used to read the text for the people having visual
disability. Hover mouse over each image, the AltText of the image can be
viewed.
www.multidots.com
19. 6) Audio/ Video Captions:
People having hearing disabilities can benefit from the captions and transcripts
provided along with the video/ audio content. Check that your video or audio
content has proper captions or transcripts along with them.
7) Skip Navigation:
Websites having the skip navigation links can benefit the people having mobility
impairments. Check by pressing the Ctrl+Home keys that the focus is moved to the
top of the page. Also, check with the tab keys to move through the links. Ensure that
“Skip to Content” link is clearly visible near the top.
www.multidots.com
20. 8) Hyperlink and Tab key enablement:
Check that the Field and Links are accessible through the tab keys in the right
order. Also, ensure that each link is unique and clearly understandable.
9) Keyboard operations:
Check whether the dynamic elements of the website are easily accessible using
the keyboard keys like tab key, up/down arrows, space bar etc. The dynamic
elements include elements like drop down menus, flash interfaces, tab pages, etc.
www.multidots.com
21. 10) Form Labels:
Check whether the form label is accessible by keeping the mouse over the form
field. Form field should have a label describing the tool tip.
11) Disable styles and linearize tables:
Verify the content is displayed in order without applying any designs. You can
check by disabling the styles of your web and mobile application.
www.multidots.com
22. 12)Content scaling:
Check for the content scaling by increasing the font size to 200% and make sure
that page is readable and easily understandable. Enlarge the images by zooming in
and check for readability of the text on images.
13) Test with Assistive technologies:
Assistive technology can be defined as any system or product that can be used to
assist the capabilities of the people with disabilities. Assistive technologies that are
used to facilitate the web accessibility include:
• Screen readers
• Screen Magnifiers
www.multidots.com
23. Screen Reader test elements
that needs testing include Flash
objects, interactive elements
and unique plugins and
documents. Some of the tools
are:
JAWS
Voiceover
NVDA
www.multidots.com
24. Screen Magnifiers are used
for magnifying the screen for
easy view-ability. Test the
screen magnifiers so that the
content is easily accessible.
www.multidots.com
25. Automated Testing
Automated testing is faster than the
manual testing and facilitates web
accessibility in a better manner.
www.multidots.com
26. List of Automated test tools
1. Designer
2. WebAnywhere
3. VisCheck
4. Web Accessibility toolbar
www.multidots.com
27. 1. Designer
This tool helps designer to better
understand the needs of the
disabled people and develop web
or mobile applications
accordingly.
www.multidots.com
2. WebAnywhere
This work similar to the screen
reader facilitator tool JAWS. It
assists the readers to read the
web page easily.
28. 3. VisCheck
A tool is used to facilitate the
people having color blindness. It
simulates how a web page or an
image can be viewed by the color
blinded people.
www.multidots.com
4. Web Accessibility toolbar
It is and extension to be added to
the browser, which offers web
page designers with useful
features in the analysis of the web
page.
29. Web accessibility testing can help you build application that is friendly
with the disabled user. If you are initiating a project for building an
accessible web or mobile application, it is recommended to follow ADA
compliance. If following all the rules is not feasible for you or your
organization, try a different solution for the users with disability.
Conclusion
www.multidots.com
30. Multidots Solutions Pvt. Ltd.
C-202, Ganesh Meridian, Nr. Sola Over Bridge, S.G.
Highway, Sola Ahmedabad – 380060, Gujarat, INDIA
+91-79-2970-8121
Multidots Inc.
2301 Gallows Road Suite 205, Dunn Loring,
Virginia – 22027, United States
+1-646-568-5447
inquiry@multidots.com inquiry.multidots
www.multidots.com