Making Your HubSpot Website WCAG 2.1 Compliant

1.3.5 Identify Input Purpose

MCS Accessibility Team

MCS Accessibility Team
Last Updated July 23, 2020

The following directions are part of a full step-by-step guide to making a HubSpot website WCAG 2.1 AA compliant. These recommendations are intended for websites managed on the HubSpot CMS but can be adapted for other content management systems. In addition to explaining the WCAG Success Criteria and how to address them, this guide also describes how the AudioEye Managed solution may address each issue.

LEVELAA
Success Criteria

1.3.5 Identify Input Purpose

  • Resolved
  • Partially Resolved
  • Manually Managed
  • N/A - Level AAA
Principle: Perceivable
Information and user interface components must be presentable to users in ways they can perceive.
Guideline: Adaptable
Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

The purpose of each input field collecting information about the user can be programmatically determined when:

  • The input field serves a purpose identified in the Input Purposes for User Interface Components section; and
  • The content is implemented using technologies with support for identifying the expected meaning for form input data.

View Official WCAG 2.1 Compliance Techniques

  • This criteria is consistently resolved with AudioEye Managed.

Understanding 1.3.5 Identify Input Purpose

The purpose for the input should be programmatically identifiable. In other words, the input meaning should be made clear for all assistive devices to communicate to their users.

The input type attribute is definitely a good place to start for this guideline. If input type is not defined, the input will default to a text input, this poses a problem for all users when trying to identify the inputs purpose. Screen readers and other assistive devices can use these type attributes to communicate the input purpose to their users. Below are just a few input types, you can see a complete list here.

  • tel
  • email
  • number
  • password
  • date

These input types may be accurate overall, but they're very broad, and don't describe the specific purpose or detail of requested information. For these reasons they do not, on their own, satisfy this guideline. 

Example: 

An email type field specifies the need for an email, but doesn't quite narrow down whose email should be entered. 

Screenshot of a code snippet showing type, name and placeholder

How AudioEye Helps

AudioEye will detect and remediate incorrect autocomplete attribute.

How HubSpot Helps

HubSpot helps with this guideline by predefining autocomplete values for common contact properties.

Recommended Solutions

The HTML autocomplete attribute satisfies this guideline. This attribute has a number of well defined, very specific values that provide a detailed purpose for fields. For example, input type can specify an input is looking for a telephone number, however, that can leave visitors with the question of whether it is their business or home number. Autocomplete avoids these questions by providing more precise detail up front. Below are a few popular examples, you can view the entire list here

  • Family Name = family-name
  • First Name = given-name
  • Telephone = tel
  • New Password = new-password
  • Current Password = current-password

Autocomplete attributes provide users with much more detailed information on the kind of data that the user should input. Given this information, we can update our input fields to be more accessible by making the changes in the screenshot below.

Screen Shot 2020-01-17 at 3.57.42 PM

Implementing autocomplete on all input fields also gives users with cognitive disabilities or other challenges a way to avoid typing common information repeatedly. In addition to less input, assistive programs and plugins often use autocomplete attributes to add icons and visual identifiers to fields based on their autocomplete value. 

Lastly, to add additional direction and means for identifying input purpose, designers and developers should also ensure that input labels and heading fields properly specify the purpose of the input they are associated with. 

For more information, please visit the official W3C article: Understanding 1.3.5 Identify Input Purpose


Download the WCAG 2.1 Compliance Checklist

Checklist Download

Questions?

Let us know if we can help you address this specific WCAG Recommendation.

Recent Morey Creative Studios Blog Articles