Web Accessibility Overview

Web accessibility specifies that websites, tools, and technologies are designed and developed in a way that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web, contribute to the Web. 

Moreover, web accessibility is the inclusive practice of ensuring no barriers prevent interaction with or access to websites on the World Wide Web by disabled people. When sites are correctly designed and edited, all users access information and functionality equally.

Accessibility Standards

The Web Content Accessibility Guidelines (WCAG 2.1) are part of a series of web accessibility guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C), i.e., the main international standards organization for the Internet.

Here are the WCAG 2.1 guidelines layout how digital services and tools should be accessible to everyone, such as users with impairments to the following-

• vision – those who are severely sighted impaired (blind), sight impaired (partially sighted), or color-blind
• hearing – those who are deaf or hear less
• mobility – those who find it challenging to use an input device, like a keyboard or mouse
• learning difficulties- dyslexia, autism

Why is Accessibility Important?

Today the ‘Web’ has become a vital resource covering every aspect of our lives. To get full access to many areas, including healthcare, education, government services, online purchasing, entertainment, and more, you need to access the web. So, websites must be easily accessible.

An accessible web can help people with disabilities participate actively, improving the life experience for all.

There is a fact that the Internet provides one of the quick ways to communicate and do business with people who have a disability—for example- people who cannot physically get to a shop or cannot read standard printed material.

How to make Website Accessible

Keeping accessible and friendly websites, we can follow some techniques and achieve the desired results. The methods are as follows:-

1. Language – Declaring a language attribute, i.e., lang=” “ on the HTML element, enables a screen to render the content to read out the text with the given language and correct pronunciation.
2. Text size and color contrast – We have to make sure that the size and color of the text have enough for reading and contrast enable concerning its background. The color combinations are essential, and color blindness testing must be done for that specific. There are several free online tools for color and contrast testing. For e.g.- https://color.a11y.com/Contrast/,  https://webaim.org/resources/contrastchecker/

Adding on this contrast ratio is very important to be passed with a font color w.r.t background, which is a minimum of 4.5:1. And, as per Section 508, we should make available options for font size increasing and decreasing both like A, AA, AAA, A- or A+.

3. Links – The links should be descriptive and logical. For example, ‘Click Here’ to ‘ Download Admission Brochure’ itself describes the link to download the admission brochure, whereas click here is still unclear and where it would take you to.
4. Images and use of alt tag – Alt text or alternative text refers to the invisible description of images allowed to blind users on a screen reader. We can use alt text with an img tag to give more information about the image where it is beneficial for both accessibility and SEO. Eg.

<img src=”banner.png” alt=” We should use a descriptive text in place of the given image” />

5. External Links – It is essential to notice that we should use target=”_blank” to open the link in the new tab for all the external links. E.g., Social links, Third party websites, etc.
6. Focus – The focus refers to something happening on the website that should be highlighted for e.g. hover events; we can use color change or underline or background color change to notice. Moreover, we can implement a border while clicking on an input box. So, the focus is one of the critical aspects while designing a website to meet accessibility standards.
7. Forms – The forms are critical in designing an accessibility website. Like the use of labels is a must in forms, keep check the space is optimized between label and input field, use of focus event, easily accessible in mobile devices as well as no need of zoom-in and zoom-out in mobiles, and are the files easily accessible while using tab key from the keyboard.
8. ARIA – Accessible Rich Internet Applications (ARIA) is a set of attributes defining ways to make web content and web app (especially those developed with JavaScript) more accessible to the disabled. It supplements HTML; thus interactions and widgets used in applications can be passed to Assistive Technologies when there is no mechanism. For example, ARIA enables accessible navigation landmarks in JavaScript widgets, HTML4, form hints and error messages, live content updates, and more.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

Example of mouse disabled form: 

http://udacity.github.io/ud891/lesson2-focus/01-basic-form/

Along with this, there are several things to keep in mind while designing an accessibility website like using descriptive text in tables, tabindex, headings, keyboard navigation, etc.

Checkpoints for Web Accessibility

We should follow a list of checkpoints to achieve accessibility for our website. The checkpoints are as follows:-

1- Structure and Semantics

Page Title – Must be present/unique/dynamic title changes when the purpose of page changes.

Language – The primary language of the page MUST be identified accurately; the language code SHOULD be designated with a standard two-character ISO 639-1 code (e.g., lang=”en”)

Headings – Headings MUST be accurate and informative. 

Bypass blocks: Screen readers allow users to navigate by headings, and these are an effective way to bypass blocks of content, as needed by WCAG 2.4.1. 

Note: Headings are not necessary by WCAG to pass 2.4.1 but are highly recommended, along with landmarks and skip links.

Landmarks – Screen readers allow users to navigate by landmarks, so landmarks are an effective way to bypass blocks of content

Lists – Lists MUST be constructed using the proper semantic markup (i.e. <ul> or <ol> with <li> child elements, or <dl> with <dt> and <dd> child elements).

Tables – Header with <td>/Describes data accurately/cells must be associated with respective cells <th><tr><td>Iframes – The iframe title attribute should be accurate. The source page of an iframe (the page embedded in the iframe) MUST have a valid, meaningful <title>.

Markup Validity – ID must be unique. Elements MUST NOT contain more than one instance of the same attribute. No closing tag is missing. <p> and <div> must not be wrapped in label

2- Links and Navigation

Page Title – Must be present/unique/dynamic title changes when the purpose of page changes.

Links – Links MUST be semantically designated as such. Described logically. Links MUST be keyboard-focusable. Must be active and correctly routed.

Site Navigation – Reading order/ Focus order must be logical

Page within Navigation – Reading order/ Focus order must be logical

3- Images and Visual Designs

Images – Alternative text, Meaningful description

Color and Contrast – Use of color, Visible Alternative, Small Text Contrast, Large Text Contrast, UI Component Contrast, Visual Focus Indicator Contrast

Text Styles, Resize, Reflow, and Zoom – Resize Text 200%, Mobile Zoom, One Scroll Direction Only, No Images of Text, Color contrast of small text, Color contrast of large text, Color contrast of small text

Visual Cues – Visual Meaning

Adaptive and Responsive Output – Horizontal or Vertical Orientation, Text Styles, Resize, Reflow, and Zoom

4- Multimedia, Animations, and Motion

Audio and Video – Captions/Transcripts/Autoplay/Aduio Control/Audio Control/ Descriptive text/Transcript/Flashing Content

Animation, Motion, and Timed Content – Audio and video requirements, Keyboard-Accessible, Text Color Contrast, UI Component Color Contrast, Flashing: A page MUST NOT contain content that flashes more than three times per second unless that flashing content is small, the flashes are of low contrast, and do not violate general flash thresholds.

5- User Input, Forms, and Dynamic Content

Device-Independent User Input – Links, buttons, and interactive controls MUST be keyboard-focusable

Form Validation and Feedback – Labels for inputs, Labels for groups of information, Instructions about inputs, about an entire form, a group, or a section, Required fields (in the full list of recommendations), Data input restrictions (in the full list of recommendations), Disabled fields, and Time limits

Form Input, Labels, and Instructions – Labels MUST be programmatically associated with their corresponding elements. Labels MUST be available as programmatically-discernible text. Placeholder text is allowed but MUST NOT be used as the prime method of providing a label for text input.

Dynamic Content (JavaScript, AJAX) – Context Changes on Focus, Finding Added Content, Set Keyboard Focus, No Lost Focus, Focus Target Has Text Custom Widgets (JavaScript, ARIA) – Name of Interactive UI Elements, Name of Static Semantic Elements, Other Semantic Elements Benefitting from a Name, Role Specified