www.multidots.com
Test your website for
Web Accessibility
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
Accessibility Menu
Any User Any Browser All the information on website
www.multidots.com
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
How to do web accessibility testing?
It can be performed in two
ways:
1)Manual Testing
2)Automated Testing
www.multidots.com
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
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
✓ 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
✓ 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
✓ 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..]
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
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
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
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..]
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
www.multidots.com
Exampl
e
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
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
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
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
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
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
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
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
Automated Testing
Automated testing is faster than the
manual testing and facilitates web
accessibility in a better manner.
www.multidots.com
List of Automated test tools
1. Designer
2. WebAnywhere
3. VisCheck
4. Web Accessibility toolbar
www.multidots.com
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.
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.
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
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

Test your website for Web Accessibility

  • 1.
  • 2.
    Introducing web accessibility WebAccessibility 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
  • 3.
    Accessibility Menu Any UserAny Browser All the information on website www.multidots.com
  • 4.
    Need of WebAccessibility 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 doweb accessibility testing? It can be performed in two ways: 1)Manual Testing 2)Automated Testing www.multidots.com
  • 6.
    Manual testing It isthe 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 testsinclude 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 ofkeyboard 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 tobe 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 canadjust 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 testthe 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 isusually 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 manualtests 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 andTab 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 ) HTMLValidation: 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
  • 16.
  • 17.
    2) Headings: Check whetherthe 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 whetherchanging 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/ VideoCaptions: 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 andTab 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: Checkwhether 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 forthe 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 testelements 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 areused 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 testingis faster than the manual testing and facilitates web accessibility in a better manner. www.multidots.com
  • 26.
    List of Automatedtest tools 1. Designer 2. WebAnywhere 3. VisCheck 4. Web Accessibility toolbar www.multidots.com
  • 27.
    1. Designer This toolhelps 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 toolis 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 testingcan 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