Tips for Creating Accessible Content

As a web content manager, you play an important role in crafting accessible websites.

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 deviating from the Baylor United brand standards and web templates may violate accessibility rules.
• 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 straightforward 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 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:

Correct: <img alt="Pat Neff Hall" src="pat_neff.jpg" />

Incorrect: <img src="pat_neff.jpg" />

Resources:

• Learn more about using “alt” text.

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:

Correct: <a href="https://about.web.baylor.edu/history">Baylor's History</a>

Incorrect: <a href="https://about.web.baylor.edu/history">about.web.baylor.edu/history</a>

The incorrect example above includes the URL of the page, something that is unhelpful for those using a screen reader.

Consider this example:

Correct: <a href="baylor_university.html">About Baylor University</a>

Incorrect: <a href="baylor_university.html">About</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 accompanying graphics and use alt text. In addition to accessibility, this improves usability for website visitors who are using mobile (small-screen) devices. Images with text are often difficult to read when using iPhone or Android devices.

Logos, event graphics, and charts are exceptions to this rule as long as the correct alt text is used. For charts and data visualizations, use the alt text to declare that the graphic is a chart. For example:

Correct: <img src="path/to/bar_chart.png" alt="Bar Chart of Student Enrollment" />

Incorrect: <img src="path/to/bar_chart.png" alt="Student Enrollment" />

4. Use HTML headings appropriately

Use HTML headings (i.e., <h1> - <h6> in accordance with the logical structure of the document. Follow these steps to use headings correctly:

• Rely on the heading styles available in Drupal's "Style" menu.
• Do not use the <h1> tag, as that is reserved for the page title.
• Page sections of equal importance should have the same heading.
• Headings should be used in sequential order (i.e. don't skip from an <h2> to an <h4>)

5. Avoid using HTML elements solely for presentational purposes

Use HTML elements based on the kind of content you're displaying and not for presentational purposes.

• Tabular data should use a <table> element.
• Lists should use a <ul> (unordered) or <ol> (ordered) element.
• Paragraphs should use a <p> element.
• Headings should use a <h*> element, properly sequenced from <h2> to <h6>.

For example, a content manager might use a <table> element to simulate a two-column display. This represents an accessibility violation and must be avoided.

6. PDF files must be accessible

Before you upload PDF documents to Drupal, make sure to use Adobe Acrobat tools to run an accessibility check.

PDF Accessibility Resources

• Adobe Creative Cloud is available to all faculty and staff members at no charge. Adobe Acrobat Pro is included as a free download as part of Creative Cloud.
• Create and verify PDF accessibility (Acrobat Pro)

7. 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.