One of the most important things you can do when creating your content with accessible web standards in mind is to ensure that the resulting document outline maintains a natural order. This means that in general, your headings should follow a natural progression from h1<\/code> for the most important content on the page down to h6<\/code> for detail-oriented content of lesser importance. <\/p>\n\n\n\n
The details pop up in the top toolbar can provide valuable information pertaining to the outline of your document. It provides an alert if you have:<\/p>\n\n\n\n
\n
Skipped a heading level accidentally (or for visual purposes)<\/li>\n\n\n\n
Placed a higher-order heading inside of a lower order.<\/li>\n<\/ul>\n\n\n\n<\/figure>\n\n\n\n
Highlight styles<\/h2>\n\n\n\n
You can apply a highlight color to any h1<\/code> through h4<\/code> tag using the block level toolbar. <\/p>\n\n\n\n\n
Highlight the words within the header that you want to highlight.<\/li>\n\n\n\n
Click the dropdown arrow in the block toolbar next to the link icon.<\/li>\n\n\n\n
Within that dropdown, select the highlight style you’d like to apply.<\/li>\n<\/ol>\n\n\n\n
To cancel an applied highlight, use the same procedure above and deselect the currently applied highlight from the list above. Be sure to deselect or “clear” the current highlight color before applying a new highlight color to the same text. <\/p>\n\n\n\n<\/figure>\n\n\n\n
Colors<\/h2>\n\n\n\n
The heading block has two basic color options available: ASU White and ASU Gray 7 (Black).<\/p>\n\n\n\n
The color picker also contains ASU Gold as an option for text color. Whole sections of gold text are not permitted within the brand standard and also violates accessibility contrast standards when used incorrectly. Please use caution with this option. <\/p>\n\n\n
<\/span><\/div>
\n\n
The gold text option is only included to allow a user to turn a link from the default maroon color to ASU Gold when it is on a black background. The option to transform a whole block of text to ASU Gold will be removed from the editor with future improvements to WordPress typography defaults.<\/p>\n\n<\/div><\/div><\/div>\n\n\n
Use the color picker in the right sidebar to transform the color of the whole paragraph block into the desired color.<\/p>\n\n\n
<\/span><\/div>
\n\n
The List View menu can be helpful to select a block of text that has accidentally been transformed into a black-on-black or white-on-white text. Locate and click on the correct block using that tool and then transform the block to the correct color.<\/p>\n\n<\/div><\/div><\/div>\n\n\n
![\"The](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/document-outline-errors.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/comm.engineering.asu.edu\/pitchfork\/wp-content\/uploads\/sites\/2\/2022\/07\/apply-highlight-to-headline.png\")
<\/figure>\n\n\n\n