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.

printer

 

Provide print image with readable text or alternative text.

printer2

Print

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=”http://http://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. http://ukpsc.gov.in/

10. Ensure that JavaScript used on your website is device independent. While writing JavaScript functionality for a webpage or any event, make sure that your page does not rely on JavaScript to function. There can be multiple issues with improper use of JavaScript as JavaScript as required in navigation, hiding/showing the contents.

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 http://www.3pillarglobal.com/insights/accessibility-testing-tools-and-techniques.

Vivek Panday

Vivek Panday

Senior Software Engineer

Vivek Panday is designated as a Senior Software Engineer at 3Pillar Global. He has sound experience in designing, developing, and testing enterprise wide web applications. Over the course of his career, Vivek has demonstrated expertise in Java & JEE and in open source technologies and is extremely passionate about researching new and emerging technologies. Vivek has good hands-on experience in end-to-end telecom domain projects development and is presently interested in exploring web platforms. Prior to joining 3Pillar, Vivek had worked in IGATE, a New Jersey-headquartered IT and Outsourcing Services Company.

One Response to “Web Accessibility – Making Websites Accessible”
  1. Matt Bewers on

    Point 11 I absolutely agree with and the bank I use has this feature for its timeout, very good to give the user this flexibility rather than just closing the door without warning.

    Matt

    Reply
Leave a Reply

Related Posts

Shift Your Mindset to Find Product Success 3Pillar CEO David DeWolf spoke on the importance of seeing software development through the lens of product at the recent “Product Matters” event in I...
Flexing Your (Underused) Creative Muscle On this episode of The Innovation Engine, we talk about how to start flexing what is likely an underused muscle, if you're like 98 percent of the popu...
Where Are the Female Leaders in Tech (& How Can We Attr... On this episode of The Innovation Engine, we examine the dearth of female leaders in technology and look at ways we can mentor and encourage more fema...
Microservice & Serverless Architectures – Is Eith... On this episode of Take 3, we explore microservices and serverless architectures - what they are, why microservices have gained so much in popularity ...
5 Cost Saving Strategies When Using AWS Amazon Web Services, or AWS, offers reliable and scalable cloud computing services. More and more companies are realizing the benefits and are migrati...

SUBSCRIBE TODAY


Sign up today to receive our monthly product development tips newsletter.