Website Optimization

Tips for effective accessibility.

Set the page language
Images must have alternate text
Form <input> elements must have labels
Guidebot "Screen reader" setup NEW BETA
Guidebot "Reader Mode" setup NEW BETA
Timed refresh must not exist
Zooming and scaling must not be disabled
ARIA button, link, and menuitem must have an accessible name

The Guidebot widget helps to make your website accessible. It works immediately after simple installation, extending the accessibility of your website.

Guidebot works on both pre-purchased templates and custom written HTML/CSS environments. For the perfect experience, there are a few things you should consider.


# Set the page language

When configuring a screen reader, users select a default language. If the language of a webpage is not specified, the screen reader assumes it is the default language set by the user. Language selection becomes an issue for users who speak multiple languages and access the website in more than one language. It is essential to specify a language and ensure that it is valid so website text is pronounced correctly.

Screen readers use different sound libraries for each language, based on the pronunciation and characteristics of that language. Screen readers can switch between these language libraries easily, but only if the documents specify which language(s) to read. If the language is not specified, the screen reader reads the document in the user's default language, resulting in a confusing experience!

Example of setting the current language: 

        
<html lang="en">
<head>
...

# Images must have alternate text

Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive alt text so screen reader users clearly understand the image's contents and purpose.

If you can't see, all types of visual information, such as images, are completely useless unless a digital text alternative is provided so that screen readers can convert that text into either sound or braille. The same is true in varying degrees for people with low vision or color-blindness.

There are three main ways to add alternate text to an image: 

        
Using an alt attribute: <img src="..." alt="drawing of a cat"> 

Using an aria-label: <img src="..." aria-label="drawing of a cat"> 

Using an aria-labelledby attribute: <img src="..." arialabelledby="labelID">

# Form <input> elements must have labels

Effective form labels are required to make forms accessible. The purpose of form elements such as checkboxes, radio buttons, input fields, etcetera, is often apparent to sighted users, even if the form element is not programmatically labeled. Screen readers users require useful form labels to identify form fields. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.

The recommended method for most circumstances is to use the label element and an explicit association using the for and id attributes. 

        
<label for="firstname">First name:</label> <input type="text" id="firstname">

# Guidebot "Screen reader" setup NEW BETA

The screen reader is able to read the content of the website via voice synthesis. When switched on, the Guidebot indicates the content on the page that can be read. Click on the content or the badge to start the reading. The text being read is highlighted by the Guidebot.
For the reader to work properly, we need to define the content that can be read by adding a data-gb-speech HTML tag. If you specify the HTML tag without a value, the reader will take its data content as a base. If this is changed, or if the content is such that there is nothing to read (e.g. an image) you can specify the content to be read as the value of the tag. In the case of buttons and links (as long as the screen reader is active), the content will be read on the first click, the page will navigate on the second click.


Examples of good practice: 

        
Without value:
<div data-gb-speech>This content will be read out</div>
<a href="#" data-gb-speech>This is a link</a>
<button type="button" data-gb-speech>Button title</button>

With value:
<div data-gb-speech="This content will be read out">And this content will only be displayed</div>
<img src="..." data-gb-speech="Click on the image to read the content of the image"/>

# Guidebot "Reader Mode" setup NEW BETA

Reader mode collects the text content on the page and displays it in an easy-to-read format, free of distractions. For the reader mode to work properly, we need to define the element that contains the content of the page by including a data-gb-content HTML tag.


Examples of good practice: 

        
<main data-gb-content>...</main>

# Timed refresh must not exist

Since users do not expect a page to refresh automatically, such refreshing can be disorienting. Refreshing also moves the programmatic focus back to the top of the page, away from where the user had it. Such resetting is frustrating for users.

Remove the http-equiv="refresh" attribute from each meta element in which it is present.

Bad Example: 

        
<meta http-equiv="refresh" content="10" url="http://www.domain.com/index.html">

# Zooming and scaling must not be disabled

The user-scalable=no parameter inside the content attribute of <meta name="viewport"> element disables zooming on a page. The maximum-scale parameter limits the amount the user can zoom. This is problematic for people with low vision who rely on screen magnifiers to properly see the contents of a web page.

Remove the user-scalable=no parameter from the content attribute of the <meta name="viewport"> element in order to allow zooming and ensure the maximum-scale parameter is not less than 2.

Bad Example: 

        
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

# ARIA button, link, and menuitem must have an accessible name

Screen reader users are not able to discern the purpose of elements with role="link", role="button", or role="menuitem" that do not have an accessible name.

The aria-command-name rule has four markup patterns that pass test criteria: 

        
<div role="link" id="al" aria-label="Name"></div>

<div role="button" id="alb" aria-labelledby="labeldiv"></div>

<div role="menuitem" id="combo" aria-label="Aria Name">Name</div>

<div role="link" id="title" title="Title"></div>