Accessibility-Compliance
Headings
For accessibility, content should be broken up by Headings. Headings are are used for navigation by screen readers and they provide a clear structure, making it easier to scan through content for all users. If you need to style non-structural text to visually mimic a heading, please use the 'Styles' menu in the editor toolbar, e.g., 'Largest Text Size', 'Large Text Size', 'Medium Text Size', ... .
Headings should not be more than approximately 70 characters in length. If you need to bold or increase the font size for longer 'titles' or sentences, use styles. WDCE has a long title under the hero image which is using a style instead of a heading tag.
More Information about Headings (PDF)
Here are some samples of how headings should be structured
H1
H2
H3
H4
H5
H6
Main Heading (H2)
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi,
id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
Subheading (H3)
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
2nd Subheading (h4) with the Style of H5
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi.
Start of a New Section - Main Heading (H2)
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati.
Subheading for the new section (H3)
Vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.
Headings using styles
H2 normal base styles
H2 with a H4 style (Medium test size, bold, all caps)
H3 normal base styles
H3 with a H4 style (Medium test size, bold, all caps)
H3 with a H5 style (Small test size)
H3 with a H6 style (Small test size, bold)
H4 normal base styles
H4 with a H5 style (Small test size)
H4 with a H6 style (Small test size, bold)
H5 normal base styles
H5 with a H4 style (Medium test size, bold, all caps)
H6
iFrames
Here are a couple reminders for iFrames:
- For accessibility, all iFrames need a Title attribute
- In most cases you'll set the width to 100%
- All 'HTTP:' references should be removed or changed to 'HTTPS:'
- Make sure ampersands are not in your urls. Use '&' instead
- Make sure all attributes equal a value, e.g., allowfullscreen should be allowfullscreen="allowfullscreen", defer should be defer=""
- Remove frameborder="0", scrolling="no", or any other unnecessary inline styles. style="overflow: hidden;" is acceptable as well as width/height allocations (width="100%"
height="700").
Import areas are bolded
Example code with notes:
<iframe id="iframe-id" src="make sure path does not have ampersands. Use ‘&’ instead " width="100%" allowfullscreen="allowfullscreen" title="descriptive title for your embedded iframe"> </iframe>
Working example:
<iframe id="ls_embed_1534957913" src="//livestream.com/accounts/469832/events/7502318/player?width=640&height=360&enableInfoAndActivity=true&defaultDrawer=&autoPlay=true&mute=true" width="100%" allowfullscreen="allowfullscreen" title="MCTV Livestream"> </iframe>
Example of responsive video embed:
<div class="embed-responsive embed-responsive-16by9" style="max-width: 640px;">
<iframe src="https://player.vimeo.com/video/304425624?title=0&byline=0&portrait=0" wwebkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" title="CompTIA A+ Certification Training video"></iframe>
</div>
Example of centered responsive video embed:
<div class="center-block embed-responsive embed-responsive-16by9" style="max-width: 640px;">
<iframe id="ls_embed_1534957913" src="//livestream.com/accounts/469832/events/7502318/player?width=640&height=360&enableInfoAndActivity=true&defaultDrawer=&autoPlay=true&mute=true" width="100%" allowfullscreen="allowfullscreen" title="MCTV Livestream"> </iframe>
</div>
Tables
See sample assessable/responsive tables in our templates > tables page.
Empty Headers in Content
When you are adding a blank line by hitting return or whatever after a heading element, you need to be careful that the blank line is not actually a new heading tag with no text. Below you can see the space after the H2 is actually another H2, so it reads as a header with no content. You can always check your page elements by clicking on the “Show Blocks” button on the editor toolbar.
