Web and webform best practices

Our office keeps up on the latest digital trends and best practices. Here are our recommendations for several common issues.

CAPTCHA

Avoid using CAPTCHAs when possible

A CAPTCHA is an attempt to stop nonhuman users (bots) from interacting with website forms by requiring the user to perform a task that a bot wouldn’t be able to complete. While CAPTCHAs are generally effective at stopping spam, they are not accessible to all users; they prevent some human users from completing the form.

The Washington University web standard is to avoid using CAPTCHAs.

However, in circumstances when a form is attracting troublesome amounts of fake submissions, stopping spam entries may outweigh the accessibility and user experience disadvantages of using a CAPTCHA. Formidable Forms, the form solution primarily used by the WashU digital team, provides reCAPTCHA as an option. While it is still better to avoid using a CAPTCHA at all if possible, reCAPTCHA is somewhat more accessible than many other CAPTCHA offerings and is a free service from Google.

Additional perspectives on CAPTCHA accessibility

Fun fact: “CAPTCHA” is an acronym for “Completely Automated Public Turing test to tell Computers and Humans Apart.”

Carousels, sliders, rotators

Avoid carousels, sliders and rotators

A primary principle of web usability is empowering users with as much control over their Web experience as possible. Fundamentally, autorotating carousels, sliders and rotators remove control from the user.

Moving elements cause accessibility issues for users with difficulty clicking items quickly or precisely, and text that moves may prohibit international or low-literacy users from having enough time to read the message.

Messages that are not always displayed on the page may not deliver the appropriate message to appropriate users if the message happens not to be showing when the user is looking.

Data from higher education websites shows that carousels are ineffective.
The web team at ND.edu (Notre Dame) has shared data on the rates of interaction with the carousel on the ND.edu homepage. In January through June 2013, only 1.08% of users clicked on a carousel feature; of this 1.08% of users, 89.1% of the clicks were on the first message in the carousel. See additional information about higher education websites from U of Admissions Marketing.

rotators

Gender and sex on web forms

If possible, omit the gender and/or sex question entirely.

Ask yourself or the campus partner:

  • Is the information needed “gender” (i.e., “gender” refers to the socially constructed roles, behaviors, activities, and attributes that a given society considers appropriate) or “sex” (i.e., “sex” refers to biological and physiological characteristics)? (These definitions are pulled from the WHO on gender and health.)
  • Is data about gender and/or sex truly necessary?
  • What information are you ultimately trying to gather? Is it gender and/or sex in and of itself, or can you ask for the desired information more directly?
  • For instance: “What should precede your name? Mr., Mrs., Dr., etc.”; or “What is your preferred gender pronoun?” If data about gender and/or sex is not absolutely necessary, removing the question simplifies our data output, avoids the sensitivity of the question, and makes it easier for the user to complete the form.

If it is not possible to omit the gender and/or sex question:

  • If gender and/or sex information is strongly desired but not critical, consider making the gender and/or sex question optional.
  • If gender information is necessary but it is not necessary for the data to be sortable by gender, consider an open-ended question such as “Gender: _______” (with an open text box).
  • Consider adding some language about why the question is being asked and how the information will be used.
  • If gender information is necessary and it is necessary for the data to be sortable by gender (though less desirable than an open text box), consider adding selections for “decline to state” and/or “nonbinary” in addition to “man” and “woman.”
  • If sex information is necessary, then we recommend rewording the question to ask specifically about sex and changing the answer options to be restricted to male or female. We also recommend considering adding some language about why the question is being asked (e.g., required by the government) and what definition of sex you are using (e.g., what appears on the individual’s birth certificate).
  • Sample text, as used on the Common Application: “Federal guidelines mandate that we collect data on the legal sex of all applicants. Please report the sex currently listed on your birth certificate.”

Online resources

Heading tags

Heading tags should reflect the semantic structure of the web page.

Heading tags (< h1 >, < h2 >, < h3 >, etc.) are HTML elements created with the purpose of communicating a hierarchy of headline importance. Communicating this hierarchy of page text and topics is critical for human readers, assistive devices and search engine crawlers alike, giving both the ability to identify the information structure of a page.

In a 2017 study, WebAIM found that over 60 percent of screen reader users prefer to use headings to navigate web pages. Some screen readers read out loud the level of a heading,  so a screen reader experience of the prospective students page on wustl.edu read through a screen reader by scanning headings would begin to read as: “Heading level 1, prospective students.”

While heading tags do generally correspond with design styles, this is only a far secondary – and purely aesthetic – purpose. Do not decide which heading tag to use based on how it looks on the front-end of the page, as this is not the functionality that you will truly be creating by using the tags.

Also related are HTML elements that have semantic meaning, such as the elements used to present text in italics and bold. Use < em > (italics) and < strong > (bold) to provide semantic strength to the text within the HTML elements.

Additional perspectives on heading structure

Links opening in new tabs

Avoid forcing users’ browsers to open links in new tabs/window.

As a rule of thumb, it is best to give site users as much control as possible over their experiences of your website. The default user experience with links is that users can open a link in a new tab manually if they desire. Forcing links to open in new tabs through HTML code takes control of the site experience out of your users’ hands. This is one reason that the Washington University in St. Louis Web standard is not to force links to open in new tabs.

The definitive reason not to force users’ browsers to open links in new tabs/windows is that it creates an accessibility issue. For users accessing your website via assistive devices such as screen readers, a link that opens in a new tab can cause confusion. Because users with low sight or cognitive disabilities may not be able to identify when a new tab opens, opening in a new tab “breaks” their back buttons and disrupts their experience of your site. If links open in new tabs, it is necessary to alert users. Current browsers do not perform this function. It is possible to force links to open in new tabs if you provide a notification method in addition to visual cues, such as typing inside the link text a cue like, “(opens in new tab).”

Additional perspectives on opening links in new tabs

Position on frequently asked questions (FAQs)

Avoid using frequently asked questions (FAQs) on your website.

For a user, clicking on “FAQ” is a mystery. There’s no telling what might be behind that label. While the user’s urgent question might be answered on that page, it is equally likely that the question is not addressed at all. FAQs hide important information behind a “mystery meat” label.

The purpose of thoughtfully organizing a website into topics and navigation is precisely to answer users’ frequently asked questions. For less “frequent” questions and topics, the user should be able to locate information on the topic via site search.

The question/answer format itself is not necessarily problematic. It is the bundling of multiple topics of questions/answers in one generic FAQ category that makes users work very hard to find the information they are seeking.

Data from site search (what queries users are typing into the search box) is an excellent way to make sure that you are answering all your users’ questions through your website’s content. If you notice that users are searching for a topic that your website doesn’t currently cover, consider adding content (and possibly a new page or post) about that topic.

Additional perspectives on FAQs

Contact

If you have any questions about the best practices above, or would like guidance on other issues, please contact Ria Sharon.