Tips & Tricks

Tips

  • All pages should have unique TITLE to assist screen readers as well as search engines apart from the normal user
  • All pages should have META TAGS (Keywords and Description) related to that page
  • Clear heading structure (H1, H2 and H3) should be maintained. This helps the visually challenged user to quickly scan the main content heads of the page. There should be only one H1 tag on a page
  • Use external CSS as much as possible, avoid inline styling
  • Always use OPTIMIZED images. Images can be optimized by using image editing softwares
  • Page should have a clear contrast between foreground and background
  • A "Skip to content" link must be provided at the top of the page. This helps the user to directly go to the main content of the page bypassing the repetitive sections like page header, navigations etc
  • All functionality of the content like links, menus, forms etc should be operable through a keyboard interface as the visually challenged cannot use the mouse
  • Tables must not be used for layout and presentation purposes. When used for representing data, tables should be provided with proper header row and captions and the data items should flow left to right, one line at a time
  • Frames should be avoided while designing a webpage as frames cannot be easily read by the visually impaired. When used, frames should be titled with text that facilitates frame identification and navigation
  • Attributes of colour, shape and size must not be used to represent information as these would make the content inaccessible to the visually challenged. For example, we should avoid using statements like "All the text written in red are mandatory"
  • All script function should include a NOSCRIPT tag for those browsers or assistive technologies that do not have script support.
  • Enough time should be provided to user to read and interact with content. In case, content is time-based, same should be informed to user in advance
  • Website must clearly reflect the ownership of Government of India through the use of State Emblem. Complete linage of the owner department must be mentioned, preffereably at the footer of the page
  • Content must be written from citizen's perspective and the language must be simple and free from errors
  • Multi-lingual versions of the sites must be in sync with each other
  • Website must work well in all the major browsers.

Tricks

The following points should be kept in mind so that the content is meaningfully presented and can be navigated easily:

Providing meaningful alternate descriptions for non text elements

Meaningful text descriptions must be provided for non text elements like images by giving an ALT tag. For decorative images like icons, bullets etc. a null ALT must be given (ALT=" ") as Screen readers ignore images without alt text. A video presentation with an audio component requires captioning. The captioning must be completely synchronized with the audio presentation to allow for the viewer to follow the meaning of the content. If there is a slide show like a PowerPoint slide show available but it is "visual only", the graphics need to have alternative text representations

Designing forms

While designing a form it must be ensured that text instructions that describe the input are provided at the beginning of a form or set of fields. Also elements associated with input like text fields must be labelled to ensure that information about the input field is spoken by screen readers when the field receives focus

If an input error is detected it should be flashed to the user in text

Using images in webpages

Though images add life to a website, they also increase downloading time. Images should only be used when it adds value to the content. Images should not be used to present text in an alternative style as those using text only browsers shall not be able to access the information thus rendering the site inaccessible to many. Images should be created in an appropriate format to minimise load time and maximise the display quality. There are three formats for displaying images in web browsers – GIF, JPEG and PNG. Use:

  • GIF format for images that contain line-art and flat areas of colour such as icons and graphs
  • JPEG format for images that contain many colour variations, such as photographs. JPEG images can contain up to 16 million colours

Also The size of image files should be reduced as much as possible to minimise the download time of web pages. A variety of techniques can improve the download time of pages:

  • Scaling of images should be avoided as they tend to distort. Instead a correct size should be prepared in image processing software.
  • A thumbnail (a smaller version) for a large image and link to the full-size copy should be provided where appropriate.