WAVE: Web Accessibility Evaluation Tool

WAVE logo


WAVE Homepage

Figure 1.1: WAVE Web Accessibility Evaluation Tool webpage.


WAVE is an automated web accessibility evaluation tool developed by WebAIM.  WAVE can help developers, designers, and website users quickly evaluate the accessibility of web content after JavaScript and CSS has been applied. WAVE detects potential accessibility issues across a site as a whole, as well as highlight the areas where it does well. Users can use this tool directly on the WebAIM website or can be downloaded as a toolbar extension in Firefox or Chrome browser. This tool is not a substitution for proper accessibility testing or audit, however, is a helpful guidance for a quick, surface-level check.

Displaying Results


WAVE Results

Figure 2.1: WAVE displays results in two sections of the page.


After submitting a URL to evaluate, WAVE displays the results in two areas of the browser, as shown in Figure 2.1. On the left sidebar, a panel is displayed which presents a summary of the page’s results. It shows at a glance the number of errors, alerts, features, structural elements, HTML5 and ARIA, and Contrast Errors that WAVE found on the page.  On the right side of the browser, the original website is displayed with embedded icons and indicators over the website content. Hovering over an icon will display a brief overview of what the icon means. On the bottom of the page, a ‘<code>’ tab is displayed. Once the tab clicked, an expanded window displays the underlying markup of the page along with the WAVE icons.



WAVE Icons

Figure 3.1: Full list of WAVE icons.


There six different categories of icons which are color coded: Red icons indicate accessibility errors that need to be fixed. Green icons indicate accessibility features. Yellow icons are alerts. Blue icons indicate structural elements such as headers, tables, lists, etc. Purple icons indicate HTML5 structural elements and ARIA roles, states, or properties, and a red ‘ABC’ square icon indicates contrast errors. A brief overview of what each icon or indicator means can be found by viewing its documentation in the panel or clicking directly on the icon.

Viewing Options

Figure 4.1: The three viewing options on WAVE panel


The panel provides many controls. As shown in Figure 4.1, there are three viewing options for the accessibility information:

  1. Styles
  2. No Styles
  3. Contrast
Screen of each viewing option

Figure 4.2: Screen display of each viewing options: Styles view, No Styles view, and Contrast view.

The ‘Styles’ view presents the page with embedded accessibility icons and indicators. This is a more complex view and most CSS-powered layouts become difficult to read because the icons tend to break the page layout or page elements begin to overlap. ‘No Styles’ view is a less complex view. It displays the page with styles disabled and tables linearized. This view presents the underlying reading and navigation order, in which keyboard-only and screen reader users will access the page. The ‘Contrast’ view shows only contrast issues on the page, based on WCAG 2.0 guidelines. Below the errors, a contrast tool is provided where users can review the color contrast and get updates colors that meet the guidelines.

Along with the three different viewing options, the panel also includes four different pages of results:

  1. Summary
  2. Details
  3. Documentation
  4. Outline
Summary Page

Figure 4.3: Summary default page on WAVE panel.


The Summary page displays a list of the results detected, shown in Figure 4.3. It shows at a glance a color coordinated list of  the number of errors, alerts, features, structural elements, HTML5 and ARIA, and Contrast Errors that WAVE found on the page.

Details Page

Figure 4.4: Details page on WAVE panel.


The Details page, shown in Figure 4.4, displays the listings of all the WAVE icons in the page. Results can be filtered by a specific guideline such as WCAG A, WCAG AA, Section 508 or all guidelines.



Documentation Page

Figure 4.5: Documentation page on WAVE panel.

The Documentation page, shown in Figure 4.5, provides the full list of WAVE icons. Each icon can be clicked to view a full explanation of what each icon means along with recommendations on how to make the page more accessible, the algorithm in English and links to standards and guidelines.


Outline Page

Figure 4.6: Outline page on WAVE panel

Lastly, the Outline page, shown in Figure 4.6, displays an outline of the heading structure of the web page.



WAVE Web Accessibility Evaluation Tool is a great free tool that provides a visual representation of accessibility issues within a web page. WAVE identifies all errors, as well as non errors and provides useful resources and definitions within the platform. Although WAVE is known to be quick and easy, it does not substitute for a proper accessibility test or audit. WAVE is beneficial for early development stages in which can save time for more complex errors to fix with a proper accessibility test.


WAVE: http://wave.webaim.org

WAVE help: http://wave.webaim.org/help

WAVE Chrome Extension :http://wave.webaim.org/extension/

Evaluation Tools: https://www.w3.org/WAI/ER/tools/



Design Critique: NYC Ferry Mobile App

The NYC Ferry mobile app provides riders a “green”, on-the-go, alternative to purchasing and activating e-tickets and passes. The mobile app also provides maps and schedules, as well as real-time notifications and service alerts. Users have options to purchase a one-way with or without a bike, or a 30-day pass with or without a bike, which are valid up to one year from the time of purchase. This mobile application’s purpose is mainly for purchasing tickets; most riders purchase their one-way ticket while waiting in line, rather than at a ticket kiosk which takes too much time and sometimes keeps you from making it onto the ferry.



The main page appears to have good discoverability for what the app provides: storing tickets, purchasing tickets and viewing the schedule. Each button on the menu is clear. There are four icons on the bottom of the homepage: tickets, store, schedule and settings. On the upper right corner, a bell icon is displayed. However, when you click on the store, schedule, or settings icon, the bell icon on the top right is replaced with a shopping cart icon. It is almost identical to the store icon, which is confusing to the user, despite the fact that both icons are two separate pages: “store” and “shopping cart”. The title “store” is also confusing, as users tend to think of a gift shop rather than a place to  buy tickets.


I would recommend changing the text on the menu from “Store” to “Buy Tickets” and “Tickets” to “My Tickets”. This will help users easily distinguish that one page is for their ticket display and the other is for purchasing tickets. I would also recommend changing the icon of the “Store” to a better icon that demonstrates a place to purchase tickets, for example a dollar ($) sign over a ticket icon.

Smooth Transaction Process

The process of purchasing tickets on this app is quick and easy due to the use of well designed signifiers, constraint, feedback and the natural mapping structure.

As soon as the user opens the NYC Ferry App, the user is brought directly to the tickets page. Two ticket options appear: either a display of the available tickets, or a message which states: “you have no tickets” if the user has not purchased a ticket yet. In this case the user will be directed to purchase a ticket with the use of a “buy tickets” button. Users also have the option to purchase a ticket by clicking the store icon.

The NYC Ferry App provides multiple examples of good feedback throughout the app for tickets. The quantity of tickets will appear in the shopping cart on right top to show that you have successfully added a ticket to the cart. When the user purchases the order, an animated loading bar is displayed with a message saying “placing your order…”. And lastly, when the order is completed, the user is redirected to a confirmation page, an option to view tickets, and an e-mail is then sent immediately with your purchase confirmation. Users can also view all their ticket purchases through the app in their settings section.


Ticket Activation: Effective Signifiers & FeedbackThe ticket activation prior to boarding the ferry is rather confusing. However, there are multiple signifiers on the ticket to help the user with the process. Users are directed with text and circles indicating where your finger should tap the screen In order to activate. Once the user presses the circle, the ticket color will change from light blue to green, giving the user positive feedback that the ticket has been activated.


Schedule: Not user friendly

The schedule on the NYC Ferry App has a confusing user flow and is just not user-friendly. There are two tabs that appear on the page: “Schedules” and “My Commute”. However, this option does not appear until you plug in a route to view the schedule. When a location is selected on the schedule tab, all other routes from that location is displayed, creating a very overwhelming and distracting visual. When you click the map all routes are also displayed, making it difficult for the user to narrow down on their specific route. Secondly, most users only want to see the schedule of their route. However, that option is buried in the app which requires too many clicks to get to. Lastly, the time is set in count down mode, which does not work at this stage of the process. In order to update the time, users must close the app completely and navigate back to the specific schedule page.


This poor design can be frustrating to users who are in a hurry. Because this app requires users to create an account, users should be able to save routes, schedules and opt in for real time notifications of boat departures. I would recommend only displaying the destination the user has requested on the schedule section of the app.


Overall,  the interface of this app is clean and serves the purpose.  Passengers are purchasing tickets and using the app regardless of the confusion and hassle, which is a success according to Don Norman who mentions that “It doesn’t matter how good a product is if, in the end, nobody uses it.”