HTML usability and accessibility
When you build something, it cannot just look good and work ok. It has to work well, and you have to have certain things in place in case something does not go as planned.
This lesson focuses on:
- Guidelines
- Alternative image text
- Link titles
- Labels for form elements
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 in the <img> tag. The alt attribute provides alternative text to be displayed in case the image does not appear for whatever reason.
Example:
Output:
The output of the above example should 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") should appear.
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 yellow 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:
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. A title helps clarify where a link will take you. Move your mouse 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:
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 click on. In the above example, try clicking on the text and notice how the textbox becomes active. This is thanks to the <label> tag.
For more information on the <label> tag, read our HTML <label> tag lesson.
