Web and webform best practices

Headings create a page outline that helps users scan content and allows screen readers to navigate. Headings should be used in descending order as you move down the page.

• H1: The page title (Main Topic). Use only one per page.
• H2: Major section headings.
• H3–H6: Sub-sections.
• Rule of thumb: Nest headings logically (like a term paper outline) rather than choosing them based on font size.

Though buttons and links seem to have the same purpose (mainly to take the site visitor somewhere new), there are some clear distinctions.

Differences:

• Links are for navigation. Typically, they are less visually obvious and therefore are used for less important tasks on that page. 
• Buttons are for specific and important actions you want site visitors to take on a page.

Similarities:

• Both should start with verbs to indicate that the user is taking an action. 
• Both should be concise. No more than 2-3 words on a button or hyperlinked when possible.
• Whether using buttons or links, they should open in the same window. Opening new tabs breaks the back button experience for users, and is not an accessible experience.
• Both should be specific and clear about where they are going. Those who use screen readers often navigate a page by jumping through links and buttons. If every button says, “Read more” then it isn’t telling them where they are going.
  • Button example: “Submit your application” is better than “Submit”
  • In-text link example: “Learn more about parking on campus” is better than “Learn more”
  • Another in-text link example: “Visit the Parking website for more info” is better than “Click here for parking info”

Ideally, site visitors should be able to find the answer to any question in your main content or via Search. 

If an FAQ is necessary, we recommend keeping it short and contained to a single subject on a relevant page, rather than trying to create a website-wide FAQ page. 

Though sometimes using a table is unavoidable, tables are not responsive, accessible, or mobile-friendly.

• Do: Use tables for schedules, data sets, or price lists.
• Don’t: Use tables to create side-by-side layouts for text and images. This breaks mobile responsiveness and is inaccessible to screen readers.

In first reference, use the full name of the university. Always use “WashU” as the short version (never WU, WUSTL, or just Washington University).

• Do not capitalize “university,” “department,” or “office” unless part of a formal name (e.g., “The department is closed” vs “The WashU Department of Biology is closed”).
• Capitalize titles only when they directly precede a name (e.g., “Chancellor Andrew D. Martin” vs. “Andrew D. Martin, the chancellor”).

• Phone Numbers: Use hyphens (314-935-5000).
• Time: Use a.m./p.m. and omit zeros for exact hours (8 a.m., not 8:00 AM).
• Degrees: Do not use periods in abbreviations (PhD, not Ph.D.).
• Commas: Do not use the serial (Oxford) comma.

All images must have “Alt-text” for screen readers and SEO.

• Decorative: If the image is just for mood, keep it simple (e.g., “WashU campus at sunset”).
• Informational: If the image provides context, describe it (e.g., “Alumni gathering in the Quad for the 10th Reunion BBQ”).
• Specific: For news/bios, be precise (e.g., “Chancellor Martin shaking hands with John Doe at the Founders Day gala”).

Carousels, sliders and rotators

Avoid using auto-rotating carousels or sliders. They remove user control and are widely considered an “anti-pattern” in web design.

• Accessibility Issues: Moving text is difficult for many to read in time, and sliding elements are hard for some users to click precisely.
• Invisible Content: If a message isn’t visible the moment a user looks, they will likely miss it.
• Poor Performance: Data from higher education (http://ND.edu ) shows that only 1% of users click on carousels at all. Of that 1%, nearly 90% only click the first slide.

Review WashU’s standards for digital accessibility.

• Ownership: Ensure you have the rights to use an image. Do not take photos from Google Images.
• FERPA/Privacy: Be mindful of student privacy. If a student is the primary subject of a photo, ensure you have a signed media release on file.

Before uploading an image or document, rename the file. Search engines “read” file names to understand your content.

• Bad: IMG_0923.jpg
• Good: washu-brookings-hall-summer.jpg

• No Text in/on Images: Search engines and screen readers cannot read text inside a JPG or PNG. Always use actual text on the page instead.
• Resolution: Never size up a small image; it will look pixelated. If the image is too small, find a new one or omit it.
• Captions: Captions can be added in the block editor display on the page. Changing a caption in the editor does not change the file metadata in the media library.

Prioritize web pages over PDFs. PDFs are often inaccessible to screen readers and are not crawled well by Google or other search engines.

• Best Practice: Digitize the content into a standard web page.
• Exception: If a downloadable document is required, indicate the format in the link text.
  • Example: Download the Student Handbook (PDF)

• Hosting: Embed videos from YouTube or Vimeo rather than uploading them directly to your site. This improves page load speed.
• Captions: All videos must have accurate captions to meet university accessibility standards.

The WashU standard is to avoid CAPTCHAs. While effective at stopping bots, they often prevent human users with disabilities from completing forms.

• Spam Management: Only use a CAPTCHA if a form is attracting troublesome amounts of spam that outweigh the accessibility disadvantage.
• Recommended Tool: If a CAPTCHA is necessary, use reCAPTCHA. It is a free Google service and is more accessible than most alternatives.

Omit these questions whenever possible. Removing them simplifies data, avoids sensitivity, and increases form completion rates.

Before adding these fields, ask:

• Is this data necessary? What information are you ultimately trying to gather?
• Can you be more direct? If you need to know how to address someone, ask for “Preferred Pronouns” or “Prefix” (Mr., Ms., Dr.) instead.
• Gender vs. Sex: “Gender” refers to social identity; “Sex” refers to biological/physiological characteristics.

If you must collect this data:

• Make it optional: If the data is helpful but not critical, do not make the field required.
• Use open text: If you don’t need to sort data by gender, provide an open text box for users to type their identity.
• Inclusive options: If using a dropdown for gender, include “Nonbinary” and “Decline to state.”
• Legal mandates for “sex”: If federal guidelines (e.g., Common App, government reporting) require biological sex, explain why. Example: “Federal guidelines mandate we collect the legal sex listed on your birth certificate.”