Web content is digital content that is posted or published on the web, usually consisting of text, visual media, and interactive elements. Examples may include University webpages, Canvas course pages, Library Research Guides, blog posts, conference websites, online exhibits, and more. Many of us create web content without knowing much about the HTML or CSS code that underlies it. But the choices we make as web content creators have major implications for accessibility.
The basic topics below provide an overview of digital accessibility as it applies to web content.
Jump to a section on this page:
Text forms the majority of the web content we post or publish. Making text accessible means using structure and style to ensure that all users can perceive and understand the text itself and the relationships within its parts.
Headings are short phrases or titles that describe sections of text on a page. They are distinct from regular body text and communicate the organization of content. To be accessible, they should be used in a meaningful, ordered hierarchy and should make use of proper encoding.
On the web, every heading has a level or rank: Heading 1, Heading 2, Heading 3, and so on. These headings should be used in a meaningful hierarchy to form a document outline.
If headings are merely styled to look important, but not marked up in the code, web browsers, plug-ins, and assistive technologies cannot detect them, meaning that they are essentially not there for a broad range of users and technologies.
Create properly encoded headings by using the HTML tags for headings or by selecting Heading 1, Heading 2, etc. from a drop down menu in the text editor. The result is the same: proper HTML heading tags are applied to the underlying code.
<h1>Symposium Schedule</h1> <h2>Friday</h2> <p>Dinner for participants at 6:00 pm</p> <h2>Saturday</h2> <p>Breakfast and welcome at 9:00 am</p> <p>...</p>
Links are a key part of much digital content. Making links accessible means making them perceivable (links should be visually distinct from surrounding text) and making the purpose or destination of the link understandable. As much as possible, the text of the link should itself communicate the destination or purpose of the link by being meaningful, understandable, unique, and efficient.
Link text should be understandable and should describe its purpose or destination, most often using the exact language of its destination.
The link to a page titled “Fine Arts Library” should read, Fine Arts Library, not “Our Library” or “more about this library.”
Link text should make sense to a human reader. The complete URL’s of webpages are usually not understandable and should generally not be used as the only indication of a link’s destination.
The link to the “Penny W. Stamps School of Art & Design Diversity, Equity and Inclusion Strategic Plan” should read, Stamps School of Art & Design DEI Plan, or similar, not https://stamps.umich.edu/pdf/DEIPlan2017-2018.pdf.
If several links within the content lead to different destinations, the text of each link should be distinct. Similarly, if several links lead to the same destination, their link text should be identical.
Link text should be no longer than necessary and should put unique information first. Note that “unique” information depends on context.
The link to the page titled “Undergraduates - American Culture,” when linked from within the American Culture website should read, Undergraduates - American Culture or Undergraduates; when linked from a list of programs at U-M should read American Culture - Undergraduates.
Color can be used to enhance web content, making it more perceivable and understandable. This can be accomplished by maintaining good contrast between foreground and background colors and by using color as one means among many to highlight elements.
To make text perceivable, there must be sufficient contrast between text color and the background or surrounding color. Contrast is basically the difference between lightness and darkness, regardless of the color or hue. As long as one color is dark enough and the other is light enough, text and background can be any colors—although neutral colors are often easiest to read.
Because color cannot be perceived by all users with all devices, color should be used along with other means to highlight elements or express meaning. For example, the bars in a bar graph can be distinguished by color and text labels; a missing assignment in a spreadsheet can be indicated by color and the absence of a check mark. When this is achieved, the page can be viewed in grayscale without losing any information.
Visual media and images are key elements of web content. Making them accessible means including “textual equivalents” for all visual elements. A textual equivalent is text that can effectively replace the image in cases where the user cannot access the original, and should serve to communicate whatever the image communicates in this particular context.
Textual equivalents can be adjacent to visual media or can be embedded in the code (usually as “alt text” that is accessed via assistive technology or displayed when the image fails to load).
Alt text refers to an element of code that is connected to an image file. Insert alt text by editing the HTML code directly or by finding the “alt text” or “description” field in the image upload options.
Keep in mind that alt text should:
Sometimes it is more appropriate to put the textual equivalent directly in the web content, where it is available to all users. This might be the case where the description will benefit many users (e.g. an item description in an online exhibit) or where the textual equivalent is especially long or complex (e.g. a transcription of an image of a poster or document).