What Is Web Accessibility?

Date First Published: 21st July 2022

Topic: Web Design & Development

Subtopic: Web Design

Computer Terms & Definitions

Difficulty Level: 3/10

Learn more about what web accessibility is in this article.

Web accessibility, also known as e-accessibility, is the practice of making a website accessible to all visitors using any device, including those with disabilities, visual impairments, and hearing impairments as well as ensuring that there are no issues with them interacting or accessing websites on the World Wide Web. The aim of website accessibility is to ensure that all users have equal access and an equal opportunity to use the web, regardless of physical disability, situational disability, visual disability, or restrictions on their bandwidth or speed. The W3C Web Accessibility Initiative (WIA) develops standards, guidelines, and techniques in relation to accessibility.

Importance Of Web Accessibility

Web accessibility is very important for the following reasons:

• If a website was inaccessible, a website would be difficult or impossible to use by some. This could ruin the reputation of a business.
• It is essential for web developers and organisations that want to create high-quality websites and not exclude visitors from using their online services. By making the design of a website accessible, it ensures that all users have a decent user experience.
• Visitors using a slow internet connection or having a limited bandwidth can access and interact with websites without experiencing issues, such as webpages failing to load or requiring more bandwidth than their internet access technology or internet subscription offers.

Assistive Technologies Used When Browsing Websites

Assistive technologies may be used by people with disabilities to assist web browsing. These may include:

• Screen reader software – A piece of software that reads out text. It can either read out selected elements of what is displayed on the screen (useful for users with reading or learning disabilities) or everything that is occurring on the computer (useful for users with visual impairments).
• Screen magnification software – Enlarges what is displayed on the screen in order to make it easier for users with visual impairments to read.
• Screen recognition software – Accepts spoken commands to the computer and turns speech into text. Useful for those who find it difficult to use a keyboard or a mouse.
• Keyboard overlays – Makes typing easier for those with motor control difficulties.
• Braille terminals – These consist of a refreshable braille display that renders text as braille characters and either a normal keyboard or a braille keyboard.

How To Make A Website Accessible?

Ensure that all images have 'alt' attributes.

Alt text appears when an image failed to load. When images have an alt attribute, information about the image will be accessible to people with visual impairments and use a screen reader to convert the text to speech as well as to people who block images from loading, usually due to low or expensive bandwidth. In addition, the alt text is available to technologies that are unable to see images, such as search engines.

An example of an image with alt text can be seen below with the output.

Ensure that all forms have labels

Labels on forms which specify the purpose of the field by the <label> tag improve the accessibility of a website as it makes the fields clearer and more readable. This is useful for people with visual impairments who find the text displayed in the fields difficult to read. Labels can be read out by screen readers, which require form labels in order for them to identify form fields.

Even though most forms on websites already consist of text before they are filled in, which specifies what data will need to be entered into the field when in the process of entering data, that text cannot be seen. As a result, this will require users to remove their entered data if they forget the type of data that is supposed to be entered in the fields and will be time-consuming.

Ensure That The Text Used Is Resizable

Websites should not use fixed text. Text that can be resized (zoomed) by up to 300% in web browsers without causing disruption to the page should be used. In the event of text that is too small or large, it is very important that the text can be resized as some people may find it difficult to read.

Consider The Colours Used On The Website

Not everyone's eyesight works in the same way. Some people have difficulties differentiating between some shades or colours. It is often called 'colour blindness', but that term is a little misleading as it sounds like the inability to differentiate from any colour or shade. The proper term is colour vision deficiency.

The colours used on a website should be carefully considered and have enough contrast, which is the difference in light between the font and its background. In terms of web accessibility, how well one colour stands out from another colour determines whether or not the font is readable by other people. The colour contrast can be analysed as website colours are generated through unique codes, enabling a method of accurately analysing and comparing those codes against each other, leading to a contrast ratio. A website that can check two colours for contrast can be seen here.

If the colours had a low contrast, they would be difficult to read, or unreadable by some, leading to users missing out on important information on a website. In addition, the colours used should not be too extreme, such as too bright or too dark. Colours that are too extreme can cause eye strain.

When using a background image, always carefully consider whether the text is readable on that background image. If not, consider using a content box to put the main content in. When choosing background images, it is important to not choose a background image that is too complex and detracts from the content. Note that a background image is not required. Some web developers choose to have a solid colour for the background image that blends in with the colour scheme of the website. An example of a bad background image and text combination can be seen below. The text is hardly readable on the background image.

Consider the fonts used

The fonts used should be carefully considered and easily readable. In order to be in line with accessibility guidelines, avoid using difficult-to-read and overly fancy fonts. Although some of these fonts may look visually appealing and be suitable for a logo, they are quite difficult to read, especially by people with visual impairments. Examples of compatible fonts that are widely used include:

• Arial
• Verdana (What Computerhelp4all uses)
• Tahoma
• Times New Roman
• Georgia

An example of a difficult-to-read font can be seen below. Avoid using fonts like these in the main content of websites.

Use Video Captions, Subtitles, or Written Records

If a website includes videos, it should include captions, subtitles, or a written record of everything that has been said in the video. These are beneficial for people with hearing impairments and ensure that everyone has an equal opportunity to understand the content of the video.

Difference Between Web Accessibility and Usability

The terms 'accessibility' and 'usability' are slightly different. Accessibility refers to ensuring access to all users, regardless of disabilities and technological factors, such as the speed of their internet connection and bandwidth. Usability refers to how easy a website is to use, the ability for users to successfully use the services on the website, and the creation of a user-friendly interface. Unless a website is accessible, it is not useable by all.