Website Best Practices

General

  • Reduce clutter on page. Format content to support scanning of pages for information.
  • Use a clear visual hierarchy. Information that is more important needs to be more prominent (i.e., closer to top). Nest information visually to show relationship to heading. Avoid using super-sized font sizes (i.e., shouting).
  • Use headings on page to organize content. Headings must be is a sequential order if nested. Begin with a Heading 2 (i.e., since the page title uses a heading 1). A web page may have more than one heading 2’s, 3’s, etc.
  • Avoid using “Click Here,” “Go Here,” etc. non-descriptive links. Instead use the words from title of web page or document being linked to (i.e., "double check the web team page for more information!")
  • Make clickable links obvious from text. Avoid underlining text for emphasis. Instead use italics, bold, or both.
  • Use bold, italic or both to emphasize text instead of underlining (Note: screen readers interpret underlined text as a hyper-text link that is not functional).
  • Create a definable contrast between text and background color in order to ensure readability, especially for individuals with a visual impairment.
  • If a web page requires a lot of interpretive text this means it is not intuitive or obvious to the visitor. Look to use words or images that convey function or clearly state purpose.
  • Use bulleted (i.e., unordered) or numbered (i.e., ordered) lists instead of commas or semicolons to separate content.
  • Avoid using blinking text or images as this may trigger a seizure in certain individuals.
  • Use the closed captioning feature for all YouTube videos posted to your website.
  • Create a definable contrast between text and background color in order to ensure readability, especially for individuals with a visual impairment.
  • Dimensions for top banner photo are 1200 (pixels wide) x 375 (pixels high). Note: this pertains to Drupal editors only.

File Names

  • Files should be named consistently
    For example naming newsletters in a series: fall2018_newsletter, spring2019_newsletter, summer2019_newsletter, etc.
  • File names should be short but descriptive (<25 characters)
  • Avoid special characters or spaces in a file name. Note: special characters and spaces are translated by server software using URL Encoding. "URL encoding replaces unsafe ASCII characters with a '%' followed by two hexadecimal digits." See HTML URL Encoding Reference for more information.
    This outputs a pretty ugly URL making it difficult to read.
  • Use capitals and underscores instead of periods or spaces or slashes.
  • Use date format ISO 8601: YYYYMMDD - if a file needs a specific date attached.

Navigation

  • Group links together under a heading that describes their purpose or function.
  • Use a different colored link or underline/no underline after one clicks on it. This alerts the site navigator to know what links they have already selected (i.e., provides visitor with a sense of how much of site they have visited). Note: this is built into the system for Drupal editors.
  • Use page or document title for labeling links (i.e., consistency equals confidence).
  • Current page needs to stand out in navigation by using boldface font or a different color (i.e., if using side bar links)..
  • Make sure that the visitor is able to find their way back to your home page. This can be done by creating a “Home” link in your site navigation menu or by using breadcrumbs with a “Home” link. Note: this is built into the system for Drupal editors.
  • Visitor needs to be able to know where they are in relation to your site. A navigation menu or breadcrumbs serve this purpose. Note: this is built into the system for Drupal editors.

Tables

  • Tables with data require a caption and headings (i.e., first row or first column).  A summary is required for tables that need an explanation on how to use it (i.e., typically tables using both row and column headings). Here is an example of a table with two headers.
  • Drupal websites: Insert class="no-sort" into <table> tag for responsiveness across platforms (i.e., desktop, tablet, and mobile). If allowing user to sort by headers, use class="generic-table" in <table> tag.
  • Instead of using layout tables for aligning content on page, use the <div> tag icon on toolbar along with alignment settings. See video plus step-by-step instructions under the Extra Credit section of the Drupal Blackboard Course. Note: if your content contains text, use a layout table instead. DIV tag layout works best for images and video embeds that are the same size.
  • If layout table needs to be employed, enter role="presentation" into <table> tag in Source mode. This will distinguish it as a layout table as opposed to a data one that is missing a caption and headers.

Images

  • When uploading images to the website, we strongly recommend use of .PNG over .JPG/.JPEG files where able, at a minimal size of 300x300. Do not use .WEBP files. 
  • Use alternative text for all images. If the image has words, those must be included in the alt text description as a sighted person would read them.
  • Avoid creating graphics with blocks of text, charts, graphs, etc. Instead place words on page or as part of caption for image. (note: graphics with titles or labels on them are fine).
  • Avoid using alt text descriptions that are the same as text adjacent to an image. An example would be a photo of a person where his/her name is placed adjacent to their picture.  (note: Wave will present an alert when this occurs).
  • Avoid using alt text description that exceeds one-hundred characters in length. Instead place text adjacent to image in those instances as part of image caption.'

Documents

(I.e., PDF’s, Word docs, Excel spreadsheets, PowerPoint docs, etc.)

  • All documents must be ADA compliant. If uncertain that your document meets ADA requirements, request document remediation from the Digital Accessibility Committee. 
  • Convert Word documents and PDFs to web pages when possible (note: images must be uploaded separately).
  • If formatted PDF is desirable for printing purposes – create a web page using text from PDF and create link to PDF labeled as “Printable Version.”
  • Place asterisk (*) after hyperlinked text that leads to documents.
  • If there are links to documents present on the page, put a disclaimer in the footer stating "* Requires Adobe Acrobat or Microsoft Word".
  • Resources: ADA Self-Paced Training | Desktop Tools | In-Person Training

Forms

  • Use descriptive text (i.e., description box for each component) when needed to assist person completing form field(s).
  • Form fields: Select list menus using the listbox setting do not require a Fieldset, all others do, however. When using a Fieldset, hide the form label by selecting None from Label display drop-down menu. (Note: Wave tool will indicate which form labels are not correctly associated with a form control. These require a Fieldset (i.e., or change from radio button (default) setting to listbox. Hide the label then by setting the Label display to None).
  • Add reCaptcha for forms that are submitted online. Note: Campus Web Editors using Drupal can also contact the YSU Web Team for assistance.

Accessibility Resources

Please Note: This is a working page and may be updated with new information from time to time. Check back now and then for the latest updates. Contact YSU Web Team Project Coordinator with any questions you might have on best practices for your website.

Page last updated: January 3rd, 2023