HTML HTML intro.
  1. HTML intro
  2. Web pages and you
HTML basics
  1. HTML getting started
  2. HTML basics
  3. HTML document
HTML text
  1. HTML text formatting 1
  2. HTML text formatting 2
  3. HTML text formatting 3
  4. HTML fonts
  5. HTML entities
HTML links
  1. HTML links
  2. HTML email links
HTML images
  1. HTML images
  2. HTML image maps
HTML forms
  1. HTML forms
  2. HTML form labels
  3. HTML fieldset/legend
HTML tables
  1. HTML tables
  2. HTML tables concepts
HTML frames
  1. HTML frames
HTML backgrounds/color
  1. HTML backgrounds
  2. HTML colors
  3. HTML color shades
  4. HTML color usage
HTML style/layout
  1. HTML stylesheets
  2. HTML div/span
HTML media
  1. HTML audio
  2. HTML video
  3. HTML objects
  4. HTML download media
HTML declaratives
  1. HTML head section
  2. HTML meta tags
  3. HTML scripts
  4. HTML declarations
  5. HTML document types
Practical HTML
  1. HTML tag rules
  2. HTML things to avoid
  3. URL formatting
  4. URL encoding/decoding
  5. HTML use/access
  6. HTML publish work
HTML extras
  1. HTML marquees
HTML wrap-up
  1. HTML history
  2. HTML summary

HTML usability and accessibility

When you build something, it cannot just look good and work fine. It has to work well, and you have to have certain things in place in case something does not go as planned.

This tutorial focuses on:

Guidelines

There are certain usability and accessibility measures in HTML that when put in place establish a page that a has a good design (in terms of function). These guidelines provide a way for the web developer to build a solid page that works well.

Alternative image text

When you include an image on a webpage, once you codify it and see the result in your web browser, you may assume that the task is done. But what if a connection gets disrupted and the image does not get downloaded leaving the user with a blank spot on their screen? What if you misspell the name of the file on your server later on? What if the user is using a text-only browser or a screen reader?

To be prepared for such situations, you should use the alt attribute of the <img> tag. The alt attribute provides alternative text to be displayed in case the image does not appear for whatever reason.

Example:
<img src="apple.jpg" alt="Apple" /> <img src="orange.jpg" alt="Orange" />

The output of the above example will show an apple followed by the word "orange". This is because there is no orange image, so instead the text specified by the alt attribute (in this case "orange") will appear.

Output of the above example:
Apple Orange

Link titles

Sometimes the text for a link does not make it so obvious where that link will take you. This might make some users hesitant to click on it. A solution for this is the title attribute of the <a> tag.

The title attribute sets a title for the link that will appear in a small box (called a tooltip) when you move the mouse over the link. This is good to have for usability purposes when it is unclear where a link takes you too.

Example:
<a href="http://www.hostforweb.com"> Click here to go to HostForWeb web hosting company homepage </a> <br /> <a href="http://www.ifr.ac.uk/info/society/spotlight/apples.htm" title="Learn about Apples"> Apples are good! </a>
Output:

In the above example, the first link is very obvious and so does not need a title, but the second link not so much. Move your mouse (but don't click!) over the text Apples are good! in the above example to see the title of the link.

Labels for form elements

You can set the text for a form element using the <label> tag.

The <label> tag should sorround the text that will appear for a form element. The form element for which the text is specified should be set using the for attribute which takes the same value as the value set for the id attribute of that particular form element.

Example:
<form> <label for="fname">First Name:</label> <input type="text" name="fname" id="fname" /> </form>
Output:

In the above example, we set the for attribute of the <label> tag with the value "fname". This is the id of the form element for which the text in the <label> tag is specified. The textbox with the id "fname" will be labeled with the text "First Name:"

The advantages to using the <label> tag to specify text for form elements as opposed to just including that text next to the form elements include making a form accessible to screen readers and making form elements easier to access. In the above example, try clicking on the text and notice how the textbox becomes active. Instead of clicking inside the form element to access it you can just click on the text associated with it to access it.

For more information on the <label> tag, read our HTML form labels tutorial.

© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information