Thanks, hope you're heading off for a nice vacation.

 

Janet

 

 


From: UGA Web Accessibility Group [WAG@LISTSERV.UGA.EDU] on behalf of Judy L James [jjames@UGA.EDU]
Sent: Wednesday, August 03, 2011 1:12 PM
To: WAG@LISTSERV.UGA.EDU
Subject: Re: Accessible Heading Structure

Thanks Janet.  I’m sorry I couldn’t make it today. Headed out of town and wrapping up last minute tasks.

Judy

 

 

Judy James, Senior HR Manager

Human Resource Development Center

The University of Georgia

315 S. Thomas St.

Athens, GA 30620-4302

706-542-7062 (main)

706-542-7363 (office)

706-542-6495 (fax)

http://www.hr.uga.edu/careerdev/career.html

 

 

 

From: UGA Web Accessibility Group [mailto:WAG@LISTSERV.UGA.EDU] On Behalf Of Janet Sylvia
Sent: Wednesday, August 03, 2011 1:11 PM
To: WAG@LISTSERV.UGA.EDU
Subject: Accessible Heading Structure

 

Greetings WAG,

 

Regarding the question at today's meeting about proper use of h1...h6 header tags on websites, below are great tips from the W3C WCAG 2.0 techniques web page. 

 

Note: you can check your website headings using the Web Accessibility Toolbar (for Opera and IE).  On the Toolbar select Structure then: Headings (for an inline display of all headings for your webpage); Heading Structure (to open a new window with only the headings on your webpage); or Heading Count (to receive a pop-up window with the total number of headings by type).

 

Quoted from "Quick tips for accessible headings":

 

All visual headings in web pages must have a heading structure applied using H1 to H6.

  1. Headings must be used to describe a page’s structure and not used for visual effects.
  2. Pages should only have one main heading, H1, which is the main title of the page and should be positioned at the start of unique page content.
  3. Headings are like a contents overview of a page. Sub headings of the H1 must be coded as H2 and subheadings of an H2 must be coded as H3.
  4. Heading levels can’t be skipped i.e. you can’t jump from H1 to H3.
  5. Headings should not be coded around content that is by itself, they should always be followed by associated content.
  6. Headings should not be coded around form labels i.e. the text label “Search” that comes before an input field.
  7. Heading structure should be consistent throughout the site.
  8. Add in headings to break up large chunks of text.
  9. Keep headings short and succinct and therefore easy to scan and understand.

 

In general the recommended heading structure is:

H1 – page title or site title (only one per page, at most two with similar text)

H2 – navigation menu, breadcrumbs, search, error/status messages, footer navigation menu links, content section

H3 – content subsection of h2

H4 – content subsection of h3

H5 – content subsection of h4

H6 – content subsection of h5

 

 

PS: Headings can and should be used with all types of content: HTML, PDF, Word, PowerPoint, OpenOffice, etc.

 

Thanks - please feel free to share any comments or questions about headings with the listserv.

 

 

References:

From WCAG 2.0 Techniques G141: Organizing a page using headings

http://www.w3.org/TR/WCAG20-TECHS/G141

Quick tips for accessible headings

http://webarchive.nationalarchives.gov.uk/20100418065544/http://www.rnib.org.uk/wacblog/headings/quick-tips-for-accessible-headings/

 

 

Janet

 

Janet Sylvia
Digital Media Professional
OCTS-CAES
107 Hoke Smith Annex
University of Georgia
Athens, GA 30602
706-542-3936