Every page and post on the HRS website is composed of a number of smaller pieces: headings, paragraphs, images, lists, buttons, and so on.

There are better and worse ways to use these elements, and some ways that’ll make the site unusable for certain users. This section lays out our style for these web elements.

For guidelines about more complex components — like columns, callouts, and images with text overlay — see the appropriate section in the component library.

Images, Alt Text, and Captions

Select images that are high quality — not blurry or grainy — and that closely relate to the message you want to send.

On this Page:

All images must have 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. Alt text should describe the image in a brief sentence or two and always end in a period.

Image captions are optional and should be kept clear and brief. They must be in sentence case with proper punctuation.

Read the accessibility and images section for more on how and why to use alt text.

Images: Do

  • High quality, eye-catching images
  • Brief, descriptive alt text.

Images: Do Not

  • Images of text such as word art.
  • Missing alt text.

Buttons

Buttons should always contain brief actions such as “Sign Up” or “Email Us” or critical navigation that needs to stand out from standard links. Use them only for key, high-impact elements. Keep button text short, clear, and in the active voice.

It’s easy to overuse buttons. Don’t use more than 3-5 buttons in a group or as a list of links.

Buttons: Do

  • Buttons for clear actions.
  • Buttons for critical navigation.
  • Short, concise button text.
Submit a Nomination
Sign Up
Cancel
Enroll now

Buttons: Do Not

  • Buttons for links that simply navigate to another page.
  • Long, wordy button text.
  • More than 3-5 buttons in a group or as a list of links.
Home Page
Click here to learn more about services
LIst
Of links

Forms

Form titles should clearly and briefly 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 will use. Don’t ask for information — particularly personal data such as gender — unless it is absolutely necessary. If you do ask for gender, make sure to include an “other” field.

Make sure every form field has a label associated with it, and provide clear, short instructions for any fields that might be confusing.

Headings and subheadings

Headings and subheadings organize content for readers and screen readers allowing all users to skim a page to get a sense of the content or to locate the section they need. Make headings and subheadings relevant to the content they cover. Review headings and structured content for more information.

  • In WordPress: Never use an H1 heading in page content. These are automatically applied from the WordPress title field.
  • Use title case for all headings and subheadings.
  • Headings and subheadings should be organized in a hierarchy.
  • Headings and subheadings organize pages and posts into smaller, specific sections.
  • Never use a subheading only because you want larger text. Headings and subheadings must always introduce sections of content.

Headings: Do

  • Concise, descriptive headings and subheadings.
  • Subheadings that organize page/post content into a clear hierarchy.

Headings: Do Not

  • Long headings and subheadings that convey content instead of introducing sections.
  • Disordered headings.
  • Headings used only for display purposes.

Provide a link whenever you’re referring to something on another web page or website. Use links to point users to relevant content and reliable external sources. See the accessibility guide about link text for more details.

Make link text meaningful: For example, “Read More” does not clearly explain what information your user will find when the link is selected.

Don’t say things like “Click here!” or “Click for more information” or “Read this.” Write the sentence as you normally would, and link relevant keywords.

Don’t include preceding articles (a, an, the, our, etc.) or closing punctuation marks when you link text. For example:

Do not manually style links. The default link styles are set at the site theme level and are optimized to make links stand out from the surrounding text.

Never set links to open in a new window or tab (target="_blank") unless it is absolutely necessary to prevent losing user-entered content (like on a form). Work with one of the system administrators if you have questions.

Links: Do

  • Make link text meaningful.
  • Use default link styles.

Links: Do Not

  • Use generic link text such as “Click here.”
  • Include preceding articles (a, an, the, etc.) or closing punctuation marks.
  • Change the color of links manually.

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.

If at least one of the list items is a complete sentence, use proper punctuation and capitalization on all of the items. If no list items are complete sentences, don’t use punctuation but do capitalize the first word of each item.

Blockquotes and Pullquotes

  • Use blockquotes (quote in the WP block editor) to convey content more than a sentence or two in length that is copied from another source.
  • Use pullquotes (pullquote in the WP block editor) to present short excerpts from the current page (our own text). Used them to “pull” a text passage out of the regular flow of content to give it a more dominant, eye-catching position.

Blockquote/Quote = Someone else’s words.

Pullquote = Our own words from the current page.