Personal tools

Interested in disability history? Check out what happened Today in AT History!

E-Recruitment 4 - Using HTML Page Structure

From ATWiki

Jump to: navigation, search

It’s an unfortunate fact that web designers sometimes “cheat” when developing pages. It can be especially tempting to avoid proper HTML page structure when creating a new page. The default appearance of page items may not be the desired look and feel for the site, so authors may wish to rely upon images and work-arounds to achieve their goals.

While HTML can be used to adjust the appearance of content, it should be remembered this isn’t its primary purpose. It’s really about providing useful information about the content, such as which data is most important on the page, in what order should text be read, what is a list item, etc. This information is read and interpreted by an internet browser (such as Internet Explorer or Firefox), and tells the browser how to present the information. For example, the following items are all HTML “tags” used to provide information about the accompanying material:

<h6>and subtitles</h6>

When interpreted by your browser, they will look something like this:






and subtitles

It’s easy to see how useful this can be for presenting clear information. But if the look of these elements is unpleasing, designers may wish to use two problematic shortcuts. The first is substituting images for an element, such as a major heading. Here is a possible example: Example image header

An image may allow for many design possibilities, but it has serious drawbacks for usability and accessibility. First, unless alternative text is specified, the image will contain no text that is usable - for voice-output devices, for search engines like Google, or for any kind of tool that doesn’t rely upon vision. Second, even if alternative text is provided, an image can’t be adjusted in size for viewing the way properly coded text can. This will prevent users from enlarging the text at will - a feature appreciated by those with low vision as well as those who simply like to avoid eye strain.

The second work-around involves using HTML tags for purposes other than they were intended. A common example is using the font tag to enlarge and/or bold text to make a header. While the item may look like a proper header, the tag doesn’t provide the information of a header to the browser. People using non-graphic browsers and many kinds of assistive technology will have no way of knowing that the item is anything other than normal text. This is especially important because some of these users, including those who rely upon voice output browsers, often navigate through pages by moving between headers. This allows them to quickly skim the material on a page and decide what merits further attention. Similar examples of improper use of tags include the use of dash marks or an asterisk to substitute for list bullets, which should be created via proper tags such as

The irony of these issues is that Cascading Style Sheets (CSS) can be used in conjunction with proper HTML to make virtually any design wanted. CSS can be used to adjust all the following, among thousands of other uses:

  • Fonts
  • Colors
  • Backgrounds
  • Graphical bullets
  • Positioning
  • Padding
  • Indenting
  • Borders

So the bottom line is this: When creating web pages for e-recruitment, remember to use HTML to structure the page information, and CSS to provide the look and feel. If you avoid the temptation to cheat, you’ll create pages that are accessible and more usable for everyone.