Understandable

Information and the operation of the user interface must be understandable.

Guideline 3.1: Readable

Make text content readable and understandable.

3.1.1: Language of Page (Level A)

The default human language of each Web page can be programmatically determined.

To demonstrate this violation, the web page html tag is using the wrong lang tag. The lang tag should be "en" since the primary language used in this web page is english but the tag is set as "fr" for french.

To further demonstrate this violation, the lang tag is removed on the perceivable page.

3.1.2: Language of Parts (Level AA)

The human language of each passage or phrase in the content can be programmatically determined except for proper names, technical terms, words of indeterminate language, and words or phrases that have become part of the vernacular of the immediately surrounding text.

Example:

1. Language attributes.

Correct

The texts below uses the lang attribute to help determin which language the text is written in.

Swedish Text (lang="sv"):

Denna text använder lang-attributet för att ange att innehållet är på svenska. Detta gör att texten uppfyller riktlinjerna för regel 3.1.2.

English Text (lang="en"):

The web page has the lang tag "fr" which would suggest that all text written in English besides this text should fail on tests.

Wrong

The texts below does not use the lang attribute to help determin which language the text is written in.

Swedish Text (lang="sv"):

Denna text använder inte lang-attributet för att ange att innehållet är på svenska. Detta gör att texten inte uppfyller riktlinjerna.

English Text (lang="en"):

The web page has the lang tag "fr" which would suggest that all text written in english should fail on tests.

3.1.3: Unusual Words (Level AAA)

A mechanism is available for identifying specific definitions of words or phrases used in an unusual or restricted way, including idioms and jargon.

Example:

1. Provided dictionary definitions.

Correct

Below are a few examples that uses idioms and jargon that may need to be explained further. They contain a link to a dictionary on the site that explains the term.

Victor did spill the beans about an incident at work last week.

It may be necessary to update the driver for your printer.

Wrong

Below are the same examples but without a mechanism to identifying the definitions.

Victor did spill the beans about an incident at work last week.

It may be necessary to update the driver for your printer.

3.1.4: Abbreviations (Level AAA)

A mechanism for identifying the expanded form or meaning of abbreviations is available.

Example:

1. Provided definitions for abbreviations.

Correct

Below are a few examples that uses abbreviations. The abbreviations are linked to the website dictionary where they are explained.

WCAG compliance increases the quality of your website.

The W3C is an international organization that creates standards for the World Wide Web.

Sometimes I ponder if there is an API for this...

Wrong

Below are a few examples that uses abbreviations but without a mechanism to identifying them.

WCAG compliance increases the quality of your website.

The W3C is an international organization that creates standards for the World Wide Web.

Sometimes I ponder if there is an API for this...

Guideline 3.2: Predictable

Make Web pages appear and operate in predictable ways.

3.2.1: On Focus (Level A)

When any user interface component receives focus, it does not initiate a change of context.

W3C explains changes of context as "major changes that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously".

This has already been tested in operable 2.1.1 where a link drops the focus when being focused. A similar example is given below for context.

Example:

1. Predictable keyboard focus.

Correct

A link that can be focused by using tab. The focus wont move until the user presses tab again.

Link

Wrong

Once the first link is focused it will blur itself and then when you tab again the focus will end up on the link next to the first one.

Link Link

3.2.2: On Input (Level A)

Changing the setting of any user interface component does not automatically cause a change of context unless the user has been advised of the behavior before using the component.

Example:

1. Warranted context changes.

Correct

This form changes page after you submit it with the button.

Wrong

This is not accessible, try it for yourself.

3.2.3: Consistent Navigation (Level AA)

Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user.

Just like rearranging furniture can be confusing, changing navigation on a website can leave users disoriented. This guideline emphasizes the importance of keeping navigation consistent across pages. Just like you probably got surprised by the footer and header being rearranged!

3.2.4: Consistent Identification (Level AA)

Components that have the same functionality within a set of Web pages are identified consistently.

The search bar in the header allows users to locate and highlight specific text. It's important to note that on all other web pages, the search bar features a button labeled 'search,' on this particular page, it displays 'find.' Despite this discrepancy, both buttons serve the same function, this inconsistency may impact users, potentially leading to a failure to meet criterion 3.2.4.

3.2.6: Consistent Help (Level A)

If a Web page contains any of the following help mechanisms, and those mechanisms are repeated on multiple Web pages within a set of Web pages, they occur in the same order relative to other page content, unless a change is initiated by the user:

  • Human contact details;
  • Human contact mechanism;
  • Self-help option;
  • A fully automated contact mechanism.

This guideline emphasizes the importance of keeping the Contact Us section consistent across pages. The Contact Us section on this page is at the top of the page instead of the bottom like the rest of the pages.

Guideline 3.3: Input Assistance

Help users avoid and correct mistakes.

3.3.1: Error Identification (Level A)

If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.

Since most modern browsers have some form of built-in form validation, I've had to use the attribute 'novalidate' to get more control over the validation process.

Example:

1. Descriptive error warnings.

Correct

This form contains robust error handling that shows the mistakes user has done as soon as they 'unfocus' the input field. The form also performs the validation upon being sent to make sure everything is in order.

Rules for name and password to be valid:

All letters should be in the range A-Za-z.

Name:

  • Atleast 2 letters
  • No digits
  • No symbols

Password:

  • Contain 8 characters
  • Contain atleast 1 uppercase letter
  • Contain atleast 1 digit
  • Contain atleast 1 symbol

* Required field.

Wrong

This form contains error handling but the errors aren't displayed to the user. Instead if the user has done something wrong the text 'Something went wrong' is appended to a span element below the form.

Rules for name and password to be valid:

All letters should be in the range A-Za-z.

Name:

  • Atleast 2 letters
  • No digits
  • No symbols

Password:

  • Contain 8 characters
  • Contain atleast 1 uppercase letter
  • Contain atleast 1 digit
  • Contain atleast 1 symbol

* Required field.

3.3.2: Labels or Instructions (Level A)

Labels or instructions are provided when content requires user input.

The correct example above feature inputs of "type=text" and "type=password" with proper labeling whereas the "wrong" form uses no labels to display the inputs. This means a violation raised for labeling and instruction under the criteria 3.3.1 example can be considered correct.

Example:

1. Placeholders to guide form input.

Correct

Each input has both labeling and titles to provide value of the fields as well as placeholders for understandability.

All birthdates should be entered in the following format: YYYY/MM/DD.

  • No letters
  • No symbols
Date of Birth / /

Wrong

This example reduces understandability without examples of expected formatting with the use of placeholders in the input fields.

All birthdates should be entered.

  • No letters
  • No symbols
Date of Birth / /

Evaluation Webpage for Web Accessibility Testing Tools!