Test your website for Web Accessibility
Download as PPTX, PDF17 likes782 views
The document discusses web accessibility, emphasizing its importance for individuals with disabilities to access online content effectively. It outlines testing methods such as manual and automated testing, including specific techniques and tools for evaluating accessibility features. The document also highlights the need for compliance with legal standards to ensure inclusivity on websites.
![✓ 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](https://image.slidesharecdn.com/webaccessibiltytesting-180508074921/85/Test-your-website-for-Web-Accessibility-9-320.jpg)
![✓ 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..]](https://image.slidesharecdn.com/webaccessibiltytesting-180508074921/85/Test-your-website-for-Web-Accessibility-10-320.jpg)
![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..]](https://image.slidesharecdn.com/webaccessibiltytesting-180508074921/85/Test-your-website-for-Web-Accessibility-14-320.jpg)
Test your website for Web Accessibility
- 1. www.multidots.com Test your website for Web Accessibility
- 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
- 3. Accessibility Menu Any User Any Browser All the information on website 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