{"id":2840,"date":"2025-11-17T15:43:35","date_gmt":"2025-11-17T20:43:35","guid":{"rendered":"https:\/\/it.rutgers.edu\/digital-accessibility\/?page_id=2840"},"modified":"2025-12-03T21:57:40","modified_gmt":"2025-12-04T02:57:40","slug":"headings","status":"publish","type":"page","link":"https:\/\/it.rutgers.edu\/digital-accessibility\/accessible-web-content\/headings\/","title":{"rendered":"Headings"},"content":{"rendered":"
\n\n
\n \n
\n
\n
\n
\n\t\t\t\t

Headings<\/h1>\n\n<\/div>\n\t\t\t\t
<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n\n<\/div>\n\n <\/section>\n\n\n
\n\n
\n \n

Headings are important, as they create a structure that allows screen readers to navigate your site. They also improve the usability of your site, making it easy for viewers to find the information they need.<\/p>\n

Appropriate use<\/strong><\/h2>\n

Code example:<\/strong>\u00a0You should use the appropriate heading tag, as outlined below. You can style these in your .CSS file to adjust the look and feel of each heading level.<\/p>\n

\r\n  <h1> Main Topic <\/h1>\r\n<\/code><\/pre>\n
Appropriate nest headings<\/strong>: Each heading should be appropriately nested as in the example below, following a logical order.<\/p>\n
\r\n<h1> Main Topic <\/h1>\r\n  <h2> Comparison <\/h2>\r\n      <h3> Reason 1 <\/h3>\r\n      <h3> Reason 2 <\/h3>\r\n  <h2> Contrast <\/h2>\r\n\r\n<\/code><\/pre>\n
Use concise language:<\/strong>\u00a0It is important as you label your headings to use concise language. For example, instead of a section being titled \u201cHow Students can enroll in our summer camp program\u201d you can reword this to \u201cEnrolling in Summer Camp.\u201d<\/p>\n
How to test for compliance<\/strong><\/h2>\n
We recommend using the\u00a0Skip to Headings browser extension<\/a>\u00a0on Google Chrome. This will allow you to visually see the heading structure on your page.<\/p>\n
Common mistakes<\/strong><\/h2>\n
Empty headers:<\/strong>\u00a0A common mistake occurs when a heading is deleted in a content management system, but the formatting remains. This leaves behind an empty heading, which can appear as \u201c[Empty Text Content]\u201d when using the Skip to Headings plugin.<\/p>\n
\"\"<\/figure>\n
If you click on the empty link (in the Skip to Headings plugin) it will take you to that spot on the page, where you can view the code. It will likely look like the following:<\/p>\n
\r\n<h2>  <\/h2>\r\n<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor\r\nincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud\r\nexercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <\/p>\r\n<\/code><\/pre>\n
Improperly nested headings<\/strong><\/h2>\n
Using the plugin you can also see where you may have improperly nested headings, for example going from H1 to H3.<\/p>\n
Other resources<\/strong><\/h2>\n