Case Study on AYJNIHH: Web Content Accessibility Guidelines (WCAG) Accessible website for all

Ali Yavar Jung National Institute for the Hearing Handicapped decided to redesign their website in early 2010. The institute wanted to build on its reputation of being the first national institute in India whose website is accessible to all its users including persons with disabilities.

The existing website of AYJNIHH complied with Web Content Accessibility Guidelines (WCAG) 1.0 Priority 1 and the new website must not only comply with WCAG 2.0 but also with Guidelines of Indian Government Websites (GIGW). In order to comply with WCAG 2.0 at Level AA, a conscious decision was taken that all the information of the website including PDF documents and forms will also be made accessible.

The management at AYJNIHH wanted to ensure that the website must be accessible to all its visitors including persons with different types of disabilities. In addition, the management outlined that the new website of AYJNIHH External Website will be a bilingual website with dynamic functionality, such as expandable/collapsible menus, scrolling content etc and at the same time must be fully accessible.

BarrierBreak Technologies was chosen as the vendor for designing the new website. Accessibility was included right at the planning stage and was an integral part through each stage of the website development life cycle. Some of the key accessibility features incorporated in the AYJNIHH website includes:

  • Alternate text for images: Alternate text was provided for all the images across the AYJNIHH website. Textual description of the image enabled assistive technologies, such as screen readers, Braille displays to access the image information and at the same time the alternate description can be rendered by text browsers.
  • Device independence: All the functionality of the website was device independent including expandable/collapsible menus and scrolling content. Users browsing the website using different input and output devices, such as keyboard, mouse, Braille displays, adaptive keyboards, and switches can access all the functionality with ease.
  • Text resizing: The website includes options to adjust the text size, such as increase/decrease and normal text size. Users can change the settings to view the web page content as per their preferences.
  • Headings: The Web page content was organized using appropriate headings and subheadings that provide a readable structure. H1 indicates the main heading, whereas H2 indicates a subheading. In addition, appropriate headings have been provided to improve readability.
  • Skip to main content: Across the pages of AYJNIHH website, "skip to main content" link was provided to help keyboard and screen reader users quickly access the main content of the page.
  • Descriptive links: Unique and descriptive text was used to present hyperlinks across the AYJNIHH website. In the case of links displaying information in alternate file formats, such as PDF, Word etc the link text described the file size and file type information making it easier for users to decide if they wish to access the same. In addition, users were informed if the link leads to an external website or displayed information in a new browser window.
  • Contrast schemes: The website provided users with an option to view web pages in either High contrast view (white text on black background) or Standard contrast view (black text on white background).
  • Large print:An option to help users with low vision and senior citizens print the web page content in large font size was provided across the internal web pages of the website.
  • Iconic learning: Text was supplemented with icons to aid users with learning disabilities understand the information easily. Icons were provided for text labels for key navigation options as well as features, such as print, email etc.
  • Accessible data tables: Headers were marked for simple as well as complex data tables to enable screen reader users access the table information effectively. In addition, table caption and summary were provided for screen reader users to help them understand the table information and structure easily.
  • Liquid layout: Liquid layout was used to display the information on AYJNIHH website to ensure that users can access the content as per their requirements. Liquid layout also ensured that the web page would display appropriately across different screen resolutions and will not break if the user opts to change the text size for accessing the information.
  • Colour contrast: Across the website, colours with sufficient contrast were chosen to display the information to ensure that the content can be accessed with ease by users with different types of colour blindness.

The newly designed website was made disabled friendly and worked across different web browsers, mobile phones as well as other hand held devices. During the website development, measures were also taken to ensure that the website is search engine friendly.

The newly designed website not only complied with WCAG 2.0 and GIGW guidelines but was also certified with the website quality certificate by the Standardization, Testing and Quality Certification (STQC).

Accessible alternate format documents

The website of AYJNIHH is the first website in India which includes information in accessible alternate file formats, such as Adobe PDF and Microsoft Word including PDF forms. All the documents including simple PDF and Word documents as well as PDF forms were made accessible.

Accessibility Testing

Accessibility testing of the newly designed AYJNIHH website was conducted by accessibility experts and persons with disabilities using different assistive technologies. Some of the assistive technologies used for testing the website include screen readers, screen magnifiers, Braille displayers, switches, adaptive keyboard etc.

Accessibility testing was carried out throughout the website development life cycle. Testing was conducted at the design as well as template development stage and finally at the website completion stage by accessibility experts and persons with disabilities.

National Award

Efforts of making the website accessible paid off and the result was that the institute won the National Award for Accessible website by the President of India on December 3 2010 in New Delhi. It was an award well deserved by the institute for taking the initiative of making accessible website.

About AYJNIHH

Ali Yavar Jung National Institute for the Hearing Handicapped is an autonomous body under the Ministry of Social Justice and Empowerment, Government of India. The institute works for the rehabilitation of the hearing impaired in different aspects, such as education, employment, technology development and awareness. The institute is located at Bandra, Mumbai and has regional presence in different zones of India.

About BarrierBreak Technologies

BarrierBreak is an Accessibility and Assistive Technology firm in India. BarrierBreak is a subsidiary of Net Systems Informatics (I) Pvt Ltd. Net Systems Informatics is the pioneer of Accessibility in India and the first company to set up an Accessibility lab as well.

Net Systems/ BarrierBreak was the first Indian Accessibility firm to get ISO 9001 certified. In addition, STQC, under its Website Quality Certification Scheme, has grant ed Net Systems with "Capability Approval Certificate" for ISO 9001 Quality Management System (QMS).