Common Elements
Your content should be organized using headings and lists found under the Paragraph and Styles sections of your application.
Headings
-
Headings should be listed in hierarchcal order: Heading 1, 2, 3, 4, etc. Don't skip numbers moving forward. Try to keep your headings as short titles, not full paragraphs or sentences.
-
Only use one Heading 1 per document or web page - this should be the title.
-
You can have as many of the same sub-headings under each heading number. (i.e. Heading 1, 2, 2, 3, 3, 3, 4, 4, etc.)
-
You can skip numbers moving backwards to start a new heading/sub-heading section of your document/web page. (i.e. Heading 1, 2, 3, 4 then start over with a new Heading 2, 3, 4, etc.)
Lists
-
Use the Bulleted and Numbered list tools instead of just adding bullets, dashes, or numbers in front of content.
-
Numbered lists should be used for lists that include a sequential hierarchy. This is the first thing, this is the second, and the third, or do this first, then do this second, then this third, etc.
-
Use plain bullets if the order of the list doesn't matter.
-
Formatted text using colors, bold, or italic text, are not recognized by screen reading technologies. This is purely for visual emphasis.
Using link text like "click here," "more information," or "learn more," can confuse users of screen reading technology, as they are sometimes read out of context without the surrounding text that indicate what the user is clicking on, or for what they are getting more information.
For instance if this is the sentence "Click here to learn more about _____." If a screen reader is listing all the links on your page or document, so in this instance, all they will hear is: "Link: click here" which tells them only that there is a link with no way to understand where that link will take them.
A good rule of thumb is to make sure you can understand where the link will go without any text around it.
For printed fliers, brochures, long form documents, use shortened "vanity URLs" (contact the Web and Social Media Office) or add a QR code.
All online web pages or PDF file should use links with accessible link text that makes sense out of context.
Make sure the contrast of text and background colors are high enough to meet accessibility standards. Use this Contrast Checker tool to help choose your text and background colors. Avoid layering text on top of images unless your font is large and bold enough to stand out.
Essential for ADA compliant content.
SMC recommends hosting all videos on YouTube. YouTube automatically generate captions for videos stored on their platform, but they should be checked for spelling and punctuation. Embedded captions in the video is not a substitute for the closed caption option on videos.
Providing a separate downloadable and accessible transcript is also recommended.
Videos will not be added to the SMC website unless closed captions are available.
Videos with only embedded captions to describe the action should include a narrator that reads the text.
PDF files should be "readable" text. PDF files of graphics are not accessible.
PDF files use "tags" to provide a hidden structured, textual representation of the PDF content that is presented to screen readers. They exist for accessibility purposes only and have no visible effect on the PDF file.
Adobe Acrobat offers limited editing functions for PDF files. However, most are created from an "original" version (i.e. MS Word, etc.), so if the original version is accessible, the PDF tags will automatically be in place when the file is saved or exported as a PDF file.
