Tips for Writing Great Content
This guide illustrates some of the ways you can ensure your content is eye catching and keeps the attention of your users, while also ensuring accessibility standards are met.
Include a Unique and Descriptive Title
Whether you're creating a news item or adding a section to an academic page, having a descriptive title is imperative. Doing so helps users identify and differentiate the purpose of your content quickly and easily.
Below are two examples. On the left, the headline simply informs readers that the next section is today's news. This is neither eye catching nor interesting, and users might skip over the box. On the right, the headline clearly states what the news is about, drawing the attention of interested readers. An image would also help catch the reader's attention.
Use Color and Styles
Use color and style to convey meaning, for both text and charts. Adding style to color provides additional differentiating cues for users in different lighting environment, using different medium (print, ebook), or have color-blindness. Using some of the additional text styling options and components to highlight information also breaks up your text into smaller pieces that are easier for users to digest.
Structure Content with Headings and Lists
Headings and Lists organize your content and group text in ways that make sense to users. This helps users connect the key messages and content hierarchy of your information. It also is critical for users who utilize screen reading software or other assistive devices.
From an accessibility perspective, headings provide individuals who use screen readers with a simple method to navigate within a page or a document. Moreover, the use of headings allows all individuals, regardless of disability status, to move and find information in a more efficient manner. Using different heading styles and font sizes helps organize information into meaningful sections and demonstrates how subtopics relate to the main topics, and with one another. For example, a document structure could be:
Heading 1 is the main topic or title of the content
Heading 2 is used for major subtopics that relate to the main content
Heading 3, Heading 4, and Heading 5 could be used to further refine related subtopics
More information about Headings and their proper use can be found at the Headings and Structure Guide created by the Stanford Office of Digital Accessibility.
Use the drop-down menu of header & list styles so that your document will format correctly when the page or font size changes.
Here is an example of content with no structure:
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiRU5oMFB3cFc0cXB6RGMiLCJpYXQiOjE3MTYyMzI4OTQsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiTWx1eXNKV0RrRmliNkUiLCJleHAiOjE3MTg4MjQ4OTR9.JeLBAMfSYu64wlrOVS3BREgZNxo2rHzWdedN2oe9cow)
Contrast the above with a section of text that is divided into different headings. It is much easier to read.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiRU5oMFB3cFc0cXB6RGMiLCJpYXQiOjE3MTYyMzI4OTQsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiTWx1eXNKV0RrRmliNkUiLCJleHAiOjE3MTg4MjQ4OTR9.JeLBAMfSYu64wlrOVS3BREgZNxo2rHzWdedN2oe9cow)
Use Alt Text in Image Uploads
Including alt text with your images ensures all individuals, regardless of visual ability, can engage with your content. Alt text should be a concise summary that presents the same content or function of the image, for example, "Jane Stanford accepting the Amy Blue award."
Tips for Writing Effective Alt Text
Describe the image as specifically as possible.
Keep it short (around 125 characters or less).
Don't include "image of," "picture of," "graphic of" etc. Screen readers will inform their users that the text is from an image, making your additional text redundant.
Don't include the file extension, .jpg or .png, .gif, etc.
If the image medium is important (such as a photograph or oil painting), then include the medium in your alt text.
Image buttons should have an alt attribute that describes the function of the button like, "search," "donate," “sign up,” "apply now," etc.
We also encourage you to visit the Stanford Office of Digital Accessibility, where you can find more information about using Alt Text.
Write Meaningful Link Text
Links text should be understandable even when they're out-of-context. This helps users scan, comprehend and choose the link accurately and quickly. It is also an accessibility requirement for those who use screen readers.
Examples:
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiRU5oMFB3cFc0cXB6RGMiLCJpYXQiOjE3MTYyMzI4OTQsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiTWx1eXNKV0RrRmliNkUiLCJleHAiOjE3MTg4MjQ4OTR9.JeLBAMfSYu64wlrOVS3BREgZNxo2rHzWdedN2oe9cow)
As a reminder, it is critical to write meaningful link text. Doing so is helpful for all users, but especially those who are blind or visually impaired and use screen reading software. A more thorough explanation of appropriate link text, including examples of what to do and cautions of what to avoid, can be found in the Hyperlink Guide through the Stanford Office for Digital Accessibility.
Formatting Tables
Any time a table is included, it should be labeled. This includes a title for the table, as well as column and row headings. Headings provide context, and screen readers use heading information to translate the two dimensional visual structure to a uni-dimensional audio stream for users.
.png?apiToken=eyJhbGciOiJIUzI1NiIsImtpZCI6IjIwMjMtMDUtMDQifQ.eyJzY29wZSI6Im5vdGUtZXhwb3J0IiwibmlkIjoiRU5oMFB3cFc0cXB6RGMiLCJpYXQiOjE3MTYyMzI4OTQsImlzcyI6Imh0dHBzOi8vc2xpdGUuY29tIiwianRpIjoiTWx1eXNKV0RrRmliNkUiLCJleHAiOjE3MTg4MjQ4OTR9.JeLBAMfSYu64wlrOVS3BREgZNxo2rHzWdedN2oe9cow)
A more thorough overview of formatting tables, including examples of what to do and cautions of what to avoid, can be found in the Accessible Data Tables Guide through the Stanford Office for Digital Accessibility.