Skip to main content

We write about Digital Accessibility. This includes topics related accessibility news, accessibility events, accessibility techniques, reviews of websites and applications, tips related to accessibility and in simple words all possible things about digital accessibility.

Tagged as

Webaim

Using WAVE – an Accessibility Evaluation tool by WebAIM – #GAADSeries

This is a guest post by Kameshwari Devi Kiran Kumar

This article briefly explanes how to use the WAVE tool to test accessibility for a website. There are primarily two methods of using the tool:

  1. Entering the URL of the website you would like to test into the ‘Webpage address’ textbox given for the purpose at

https://wave.webaim.org/

and hitting the ‘Wave’ button to see the results.

  1. Downloading the extension from the ‘Webaim’ site from the below URLs:

Chrome: https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh

Firefox: https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/

 

Steps to download and use the tool:

  1. Go to the above URLs.
  2. Activate the ‘add to Chrome’ or ‘Add to Firefox’ button depending on the browser you are working with.
  3. Activate the ‘add to extensions’ button.
  4. Once the extension is added to Chrome / Firefox, open the webpage you would like to test and activate the ‘Wave’ button next to the browser address bar or press ‘Control+Shift+U(Command+Shift+U in case of MAC)’ to fetch the report.

Wave report and features:

The tool runs an accessibility check and displays icons representing the search results.

  1. The default results page shows you a summary in the sidebar. It lists errors (red icons), alerts (yellow icons), features (green icons), structural elements

(blue icons), HTML5 and ARIA elements (lavender icons), and contrast errors (which don’t show up as icons).

  1. Above the summary results are buttons to let you look at the page with no styles, or to view only the contrast errors.
  2. To the left of the summary panel, you can opt to see details, documentation,

or an outline of the page structure. On the right, where your web site is pictured, you can click on any icon to get a brief explanation and a link to more information.

  1. You can look at the code for the icons mention by clicking the ‘code’ tab at the bottom. The code panel shows you the code related to any icon you click on the page of WAVE tool results

 

Writing accessible HTML forms

We fill a lot of forms on the web on daily basis – may it be for a bank transaction, booking of travel, shopping etc. Often we see forms looks very beautiful but in reality, most of them are not beautiful due to lack of associated labels. Oh! wait, we know, you are about to shown on us and say that you have never seen a form just with input elements and without text labels, you are right, but did you ever see a form with a text browser or with a screen reader. Here is an exercise for you before reading this article:

  1. Download NVDA External link Screen reader and install on your Microsoft Windows machine
  2. Open your web browser perhaps Mozilla Firefox and visit the APSRTC‘s New Registration Form External Website and you should see a beautiful form like below.

    APSRTC New Registration form

  3. Press “F” key on your keyboard to reach to the first form field and then navigate the form using “tab” key; ideally you should hear something like “Username:edit, Password: password edit, Confirm password: password edit, Personal information, Firstname:edit” and so on. But you will hear something like “Table with 16 rows and 2 columns, row two, column two edit” and so on… and here is how this form looks on a text browser:
    Text version of APSRTC Registration form

Now, let’s see what are the issues with above form. Firstly, screen reader is reading number of rows and columns, since the APSRT did not use CSS to control the layout of the form but have used <table> attributes to control the layout. Well, screen readers has the capability to turn off reading the layout tables but some users may not be aware of this option. Also, it is not recommended to use the table attributes to control the layout.

Second problem is that screen reader is unable to read the labels of the form since associated label “for” and “id” attributes are missing. Besides screen readers and text browsers, even search engines treat those form fields with no labels. Here are some ground rules to make accessible forms.

  • Provide necessary instructions before the form states
  • Do not indicate mandatory fields in form of color alone
  • If a form field is a required field, inform the same to the user along with form label
  • Provide associate labels to the form fields
  • Use appropriate “fieldset” and “legend” attributes for check boxes and radio buttons
  • If you opt to use image button, remember to provide alternate text
  • If the form is dynamic, use ARIA labels, roles and states as appropriate

Related links: