Web Accessibility Checklist – Making your web page truly accessible

Web Accessibility Checklist – Making your web page truly accessible

Compiled below is a checklist of 10 simple steps that developers can take in order to check the accessibility of their web pages. Will your newly developed website pass these accessibility tests?

  1. Check informational images for alternative text. Example of informational images are Logo, Icons. This is achieved by applying the alt=” ” attribute to the <image> tag in your code. The alternative text should reside within the quotation marks. This is helpful when browsers do not support image display and for people with visual impairments. Place the cursor over an informational image on your website, you should have a box appear with a short phrase or sentence that explains what exists. This type of information is not necessarily a literal description of the image, but more so, it should cut straight to the point of the image and not be long and drawn out.
  2. Check decorative images for alternative text. Decorative images are aesthetically driven and do not require alternative text because they are simply not conveying important information. This does not mean that it is to be left out entirely. In this case the alt attribute should still be present under the image tag but it should be set to null. This means there is to be no alternative text within the quotation marks of the alt attribute. Setting decorative images the attribute of null text is very important because if it is not set, users whose browsers do not display images will be alerted to the images presence but with no description offered, lending to frustration and user discouragement.
  3. Audio and video content should contain written transcripts. This type of support offers people with hearing impairments a fair chance at accessing multimedia content that produces audio or sounds. Websites that provide video content might choose to do this in the form of captions that overlay the video where is websites that publish podcasts that are of an audio nature, can choose to provide a supplementing transcript record of the pod cast. Providing transcripts of your content is a relatively inexpensive offering for web developers. Some transcription services can convert transcripts directly into HTML format.
  4. Check that forms are accessible. Web forms provide space or fields for users to input specific information. Fields on web forms are accompanied by a prompt which resides next to the field. For example, the prompt First Name next to an open field where a user would input their first name. Clicking on the prompt text should provide a flashing cursor in its associated field. This is achieved by using the <label> tag which unambiguously links the prompting text to the field. If the label  tag is not present, Your forms may be inaccessible to some users.
  5. Check that the text on your web page be resized. People with vision impairments may have problems viewing the text of your web page. Common web browsers have the ability to resize text on a web page. Check this against commonly used browsers. Using Mozilla-Firefox, you can achieve this by navigating the menu to the Options — Content page. You can set default font sizes for your browser from here. There is also a quick menu option to increase the visibility by zooming in and out with simple plus (+) and minus (-) symbols. The zoom in, zoom out feature can also be achieved via keyboard short-cuts. If you cannot achieve this outcome, your page may be inaccessible to those with vision impairments.
  6. Check your website in the Lynx browser. The Lynx browser is the oldest known web browser that is still used and developed having been founded in 1992. It does not support any other content other than text which makes it a good test for web accessibility. If you can interpret the content and navigate through your web pages successfully, you are fulfilling a majority of the web accessibility guidelines as stipulated by the W3C‘s standards.
  7. Check that you can access all areas of your site without a mouse. Some people with physical or motor disabilities cannot use a mouse and rely on keyboard and or voice recognition software. Check your web page for navigation using just the tab, shift-tab, and enter keys and combinations. This will be a good indicator as to how these groups of people will fare using your website.
  8. Check that there is a site map available. Site maps are extremely useful to all those people that may become a little unstuck using your website. It compiles a list to everything that resides on your website with valid links to their related content and areas. Site maps are valuable tools not just for those with disabilities but for all of us.
  9. Take time to ensure link text makes sense out of context. Link text refers to the alternative text that has been inserted throughout your site that guides users through links to other sections of your site. Blind users often tab through web pages and rely heavily on this information. It is up to the site developer to provide descriptive information using small phrases that make sense out of context. For example, “Learn more about our latest sale promotions”. Developers can achieve this by simply using the title attribute as well as thinking a little outside the box for those with vision impairments.
  10. Check your web pages with an automated program. Web accessibility evaluation tools are online services that help check a websites accessibility and to what level your site conforms with accessibility guidelines. There are a number of these services available and it is up to you to decide which one you would prefer to use based on your level of desired conformance. The W3C offer a list of these service providers with filtering options based on their own standards as well as other internationally developed standards.

Referenced websites:

World Wide Web Consortium – W3C

The Web Standards Project

Accessify

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s