Sample Content Page

As an editor, it is your responsibility to make sure that the information you create and manage in your website is up-to-date and well organized, and can be accessed by the widest range of people. This has become increasingly important since websites that are not accessible have become targets of litigation. Placed in this sample page are a few guidelines to consider as you convert current content and create new content for your website. What has been provided here will take you through some of the more common content issues. HSC ITS Web encourage you to view the hsc.wvu.edu/website-content-guide for a comprehensive guide to website content.

Proper Heading Structure

Semantic heading structure is important to accessibility. As you began to utilize headings to organize the flow of your content ensure that headings and subheadings always follow a consecutive hierarchy (Section Heading (h2), Section Subheading (h3), Detailed Subheading (h4)). Headings should never be used to style any other type of content.

Example of an Apple Heading Structure

This is borrowed from the website content guide but represents a possible usage case for multiple header and sub headers.

Granny Smith - Detailed Subheading

This is the apple once used to represent Apple Records. A favourite variety, widely sold in the UK…

Honeycrisp - Detailed Subheading

Has excellent eating and keeping qualities. Mottled red and yellow colour. Very crisp…

McIntosh - Detailed Subheading

A popular, cold-tolerant eating apple in North America.

Images

All images need to have alt text provided to ensure viewers using assistive devices can understand the photo being shown even though they cannot see it. Alternative text is a way to describe images in a non-visual manner. It is especially important for users who cannot see the images on a website or for situations where an image is not able to be downloaded by a user’s browser. When you compose the alternative text , write it as if you were describing an image to someone who is unable to view the image. Also it is generally not a good practice to use photos where text is the focus or the majority of the image. You can learn more about images and alternative text in the website content guide.

A group of three people showcasing a student award in front of the Health Sciences Center Pylons.
This is a figure macro where an image can be attached to a caption. This is also useful for describing an image, chart, or graph in further detail. In the same manner charts and graphs also need to have accompanying alternative text to describe what data is being represented.

Buttons and Links

Buttons should be used within content to provide call-to-action links. Button text should always contain actions and be clear and concise. Button text should ideally be three to five words, and should not be longer than six words. It should always be placed on a new line in the editor; a button should never be placed inline with copy.

A button indicates that the user can interact with that element. For that reason, the button format should be used exclusively on link text, never on plain text. This can make things much more confusing for users, especially with screen readers. Link guidelines also apply to buttons.

Learn more about buttons