Web Content Best Practices

The following best practices cover accessibility and writing for the web best practices.

Headings

  1. You should always use Heading 2 for the main section headers of your page.  Heading 1 is already used for the Page Title behind the scenes.  Any additional sub-headings should follow the heading numerical structure.  Skipping a heading level (such as going from Heading 2 to Heading 4 without using Heading 3) has both an impact on SEO and accessibility.
  2. Content editors should use the assigned headings within the format drop down list when updating the body field. Headings should not be put in bullet form, bolded (headings are already bolded) or formatted in any other way than standardly laid out on the page.

Emphasizing Content

  1. Avoid using underlines to emphasize words.  In fact, in umassp.edu we have the underline feature disabled.  Why?  Underlines are used to indicate hyperlinks on a page.  If someone is colorblind, they will not be able to tell the difference between a hyperlink and underlined words.  Use bold and italics to emphasize. 
  2. In the same regard, do not use color as the only means to emphasize content.  If you do need to emphasize content with a color indicator, ensure there is some other way in which you are emphasizing that content, whether an asterisk or bold/italics.  In general, avoid the color red to emphasize any content; the color often clashes with other styles on the page and is best used for emergency alerts, where you must draw the readers attention to a critical message. 
  3. Use standard capitalization.  DO NOT USE ALL CAPS.  Use bold to call attention to a word when applicable.  ALL CAPS IS USED FOR YELLING VERY LOUDLY.  DO NOT YELL AT WEBSITE VISITORS.  Some screen readers will also interrupt all caps letters as an acronym and read each letter separately, making for a very confusing experience.  

Images

  1. Use Alt Text when applicable.  Note that decorative images do not need alt text and the alt text field should be left blank.  In addition, if an image already has a caption associated that covers the overall meaning of the image, there is no need to add redundant alt text. Finally, do not start alt text with the words "picture of" or "image of."  The image is already tagged as an image so these words would create a redundant experience for anyone using assistive technology (i.e.., the alt text would read, "picture of picture of a student studying the dengue virus in a research lab").  For more information on alt text requirements, please read the Web AIM Alternative Text page.
  2. Always resize images for the web. Large files can impact performance over time. Images should also adhere to accessibility standards (i.e.. all texts) and remain within the overall theme of the site. Content editors are asked to reach out to webservices@umassp.edu for any graphical design support especially the introduction of any icon themes.

Hyperlinks

  1. Don’t put the full url on the page.   Web addresses, or URLs, present two types of challenges: readability and length.   URLs are not always human-readable or screen-reader friendly. Many URLs contain combinations of numbers, letters, ampersands, dashes, underscores, and other characters that make sense to scripts and databases but which make little or no sense to the average person. In most cases, it is better to use human-readable text instead of the URL.
  2. Use descriptive labels.  Avoid uninformative link phrases.  Links are more useful when they make sense out of context. Authors should avoid non-informative link phrases such as: click here, here, more, read more.  In fact, the phrase "click here" is unnecessary if a hyperlink is formatted correctly, even if it precedes a more meaningful phrase. For example, a link that says "click here to access today's weather" can be shortened to "today's weather."  Plus, keep in mind when someone is using assistive technology, they tab through the page from hyperlink to hyperlink so imagine if there were ten hyperlinks that just said, "Read more."
  3. When linking to external resources from the website (i.e.. if linking to another campus site), make sure the link opens in a new window so that visitors don't lose the current site they are on. When linking to internal content, it does not need to open in a new window. In the first case, content editors need to choose the option to have the link open in a new window. In the second case, content editors can leave it as the default, which opens the link within the site. 
  4. Customizing Page URLs:  When customizing a URL for a new page, make sure to always separate words in the URL with dashes (i.e.. UMass Services page would be umass-services). Without these dashes, Google and other search engines would read it all as one word, “umassservices” lowering our rankings in search engines. Also, if it is a sub-page of a section, it should always be preceded by the parent url(s) and a forward slash so if it is the UMass Services falls under Resources, it should be resources/umass-services. URLs should never be manually changed for existing pages as it could cause continual loops or impact content that references that page. All existing url changes should go through the Web Services team.

Documents

  1. Ensure documents are created with document accessibility best practices in mind.
  2. When adding documents to a page, content editors should always make sure that they open in a new window.

Menus

Main navigation menus for departments on the left side of the page should never include links to documents or external sites. That kind of content is handled through featured content on the right column.

Last Updated

Kristina England
November 14, 2018