Headings
Purpose of Headings
Headings in a document are not meant to assist formatting, but to provide information on the structural hierarchy of a document. It is important to use them appropriately to convey document structure, since some users skim through a document by navigating its headings.
Proper Structure
There are six levels of headings (Heading 1 up to Heading 6). Normally, as the heading number get s bigger, the font gets smaller, indicating the proper structure of headings. Having in mind that Heading 1 is larger than Heading 2 and Headi ng 2 is larger than Heading 3 and so on, you always have to include the smaller heading inside the larger one and in the right numerical order.
This is a nesting heading structure example:
Heading One Heading Two Heading Three Heading Three Heading Two Another Heading One
You should think of headings as sections and subsections in content.
Let’s say you want to create a document about recipes. Then you could have this heading structure:
John’s Recipes (Heading One) Main Dish (Heading Two) Burgers (Heading Three) Casserole (Heading Three)
Proper format
Headings should be descriptive.
- Identify the subject of the Web page
- Make sense when read out of context, for example by a screen reader or in a site map or list of search results
- Be short
Check that each heading is preceded by two blank lines and followed by one blank line.
A blank line contains any number of non-printing characters, such as space or tab, followed by a new line.
How to insert headings
Probably when adding new content, this is done through an editor that has already formatting options for you. In this case the steps to convert a text into heading are these:
- Select the text that you want to be converted into a heading.
- Select from a dropdown select field the style you need.
If the drop down select field that allows you to choose heading is not visible, try to find a button that will expand your current tools.
Let’s see how this is done in two popular control management systems:
Wordpress
First select the text you are going to convert into a heading.
In Wordpress, the button to expand the tools and reveal the headings select field is called "Kitchen Sink". You can click it or just use the keyboard shortcut "Alt + Shift + Z".
Then you can select headings from a drop down select field, which usually has as default value “Paragraph”.
Joomla
In Joomla, the select field is already there. Just select your text and choose the heading you need.
When to use headings
To provide better readability, accessibility and structural hierarchy of your document, you should always use headings, as long as you are using them properly.
Remember that headings should correspond to each section/subsection.
Quick Tips for Developers
Here is a list of the most important tips on headings.
- All visual headings in web pages must have a heading structure applied using “h1” to “h6” tags.
- Headings must be used to describe a page’s structure and not used for visual effects.
- Headings should not be coded around content that is by itself, they should always be followed by associated content.
- Headings should not be coded around form labels i.e. the text label “Search” that comes before an input field.
- Heading structure should be consistent throughout the site.
- Keep headings short and succinct and therefore easy to scan and understand.
A simple example for coding nested headings:
<h1>Cooking techniques</h1>
...
<h2>Cooking with oil</h2>
...
<h3>Sautéeing</h3>
...
<h3>Deep frying</h3>
...
If you have sidebars on your website, it’s a good practice to use H2 tag for the title of the content inside those sidebars.
Content Consistency
Presentation Consistency
When content is presented with consistency, the transition from page to pagebecomes smooth enabling the user to navigate easily and quickly.
In order to ensure a uniform site, you should:
- Establish a consistent visual presentation from page to page.
- Maintain a constant sequential order.
- Maintain language and terminology consistency.
- Maintain consistency in the location of navigation controls.
Navigation Consistency
The navigation mechanisms should be presented in a uniform, well-structuredand logical order so as to avoid confusion or disorientation.
Navigation mechanisms direct the user to key sections or pages of the site. These mechanisms should be designed to clearly state their destinations and to indicate the current position of the user. They should also remain consistent visually and structurally from page to page.
Breadcrumbs
Breadcrumbs provide a trail for the user to follow back to the starting/entry point of a website and an indication of where they are on the site.
Example of a simple breadcrumb:
Home → Section → Subsection
Colors
If the information is conveyed through color differences in an image (or other non-text format), the color may not be seen by users with color deficiencies. In this case, providing the information conveyed with color through another visual means ensures users who cannot see color can still perceive the information.
People with partial sight often experience limited color vision, and many older users do not see color well. In addition, people using text-only, limited color or monochrome displays and browsers will be unable to access information that is presented only in color.
Color for Links
Blue colored links (#3333FF) in black text is recommended, because it is affected very little by red and green color blindness like Protanopia and Deuteranopia.
For example, this is a blue link in black text.
Text Alternatives for Colored Content
Ensure that when color differences are used to convey information, the information conveyed by the color differences are also conveyed explicitly in text.
Here are some examples to make you understand better the concept.
A form with a green submit button
An online loan application explains that green buttons advance in the process and red buttons cancel the process. A form contains a green button containing the text "Go".
The instructions say "Press the button labeled Go to submit your results and proceed to the next step."
A color-coded schedule with icons
The schedule for sessions at a technology conference is organized into three tracks. Next to the title of each session is an icon consisting of a colored circle with a number in the middle showing what track it belongs to: blue circles with the number 1 represent track 1, yellow circles with the number 2 represent Track 2, and green circles with the number 3 represent Track 3.
Each icon is associated with a text alternative reading "Track 1", "Track 2", or "Track 3" as appropriate.
Contrast
Contrast between background and text
Make sure that users can read text that is presented over a background by providing high contrast between the text and the background. Depending on the text size and purpose, the minimum contrast ratio is different.
Let’s check some examples.
Recommended contrast ratio of at least 4.5:1 for normal text.
Normal Text: Less than 18 pixels, not bold or Less than 14 pixels, bold
Minimum contrast ratio on a white background.
( Color used: #767676, Size: 14 pixels, Font weight: Normal )
Minimum contrast ratio on a white background.
( Color used: #767676, Size: 11 pixels, Font weight: Bold )
Recommended contrast ratio of at least 3:1 for large text.
Large Text: At least 18 pixels, not bold or At least 14 pixels, bold
Minimum contrast ratio on a white background.
( Color used: #959595, Size: 18 pixels, Font weight: Normal )
Minimum contrast ratio on a white background.
( Color used: #959595, Size: 14 pixels, Font weight: Bold )
Flashing Content
Avoid flashing at rates that are known to cause seizures if the flashes are bright and large enough. Since some users may be using screen enlargers, this technique limits the flashing of any size content to no more than three flashes in any 1-second period.
Web pages should not contain anything that flashes more than three times in any one second period.
Procedure
Check to see to see that content does not violate the general flash and/or red flash threshold, by using a tool which determines that neither the General Flash nor Red Flash threshold were exceeded.
Example
An animation of a thunderstorm shows six flashes of lightning. The flashes are so fast and large that the general flash threshold is violated when tested with a flash analysis tool.
The animation is modified to create a short pause after each pair of lightning flashes. After the changes are made, the animation does not violate the general flash threshold.
Background Audio
Ensure that any non-speech sounds are low enough that a user who is hard of hearing can separate the speech from background sounds or other noise foreground speech content.
People who are hard of hearing often have great difficulty separating speech from background sound.
Low or No Background Audio
For prerecorded audio-only content that (1) contains primarily speech in the foreground, (2) is not an audio CAPTCHA or audio logo, and (3) is not 9 vocalization intended to be primarily musical expression such as singing or rapping, at least one of the following is true:
- No Background: The audio does not contain background sounds.
- Turn Off: The background sounds can be turned off.
- 20 dB: The background sounds are at least 20 decibels lower than the foreground speech content, with the exception of occasional sounds that last for only one or two seconds.
Per the definition of "decibel" background sound that meets this requirement will be approximately four times quieter than the foreground speech content.
