{"id":39,"date":"2020-11-05T21:29:28","date_gmt":"2020-11-05T21:29:28","guid":{"rendered":"http:\/\/sites.msudenver.edu\/accessible-design\/?page_id=39"},"modified":"2020-11-19T17:54:14","modified_gmt":"2020-11-19T17:54:14","slug":"headings-and-point-size","status":"publish","type":"page","link":"https:\/\/sites.msudenver.edu\/accessible-design\/headings-and-point-size\/","title":{"rendered":"Headings and Point Size"},"content":{"rendered":"<p><span style=\"font-size: 14pt;font-family: verdana, geneva, sans-serif\">When formatting information organize your layout using headings and subheadings. Screen readers move through by a reading order. Beginning with, Heading 1 to Heading 2 and so on. After there are no more headings the reading order will recognize paragraphs next, and the screen reader will let the viewer know they will listen to a paragraph. Breaking up information into smaller paragraphs will aid the viewer into finding information that are looking for faster, rather than listening to a long list or a long paragraph of information.\u00a0<\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><a href=\"https:\/\/www.w3.org\/WAI\/tips\/designing\/#use-headings-and-spacing-to-group-related-content\">www.w3.org<\/a><\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span style=\"font-family: verdana, geneva, sans-serif;font-size: 24pt\"><b>Headings H1, bold, 24pt+<\/b><\/span><\/h2>\n<h4><span style=\"font-family: verdana, geneva, sans-serif;font-size: 18pt\"><b>Subheading H2-4, medium\/bold, 18pt+<\/b><\/span><\/h4>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\"><b>body copy, book\/regular, 14pt+<\/b><\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif;font-size: 14pt\">Below are visual examples of accessible and inaccessible use of headings, spacing, and font point size:\u00a0<\/span><\/p>\n<h3><span style=\"font-family: verdana, geneva, sans-serif;font-size: 18pt\"><b>Accessible<span class=\"Apple-converted-space\">\u00a0<\/span><\/b><\/span><\/h3>\n<p><span style=\"font-family: verdana, geneva, sans-serif\">Visual example<\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif\">This is a visual example of the correct usage of heading point size paired with the correct usage of body copy point size.<span class=\"Apple-converted-space\">\u00a0<\/span><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-248 size-medium\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Correct-example-1-300x225.png\" alt=\"This is a visual example of the accessible use of headings, sub-headings, and body copy point size.\" width=\"300\" height=\"225\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Correct-example-1-300x225.png 300w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Correct-example-1-768x577.png 768w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Correct-example-1.png 812w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<h3><span style=\"font-family: verdana, geneva, sans-serif;font-size: 18pt\"><b>Inaccessible<\/b><\/span><\/h3>\n<p><span style=\"font-family: verdana, geneva, sans-serif\">Visual example<\/span><\/p>\n<p><span style=\"font-family: verdana, geneva, sans-serif\">This is a visual example of the incorrect usage of no heading point size from the body copy.<span class=\"Apple-converted-space\">\u00a0<\/span><\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-249 size-medium\" src=\"http:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Incorrect-example-1-300x209.png\" alt=\"This is the inaccessible use of no headings, sub-headings, and body copy point size. \" width=\"300\" height=\"209\" srcset=\"https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Incorrect-example-1-300x209.png 300w, https:\/\/sites.msudenver.edu\/accessible-design\/wp-content\/uploads\/sites\/467\/2020\/11\/Incorrect-example-1.png 748w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When formatting information organize your layout using headings and subheadings. Screen readers move through by a reading order. Beginning with, Heading 1 to Heading 2 and so on. After there are no more headings the reading order will recognize paragraphs next, and the screen reader [&hellip;]<\/p>\n","protected":false},"author":860,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"class_list":["post-39","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/users\/860"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":0,"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"wp:attachment":[{"href":"https:\/\/sites.msudenver.edu\/accessible-design\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}