Tips for Creating Accessible Content
As a web content manager, you play an important role in crafting accessible websites.
Although we don't expect every content manager to be an expert, below you'll find helpful suggestions for creating accessible content.
Before You Begin
- The Marketing & Communications division employs professional designers and web developers who work to ensure the accessibility of our website. The colors, typography, and structure of our websites were built with accessibility in mind, and we advise against deviating from our design standards, webpage structure, or content widgets.
- Keep it simple. Don’t overthink the structure of your content. Rely on simple formatting tools in the WYSIWYG editor to fashion it in a straight-forward way. Introducing unnecessary complexity in a webpage’s layout, typography, or color increases the likelihood that your content will be inaccessible or, at the very least, not user-friendly.
- Website visitors use a wide range of technology to interact with our website. Roughly one-half of traffic to baylor.edu comes from mobile devices, and the CMS templates have been designed to work on most every device. As you're building pages, avoid using styles that focus on one device type or another. Specifically, using tables to style content violates accessibility guidelines and presents challenges for mobile users.
Creating Accessible Content
1. Use ‘alt’ text in your [img] elements
The “alt” attribute is used by screen readers to describe an image for users with visual disabilities. When the alt text is not present, these users will not have an understanding of what the image depicts or why it’s being used in a particular context. Below is an example of correct and incorrect uses of alt text in HTML code:
[img alt="Pat Neff Hall" src="pat_neff.jpg" /]
[img src="pat_neff.jpg" /]
2. Use descriptive link text
Link text should describe the page being linked to and must not be identical to any other link text on the page. Consider the example below:
[a href="baylor_university.html"]About Baylor University[/a]
The incorrect example above does not contain link text that describes the linked page, a page about Baylor University.
3. Don’t include text in images or graphics
Text contained within images is inaccessible to screen readers and should be avoided. When creating content for message centers or emails, decouple text from any accompanying graphics, making sure to use alt text wherever possible.
In addition, this also helps website visitors who are using mobile (small-screen) devices. Images with text are often difficult to read when using iPhone or Android devices.
4. Use HTML headings appropriately
Use HTML headings (i.e., [h2] - [h6] in accordance with the logical structure of the document you’re creating. Follow these steps to use headings correctly:
- Rely on the heading styles available in the CMS’s Advanced Editor “Format” menu.
- Do not use the [h1] tag, as that is reserved for the page title.
- Begin your first-level heading with the tag.
- Page sections of equal importance should have the same header.
5. PDF files must be accessible
Rely on an application like Adobe Acrobat to run an accessibility check on any PDF file before you upload it to the CMS.
6. When in doubt, ask your web consultant
If you have a question related to accessibility, reach out to your department’s web consultant for additional guidance.