Overview
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people can: perceive, understand, navigate, and interact with the Web, contribute to the Web.Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to websites on the World Wide Web, by people with disabilities. When sites are correctly designed, developed and edited, generally all users have equal access to information and functionality.
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), the main international standards organisation for the Internet.
WCAG 2.1 guidelines layout how digital services and tools should be made accessible to all, including users with impairments to their:
- vision – those who are severely sight impaired (blind), sight impaired (partially sighted) or colour-blind
- hearing – those who are deaf or hard of hearing
- mobility – those who find it difficult to use an input device, like a keyboard or mouse
- thinking and understanding – those with dyslexia, autism or learning difficulties
Why Accessibility is Important
Today the ‘Web’ has become an indispensable resource that covers just about every aspect of our lives. To gain full access to many areas, including healthcare, education, employment, government services, online purchasing, entertainment, and more, you need to be able to access the web – so it’s vital that websites are accessible to everyone.
An accessible web can help people with disabilities participate more actively, improving the life experience for all.
Putting aside the greater good, there is also the fact that the internet offers one of the easiest ways to communicate and do business with people who suffer from a disability. Examples of this are people who cannot physically get to a shop, or who cannot read standard printed material.
How to make Website Accessible
Keeping accessible friendly websites we can follow some techniques and can achieve the desired results. The techniques are as follows:-
1. Language – By 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 has enough for reading and contrast enable with respect to its background. Thh color combinations are very important and for that specific color blindness testing must be done. There are several free online tools for color and contrast testing. For eg. https://color.a11y.com/Contrast/
https://webaim.org/resources/contrastchecker/
Adding on this contrast ration 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 the 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 admission brochure whereas click here still not clear 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 which are allowed to blind users on a screen reader. We can use alt text with img tag to give more information about the image where it is very helpful 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 very important to notice that for all the external links we should use target=”_blank” to open the link in the new tab. For eg. Social links, Third party websites, etc.
6. Focus – The focus refers to something happening on the website should be highlighted for eg. hover event we can use color change or underline or background color change so that one can notice. Moreover, we can implement a border while clicking on an input box. So, focus is one of the important aspect while designing a website to meet accessibility standards.
7. Forms – The forms are one important aspect while designing an accessibility website. Like the use of labels is 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 keyboard.
8. ARIA – Accessible Rich Internet Applications (ARIA) is a set of attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities. It supplements HTML so that interactions and widgets commonly used in applications can be passed to Assistive Technologies when there is not otherwise a mechanism. For example, ARIA enables accessible navigation landmarks in HTML4, JavaScript widgets, 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 a number of 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, so headings are an effective way to bypass blocks of content, as required by WCAG 2.4.1. Note: Headings are not absolutely required 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 appropriate 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 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 MeaningAdaptive 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 3 times per second unless that flashing content is sufficiently 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 inputs, Instructions about inputs, Instructions 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, 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 only method of providing a label for a text input.
Dynamic Content (JavaScript, AJAX) – Context Changes on Focus, Finding Added Content, Set Keyboard Focus, No Lost Focus, Focus Target Has TextCustom Widgets (JavaScript, ARIA) – Name of Interactive UI Elements, Name of Static Semantic Elements, Other Semantic Elements Benefitting from a Name, Role Specified
