Web Accessibility: Headings and Section Titles

According to Wikipedia, Web Accessibility refers to the inclusive practice of removing barriers that prevent access to websites by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

The World Wide Web Consortium (W3C) is an international community whose mission is to lead the Web to its full potential. They have published Four Principles of Accessibility: Perceivable, Operable, Understandable, and Robust (POUR). You can read more about those standards and you can contact W3C directly for more information.

The purpose of this article is not to rehash the web accessibility standards, but more to introduce you to various website formatting conventions to propagate ease of use for all users, with or without disabilities.

A quick word about HTML tags; many were developed to provide organization of the structural hierarchy of a document. In order to facilitate accessibility as well as standards, use the tags for their intended purpose in the information hierarchy rather than for pure formatting purposes. Here are some examples with explanations; Source: WordPress.org

  1. Use various heading tags (H1, H2,…H6) as indicators of section headings and subheadings within a document. Screen readers may just scan a page for appropriate H1, H2 and H3 elements. Many sources recommend reserving H1 for the page title, H2 for major headings and H3 for major sub headings.
  2. If you need to indent text for a quote it is best to use the BLOCKQUOTE.
  3. The UL or OL tag should be reserved for actual lists containing list (LI) elements.
  4. If you indent entire pages of text as a style element, use a CSS specification and add space to the left margin or left padding.
  5. Use the P paragraph tag to separate paragraphs instead of multiple breaks (BR BR ). This encloses blocks of text within their own structural elements. Some screen readers are able to jump from P to P but not BR to BR.
  6. Do not use the FONT tags to adjust formatting of heading tags. Use cascading style sheets for specifying font color, font-size, font-face and backgrounds. This allows a user with color vision or low vision to override a problematic stylesheet with one that they prefer.

Sections, Headings and Titles

Headings provide navigable outlines of a Web page, when the page is organized into sections. Long documents are often divided into a variety of chapters, subtopics, sections, paragraphs, etc. When such sections exist, they need to have headings that introduce them. This clearly indicates the organization of the content and facilitates navigation within the content.

When headings are clear and descriptive, users can find the information they’re looking for and helps them understand the relationships between different parts of the content more easily. Descriptive labels help users identify specific components within the content. Screen readers can follow the linear progression and provide easy navigation and comprehension for the sight impaired.

Simple is sometimes better. Titles and headings do not need to be lengthy. A word or two can be appropriate, providing that users can find, navigate and understand the content.

To learn more about web accessibility please refer to the following resources.

One thought on “Web Accessibility: Headings and Section Titles”

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s