Headings, subheadings, and other page structural elements help organize your content and are important elements for usability and accessibility. Many sighted users skim a web page by the structural elements, and screen readers use hierarchical and structural elements such as headings and subheadings as navigational tools.
Don’t just visually manipulate text by increasing the font size or making it bold to appear as a heading. Make sure the heading is properly marked up with heading tags or is designated as a heading in a rich text editor.
I am NOT a Heading
Though this looks like it could be a heading, it was styled by increasing the font size and font weight:
<p style="font-weight: bold; font-size: 22px;">I am NOT a Heading</p>
I AM a Heading
This heading is marked up using heading tags:
<h4>I AM a heading</h4>
Heading levels range from 1 to 6. Heading Level 1 is reserved for the site title and is generally only used once. Heading Level 2 is generally reserved for the title of the web page. The remaining sub level headings are used to organize the rest of the information in a hierarchy. Sub heading levels can be repeated but don’t skip levels.
<h3>Structure & Headings</h3>
<h4>How to Use Headings</h4>
<h5>Heading Tags</h5>
<h5>Heading Order</h5>
In a web page, a list can be ordered or unordered. Use unordered lists for bullet point list items and ordered lists for numbered list items. Lists can be marked up either in HTML or by using the rich text editor.
When a table has the proper HTML markup, a screen reader user can navigate through the data one cell at a time along with the associated column and row headers.
An accessible data table needs to have designated row and/or column headers. In HTML markup, the <th> element is used for table header cells along with the <scope> attribute (the value of scope can be either “col” or “row”). Headers for rows and columns can also be designated in the table properties of a rich text editor.
Note: Table headers should never be empty. This is particularly of concern for the top-left cell of some tables.
Read more about how to create accessible tables from WebAIM.
Adding a caption to a table can be a quick way to identify the information or topic of the table and will be read by a screen reader. Adding a caption can be especially helpful if your web page contains more than one table.
Alternative text makes images and non-text material accessible. Alt Text is 1.) read by screen readers, 2.) will appear if the image fails to load, and 3.) is indexed by search engines. Good alternative text should give both semantic and descriptive meaning to images.
Alternative text can be presented in two ways:
alt attribute of theimg element.alt attribute of the img element.
This image of students in the Archives Reading Room could have an alt attribute that looks like:
<img alt="students working in the archives reading room">
If the above image didn't load in a browser, the alt text will appear instead. It's also what users will hear from a screen reader.
students working in the archives reading room
The content of the image could also be described within the context of the web page or with a caption.
Students working in the archives reading room.
Alternative text is about more than just the alt attribute, but every image should have an alt attribute, even if it's alt="" (sometimes called "null" alternative text).
When deciding whether you need to write text in the alt attribute or use "null" alt text, ask: Does this image contain information that is not conveyed in its surrounding context?
Yes
Use the alt attribute to convey the content of the image in terms of its function in the web page.
No
Use "null" alt text:
<img alt="">
Going back to Ex. 3 above, the content of the image was already contained in a caption, and so the alt text should be null ("").
Students working in the archives reading room.
<img alt="">
Approaches to writing good alt text can change based on the broader context of the web page. See more alt text examples from WebAIM, including times when the alt text should be null. Visit W3.org for more Tips & Tricks to writing alt text.
In LibGuides, you can add alt text in the 'Image Properties' of the rich text editor.
Add the alt text in the 'Alternative Text' field. If the image is decorative or explained in the context of the web page, leave this box empty. LibGuides will automatically include a null alt attribute ( <img alt=""> ) if the Alternative Text box is left blank.
Right-click an image and select 'Edit Alt Text...' in the drop-down menu.
If the image is decorative or is explained in the context of the document, you can select 'Mark as Decorative' to give the image null ("") alt text.
Right-click the image and select 'Edit Alt Text...' from the drop-down menu.
Add the Alt Text. If the image is decorative or the information in the image is already conveyed in the surrounding context, you can select 'Mark a Decorative' to give the image null ("") alt text.
Right-click on the image and select 'Alt Text' from the drop-down menu.
Write the alt text in the Description box, not the Title box. If the image is decorative or contains information that is already conveyed within the context of the document, you can add closed quotes ("").
Open the document in Adobe Acrobat and select 'More Tools' from the Tool bar on the right side of the screen.
Select 'Accessibility' under the Protect & Standardize category.
Select the 'Tags' option in the Navigation panes list on the left side of the screen. (The navigation pane might appear minimized).
Navigate down the Tag tree to the image. In Adobe Acrobat, images are called Figures.
Right-click 'Figure' in the Tag tree and choose the 'Properties' option in the drop-down menu.
Add the alt text to the Figure in the 'Alternative Text' field. If the image is decorative or contains information that is already conveyed in the surrounding context of the image, you can add closed quotes ("") to give the image null alt text. Select 'Close' to save the changes.
Unfortunately, Adobe Illustrator does not allow you to add alt text to images. If a document made in Adobe Illustrator is exported as a PDF document, see the instructions for How to Add Alt Text in Adobe Acrobat.
If you are adding alt text to an image using HTML, this is what the alt attribute will look like in the img element:
<img src="students_working.jpg" alt="students working in the archives reading room" width ="300px" height= "225px" />
See the HTML alt text tutorial from W3schools.
Although some users will read all the text on a web page, many will not. Screen reader users and keyboard users, for example, might prefer to navigate through a web page by cycling through the links in a list or sequence. So, it's important that the link text alone should convey the function and purpose of the link.
Not Descriptive Link Text:
Read more about how to write meaningful link text.
Good Descriptive Link Text:
Read more about how to write meaningful link text.
The contrast between the text and background color is another important accessibility standard that needs to be checked. The WAVE Tool will check for contrast errors on an existing webpage, but while you are choosing colors for a page you are building, make sure your colors will pass the test.
The WAVE Tool is a free community service provided by WebAIM to assess the accessibility of web pages.
While WAVE is most effective when used by someone knowledgeable about web accessibility, people who are not experts can also benefit from WAVE.
It can help you find:
This video includes an overview of the WAVE Tool and how to use it with an example web page.
After creating your accessible web page, consider using a screen reader to assess and experience it the way a screen reader user would.
NVDA is a free screen reader software that anyone can download and use. It may take a little time getting the hang of it, but this tutorial for using NVDA from WebAIM will walk you through the steps.
Design & Develop Tutorials | w3.org
CSS and Accessibility | WebAim
Web Accessibility Principles | WebAim
HTML and Accessibility | W3Schools
HTML Tables | W3Schools
Tables Tutorial | w3.org
Images Tutorial | w3.org
LibGuides Accessibility Guide | Illinois Library
Best Practices for Building LibGuides | Springshare
Alt Text Techniques | WebAim