WAVE Evaluation Tool

axe DevTools

• Seach for axe DevTools in the Browser Extension Store and install(add) it.
• This tool has both freea and premium plans. So make choice accordingly.
• To start testing for accessibility, open the browser’s Developer Tools, navigate to the axe DevTools tab, and run an analysis on a webpage.

AXE accessibility testing is supported on the following browsers:

• Google Chrome (via browser extension)
• Mozilla Firefox (via browser extension)
• Microsoft Edge (via browser extension)

Color Contrast Analyzer

How It Helps in Testing Color Contrast

The Color Contrast Analyzer allows testers to analyze color combinations on web pages and determine if they meet accessibility standards, such as those outlined in the WCAG. It identifies areas where color contrast fails to meet minimum requirements, enabling teams to make necessary adjustments for improved accessibility.

How to Use It

1. Download and install the Color Contrast Analyzer tool from the Browser Extension Store.
2. Launch the tool and input the URL of the Ushahidi platform or upload screenshots for analysis.
3. Evaluate color combinations used within the platform interface and review the generated reports highlighting areas of insufficient color contrast.
4. Make necessary adjustments to ensure all text and interactive elements meet accessibility standards for color contrast.

NoCoffee Vision Simulator

This document outlines the testing strategy for simulating various visual impairments on the Ushahidi platform using the NoCoffee Vision Simulator tool. Simulating visual impairments helps testers understand how users with different visual abilities experience the platform and identify potential accessibility barriers.

How It Helps in Testing Visual Impairments

The NoCoffee Vision Simulator allows testers to simulate various visual impairments, including color blindness, low vision, and visual distortion. By experiencing the platform through the lens of different visual impairments, testers can identify design elements that may be challenging for users with specific visual needs.

How to Use It

To incorporate the NoCoffee Vision Simulator into the testing process for the Ushahidi platform, follow these steps:

1. Install the NoCoffee Vision Simulator Chrome extension from the Chrome Web Store.
2. Navigate to the Ushahidi platform you want to test for visual impairments.
3. Click on the NoCoffee icon in the Chrome toolbar to open the simulator.
4. Choose from various visual impairment options and adjust the severity levels as needed.
5. Browse the platform while simulating visual impairments to identify accessibility issues and areas for improvement.

High Contrast

High Contrast Chrome Extension (opens in a new tab) enhances accessibility for users with visual impairments by increasing the distinction between foreground and background elements.

How It Helps in Testing High Contrast

The High Contrast tool applies high contrast color schemes to web pages, aiding in identifying elements with insufficient contrast. Testers assess Ushahidi platform visibility in high contrast mode, evaluating for users with low vision.

How to Use It

1. Install the High Contrast Chrome extension from the Chrome Web Store.
2. Navigate to the Ushahidi platform you want to test for high contrast accessibility.
3. Click on the High Contrast icon in the Chrome toolbar to activate high contrast mode.
4. Evaluate the visibility and readability of text and interface elements in high contrast mode.
5. Identify any elements with insufficient contrast and prioritize remediation efforts accordingly.

Screen Reader Extensions

This document outlines the testing strategy for assessing the accessibility of the Ushahidi platform using Screen Reader extensions. Screen Reader extensions simulate the experience of users who rely on screen readers to navigate and interact with web content, ensuring compatibility and usability for individuals with visual impairments.

Popular Screen Reader Extensions:

1. JAWS (Job Access With Speech):

   • Official Website: JAWS Screen Reader (opens in a new tab)
   • Description: JAWS is a popular screen reader software for Windows that provides speech and Braille output for users with visual impairments.

2. NVDA (NonVisual Desktop Access):

   • Official Website: NVDA Screen Reader (opens in a new tab)
   • Description: NVDA is a free, open-source screen reader for Windows that offers speech and Braille output, supporting various applications and web browsers.

3. VoiceOver (Built-in on macOS and iOS):

   • Description: VoiceOver is a built-in screen reader on macOS and iOS devices, providing spoken descriptions and keyboard navigation for users with visual impairments.

How It Helps in Testing Accessibility

Screen Reader extensions allow testers to navigate and interact with the Ushahidi platform as users with visual impairments would. By listening to the screen reader output, testers can identify accessibility issues such as missing or improperly labeled elements, non-semantic content, and navigation barriers.

How to Use It

To incorporate Screen Reader extensions into the testing process for the Ushahidi platform, follow these steps:

1. Install the appropriate Screen Reader extension based on your operating system (JAWS for Windows, NVDA for Windows, or VoiceOver for macOS/iOS).
2. Open the Ushahidi platform in a supported web browser (e.g., Google Chrome, Mozilla Firefox).
3. Activate the Screen Reader extension and navigate through the platform using keyboard commands.
4. Listen to the screen reader output to identify accessibility issues and ensure a seamless user experience for individuals with visual impairments.

Font Accessibility Checker

This document outlines the testing strategy for assessing font accessibility on the Ushahidi platform using the Font Accessibility Checker tool. Ensuring font accessibility is crucial for readability and comprehension, especially for users with visual impairments or dyslexia.

Font Accessibility Checker Tool:

1. Font Contrast Checker:

   • Official Website: Font Contrast Checker (opens in a new tab)
   • Description: Font Contrast Checker allows testers to evaluate the contrast between text and background colors to ensure readability and compliance with accessibility standards.

2. Dyslexia Font Extension:

   • Description: Dyslexia Font Extension modifies text on web pages to improve readability for individuals with dyslexia by using specific fonts and adjustments to letter spacing and line height.

How It Helps in Testing Font Accessibility

Font Accessibility Checker tools enable testers to assess font readability and contrast, ensuring that text content on the Ushahidi platform is accessible to all users, including those with visual impairments or reading difficulties.

How to Use It

To incorporate Font Accessibility Checker tools into the testing process for the Ushahidi platform, follow these steps:

1. Visit the respective website or install the extension in your browser.
2. Navigate to the Ushahidi platform and select the text elements you want to evaluate.
3. Use the Font Accessibility Checker tool to analyze font contrast, readability, and dyslexia-friendly adjustments.
4. Identify any font-related accessibility issues and implement necessary changes to improve readability and accessibility.

HeadingsMap

Proper heading usage is essential for screen reader users to navigate and understand the content structure effectively.

HeadingsMap Tool:

• Description: The HeadingsMap Chrome Extension (opens in a new tab) provides a visual representation of the heading structure on web pages, allowing testers to evaluate the hierarchy and organization of headings.

How It Helps in Testing Headings

The HeadingsMap tool enables testers to analyze the heading structure of the Ushahidi platform, ensuring consistency, clarity, and proper hierarchy. By visualizing the heading outline, testers can identify any missing, redundant, or improperly structured headings that may impact accessibility and navigation.

How to Use It

To incorporate the HeadingsMap tool into the testing process for the Ushahidi platform, follow these steps:

1. Install the HeadingsMap Chrome extension from the Chrome Web Store.
2. Navigate to the Ushahidi platform you want to test for heading structure.
3. Click on the HeadingsMap icon in the Chrome toolbar to generate the heading outline.
4. Review the visual representation of the heading hierarchy and organization.
5. Identify any issues with heading structure and ensure consistency and clarity in navigation.

HTML CodeSniffer

This document outlines the testing strategy for assessing HTML markup and accessibility issues on the Ushahidi platform using the HTML CodeSniffer tool. HTML CodeSniffer helps testers identify violations of accessibility standards and best practices within web content.

HTML CodeSniffer Tool:

• Description: HTML_CodeSniffer (opens in a new tab) is a bookmarklet that scans web pages for accessibility violations based on WCAG (Web Content Accessibility Guidelines) and provides detailed reports for remediation.

How It Helps in Testing Accessibility

HTML CodeSniffer assists testers in detecting accessibility issues within the HTML markup of the Ushahidi platform, including missing alternative text for images, improper use of ARIA (Accessible Rich Internet Applications) attributes, and insufficient keyboard accessibility.

How to Use It

To incorporate the HTML CodeSniffer tool into the testing process for the Ushahidi platform, follow these steps:

1. Visit the HTML CodeSniffer website and drag the bookmarklet to your browser's bookmarks bar.
2. Navigate to the Ushahidi platform you want to test for accessibility.
3. Click on the HTML CodeSniffer bookmarklet in your browser to initiate the accessibility scan.
4. Review the generated report to identify accessibility violations and prioritize remediation efforts.