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.
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.
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.
Correct
Below are a few examples that uses abbreviations. The abbreviations are linked to the website dictionary where they are explained.
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.
w3 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.
Correct
A link that can be focused by using tab. The focus wont move until the user presses tab again.
Link3.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.
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.
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.
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.