Category: Web Accessibility

AODA and Internal Websites

On By AWGIn Web AccessibilityLeave a comment

One of the questions many people have is “Does AODA apply to internal websites/web application that requires employee logins?”

Last week I was on a webinar and I asked the question and I am glad to be able to share this with you:

AODA deadline for A/AA are for public facing websites. However, there could be complaints related to accessibility issues from employees for discrimination and this will go above the AODA guideline. These will go to the supreme court for human rights matters. You should decide as an organization what your plan of action is. Make sure you have a plan so employees will not be discriminated.

As a good general rule, if you already have plans for your public websites, it wouldn’t hurt to apply the same on all the internal websites. It’s good for the long term and should save resources down the road as well.

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.