General Website Info
Accessibility
USF CMS templates and/or components are designed to conform fully to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA Success Criteria. It is the responsibility of USF's web content managers to ensure the content published within meets federal accessibility guidelines (see USF Disability and Accommodations Policy 0-108, Section III B). Below are items to keep in mind when you are adding content to your websites.
Watch the recording of our accessibility workshop to learn more.
TEXT
Color
The use of color, including all text, graphics, and other site elements, should not interfere with the ability to view content on a page.
Keep in mind the contrast and color in designs. You can see if the content's color is accessible by using an online tool that allows you to plug in the intended colors and uncover any problematic color choices.
Color Contrast Checkers
Heading Tags
Heading Tags (H tags) are used for structure and to indicate topics on a page — they should not be used for styling purposes. Headings can be nested to organize subsections of content and play an important role in accessibility.
Example
- Best Spots on the USF Campus
- Marshall Student Center
- Space
- Amenities
- Food Options
- Campus Recreation
- Facility
- Equipment
- Hours of Operation
Heading 1 (h1) and Heading 2 (h2) are used within the CMS templates and cannot be used by end-users. Headings 3 - 6 (h3, h4, h5, h6) are available for use within a text page using the WYSIWYG. An example of each is below.
Note: The headings may not appear correctly while looking at them in the WYSIWYG Editor. Please do not try to manipulate them as the CMS will automatically style them when saved.
THIS IS HEADING 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida vehicula quam, et malesuada est tristique a. Pellentesque porta sapien sit amet lacus dapibus ultricies.
This is Heading 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida vehicula quam, et malesuada est tristique a. Pellentesque porta sapien sit amet lacus dapibus ultricies.
This is Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida vehicula quam, et malesuada est tristique a. Pellentesque porta sapien sit amet lacus dapibus ultricies.
This is Heading 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer gravida vehicula quam, et malesuada est tristique a. Pellentesque porta sapien sit amet lacus dapibus ultricies.
Readability
- Don't skip using headings on your page
- Don't use all capital letters
- When using a heading tag that styles text in all capital letters, you should write out the text as you normally would; the H Tag will update the formatting automatically
- Don't use jargon, and spell out acronyms and abbreviations
- For example, internal audiences probably know what MSC stands for, but external audiences may not know you're referring to the Marshall Student Center.
- Write for an eighth-grade reading level
- You can check your content's reading level by running it through the Flesch-Kincaid Grade Level test.
- Use bold and italic to emphasize text
- Underline should be reserved for links only.
- Use bullet points, lists, and white space to prevent large blocks of text.
- Like the bulleted list you're reading now!
IMAGES
Alternative Text (Alt Text)
Alt text is used to describe images that are used on web pages. It is included to ensure screen reader users can access the image information, and in case the image fails to load on a page (this text will appear in its place).
In our CMS, the ‘Description’ field functions as alt text when adding an image to a page. Alt text should be limited to 100 characters or less.
For example, if you're using an image of a professor talking with students, the alt text could be, "A professor chats with three students outside on campus".
Animated or Moving Content
Try to avoid content on a webpage that moves or changes unexpectedly.
If there is a need for content to change or manipulate, make sure it has the ability to turn off, or have an alternative method to present the information.
Graphics
Graphics can be useful for visitors, especially those with cognitive disabilities.
However, if a text image, diagram, chart, etc. is used, the information should also be provided in the body copy of the page. For example, if a complex flow chart is needed, bullet points or paragraphs presenting the same information should be included underneath the graphic.
The alt text can include what the graphic is, but it should then direct the visitor to the extended description in the body copy. For example, the alt text could be "University of South Florida foreign language requirements. Extended description follows".
LINKS
Emphasizing Text with Links
While screen readers can read a full page to a user, screen reader users may prefer to instead listen to a list of links.
Make sure to always use the Insert/Edit Link tool in the WYSIWYG Editor when inserting links (always hyperlink, do not use URL strings). This will automatically turn the linked text green and underline it when hovered over by a mouse or focused by keyboard. Do not underline text that is not a link— if you need to emphasize text, use bold or italic.
A link should be distinguishable from its surrounding text. Do not use "click here" when inserting links, as it is not: a call to action, SEO-friendly, modern, or accessible for people using screen readers. A good exercise to test link copy is to examine the linked text without content: does it make sense?
This example is using the wrong text to include the link: "We can't wait to connect! Click here to register for a campus tour today." Instead, make the link actionable: "We can't wait to connect! Register for a campus tour today."
File Types and New Tabs
Binary files, like PDFs, Word documents, external forms, etc., that are linked on
a page should have the file type included in the text.
For example: "View our Admissions' Next Steps (PDF)."
This alerts users that something will happen once they click the link (i.e. the document will open in a new tab). If the link is going to open in a new tab, it should be noted in the copy.
Accessibility Toolbox
Accessibility Checkers
Color Contrast Checkers
Screen Readers
Making Documents Accessible
University Resources
- Student Accessibility Services Accessibility Guide: includes information and resources for video/audio captioning/transcription, assistive technology on campus, Canvas tips, and more.
Other Tools to Search on the Web
- Screen magnifier
- Color blindness/low vision stimulator
- Browser-based screen reader
- OS-based screen reader