Tag: Web Accessibility

JavaScript Jump Menu

On By AWGIn UncategorizedLeave a comment

JavaScript Jump Menu is a common accessibility error seen on dynamic web pages with drop down menu that has onchange / onclick event:

This is a sample accessibility validation result using WAVE showing jump menu error

Solution 1

The easiest solution I found is to use jQuery:

First, assign a class name to the drop down list:

<select class =”myselect” ……>

Second, use the jQuery change event to trigger your method of events:

$(“. myselect”).change(function () {

myEvent();

});

Solution 2

You can also use JavaScript in a similar matter for the same result. Cory LaViska has a detailed explanation of removing jump menus error using JavaScript.

Required Form Fields

On By AWGIn Web AccessibilityLeave a comment

WCAG 2.0 has several recommendation on how to indicate and clearly identify required fields on a form. Let’s take a look at some of the recommendations:

Required form fields example 1

Indicate by using asterisk at each form field

Technique:

  • The required property is indicated by an asterisk placed next to the label element
  • Aria tag on form controls: aria-required=”true”

Required form fields example 2

Indicate [required] at each form field

Technique:

  • The required property is indicated by the word “required” placed next to the label element

Required form fields example 3

Indicate required fields by color and star icon using CSS

Technique:

  • Required fields are indicated by a red border around the fields and a star icon rendered via CSS using content:before.
  • Label tag includes: data-required=”true”
  • Form controls includes: data-required=”true”

Required form fields example 4

Indicate (required) beside form label along with use of aria tag

Technique:

  • Aria tag on form controls: aria-required=”true” and aria-label=”Test”
  • The required property is indicated by the word “required” placed next to the label element

What is a better or preferred solution? I have met with a screen reader user and have the user walk through these examples using JAWS. Here are the feedback:

  1. It’s better to indicate “required” rather than “optional” as it’s easier for the brain to process.
  2. Using “aria-required” is the best way for screen reader users to know the field is a required field.
  3. If “aria-required” tag is used, there may not be the need to indicate “required” label.