ABOUT WAVE TOOL:

WAVE is a free web accessibility evaluation tool to determine web accessibility issues of the web via online sessions or by using browser plugins (Chrome and Firefox). WAVE is a WebAIM tool for assessing the accessibility of web content.

The WAVE tool is also available online, and the WAVE toolbar is a Firefox add-on.

It is a web accessibility assessment tool that assesses the accessibility of web content by annotating the web page copy.

It evaluates accessibility in the browser and does not save any information on the server. WAVE also provides recommendations for resolving accessibility concerns in the system.

3 WAYS TO ACCESS WAVE TOOL:

There are 3 ways to access WAVE tool:

1. Browser extension
2. Website access https://wave.webaim.org/
3. Right click on browser → Click on WAVE

On the Color contrast tab of WAVE results, we can also change to grayscale by clicking on Desaturage page

STEPS TO WORK WITH WAVE TOOL:

1. You can use WAVE directly from your web browser by visiting the WAVE website https://wave.webaim.org/
2. WAVE is also available as a browser extension for Google Chrome and Mozilla Firefox. You can install the extension from the Chrome Web Store or Firefox Add-ons store
3. If you’re using the WAVE online tool:
   1. Step 1: Go to https://wave.webaim.org/.
   2. Step 2: Enter the URL of the webpage you want to test in the input box.
   3. Step 3: Click “Check Page”. WAVE will load the webpage and perform an accessibility analysis.
   4. Once it’s done, WAVE will display the page with overlaid icons and a detailed report. The icons will indicate various accessibility issues.
4. If you’re using the WAVE browser extension:
   1. Step 1: Install the WAVE extension from the Chrome Web Store or Firefox Add-ons store.
   2. Step 2: Once installed, navigate to the web page you want to test.
   3. Step 3: Click on the WAVE extension icon in your browser toolbar.
   4. Step 4: The WAVE tool will overlay the page with icons that indicate various accessibility issues.
5. Using the extension allows you to directly test and interact with the page you’re working on.
6. WAVE’s results are displayed directly on the page with icons. The key components are:

• Icons on the Page: These icons are placed on the page in locations where issues have been identified. Hovering over the icon will provide a more detailed description of the issue.
  • Error icons: These show serious accessibility issues, like missing alternative text (alt text) for images or insufficient color contrast.
  • Warning icons: These indicate potential issues, such as improperly used ARIA roles or missing form labels.
  • Feature icons: These highlight helpful features, like the presence of properly labeled links or correct heading structure.
• Results Panel: On the left side of the page (in the online tool) or in the extension, you’ll see a detailed list of all issues found, organized by category. Categories include:
  • Errors: Critical issues that need immediate attention (e.g., missing alt text, color contrast issues).
  • Alerts: Issues that are not as severe but still need to be addressed (e.g., low contrast, missing labels).
  • Features: Positive accessibility elements, such as well-structured headings or accessible forms.
  • Structural Issues: These may include problems with the heading structure or inappropriate use of ARIA roles.
• Additional Information: Each identified issue in the results has a detailed description, including an explanation, suggestions for fixing the issue, and relevant WCAG (Web Content Accessibility Guidelines) standards.

7. After reviewing the results, you can work on fixing the issues identified:

• Missing Alt Text: Ensure that all images have descriptive alt text. You can add the alt text attribute in your HTML code or CMS.
• Color Contrast: Check and adjust the color contrast of text and background to meet WCAG contrast ratios (typically 4.5:1 for normal text).
• Headings and Structure: Ensure that headings follow a logical hierarchy (H1 → H2 → H3). Properly nested headings improve the document structure.
• Forms and Labels: Ensure that all form fields are properly labeled with clear and descriptive labels.
• ARIA and Semantic HTML: Use proper ARIA (Accessible Rich Internet Applications) roles and semantic HTML elements to ensure assistive technologies can interpret your content correctly.

8. WAVE Features

• Contrast Checker: WAVE also includes a built-in color contrast checker, which highlights areas where color contrast is insufficient.
• HTML Structure: You can check how your HTML structure (headings, lists, forms, etc.) impacts accessibility.
• Error Descriptions and Recommendations: WAVE provides clear guidance on how to resolve issues.
• PDF Reports: You can download detailed reports that summarize the accessibility issues found.

9. Based on the issues flagged by WAVE, you can take actions such as:

• Adding alt text to images: Ensure all images (decorative and informative) are described for users with visual impairments.
• Correcting headings: Use appropriate heading tags (<h1>, <h2>, etc.) to structure your content hierarchically.
• Improving form accessibility: Label each form control with a <label> tag and ensure the form fields have clear and concise instructions.
• Fixing contrast issues: Adjust colors to ensure there is sufficient contrast between text and the background.

10. You can then retest the page after making the necessary changes to see if the issues are resolved.
11. Advanced Options

• Tab Navigation: You can check how users navigate through the page using only the keyboard by tabbing through links and form fields. This is important for accessibility, especially for people who cannot use a mouse.
• ARIA Support: WAVE can detect issues with ARIA (Accessible Rich Internet Applications) attributes and roles. Ensure your ARIA markup is correct to improve accessibility for screen readers.

12. Common Accessibility Issues Identified by WAVE

• Missing Alternative Text for Images: Images must have alt text to describe their content or function.
• Insufficient Color Contrast: Text should have enough contrast against its background.
• Incorrect Heading Structure: Headings should be used in a hierarchical, logical manner.
• Missing or Incorrect Form Labels: Forms should have properly associated labels for each input field.
• Lack of ARIA Support: Use proper ARIA roles and properties for dynamic content and user interface elements.

PROS

• Highlights the accessibility issues on the page itself. This gives a clear understanding of the issue, easier to locate the element (in which issue is marked) and get it fixed.
• Gives references for each issue, so that you can understand the root cause of the issue and make appropriate changes.
• Easy to use.
• No platform dependency.
• The WAVE Chrome and Firefox extensions allow you to review the accessibility of your site directly within the Chrome and Firefox browsers.
• No information is sent to the WAVE server.
• WAVE will show what errors are indicated and make some recommendations on how to correct these issues.
• The WAVE is a slang term for a You may check the accessibility of your site directly within the Chrome and Firefox browsers using Chrome and Firefox extensions.
• WAVE will display the flaws that have been detected and offer suggestions for resolving them.

CONS

• WAVE injects icons to the website when it scans the page. That often breaks the page layout.
• Current support is only for Chrome and Firefox.
• WAVE provides an overlay of icons to indicate any potential accessibility issues however it gets confused by absolute positioning and doesn’t show any other information about the element.
• The overlay overlay of icons becomes further problematic when you are managing an element that is not visible on the page. It will take a bit of work with dev tools to determine which element is causing the issue.
• WAVE provides an overlay of icons to identify any potential accessibility concerns, but absolute positioning causes it to become confused and show no other information about the element.
• When you’re controlling an element that isn’t visible on the page, the overlay of icons becomes much more troublesome. Instead, it will require some dev tools to figure out which piece is causing the problem.

PRICE:

Free and paid – both available

DEMO APPLICATIONS TO PRACTICE:

https://broken-workshop.dequelabs.com/  

https://dequeuniversity.com/demo/dream  

https://webtestingcourse.dequecloud.com/  

https://dequeuniversity.com/demo/mars/  

https://findanexpert.unimelb.edu.au/  

https://dylanmhowell.com/seo-for-photographers/  

https://www.ssa.gov/accessibility/andi/help/demo/index.html  

https://scout-app.io/  

https://www.washington.edu/accesscomputing/AU/