What does "accessibility" in websites mean?

What does "accessibility" in a website mean? Accessibility means that the website is functional for all kinds of users, some of whom may have disability. An accessible website is built with people with disability in mind. These people include people with visual impairment, color blindness, deafness, fine-motor disability, deafblindness, or other types of disabilities. Older people typically have more difficulty reading small prints and distinguishing colors.

People with disability use assistive technology to retrieve information from and interact with a website. For example, people with visual impairment may use a screen reader that reads texts aloud. People with deafblindness may use a Braille display. Assistive technology interacts with the source code that powers a website.

According to the Ontario government, almost 25% of people in Ontario has a disability. More than 40% of them are over 65. Accessibility in a website is a legal requirement for public sector organizations and businesses or non-profit organizations with 50 or more employees as of 2021. Publicly accessible websites belonging to these types of organizations must satisfy 2 out of 3 levels of accessibility: A and AA.

We'll look at some tests you can easily perform to see if your website satisfies the A-level requirements, which are the most basic levels of accessibility.

Does the web pages follow a meaningful sequence?

When a person uses a screen reader to access a web page, the screen reader reads aloud the content of the web page. He or she may use the keyboard to navigate a page by pressing on "tab" key. The content of the web page should follow a meaningful sequence. In an article with 2 columns, the content should flow from top of the first column to the bottom, and to the top of the second column.

Can the relationship between contents or structure of the web page be determined by assistive technology or are explained by text?

A person who can see can easily tell how a larger, bolded font signifies a heading of a content. A text written in red color may indicate that a certain input field of a form is mandatory. A person with visual impairment cannot see such visual cues. The HTML code should be written in a way that allows assistive technology to deduce the relationship between contents or have a text explanation on the page.

For example, required fields in a form can be labelled in red and have an asterisk. An explanation at the top of the field can say, "Fields with an asterisk (*) are required." Titles to a section can be enclosed in HTML title tags such as <h1> and <h2> and subtitles can be enclosed in <h3> and so on. Programmatically, "role" and "aria" labels can be used to indicate meaning and relationship of HTML tags.

Is the information conveyed by shapes, size, location, and orientation also conveyed by other means?

People with visual impairment cannot see what certain shapes or sizes of shapes mean. If a certain shape should represent something, it should be accompanied by alternative representation such as text. For example, a print button in the shape of a printer can be accompanied by the text "Print".

Is the information conveyed by color also conveyed by text?

People who are color-blind or older adults have difficulty distinguishing colors. The use of colors to convey information is fine, but it should not be the only means to convey information. For example, when a form is submitted, a certain input field may contain a user error. In addition to the input field changing its color to red, there should be a text indicating the error (E.g. "The postal code format should be A1A 2Y2.").

Is your pre-recorded audio accompanied by text transcription or description?

People with hearing impairment cannot hear the audio in your recording. There should be a text transcription of the audio available on the web page. If the audio is a music track, sound effect, or anything that cannot be transcribed, there should be a text description of what the audio track is about.

Is your video accompanied by closed captioning and/or text description?

People with visual impairment cannot see your video. For example, if there is an animation describing your manufacturing process, there should be a text description of that process. People with hearing impairment cannot hear your video, so closed captioning of the speech in the video is recommended.

Can the audio be controlled or silenced?

Some websites play audio either automatically or as a result of an user action. A user should be able to control such audio by turning it off, silencing it, or resuming it. This is because audio played by a web page may interfere with the sound from a screen reader used by a visually impaired person.

Can the web pages be fully functional with only a keyboard?

Visually impaired people and people with fine-motor disability may need to navigate a web page by using only their keyboard, not a mouse. They must be able to use the entirety of the website functionality (except some specific web applications) by using only their keyboard. For example, a carousel should be controllable by a keyboard. A user should be able to open or close a modal using a keyboard.

Can you navigate the web page by "tabbing"?

You should be able to press on the "tab" key on your keyboard to navigate all parts of your website. This means there shouldn't be able content that cannot be reached by "tabbing".

Are there any "keyboard traps"?

When you navigate your web page by "tabbing", make sure that there aren't any "keyboard traps" - that is, when you tab and focus onto an element, you are stuck there or your focus shifts to a previous element so that any subsequent elements cannot be accessed.

Is the "tab" order sequential and meaningful?

When you navigate your web page by "tabbing", the order to which the focus is shifted should make sense. For example, when you are filling a form, your tab should go from the first element to the next, eventually reaching the submit button. If you tab onto an input field and if the next tab is a checkbox at the end of the form or another element that is unrelated to the form, the tab order is not meaningful and can confuse people using a screen reader.

Can you skip the repeated content (e.g. menu) when you "tab"?

Often, a website has many links in the menu. A user using a keyboard and "tab" key to navigate starts the "tab sequence" at the top of web page. Without a "skip to the content" function, a screen reader user would have to tab through dozens of links in the menu to reach the content every time he or she visits a web page.

A "skip to the content" is usually a link or button that is hidden from the visible part of the web page but is readable by screen readers. When a user selects it on his or her screen reader, the tab focus goes to the first element after the menu.

Can a timed materials (e.g. rotating carousels) be controlled easily and with a keyboard only?

A website may have a "timed material" such as a carousel that rotates automatically. Each slide of a carousel may show pictures and texts. People with low vision, color-blindness, or learning disability may need more time to read each slide. There should be buttons or other mechanism that allow users to control the behavior of the carousel: to stop it, resume it, and to change the position. These controls should be accessible by a keyboard as well.

Are the link descriptions present?

Each link should have a descriptive text. If the link points to a member directory, it can say something like "You can view the current members in the member directory." A screen reader reads the anchored text ("member directory") when a user focuses onto this element.

Are the title and language of the web page set?

The language of the text in a web page should be defined in the lang attribute of <html> tag. For English, it is lang="en". Assistive technology is able to pick up this piece of information and inform its user. The title of the web page should also be set.

Are there labels on the text inputs?

In a form, a label should be present for each input field. This can be done with a <label> tag. The relationship between the label and its input field should be indicated in the code. For aesthetic purposes, it's possible to hide the label from visible part of the web page, but should be nevertheless present and accessible to screen readers.

Are the required fields indicated clearly by color and text instruction?

Required fields in a form can be labelled in red and have an asterisk. An explanation at the top of the field can say, "Fields with an asterisk (*) are required." By doing this, you are conveying this information by both color and text instruction.

Will focusing on an element or entering / choosing a value in an input create a predictable behavior?

For people using assistive technology such as a screen reader, the web page should not create unexpected behavior without clear explanation. For example, a user using a keyboard expects to finish a form in sequential manner. If a help icon is in the tab sequence between "Email" field and "Address" field, and if it opens a modal every time it is focused, a user would have to open the modal and dismiss it every time the user wants to navigate from "Email" field to "Address" field. This would not be a good practice.

If any flashing is used in the web page, is it within 3 flashes per second?

A series of flashes that are more than 3 flashes per second is known to cause seizure in some people. Make sure that no part of your website flashes more than 3 flashes per second.