Skip to Main Content

Accessibility Best Practices

Content Markup

Content Markup

What is content markup? Unless you edit your LibGuides with an HTML Editor, you may not have to concern yourself too much with using and labeling content elements, which is basically the underlying meaning of content markup. For instance, if we dissect a basic LibGuide page, we will find links (marked with an <a> tag), headers (marked with an <h> tag), and paragraphs (marked with a <p> tag). While you may never have to actually use these tags, it's important to note how the elements you add using the Rick text Editor (the default option when you choose to edit text in a LibGuide) affect the navigation and usability of a page. One of the easiest and most important ways content can be organized to meet accessibility guidelines is by using proper heading formats.

Using Header Tags

Headings, and behind the scenes header tags (<h1>,<h2>,<h3>,etc.), "communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation." [1] Most text editors allow users to highlight text and change the font from "normal" or "paragraph", to some variation of Heading 2 through Heading 6. (Most text editors hide the Header 1 option because it is reserved for page titles. Some, like the one used in LibGuides, also hide Header 2 because they are used in page-wide navigation.)

Example:
For instance, when you choose to edit a LibGuide page, you may notice the warning at the bottom of the editor: <H1> and <H2> have been removed for WCAG2 compliance. So, what does that mean? If you open the Paragraph Format drop-down box at the top of the editor (generally labeled Normal), you will see that your Heading options begin at 3. That's because Heading 1 & 2 are used by LibGuides as a page-wide navigation.

Headings are nested by their rankings - Heading 1 (<h1>) is the highest rank and Heading 6 (<h6>) is the lowest. Heading 1 would be the title of the page, Heading 2 would be topics, Heading 3 would be subtopics, etc. This nested structuring assists screen readers to navigate the page.

Best Practice:
In the past, the Header options were often used to change the font size of text; however, this is a bad practice.  The Header tag can be set to look identical to "normal" font. Its purpose is to provide navigational assistance rather than simple visual cues. The reverse of this is also true - it is bad practice to style "normal" font to look like a header.
Tip:
This is also useful to remember when creating text documents (like Word, Google Docs, and PDFs). For example, using the build-in Styles features in Word to organize your document by Heading 1, Heading 2, Heading 3, Normal Text, etc. not only creates an accessible document, but it also makes it much easier to navigate for everyone. If Styles are used and the document is viewed with the Navigation Pane opened, users can easily jump between the various topics throughout. This is especially useful with long documents such as manuals and guides where users may want to skip directly to a point of interest.

Strong vs Bold Tags and Emphasis vs Italics Tags

This section may or may not immediately seem useful to you depending on whether or not you use HTML or a basic Text Editor to create your LibGuides. However, a basic knowledge of the differences between these elements will help you understand how screen readers process the information you include. So, what's the difference?

Strong vs Bold Tag

Visually, there is no difference between bold and strong tags, but semantically there is a difference. The bold tag (<b>) is purely a visual element and conveys the text without "any extra emphasis or importance." Whereas the strong tag (<strong>) "represents a span of text with strong importance." [5]

Emphasis vs Italic Tag

Similarly, the italics tag (<i>) and the emphasis tag (<em>) are visually identical. The italic tag is a visual element for "text conventionally styled in italics." The emphasis tag "represents a span of text with emphatic stress." [5]

Best Practice:
While Bold and Italic may look identical to their Strong and Emphasis counterparts, using bold and italic are actually accessibility errors because most screen readers will not announce these tags as items of semantic importance. It is best practice to use <strong> and <emphasis> so that all users get the same experience.
Tip:
To make things even more confusing, you may find that many text editors include the Bold and Italic options in their interface; however, if you switch to a "source" or "code" view, you may notice that bolding your text actually adds a strong tag (<strong>) while italicizing adds an emphasis tag (<em>).

Using Color

Although there is a separate tab devoted to choosing and using colors, it is important to note that color alone should not be used to delineate or emphasize text on a web page. For instance, changing the color of a text to stand out does not qualify that text to be a header. Instead, you would use a header tag (<h#>) so that a screen reader will properly interpret the text as a header.