Overview
This guide is intended as a quick reference for content editors of the med.fsu.edu website with the goal of creating more accessible web pages for our end users; it is not intended to be a comprehensive breakdown of all accessibility requirements.
For more detailed information on all digital accessibility requirements, please visit the WCAG 2.1 quick reference guide.
Web sites use various HTML elements to add structure to web pages. A lot of this is handled for you behind the scenes, but it’s important for you as content editors to use proper headings when outlining your content.
Remember to use heading styles in your pages, especially the Heading 1 (H1) style for the title of your page. This is important not just for accessibility but is also crucial for a decent SEO rating.
DO: Use the Paragraph/Headings dropdown in the text editor.
DO NOT: Rely on styling alone, whether it’s color or font size/weight.
Select the appropriate header in the Paragraph/Header dropdown
Alt Text for Every Image
All images on the web page need to have descriptions in the form of alt text. The site attempts to enforce this with a warning on the page, but it’s not perfect and can be ignored. Please, do not ignore this!
Remember to be descriptive, explaining any important subject or action that is being highlighted in the image.
DO: Use alt text to describe your images.
DO NOT: Ignore alt text warning.
Complex Images
Sometimes an image might be too detailed to simply explain everything in the alt text, charts and graphs for example. In cases like these, you may want to use a two-part text alternative. Add a simple description in the alt text, and a longer, more detailed synopsis in the body of the page either beside, below, or above the image.
Avoid Text in Images
Text should not be presented as part of an image unless it’s essential to the information being conveyed. This is often referred to as “flattened” text and should be avoided for a variety of reasons. If it must be done, be sure to repeat the full text in the image’s alt attribute or in the body copy.
Alt text location in the text editor
Missing alt text warning
Hyperlink text should clearly describe the destination and be easily distinguishable from other content. It may be difficult, but ideal link text is both descriptive and concise.
DO: Use the page title or a descriptive sentence fragment as the link text:
DO NOT: Use unrelated, generic text:
Exceptions:
- Some features such as sliders have Read More buttons; in these cases there is additional markup that includes hidden titles for screen readers.
- Image links (still need alt text)
404s
Test your links! This is an accessibility issue that affects everyone and hurts SEO.
Example of descriptive links
HTML has markup specifically for lists, whether they’re ordered or not. Use them!
DO: Use the list feature in the text editor.
DO NOT: Use hyphens or new lines to create lists.
Example of an ordered list
Example of an unordered list
High contrast between the text color and its background is vital for easy reading. If you’re altering text or background color on your pages, be mindful of contrast.
DO: Check your contrast rating if you’re altering text or background color.
DO NOT: Use color alone to convey information.
Remember to use proper table structure with row and column headings. Tables should not have empty cells.
Tables are for Data Only
Do not use tables to structure your content. This was common practice in web pages decades ago but we have better tools now and can avoid the accessibility and responsive nightmare that tables currently represent.
DO: Use page features to layout your content.
DO NOT: Use tables to split your content into columns.
Tools & Resources
- SiteImprove
- The public MED site is enrolled in the SiteImprove auditing service, you can request access to view the reports using the link above. This service scans our site monthly and generates a grade and report for a variety of categories including accessibility and SEO ratings. While this service is going to be OIT's primary form of auditing for public sites, it unfortunately cannot be used for private or internal pages (such as SharePoint).
- Accessibility Insights (Microsoft)
- This browser extension (Chrome and Edge) is an excellent tool for auditing individual pages, whether private or public. Its FastPass audit will quickly scan the page for the most common accessibility issues, including color contrast.
- MED Digital Accessibility Site
- This new MED site provides guidance, resources, and training to help you create accessible digital content.
- WCAG 2.1 Quick Reference
- The Web Content Accessibility Guidelines (WCAG) are the source for these new federal requirements. This quick reference provides an exhaustive overview of everything you need to know for digital accessibility.
- FSU Digital Accessibility Flyer
- This is another quick reference directly from FSU covering several key areas of digital accessibility.