On a Website of any size, but especially on a large-scale site like ALA.org, maintaining a high level of consistency of page design and content presentation is of the utmost importance. Consistency not only enhances the ease with which users can navigate pages and find information, it boosts a site’s visitor retention rate, reinforces organization branding efforts, and improves user perception of site trustworthiness and content quality.
Think of these nine guidelines as a check list (cheat sheet) that you follow to assess each Webpage that you manage.
- Use H1-H5 headings appropriately
- Style paragraph text appropriately
- Avoid using outdated typesetting practices
- Do not use inline styles for any content elements
- Links
- Tables
- Images (including logos)
- Metadata
- Writing style
1: Use H1-H5 headings appropriately
How
- Create one and only one H1 heading for each page.
- Properly nest all other heading levels (H2 to H6) such that a given heading level does not appear on a page until the one immediately preceding it has.
- Do not use H1-H6 header markup to style any content other than heading text.
Why
- Headings are structural elements intended to reflect the hierarchy of topics presented on the page.
- Proper heading markup makes pages accessible to low-vision and screen reader users who tend to use headings to orient themselves on Webpages.
- Screen reader users, like all users, also tend to skim headings as a way to assess a given page’s relevance.
2. Style paragraph text appropriately
How
- Use left-aligned, Normal style for all paragraph text.
- In general, the only acceptable text formatting are lists and Bold (<strong>) or Italic (<em>) used sparingly to emphasize a phrase or brief sentence.
- Use indenting only for quotations or photo captions if necessary.
Why
- Acceptable formatting markup improves accessibility by conveying meaning about the text (i.e. “is emphasized,” “is part of a list”) that is communicated to screen reader users.
- Indenting only acceptable content types improves readability by keeping text formatting simple and in line with user expectations.
3. Avoid using outdated typesetting practices
How
- Do not use empty <p> tags or more than one <br /> tag to add vertical spacing to a page.
- Use only one space between a period and a new sentence.
- Do not use multiple non-breaking spaces to position content.
Why
- The Cascading Style Sheet (CSS) is already designed to add sufficient spacing among content units. Using tags or spaces makes design inconsistent, which hurts readability.
- Screen reader users can “hear” extra tags, which are distracting and, therefore, hurt page accessibility.
- Appropriate heading, list, or emphasis markup (not extra space) should be used to visually and semantically separate or draw attention to content.
4. Do not use inline styles for any content elements
How
- Use only pre-set text styles to format content.
- Do not assign to text any styling characteristics such as color, font size, font family, etc.
Why
- Pre-set styles’ text sizes and typeface are controlled by Cascading Style Sheets (CSS) and are displayed relative to the browser and users’ browser settings, improving accessibility to all users.
- CSS ensures styling is consistent, improving the usability and trustworthiness of the overall site.
- Inline styles reduce accessibility because they do not convey meaning about the text to screen reader users, who are left unaware of any intended emphasis, grouping, or heading notation.
5. Links
How
- Link text must be indicative of the content to which it leads, usually an abbreviated form of the title of the linked-to page.
- Properly note (beside link and in the title attribute) any special characteristics of the link, including new window, file type and size, members-only restriction, required software, etc.
- Avoid the incorrect practice of using the language "click here" when creating links.
Why
- Clearly conveying link content and linked-to page characteristics improves the usability of link navigation.
- Writing link notes in both the text and the title attribute improves the usability (to all users) and accessibility (to screen reader users) of the linked-to content.
6. Tables
How
- Always denote table header cells—the table’s first row and/or column—as well as the scope of each header cell.
- Add a caption only if the table requires its own heading, and always add summary text briefly describing the breadth of data and/or its overall significance.
- Only use tables to arrange data into rows and columns of cells, never purely for formatting or arranging page content.
Why
- Specifying headers and scope improves accessibility by helping screen reader users make sense of cell content— this is especially true for large and complex tables.
- Adding captions and especially summaries improves accessibility by helping screen reader users make sense of table content, especially in large and complex tables.
- Using tables inappropriately can confuse screen reader users and even make content completely inaccessible.
7. Images (including logos)
How
- For every image, provide alt text that succinctly describes its content and function.
- All images except logos must be JPEGs sized to the dimensions at which they will display on the page.
- Do not use a division, section, or round table logo in place of a descriptive H1 page heading.
Why
- Alt text improves accessibility by conveying image information to screen reader users and to all users who may not be able to load the image.
- The JPEG format improves accessibility by displaying images in realistic tone and color while keeping file size small. Sizing image files to the display dimensions will also keep file size small and cut download time.
- While logos can be a great way to brand a section of the site, H1 headings must be present for usability purposes (linking, browsing, and searching).
8. Metadata
How
- Add an SEO title that is similar or identical to the H1 heading on the page.
- Add an SEO description that briefly summarizes the content of the page.
- Add SEO keywords that describe the primary ideas expressed on the page.
Why
- A good SEO title improves the accessibility of the page because it populates a title for the browser title bar, favorites lists, bookmarks, search results, and links on site listing pages.
- Having appropriate text in each of these fields improves the volume and quality of site traffic from search engines.
9. Writing style
How
- Write all headings, paragraphs, and table headers in sentence case, except for proper names, which should be written in title case.
- Do not just copy and paste to the Web text used for print media without first editing it.
- Online writing should be direct and succinct. Use short words and phrases, and omit unnecessary words whenever possible.
- Online writing should use plain language and express one thought at a time. Avoid metaphors, figures of speech, technical jargon, and flowery language whenever possible.
Why
- Limiting title case to proper nouns makes skimming headings and text easier, which improves readability.
- Tailoring writing to the Web improves the usability of the content because users don’t like to scan and scroll through large sections of text on a computer screen.
- Tailoring writing to the Web also improves accessibility because the meaning of the content can reach a larger audience, including English-as-a-second-language users, Webpage translators, low-vision users, and users with low reading comprehension abilities.