Important information first, less critical info comes last
- Address one topic per page, which supports findability.
- Make content straightforward and simple to digest with critical information at the top of the page, followed by supporting information, and lastly any additional information at the bottom.
Headers
Headings, also referred to as headers, are page and content section titles that have an H-tag (Hero) assigned to them. Brief, succinct headings increase scannability and provide a means of organizing page content.
- Use sentence case because it’s more conversational, unless it is the name of an agency or program, in which case it is a title, and requires Title Casing
- Don’t use punctuation at the end
Subheadings
Subheadings, or subheads, are content section descriptions that may accompany, or explain, headers.
- Use sentence case
- Structure as a statement
- Don’t use punctuation at the end
Lists
Bulleted and Numbered Lists
Bulleted or numbered lists help break up bulky paragraphs of copy, and make important information stand out:
- Bulleted lists draw attention to key messages which may be lost in a paragraph
- Numbered lists help connote a specific order, number, or sequence of items in the list e.g., steps in an application process
Best practices for breaking out, and organizing, lists:
- Use sentence case
- Make sure each item has a consistent structure and tense, e.g., each bullet should start with the same part of speech such as a verb, or a verb phrase, and noun
- Try to use either 3 or 5 items whenever possible
- Don’t use punctuation at the end
In-line Lists
In-line lists may be used for simple narrative that provides information but does not require user action. In-line lists should be broken up using commas—PA.gov uses the Oxford/serial comma.
Pull Quotes
A pull quote is designed on the page as a standalone element to grab the reader’s attention. Pull quotes add interest to page content and break it up for the scanning reader. Pull quotes are short sentences which help to summarize a key point or a quotation from someone mentioned in the content, such as within an article.
If the pull quote needs an attribution, it might include the person’s name and organization or other reference such as book or document title. Attribution is not needed if the page content is entirely about the person quoted since this is implied. Pull quotes should be used sparingly, such as one per page or two if the content is very long and the pull quote adds to the reader’s experience.
Sidebars
Sidebars are summarizing or supplemental information on the side of a web page. They are helpful in longer pages to call out interesting or important information and they help to break up long blocks of text.
Sidebar content should be concise, summarizing, and/or noteworthy related content. Since people usually read sidebars before or after the page content, they should not be used for important information that needs to be read in a sequence. This information should be in the main page section instead.
Tables
Tables are excellent tools for displaying data sets. To be accessible to all users, tables should have designated headers and simple structure. Designated Headers All tables must have column headers; some tables will require both column and row headers. Users can navigate from cell to cell within a table while hearing the screen reader announce the corresponding column header and/row header. Without designated headers, this wouldn't be possible. Simple Structure It’s best to keep your table design simple. Use only one column header and/or one row header. Don’t merge the cells. And, if your data set is complex, split it up into multiple tables.