University Libraries

Web Style Guide

This is the Western Michigan University Libraries Web Style Guide. It helps us to write clear and consistent content across the Libraries' various web platforms and creates a cohesive experience for our users.

Introduction

The University Libraries' online presence will adhere to the Libraries' Content Style Guide, WMU Writing Style Guide and WMU Web Content Standards. On this page, you will find a few style tips specific to the web.

Web style tips

All text and headings should conform to WMU Writing Style Guide.
Do not use ampersands.
Do not use all caps.
Do not use italic type.
Do not use underlined type.
Use bold type sparingly.
Do not use initials and abbreviations for WMU units.

Web elements

Every piece of content we publish is supported by a number of smaller pieces. This section lays out our style in regards to these web elements. See Web Content Standards for more details.

Alt text

Alt text is a way to label images, and it's especially important for people who can’t see the images on our website.

The alt text attribute must be included on all images.
Decorative images should have an empty alt text attribute (alt="").

To determine if alt text is needed, consider if a visual user would miss out on something if the image was removed. If the answer is yes, then the image should have alt text. An image is purely decorative when it's used for aesthetic purposes, provides no information and has no function.

See also "Use alt text" in the Writing for Accessibility section on this page.

Buttons

Start button text with an action verb.
Keep button text clear and concise.
Make sure users know exactly what will happen when they click on a button.

Forms

Form titles should clearly and quickly explain the purpose of the form.
Use title case for form titles and sentence case for form fields.
Keep forms as short as possible.
Only request information that we need and intend to use.
Don’t ask for information that could be considered private or personal, including gender.

Headings and subheadings

Headings and subheadings organize content for readers.

Be generous and descriptive.
Headings (H1) give people a taste of what they’re about to read. H1 headings are reserved for page titles. H1s should not be used anywhere else on a page.
Subheadings (H2, H3, etc.) break pages into smaller, more specific sections. They give readers avenues into your content and make it more scannable.
Subheadings should be organized in a hierarchy. An H3 should nestle under an H2, an H4 under an H3 and on down.
Include the most relevant keywords in your subheadings and make sure you cover the main point of the content.
Use title case for page titles/H1 headings. Use sentence case for all other subheadings.

See also "Use headings" in Writing for Accessibility section on this page.

Lists

Use lists to present steps, groups or sets of information.

Give context for the list with a brief introduction.
Number lists when the order is important, like when you’re describing steps of a process.
Don’t use numbers when the list’s order doesn’t matter.
Each list item should be treated as a separate sentence or phrase starting with a capitalized letter and ending with a period. An exception may be made for lists where each item contains only a few words.

Source: styleguide.mailchimp.com, Creative Commons Attribution-Noncommercial 4.0 International license

Writing for accessibility

We’re always working to make our content more accessible and usable to the widest possible audience. Writing for accessibility goes way beyond making everything on the page available as text. It also affects the way you organize content and guide readers through a page. Accessibility includes users of all mental and physical capacities, whether situational (broken glasses) or more permanent.

Basics

We write for a diverse audience of readers who all interact with our content in different ways. We aim to make our content accessible to anyone using a screen reader, keyboard navigation, or Braille interface, and to users of all cognitive capabilities.

As you write, consider the following:

Would this language make sense to someone who doesn’t work here?
Could someone quickly scan this page and understand the information?
If someone can’t see the colors, images or video, is the message still clear?
Mobile devices with accessibility features are increasingly becoming core communication tools. Does this work well on them?

Many of the best practices for writing for accessibility echo those for writing technical content, with the added complexity of markup, syntax and structure.

Avoid directional language

Avoid directional instructions and any language that requires the reader to see the layout or design of the page. This is helpful for many reasons, including layout changes on mobile.

No: “Select from the options in the right sidebar.”
Yes: “Select from these options,” (with the steps listed after)

Use headings

Headings should always be nested and consecutive.
Never skip a heading level for styling reasons.
To help group sections, be sure the top-level sections are H2s and subsequent inside those are H3 and beyond. H1 headings are reserved for page titles. H1s should not be used anywhere else on a page.
Avoid excessive nesting.

See also "Headings and subheadings" in the Web Elements section on this page.

Employ a hierarchy

Starting with a simple outline that includes key messages can help you create a hierarchy and organize your ideas in a logical way. This improves scannability and encourages better understanding.

Put the most important information first.
Place similar topics in the same paragraph and clearly separate different topics with headings.
Make true lists instead of using a paragraph or line breaks.

Label forms

Label inputs with clear names and use appropriate tags.
Think carefully about what fields are necessary, and especially which ones you mark as required.
Label required fields clearly.
The shorter the form, the better.

Use descriptive links

Links should provide information on the associated action or destination. Try to avoid “click here” or “learn more.”

Use plain language

Write short sentences and use familiar words.
Avoid jargon and slang.
If you need to use an abbreviation or acronym that people may not understand, explain what it means on first reference.

Use alt text

Not all users can see the images on our website. Some visitors may be using assistive technology like screen readers or other text-to-speech software that reads the page out loud. This software will read the alt text instead of the image. The language used in the alt text will depend on the purpose of the image:

Images that convey a concept or contain information (chart, graph, text) require descriptive alt text. Describe the information, not the image.
Images that perform an action (link, button, etc) require descriptive alt text. Describe the action the image performs.
Images that are decorative should have empty alt text (alt="").

Each browser handles alt tags differently. Supplement images with standard captions when possible.

See also "Alt text" in the Web Elements section on this page.

Make sure closed captioning is available

Closed captioning or transcripts should be available for all videos. The information presented in videos should also be available in other formats.

Be mindful of visual elements

Images should not be the only method of communication, because images may not load or may not be seen. Avoid using images when the same information could be communicated in writing.

Source: styleguide.mailchimp.com, Creative Commons Attribution-NonCommercial 4.0 International license

Search engine optimization (SEO)

We want to make it easy for people and search engines to find and share our content. Here are some ways to do this:

Organize your page around one topic.
Use clear, descriptive terms in titles and headings that relate to the topic at hand.
Use descriptive headings to structure your page and highlight important information.
Give every image a descriptive alt text.