Accessibility

Users can quickly locate the material they need when page titles are shown in site maps or search results. A user agent (any software that “retrieves, renders, and supports end-user interaction with Web information” on behalf of a user) may, for example, show the page title in the window title bar or as the name of the tab that contains the page. It is of key importance that the page title properly conveys the page’s purpose.

• Scenario 1: The page title is too vague:  The page title is too vague and doesn’t tell the user where exactly it leads too.
• Scenario 2: The page title contains too many keywords:  The page title contains too many keywords which may lead to confusion on behalf of the user.
• Scenario 3: The page does not have a title:  The page doesn’t contain a title. On the window title bar it may say “Untitled document” or “index.html”.

Linked WCAG criteria:
Success Criterion 2.4.2 Page Titled (Level A)
https://www.w3.org/TR/WCAG21/#page-titled

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G88

The language of a web page should be able to be programmatically determined (determined by software from author-supplied data in such a way that various user agents, including assistive technology, can extract and present this information to users in various modes). If that is so, both assistive technology and traditional user agents can render text more precisely. Any changes of the human language within the web page should be marked with the lang attribute for easier identification.

•  Scenario 1: There are multiple languages being used on the website: The content on the page uses several languages. When multiple languages are used on a Web page, the default text-processing language is the one that is used the most.
• Scenario 2: The HTML document does not specify a primary language: The web page does not have a specified primary language in its html document (it is missing the lang attribute) which causes screen readers to read the document in its default settings which may result in improper pronunciation.

Linked WCAG criteria:
Success Criterion 3.1.1 Language of Page (Level A)
https://www.w3.org/TR/WCAG21/#language-of-page

Also applied:
Success Criterion 3.1.2 Language of Parts (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/html/H57

A focus assists users in determining which element is the active element on the web page. A keyboard focus can come in a variety of shapes and sizes. As an example it might appear as a visual change to a button that indicates that the button has the focus of the keyboard. The user must be able to tell which element among several has the keyboard focus. The focus must be evident in at least one mode of operation.

• Scenario 1: The focus indicator is barely visible: While using tab to navigate the web pages, the focus shows on all elements but is almost unnoticeable. The focus must have enough contrast to be quickly visible by users.
• Scenario 2: The focus indicator is not visible: While using tab to navigate the web pages, the focus does not show on any elements of the web page.

Linked WCAG criteria:
Success Criterion 2.4.7 Focus Visible (Level AA) 
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G149
https://www.w3.org/WAI/WCAG21/Techniques/css/C15
https://www.w3.org/WAI/WCAG21/Techniques/css/C40

Individuals with particular limitations utilize the keyboard to move around and interact with a web page. All interactive features must be accessible to keyboard users. That includes drop-down menus, buttons, dialog boxes, links and form elements. If any interactive elements on the web page cannot be fully accessed without using a mouse, the criterion is assessed as not being met.

• Scenario 1: Only select interactive elements are focusable using the keyboard: While using keyboard keys to navigate the web pages, the focus doesn’t show on some buttons or links.
• Scenario 2: No interactive elements are focusable using the keyboard: While using keyboard keys to navigate the web pages, the focus doesn’t show.
• Scenario 3: One or more interactive elements have pointing-device-specific event handlers: Some elements cannot be interacted with by using a keyboard because they only respond to a specific interaction with a pointing device such as a mouse click.

Linked WCAG criteria:
Success Criterion 2.1.1 Keyboard (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G202
https://www.w3.org/WAI/WCAG21/Techniques/html/H91
https://www.w3.org/WAI/WCAG21/Techniques/general/G90

Websites must provide a visual hint for users who may not be able to distinguish between different text colors. Within a paragraph or other block of text, color is widely used to denote words that serve as links.

•  Scenario 1: Links only differ from normal text in color: Links based solely on color may not be obvious to those with color blindness.

Linked WCAG criteria:
Success Criterion 1.4.1 Use of Color (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html

Sufficient Techniques:
https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/G183
https://www.w3.org/WAI/WCAG21/Techniques/general/G14

Link text is a type of writing that is connected to a link target ranging from a single word, character, group of words, or even numerous phrases. It informs users about their intended destination upon clicking on them whereas link context is regarded as supplementary data that can be automatically gathered from connections. Links should be provided with wording that identifies the link’s purpose without the need for extra context. The SurfMore method only allows (1) less clear / ambigous link. In case of more ambigous links, the criterion is assessed as not being met.

• Scenario 1: One or more link texts are ambiguous: Ambiguous texts when read out of context, don’t properly inform the user about its destination.
• Scenario 2: One or more link texts are ambiguous but contextually inform the user of its destination: A link that says “Click here” is accompanied with meaningful associations.

Linked WCAG criteria:
Success Criterion 2.4.4 Link Purpose (In Context) (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G91
https://www.w3.org/WAI/WCAG21/Techniques/general/G53

When an image or a graphic is added to web content, they must be paired with suitable alternative attributes (alt tags). Users with visual or cognitive limitations can use screen readers to announce alternate text in place of images, which helps them understand the content and function of the visuals. If a picture fails to load, the browser will display the alternative text in its stead.

• Scenario 1: One or more images don’t have a textual alternative: All images presented to the user on the web page must have alterative text. Note that images on a website include the following: logos, photos of e-commerce items, title photos for blog articles, hero banners, image maps, thumbnail images, photographs, infographics and data charts.
• Scenario 2: One or more images have inappropriate alt text: All images presented to the user on the web page must have understandable alterative text that properly describes the image. An alt text might contain a bunch of random letters and numbers or it doesn’t properly describe the image which renders the alt text as good as useless.

Linked WCAG criteria:
Success Criterion 1.1.1 Non-text Content (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G94

Captions or “subtitles” are a written representation of speech and non-spoken audio information that is required to comprehend the content. This includes spoken words and key sounds such as music, laughter, and noises. To be contextualized, captions must be coordinated with the visual material and properly displayed in a media player.

• Scenario 1: One or more videos don’t have captions: All videos on the web page must have captions available.
• Scenario 2: Captions aren’t properly synchronized: Captions must be carefully synced with the words heard in order to be effective. All videos on the web page should have properly synchronized captions.
• Scenario 3: Captions are missing non-verbal sounds: All captions must include sound effects that help users gain a better grasp of what’s going on in the video.
• Scenario 4: Captions are difficult to read: Captions must be readable and legible. Closed captions should allow the user to adjust the caption size, color, and font to accommodate any other limitations they may have.
• Scenario 5: Auto-captions: The written words do not accurately reflect what was said due to speakers having accents or are using abbreviations that are not in the captioning dictionary.

Linked WCAG criteria:
Success Criterion 1.2.2 Captions (Prerecorded) (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G93
https://www.w3.org/WAI/WCAG21/Techniques/general/G87

An accessible website must have enough contrast between the text and the background for users with fairly low vision (users who do not use contrast-enhancing assistive technology). Text that is purely aesthetic and does not provide any important information is not included.

• Scenario 1: Some or all large (18-point or 14-point bold) text doesn’t meet the minimum contrast requirements: Some or all text on the website does not meet the minimum ratio of 3:1.
• Scenario 2.1: Some or all regular text (font size lower than 18pt or 24px) doesn’t meet the minimum contrast requirements: Some or all text on the website does not meet the minimum ratio of 4.5:1.
• Scenario 2.2: Some or all bold text (font size lower than 14pt or 18.5px) doesn’t meet the minimum contrast requirements: Some or all text on the website does not meet the minimum ratio of 4.5:1.

Linked WCAG criteria:
Success Criterion 1.4.3 Contrast (Minimum) (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G18
https://www.w3.org/WAI/WCAG21/Techniques/general/G145

Users can obtain a sense of the page’s order and structure by organizing web pages by headings. Headings are visually larger and more distinct than the surrounding text. Users using screen readers can traverse a page by headings, listen to a list of all headings, then skip to a preferred heading to begin reading there.

• Scenario 1: Headings on the web page are in the incorrect order: Headings on the web page don’t follow the right order (h1- h6).
• Scenario 2: The h1 tag is not the first heading on the page: If the H1 tag is not the first element on the page, a screen reader user who goes to that heading to begin reading the page misses all of the web content that was put wrongly before the H1.
• Scenario 3: All headings are marked as the h1 tag: Because there is only supposed to be one level 1 heading, on a page with several H1 tags, a screen reader user may be confused about the page’s main purpose.

Linked WCAG criteria:
Success Criterion 1.3.1 Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/html/H42
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA11

When a screen reader comes across a correctly marked-up list, it will inform the user how many items are on it. It’s critical to mark the list as a true list with proper HTML markup rather than only using visual decoration.

• Scenario 1: One or more lists are not real lists: One or more lists are not properly marked in HTML and only visually look like lists using elements such as <br> or <p>.

Linked WCAG criteria:
Success Criterion 1.3.1 Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/html/H48

Programmatically determined (determined by software from author-supplied data in such a way that various user agents, including assistive technology, can extract and present this information to users in various modes).

• Scenario 1: One or more input fields are missing a label: One or more input fields of a single form are missing a label.

Linked WCAG criteria:
Success Criterion 1.3.1 Info and Relationships (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html

 Also applied:
Success Criterion 4.1.2 Name, Role, Value (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA17

Providing clear instructions and textual help aids all users in completing tasks such as filling out a form. Forms should include instructions or labels that identify the controls in a form so that users know what data they should enter.

• Scenario 1: One or all forms do not offer textual help: One or all forms do not offer textual hep when a mistake is made.
• Scenario 2: Offered textual help is unclear/ambiguous: One or all forms have unclear instructions that are hard to follow or understand.
• Scenario 3: Fields do not offer an example of the required format: Fields that require formatted entries, such as dates or credit card information, should offer an example of the format that is required.

Linked WCAG criteria:
Success Criterion 3.3.2 Labels or Instructions (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions.html

Also applied:
Success Criterion 3.3.5 Context-sensitive help (Level AAA)
https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G131
https://www.w3.org/WAI/WCAG21/Techniques/general/G83

The content must be accessible and must not lose any information or  functionality when zooming to 400% without the user having to scroll horizontally or vertically. It is also important that no content is hidden off-screen.

• Scenario 1: Some or all text and images do not reflow properly: Some or all text and images on a web page cannot be scaled up to at least 200% or do not properly move with the layout.
• Scenario 2: Interactive elements do not reflow properly: Some or all interactive elements on a web page such as buttons cannot be scaled up to different screen sizes or do not properly move with the layout.
• Scenario 3: The navigation menu is not fully visible: The navbar on a web page must be fully visable or be properly collapsed (fewer items or hamburger menu) in all different screen sizes for users to properly navigate the webiste.
• Scenario 4: Pop up windows do not reflow properly: Popups that occur on the website are not properly scaled up and require scrolling to access all information.

Linked WCAG criteria:
Success Criterion 1.4.10 Reflow (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/reflow.html

Also applied:
Success Criterion 1.4.4 Resize Text (Level AA)
https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/css/C31
https://www.w3.org/WAI/WCAG21/Techniques/css/C32

For users with attention-related problem, autoplaying content can be distracting and is preventing them from using the rest of the page. People who use screen readers may also encounter autoplay when trying to listen to their screen reader audio, making it difficult to browse a page. Unless the moving content and animations (moving, blinking, or scrolling information) is essential to the user experience, there must be mechanism available for the user to pause it. The following criteria for moving content and animations (moving, blinking or scrolling information) is:

1. starts automatically,
2. lasts more than five seconds,
3. is presented in parallel with other content.

• Scenario 1: Some or all moving content and animations don’t have a pause button: Some or all moving content on a web page does not have a way to pause or restart the animation.

Linked WCAG criteria:
Success Criterion 2.2.2 Pause, Stop, Hide (Level A)
https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

Sufficient Techniques:
https://www.w3.org/WAI/WCAG21/Techniques/general/G4
https://www.w3.org/WAI/WCAG21/Techniques/general/G11