December 16, 2014
Web Accessibility – Making Websites Accessible
What is Web Accessibility?
Web accessibility is a set of practices and standards that aid users with disabilities in accessing website information. Currently everything is going on the web, from educational sites to e-commerce sites and personal banking to social media networks. Web accessibility makes it easy for everyone to access websites and provides assistive tools for people with different disabilities. While developing or designing web applications, we should keep in mind that websites should be equally accessible for both users with and without disabilities.
Users might have any number of different types of disabilities. They can be permanent or temporary. Usually we can categorise user disabilities in one of the below given types.
Visual: Visual impairments include blindness, low vision and poor eyesight, and various types of colour blindness and aging impacts on vision.
Motor/Mobility: Mobility impairment includes difficulty or inability to use the hands, including tremors, muscle slowness, loss of fine muscle control, etc.
Auditory: Deafness including individuals who are hard of hearing.
Seizures: Photo epileptic seizures caused by visual strobe or flashing effects.
Cognitive/Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities of various origins, affecting memory, attention, developmental "maturity," problem-solving and logic skills, etc.
The Importance of Web Accessibility
The Internet is an important part of modern-day life. It is used in many aspects of our everyday lives. This includes any number of employment-related functions, e-commerce, e-governance, e-learning, health care, social media, and many more. Being a Web developer, it is very important to make sites that are accessible for those with the kinds of disabilites described above. Web accessibility is helpful in order to provide equal opportunity to differently enabled people.
Accessible websites also benefit people without disabilities, including people with low literacy, people with slow internet connections, and those using older versions of Web Browsers.
Making your components Accessible
While making a website accessible a web developer should follow the US government’s Accessibility Section 508’s guideline and standard given by WCAG 2.0.Below are a few tips given based on these standards that can be helpful while making a website or web page accessible.
1. Website should have alternative text for Non Text contents. This includes images, URLs, and links.
Example: Images should have ALT text to provide description for image. Example: <img src="tpg.gif" alt="3Pillar Global Logo">
For spacer images or image used only for page layout designing, put empty text inside ALT attribute of image tag. e .g. : <img src="spacer.gif" alt=" ">
If your website is using CAPTCHA, provide audio for your secure code for those who are visually impaired.
2. Websites should have an appropriate navigation document structure. This includes elements like a menu bar, headings within pages and posts, lists, and other structural elements that provide meaning and structure to web pages. They can also facilitate keyboard navigation within the page. I have observed many websites that do not have a proper menu bar. As a user, you will not be able to navigate through all menu options using only your keyboard. This kind of website makes your website not accessible for keyboard-only users. The use of “tab index” without positive integer value is recommended for making navigation accessible.
3. Websites should work correctly without images. While developing websites, we should not assume that all users will see or use our website’s content in colours, format and layout as intended. Sometime users choose to remove images, video and visual effects to use assistive technology. Keeping this in mind, important information should not be shown in image format. For example, an e-commerce website shows multiple offers and discounts on its page in image format which is not useful for blind person. Another example could be a Print Option having clickable image to print a page which is also not useful. For example -
Avoid only image to provide print action. Here we are using an image without alt attribute.
Provide print image with readable text or alternative text.
4. Website navigation should be smooth by using the keyboard ‘’Tab” & “Shift + Tab” buttons. All tabs and menu navigation should be in sequence and should be easily accessible through keyboard buttons. Sometimes it is also good to provide shortcut keys for menu items and for important form elements of websites. For example:
<a href="https://https://www.3pillarglobal.com/" accesskey="g">3Pillar Global</a>
The shortcut varies in different browsers:
- For IE, Chrome, Safari, Opera 15+ we need to use [ALT] + accesskey
- For Opera prior version 15 we need to use [SHIFT] [ESC] + accesskey
- For Firefox we need to use [ALT] [SHIFT] + accesskey
5. Captions and transcripts for video content adds accessibility features for video content. Videos should have proper captions which help users having hearing disability. Video captions should include details of the speaker and what they are saying.
6. Animation or audio should not start automatically on page load. Sound and video should not be played automatically on a website’s home page. Users with certain cognitive impairments can find extra sounds and animations to be distractions. It is recommended for video/audio that we should provide the control option to start/stop/pause video/audio.
7. Text content should not contain special characters and jargon. Sometimes user who use sign language for communication and uses simple sentences may not be able to understand complex sentences or language jargon.
8. Ensure that every form element (text field, checkbox, dropdown list, etc.) has a label and make sure that the label is associated to the correct form element using the <label> element. Also make sure the user can submit the form and recover from any errors, such as the failure to fill in all required fields with proper readable messages.
9. Provide the skip option for less important parts of the website. Providing a “Skip to Main Content” or “Skip to Navigation” option is also helpful in web accessibility. Some example can be skipping header images/text. Users should be able to skip unnecessary part of a website and should be able to reach the main content of the site. e.g. https://ukpsc.gov.in/
11. The user must be notified when a timed response is required and given sufficient time to indicate more time is required. For this case the best example can be a web form with timeout time. In this case, a person having a disability may require more time to complete a form. As web developers, we should keep this in mind and provide proper messages before session time out to extend the session for user activity.
12. It is always good to have Unit Testing for your HTML pages components. This includes color contrast ration and CSS complying with Accessibility Standards.
13. Accessibility of Web contents requires textual information to interact with appropriate assistive tool or technology.
14. Websites should comply with World Wide Web Consortium (W3C) Web Content Accessibility Guidelines (WCAG) 2.0 levels. Using WAI-ARIA specification makes our website mode assistive technology friendly.
For more on web accessibility testing and standards guidelines, please visit https://www.3pillarglobal.com/insights/accessibility-testing-tools-and-techniques.