Support Centre

Create and tag headings and titles for accessibility

Renée Meloche
Renée Meloche
  • Updated

Headings guide readers by creating an overview of the structure of a document, marking different sections and subsections, and highlighting their content. Readers use these markers to navigate long or content-dense documents more easily and to determine what to expect in that section.

How do I mark headings or other text?

Use text tags in Venngage's upgraded Editor to indicate whether a text box contains:

  • Heading (indicate level with number: H1, H2, H3, H4, H5 or H6)

  • Paragraph (P)

Select the text box you want to tag on your design canvas.

Click the "tag" icon at the far right end of the top toolbar to bring up the Text Tag menu, pictured here:

Screenshot 2023-10-23 at 11.32.17 AM.png
 

Select the text tag you'd like to use. In the picture above, the text "Ally" is selected and tagged as "H2", which is appropriate since it appears as a header above a paragraph of text, but isn't the title of the document.

Use the tag "P" for paragraph text, that is, any sentence or paragraph of text that represents the content of a section rather than a defining title.

 

A handy visual guide to text tag hierarchy

Blank (1).png
  • H1: The top block, with light blue lettering on a navy blue background, reads "Guide to Text Tags". This text is written in the largest font. It should be tagged as "Title", as it appears at the top of the page and summarizes the content below.

  • H2: The second block contains the first heading (H2), "What constitutes a heading?" in black text on an orange background. The font size is slightly smaller than the title. It should be tagged as "H2", as it is the first heading and relates to the content in the first paragraph.

  • P: In the third text block, several sentences appear in dark grey lettering on a light orange background. The font size is the smallest, relative to the title text and other headings. This text should be tagged "P" for paragraph.

  • H3: The second heading (H3) appears below the first paragraph, in black lettering that reads, "Heading Hierarchy". This font is slightly smaller than H2 but otherwise styled the same way. Because it is smaller, and it relates to the content in the paragraph below it, it should be tagged "H3".

    • NOTE: You can use different heading tags as it suits the content and headings in your document. From the Text menu in the left sidebar of the Editor, you can choose from different pre-styled heading levels.

  • P: In the final section of text in the third block, two sentences appear in dark grey lettering underneath H3 (the third heading). The size, color and font face are consistent with the other paragraph styling, and should be tagged as "P" for paragraph.

 

How do I use Venngage's Accessibility Checker to check my text tags?

Click on File at the top of the Venngage Editor and select Accessibility Check Accessibility to open the Accessibility Checker.

This will open up a panel on the right that gives 11 categories of accessibility for you to assess, and guidance for meeting accessibility requirements under each "issue" that is flagged in the checker.

 

Collapse or expand each section by clicking on it; in the GIF above, the user collapses the "Document Title" section and scrolls down to the "Headings" section, which they expand.

Expand the Headings section. This will auto-select the text boxes on the design, and make their respective text tags visible in the top-left corner of the text box, as pictured in the GIF below:

 

Check the text tags on each text box in your design. Select each text box individually to bring up the text tag tool in the top toolbar and tag it correctly.

 

Click the checkmark in the Accessibility panel at the bottom of the Headings section when you're done to verify that your "Heading tags follow best practices".

 

Why are headings important?

According the success criteria outlined by the Web Content Accessibility Guidelines, correctly used headings will:

  • Allow readers using a screen reader to understand when they have moved from one section of a document or webpage to another, and help them understand the purpose of each section;

  • Enable people with learning disabilities or other cognitive difficulties to understand the overall organization of the content in a document or webpage more easily;

  • Allow readers to navigate a document or page using keyboard focus controls (another accessibility tool);

  • Enable you or other document authors to update or amend content more easily under distinct sections without searching the entire document's contents.

Quick tips for ensuring your headings are accessible

  • Indicate headings and other text in your design by using text tags, which are legible to assistive technology tools like screen readers.

  • Use the Accessibility Checker in the Venngage Editor to assess the accessibility of your text tags.

 

Venngage Logo

 

Start designing!

Curious about upgrading? Compare our plan features side by side.

 

Was this article helpful?

2 out of 2 found this helpful

Have more questions? Submit a request