What is Accessibility?

Web Accessibility is a term to refer web content to make available for all kinds of users, which means providing equal access and equal opportunity to people with disabilities as well. Web has been integral part of life, whether it is health, education, employment, government related sector, providing information and services on web has made life much easier than before. Web content could be text, images, audio, video, forms etch, web accessibility assures to make them available to all kinds of users. Click here to read more detail about accessibility provided by W3.

To start web development using Bootstrap, you can download latest compiled and minified CSS and JS from the link. Alternatively, you can use CDN's(which are hosted on different hosting server). Include Bootstrap CSS in head of html file and Javascript file just above the closing body tag.

Basic coding practices

To meet accessibility guidelines, developers and content publishers should develop the general practices of adding attributes of HTML elements, which will help to make web content available to all kinds of users. For example, in traditional web development and content publishing, alt attribute of image, title of links, summary of tables etc. were not paid that much attention. Now, from accessibility point of view, they are quite important, as the screen reader software will use them.

  • Add skip to contents link. Screen readers do not care about look and feel and designs applied. If there are some design, advertisements on header, add a skip content hyper link to take directly to the content of website.
  • Add proper alternative text for all images.
  • Add meaningful title for all hyperlinks.
  • Add meaningful summary of all tables.
  • HTML5 has more meaningful tags, for example <nav> tag is used to create navigation links which will be easier for screen readers. If you are using traditional <:div> tag, use role="navigation" for navigational links and role="search" for search boxes.

Accessibility check of PDFs

A lot of companies provide PDF documents on their website, screen reader will have problem in accessing PDF documents, especially if they contain scanned images, untagged documents, images without alt tags. You can perform quick check as per below steps.

Hence, if you are publishing PDF documents, you can improve accessibility with following:
  • In Acrobat 6.0 Pro/ Acrobat 6.0 Standard- click Advanced-Accessibility-Quick Check, if you have Acrobat 6.0, go to Document-Quick check. Then, after few minutes, you will receive a dialogue box with accessibility issues.
  • Perform full check of accessibility. Click Advanced-Accessibility-Full Check
  • Select accessibility report and choose location and select create comments In documents. (Delete these comments once they have been resolved. )
  • Select the page for accessibility check, select the Checking Options and click Start Checking
  • Then, open accessibility report, which is a HTML file with the same name as the document
  • In the left hand side of document, check link with inaccessible element and related content will be highlighted on the right hand side. You can improve accessibility, reviewing generated report. Go to link for more details.
  • While creating PDF contents, write more structured contents with proper nesting of heading, column names, meaningful alt tage of images etc

Check with accessibility test tools

There are a number of free and commercial test tools, which can be used to check websites whether they meet accessibility standards or not. One of the free tool is WAVE(Wave Accessibility Evaluation Tool). You can add it as extension of modern browsers like Chrome and can test. Alternatively, you can go to http://wave.webaim.org/ and type your website. Then, it will generate a report on left hand side which shows errors, warnings and also points with informative tool tip on right hand side, which will guide you what to be added. You can also check colour contrast with contrast tabs.

Useful links