Accessibility Best Practices and Content Management Systems (CMS)
Five easy tips for creating web content everyone can use
1. Use "alt" Attribute
- Insert alternative text in the field labeled "Alt text" in the user interface that appears when you insert an image.
- The alt text should describe the image (for example, "Statue of the Drexel Dragon").
- In the case where text in an image is used instead of true text, the alt text should say exactly what the image does. (for example, if an image is used instead of the words "Student Open House" the alt text should also say "Student Open House."
- In the rare instance in which an image is purely decorative, use empty quotation marks ("") for the alt text to indicate that there is no meaning.
Best practices with alt text
Alt stands for alternative. When adding images to your Web page, use the alt attribute to describe the content of the image.
In most Content Management Systems (CMS), whenever you choose to insert an image from the CMS editor, a user interface pops up to allow you to designate attributes of the image, such as its width and height. One of your options is will probably include a field labeled "Alt text."
If you prefer to use the code editor rather than the WYSIWIG, the above example would look like this:
<img src="images/mandell.jpeg" alt="Mandell Theater." width="123" height="200" />
In rare instances when an image is purely decorative, and conveys no information, use an empty alt attribute. Empty alt attributes are created by typing two sets of quotation marks with nothing between them:
<img src="images/spacer.gif" alt="" width="5" height="1" />.
Why this is important
The blind access the Web via screen readers, which are programs that read text on Web pages aloud. They also read alt text in images. If alt text is not used, the information conveyed by images is useless to blind users.
2. Don't Use Bold for Headings
- Don't make text look like a heading by selecting it and applying the
in the user interface.
- Instead, select the text and apply the correct heading level such as Heading 1 (
h1), Heading 2 (h2), or Heading 3 (h3).
- The text will still appear bold, but will also have the proper mark-up.
Best practices in designating headings
One of the major principles of accessible Web site design is that of separating content from presentation. Ideally, a page's content should be logically ordered without regard to visual presentation. The visual presentation — the "look" of the page — is created separately from the content markup, and is linked to the HTML document.
Included in HTML markup are h tags, which designate headings. For example <h1> designates a first-level heading, <h2> a second-level heading, and so on.
When you designate copy to be a heading by making it bold — which is what happens when you select copy and hit the in the CMS editor — you are only making it look like a heading. For it to actually be a proper heading, you need to use an h tag instead. The h tags not only make the headings bold, but also order them logically.
To properly mark up text as a heading is to select the text and choose the appropriate level for the heading as shown in this image.
Why this is important
Keeping content and presentation separate has many advantages. Chief among them is that properly marked up content can more easily be "understood" across a variety of browsers and platforms. This includes the screen readers that the blind use to access the Web.
Just as sighted users scan a web page by looking at headings and make decisions on what content is of interest or of use to them, blind users can scan headings via their screen readers, which understand proper HTML markup. For example, a screen reader can be directed to scan for h2 or h3 designated headings. However, copy that merely looks like a heading, but lacks proper markup, cannot be singled out by screen readers.
3. Be Careful with Colored Text
- Don't use colored text as the sole means of conveying information. (For example, don't only use red text to convey a warning.)
- It's okay to use colored text if another means of conveying the information is also used. (For example, making the text bold or italicized as well as red.)
- Don't use colored text where it is likely to be confused as a hyperlink.
- Don't use colored text excessively as a means to draw attention or create interest.
Best practices when using colored text
Using colored text is not necessarily a bad thing, and can even improve accessibility for users with cognitive challenges by providing an alternative means of presenting information. It is important, however, that information not be conveyed solely through the use of colored text. For example, if you use red text to indicate that something is of particular importance, such as a warning, then that text needs to be set apart by some other means as well, such as making it bold, italicizing it.
It is also important that colored text be used selectively. Using colored text excessively to create interest diminishes the visual hierarchy of information — everything on the page begins to compete for attention.
Why this is important
Users who are color blind may not be able to discern that certain text is a different color from the rest of the text on the page.
All users find text that looks like a link, but isn't, annoying. But it is especially troublesome for users with motor disabilities who use more cumbersome assistive technology to navigate the web. Navigating to text that looks like a link can be a much greater commitment on their time than for other users.
Users with cognitive disabilities, such as dyslexia, find too many colors on a Web page a major distraction (as do most other users).
4. Use Intuitive Link Text
- Create link text that tells users what information they will get by selecting the link.
- Avoid click here.
Best practices for link text
When creating links on Web pages, use text that tells the user where she will go if she selects the link. An example of good practice: The dates for drop/add are important to remember. An example of bad practice: For the important drop/add dates, click here. "Click here" tells the user no more than she already knows — that the text is a link. Users scan Web pages for the content they need, and hyperlinks are one of the elements the eye is drawn to. In a page crowded with copy, intuitive link text makes scanning much easier.
Why this is important
All users benefit from easy to scan Web pages with intuitive link text, but for blind users with screen readers, it is a much more important issue. Screen readers can be set to scan for links, and skip other content on the page. If the link text is not intuitive, this setting is useless.
5. Indicate if Links Open Non-HTML Files
- Indicate if selecting a link will open a file that is not a Web page.
- For example, in a link opens a PDF file, indicate with a PDF icon, downloadable from Adobe's Website, or simply type (PDF file) in the link text.
- If possible, replace non-HTML files with HTML.
Best practices for non-HTML files
All users benefit when links to non-HTML content are identified. They are then able to make the decision on whether or not they want to have a new application, such as Adobe Acrobat Reader or Microsoft Word, open on their computer. Identifying these files is easily accomplished by including an appropriate icon or identifying text within the link.
On the other hand, whenever it is possible to convert non-HTML content into HTML — in other words, convert them into Web pages — there are many benefits. In addition to not requiring a new application to open, HTML content is easier to manage and update, is easier for search engines to find, and is easier to be accessed across various platforms and Web devices.
Why this is important
While it is possible to mark up Word Documents and PDF files so that they are accessible to screen readers, few content managers take the time or have the knowledge necessary to do so. Therefore, most of these files on the Web are not accessible to the blind.
Additionally, the opening of non-HTML applications can be confusing to users, especially those with cognitive challenges. Whenever a PDF or Word Document opens, the user interface suddenly changes. Figuring out how to navigate the new interface, and then close it and return to the previous Web page, can be daunting tasks.
Additional Resources