{"id":1067,"date":"2019-04-11T15:31:41","date_gmt":"2019-04-11T19:31:41","guid":{"rendered":"https:\/\/wordpress.ocps.net\/presenceblog\/?p=1067"},"modified":"2019-06-26T09:06:40","modified_gmt":"2019-06-26T13:06:40","slug":"what-to-use-when-replacing-header-tags","status":"publish","type":"post","link":"https:\/\/wordpress.ocps.net\/presenceblog\/what-to-use-when-replacing-header-tags\/","title":{"rendered":"What to Use When Replacing Header Tags"},"content":{"rendered":"

How to Replace Header Tags Used only for Formatting<\/h2>\n

NOTE:\u00a0 HEADING 1 (h1) should never be used in OCPS content pages because the page name itself is assigned to HEADING 1 and there can only one instance of HEADING1 on a page)<\/em><\/strong><\/p>\n

In a prior post, I covered the accessibility issue of not using header tags to simply format text. Header tags should only be used to define sections of text. Screen Readers treat headers as a table of contents that it can read to the visually challenged so they can quickly determine where in a content area they can find the information they want without having to listen to the entire document being read to them. The natural question then is if headers cannot be used to format text, especially in short content areas for which true headers would be over-kill, what should the web author use? First off, all paragraphs, even single lines should begin with a paragraph tag. Then using a combination of font size settings and the tag for bold text, you can generate the same visual effect as using the header tags. The following figure shows an example of this:<\/p>\n

\"\"<\/p>\n

And to prove that this was not done with header tags, here is the code:<\/p>\n

<p><span style=”font-size: 26px;”><strong>Recommended for h1: This is a bold 28px<\/strong><\/span> <\/p>
\n<\/span><\/p><\/blockquote>\n

<p><\/p>
\n<\/span><\/p><\/blockquote>\n

<p><span style=”font-size: 22px;”><strong>Recommended for h2: This is a bold 22px<\/strong><\/span> <\/p>
\n<\/span><\/p><\/blockquote>\n

<p><\/p>
\n<\/span><\/p><\/blockquote>\n

<p><span style=”font-size: 18px;”><strong>Recommended for h3: This is a bold 18px<\/strong><\/span> <\/p>
\n<\/span><\/p><\/blockquote>\n

<p><\/p>
\n<\/span><\/p><\/blockquote>\n

<p><span style=”font-size: 14px;”><strong>Recommended for h4: This is a bold 14px<\/strong><\/span> <\/p>
\n<\/span><\/p><\/blockquote>\n

<p><\/p>
\n<\/span><\/p><\/blockquote>\n

<p><span style=”font-size: 11px;”><strong>Recommended for h5: This is a bold 11px<\/strong><\/span> <\/p>
\n<\/span><\/p><\/blockquote>\n

Note that by using this type of formatting of text, you can create “visual headers” for pages and sections of pages without having to be concerned about the hierarchy requirements of regular header tags which must follow these rules:<\/p>\n

<h1> can only be followed by <h1> or <h2>
\n<\/span><\/p>\n

<h2> can only be followed by <h1>, <h2> or <h3>
\n<\/span><\/p>\n

<h3> can only be followed by <h1>, <h2>, <h3> or <h4>
\n<\/span><\/p>\n

<h4> can only be followed by <h1>, <h2>, <h3>, <h4> or <h5>
\n<\/span><\/p>\n

<h5> can only be followed by <h1>, <h2>, <h3>, <h4>, <h5> or <h6>
\n<\/span><\/p>\n

<h6> can only be followed by <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
\n<\/span><\/p>\n

You cannot jump into the middle of the hierarchy.
\n<\/span><\/p>\n

How These Errors Appear in Your Accessibility Report:<\/h2>\n

If you see any of the following errors in your Accessibility report section, it probably means that you have one or more of the above heading misuse errors.<\/p>\n

All h1<\/span> elements are not used for formatting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

All h2<\/span> elements are not used for formatting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

All h3<\/span> elements are not used for formatting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

All h4<\/span> elements are not used for formatting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

All h5<\/span> elements are not used for formatting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

All h6<\/span> elements are not used for formatting\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

The header following an h1<\/span> is h1<\/span> or h2<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

The heading following an h2<\/span> is h1<\/span>, h2<\/span> or h3<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

The heading following an h3<\/span> is h1<\/span>, h2<\/span>, h3<\/span> or h4<\/span>\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

The heading following an h4<\/span> is h1<\/span>, h2<\/span>, h3<\/span>, h4 <\/span>or h5<\/span>\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

The heading following an h5<\/span> is h1<\/span>, h2<\/span>, h3<\/span>, h4<\/span>, h5<\/span>, or h6<\/span>\u00a0\u00a0\u00a0\u00a0– Section 2.4.6 of the WCAG<\/p>\n

Other related errors are:<\/h2>\n

List items must not be used to format text\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 3.2.4 of the WCAG<\/p>\n

This error often occurs when a list has only a single item and should instead be formatted as a paragraph<\/p>\n

All p <\/span>elements are not used as headers\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0– Section 1.3.1 of the WCAG<\/p>\n

This error creates a bit of a conundrum because it asks you to look if there are other presentational elements (<strong>, <span>, <em>, etc) within the paragraph element) then it should be a header instead. This would seem to not apply when it is just a couple of words that are modified by <strong> or <em> or <span>, but rather when then entire text string between the <p> and <\/p> is being modified. However, the usefulness of headers just to format text in a small content area and thus forcing large fonts that may look out of place presents a challenge to the page designer. (Strictly speaking, the examples above probably would be headers, but remember that if you use headers, there is a hierarchy.)<\/p>\n","protected":false},"excerpt":{"rendered":"

How to Replace Header Tags Used only for Formatting NOTE:\u00a0 HEADING 1 (h1) should never be used in OCPS content pages because the page name itself is assigned to HEADING 1 and there can only one instance of HEADING1 on a page) In a prior post, I covered the accessibility issue of not using header … <\/p>\n

Continue reading “What to Use When Replacing Header Tags”<\/span><\/a><\/p>\n","protected":false},"author":8,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[28,87],"tags":[48],"class_list":["post-1067","post","type-post","status-publish","format-standard","hentry","category-news-related-to-ada-and-accessibility","category-monsido-news","tag-accessibility"],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":1056,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/accessibility-tips-for-april-3-2019\/","url_meta":{"origin":1067,"position":0},"title":"Accessibility Tips for April 3, 2019","author":"Carlos Hernandez","date":"April 3, 2019","format":false,"excerpt":"Never Link to Microsoft Word, Excel, or PowerPoint Files All Microsoft Word, Excel, and PowerPoint documents (which I refer to as Microsoft source files) should be saved as a PDF file. These should never be directly uploaded to your website because not all users may be able to download these\u2026","rel":"","context":"In "Tips\/Tricks"","block_context":{"text":"Tips\/Tricks","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-showing-a-specific-tip-or-trick-related-to-web-sites\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":412,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/formatting-within-a-content-portlet\/","url_meta":{"origin":1067,"position":1},"title":"Formatting Within a Content Portlet","author":"Carlos Hernandez","date":"January 11, 2018","format":false,"excerpt":"Let's say you have a document with the following text in the main Page Content area (although this technique will work in any content portlet) which you first directly typed your text into the design area. Initially, all of the text is entered as Normal text which is a predefined\u2026","rel":"","context":"In "How-To"","block_context":{"text":"How-To","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/post-that-explains-how-to-perform-a-specific-activity\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1132,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/ada-and-tables\/","url_meta":{"origin":1067,"position":2},"title":"ADA and Tables","author":"Carlos Hernandez","date":"May 8, 2019","format":false,"excerpt":"A few quick guide to ADA requirements for tables: Every table must have a caption (title). In HTML, it looks like this:
Cups of coffee consumed by each teacher per week<\/caption> \u00a0\u00a0\u00a0\u00a0This is not the same as text that might appear above the table. \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Cups of coffee consumed by\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":875,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/schoolmessenger-makes-it-easy-to-build-ada-compliant-and-responsive-tables\/","url_meta":{"origin":1067,"position":3},"title":"SchoolMessenger Makes It Easy to Build ADA Compliant and Responsive Tables","author":"Carlos Hernandez","date":"November 8, 2018","format":false,"excerpt":"In this post, I am going to examine several issues related to using tables on your SchoolMessenger web pages. First some Do's and Don'ts. Do's Use tables to display numeric or alphanumeric data Provide a table title or caption to identify the table especially when referenced from accompanying text. Provide\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1316,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/a-couple-of-table-issues\/","url_meta":{"origin":1067,"position":4},"title":"A Couple of Table Issues","author":"Carlos Hernandez","date":"October 1, 2019","format":false,"excerpt":"In this post, we will look at a couple of table issues and the corresponding Monsido Issues that they may raise. First, you need to understand that there are essentially two types of tables possible, layout tables and data tables. Layout Tables Web designers used layout tables from the early\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":781,"url":"https:\/\/wordpress.ocps.net\/presenceblog\/tables-have-accessibility-requirements-too\/","url_meta":{"origin":1067,"position":5},"title":"Tables Have Accessibility Requirements Too","author":"Carlos Hernandez","date":"September 12, 2018","format":false,"excerpt":"Tables have long been a popular way of displaying related information that would be difficult to read if you provided the same information in paragraph form. Tables imply a structure to the data and thus are visual. Each row of the table represents an instance of whatever you are listing\u2026","rel":"","context":"In "ADA News"","block_context":{"text":"ADA News","link":"https:\/\/wordpress.ocps.net\/presenceblog\/category\/portal-related-news\/news-related-to-ada-and-accessibility\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1067","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/comments?post=1067"}],"version-history":[{"count":3,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1067\/revisions"}],"predecessor-version":[{"id":1185,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/posts\/1067\/revisions\/1185"}],"wp:attachment":[{"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/media?parent=1067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/categories?post=1067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.ocps.net\/presenceblog\/wp-json\/wp\/v2\/tags?post=1067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}