Content Structure

Just as it would with a written paper, good structure helps. Below are some basic content structures that, when used properly, can assure a more useful site for all including those with disabilities.

The HTML Best Practices webpages developed by the Illinois Center for Information Technology and Web Accessibility, include additional information on web content structure and also contains examples for implementing the structural items. The HTML Best Practices areThe site was designed to give web developers the markup techniques they need to make web resources functionally accessible to people with disabilities and comply with the Illinois Information Technology Accessibility Act (IITAA) Web Accessibility Standards, Section 508 Information Technology Accessibility Standards and the W3C Web Content Accessibility Guidelines (WCAG) 2.0.

Headings

People who use assistive technologies such as screen readers are able to browse through the "sections" of a website only through the use of headings and sub-headings (h1-h6) that give an invisible structure to the page. Without headings, web resources appear as one long paragraph to screen reader users. Consequently, locating and understanding information is difficult.

How should I use headers?

  • When you structure the page with headers, start with having the same content for the page title and the H1.
  • For each of the main sections of the page, label them as H2's and subsections as H3's and each subsection under that H4 and lower as needed.

View Best Practices for Headings. for more information.

Images

When a user using a screen reader reads a web page and encounters an image, it has no idea what the image conveys or if the image is important, often times leaving the user unsure and uncertain of what they missed. By using a descriptive "alt" attribute with images, screen readers are able to know what the image was trying to convey and can more confidently browse the page.

How do I make images accessible?

  • For images on a website, best practice is to include an alternative text field with a descriptive label.

    • <img src="brilliantminds.jpg" alt="Brilliant Minds official logo"/>
  • In cases where small images are used for layout or spacing, replace the images with CSS styling so a user accessing the content with a screen reader is not confused by the image.

View Best Practices for Images for more information.

Tables

Tables are specialized HTML markup that is meant to be used only for the display of data. Tables should not be used for page layout. A table is necessary when data needs to be shown in a such a way that it interrelates. In other words there need to be two or more levels of relationship drawn between data to require the use of a table. Data that only requires a single column should be rendered as an unordered list.

It is important to differentiate between simple tables (only two or three inter-related sets of data) and complex tables (multiple inter-related sets of data) because the need for accessibility grows with the complexity of the table. Simple tables will not necessarily require header attributes with matching ID's. The need for a summary will vary with the complexity of the table as well.

How do I make accessible tables?

  • Be sure to mark the beginning of columns and rows by using table header tags - th. This can be styled through CSS to appear as normal text
  • Data tables are easier to find for users of Screen Reader Software if they are preceded by headings. Use of headings can also supply a title and brief description of the purpose of the table
  • Tables should have a summary. The summary details the purpose of the table
  • While not always required, the caption attribute is recommended because it acts like a title for the table if you haven't used headings
  • Complex tables require the use of "header" attributes (different than th tags) and ID elements in order to draw a correlation between column titles and rows.This can become quite involved. Please see this W3C Note for some very helpful information.

View Best Practices for Data Tables for more helpful information.

Forms

When a sighted user fills out a form, they go through the process of filling in a field, tabbing over to the next field and filling it out until the form is completed. This is easy for visual users since the labels are placed in a way that they seem to be linked to each of the fields. For someone who is blind and/or using a screen reader, the visual layout will not be helpful and though they can see each of the input fields, they might not know what label is associated with that field.

How do I correctly implement forms?

  • Put labels adjacent to their controls.
  • Follow the HTML best practices for labeling form controls of the following types:
    • For input types: text, password, checkbox, radio, file, select and textarea elements - use the <label> element

      • <label for="first">First Name </label> <input id="first" type="text" name="textfield33" size="12"/>
    • For input types: button, submit, reset - use the value attribute
      • <input type="submit" name="gobutton" value="Go" id="go"/>
    • For input type: image - use the alt attribute
      • <input type="image" scr="signup.gif" alt="Click here to signup"/>
  • Sets of related form information should be grouped together using the fieldset and legend elements.

View Best Practices for Forms for more information.

Category: