Support Centre

Search

Create and tag headings and titles for accessibility

Renée Meloche
Renée Meloche
  • Updated
Available on the following Venngage subscription plans: Premium, Business and Enterprise.

Headings, titles and subtitles 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:

  • Title

  • 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:

A text box is selected on a design canvas in the Venngage Editor. In the top toolbar above the canvas, the icon of a tag is selected and a menu titled 'Text Tag' is visible underneath it, with a list of text tags (as written above). The tag 'H1' is selected, with a checkmark next to it. The tag icon in the toolbar and the Text Tag menu are highlighted by a red box added to the image.
 

Select the text tag you'd like to use. In the picture above, the text "Microlearning Objectives (MLO)" is selected and tagged as "H1", which is appropriate since it appears as a header above a paragraph of text.

A user clicks on a text box that appears on a design canvas in the Venngage Editor. With the text box selected, the user clicks on the tag icon in the top toolbar. They select the 'H1' text tag, applying it to the selected text box.

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

Three blocks of text, with brackets beside each block indicating text tags as described below. Block one: Title - Guide to Text Tags. Block 2: H1 (Heading 1) - What constitutes a heading? Block 2: P (Paragraph) - Headings are words or text that indicate a specific section of content in a document or on a webpage. Generally, headings are a level lower than a document title. The title indicates the content of the entire document; the headings are specific to each section of content within the document. H2 (Heading 2) - Heading Hierarchy. P (Paragraph) - Make navigating your document even easer for readings by using different levels of headings in your document to subdivide content. This helps break up longer paragraphs into more digestible pieces of information.

  • TITLE: 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.

  • H1: The second block contains the first heading (H1), "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 "H1", 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.

  • H2: The second heading (H2) appears below the first paragraph, in black lettering that reads, "Heading Hierarchy". This font is slightly smaller than H1 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 "H2".

    • 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 H2 (the second 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.

A user opens the Accessibility Checker panel as described above, and expands the 'Headings' section as described below.

 

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:

The user clicks on Headings in the Accessibility Checker right panel, visible over the design canvas in the Venngage Editor. The Headings section expands, and the bounding boxes become visible around all the text boxes on the design canvas, with small text-tag icons visible in the upper left corner of each.

 

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.

A user checks the text tags on each text box visible on a design canvas in the Venngage Editor, as described above, then clicks the checkmark box at the bottom of the Headings section in the right-hand Accessibility panel, as described below.

 

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?

0 out of 0 found this helpful

Have more questions? Submit a request