Tips And Tricks
- 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, preferably 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.
Using semantically correct markup
HTML was not designed with display considerations in mind. It focused solely on the structural logic of documents and ignored the need for the visual logic of graphic design and typography. HTML is used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links and other items. Structural elements available in HTML should be used for their specific purpose; like heading tag should not be used as a means to format something that is not a heading.
Designing accessible and usable forms
Online forms are becoming an integral part of any government website and it is important that they are dealt with care as poorly designed forms without proper instructions will cause the user to commit mistakes and finally put him off the activity.
Promoting your website
Website promotion is the continuing process to promote a website to bring more visitors to the website. Many techniques such as web content development, search engine optimization and search engine submission, are used to increase the traffic to a site.
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.
Creating accessible tables
Use tables for representing tabular data only. Take care of following points while creating tables:
- Provide Names or Titles for Data Tables using the tag.
- Brief summaries of complex data may be given using the summary Attribute.
- Designate Row and Column Headers Using the tag.
- After creating headers, associate the cells with the appropriate headers. You can do so by using the scope attribute (for simple data tables) or use the headers and id attributes (for complex tables).
- Avoid spanned rows and columns as they are not handled well by some screen readers.
- Use proportional sizing rather than absolute sizing.
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.