Website Accessibility Guide

Making Your HubSpot Website WCAG 2.1 Compliant

1.3.5 Identify Input Purpose

MCS Accessibility Team

MCS Accessibility Team
Last Updated November 09, 2019

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. All suggestions in this guide are in conjunction with the accessiBe solution and require an active license. For more information on the accessiBe platform and pricing, you can learn more here.

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 completely resolved with accessiBe or HubSpot.

Understanding

The key word here is 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. 

Screen Shot 2020-01-17 at 3.57.48 PM

 

The Solution

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. 

 

How HubSpot Helps

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

 

How accessiBe Helps

accessiBe does not assist with this guideline, however, as mentioned above, it will add icons to input fields that have autocomplete values. 

 

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


Download the WCAG 2.1 Compliance Checklist

What to expect if you download this checklist

Video: What to Expect If You Download this Checklist

Checklist Download

Questions?

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

Recent Morey Creative Studios Blog Articles