Using enterkeyhint Attribute to Build Better Mobile Forms

— Do & Learn

When working with forms that handle sensitive information like personal details, passwords, or financial data, paying attention to privacy is crucial. It’s about respecting your users and protecting their personal information. Every time you collect or process data through a form, you need to be clear about how you will use, store, or share this information. Here are some simple steps to help you build trust with your users.Limit Data Collection Only ask for the information you need to make your form work. For example, if you’re creating a signup form for a newsletter, you only need the user’s email address. Avoid requesting extra details such as phone numbers or addresses unless they are necessary. Similarly, for a contact form, asking for just a name and email address may be enough in most situations.Collecting only necessary data does not only reduces the risk of exposing personal information but also improves the user experience. Short, straightforward forms are easier to complete and less frustrating for users.Tip: Regularly check your forms to ensure they only collect necessary information. This keeps your forms user-friendly and helps protect personal data.Provide Clear Data Collection DetailsClearly inform users about what data you’re collecting and why. Make sure to always ask for their explicit permission before processing their sensitive information. Use clear labels: For example, instead of just a checkbox that says “I agree,” use labels like “I agree to receive emails at this address” Provide additional text: Include a brief description near the checkbox or consent request. For example, “We will use your email address only to send you updates and offers. You can unsubscribe at any time.” Highlight important details: If you are collecting sensitive information, make sure to explain why it’s needed and how it will be protected. For example, “We need your phone number to provide customer support. Your number will not be shared with third parties.”Tip: Make sure the consent request is easy to understand and does not use complicated legal terms. This helps users make informed decisions about their data.Bad approach: I agree Sign UpGood approach: I agree to receive newsletters at this email address. (We will use your email only to send updates and offers. You can unsubscribe at any time.) Sign UpHide/Mask Sensitive InformationFor fields that require sensitive information such as passwords, credit card numbers and CCV, use masking techniques to hide the user's input. This ensures that user's sensitive data is not exposed while they are typing. For example, show asterisks (****) instead of the actual characters in password fields, CVV or any other similar information.Bad approach: Password:  CVV:  SubmitGood approach: Password:  CVV:  SubmitAllow Data Access and UpdateGive users the option to view their data, make updates, or delete it if they want to. For example, if a user wants to change their email address, they should be able to update it easily in their account settings. This will help users feel in control of their personal information and build trust.Update Privacy Practices RegularlyStay up-to-date with changes in privacy laws, such as GDPR (General Data Protection Regulation) and CCPA (California Consumer Privacy Act). Regularly review and update your privacy practices to ensure compliance with these laws.Tip: Consider having a privacy expert review your policies periodically to ensure they meet legal requirements and best practices.ConclusionHandling user data with care is a legal requirement but also essential for building trust with your users. By following these steps, you can protect user privacy and make sure your forms are secure and trustworthy. Showing that you are committed to protecting personal information helps create a safe environment for your users, therefore increases your user acitvity and engagement. :root { --post-background-color: #005ae8; --post-content-color: #ffffff;}

— Do & Learn

If you’ve ever struggled with typing the right information into a web form on your phone, you’ll appreciate how much a simple change like inputmode can improve the experience. But what exactly is inputmode, and how can you use it to make your forms more user-friendly?What is Inputmode?inputmode is an HTML attribute that tells the browser which type of virtual keyboard to display when a user focuses on an input field. By showing the appropriate keyboard, it makes typing faster and reduces errors. It’s especially useful on mobile devices where keyboard layouts can change based on the type of data you need to enter. inputmode is primarily used on <input /> elements but it can also be applied on any other HTML element in contenteditable mode. How Does inputmode Work?When you add the inputmode attribute to an input field, you specify the type of data you expect users to enter. The browser then displays the most relevant keyboard. Here are all the values that inputmode can have: text: Default keyboard for text input. numeric: Number pad for numerical input. decimal: Number pad with a decimal point. tel: Telephone keypad for entering phone numbers. It includes the digits 0–9, the asterisk (*), and the pound (#) key email: Keyboard optimised for email addresses. Includes @ and .com buttons. url: Keyboard optimised for URLs (includes / and . buttons). search: Keyboard optimised for search input. For example, the return/submit key may be labeled "Search", along with possible other optimisations. none: No virtual keyboard. For when the page implements its own keyboard input control.ExamplesLet’s look at some examples of how to use inputmode in your forms:Numeric <label for="amount">Amount:</label> <input type="text" id="amount" inputmode="numeric" placeholder="Enter amount"/>The keypad on mobile will look something like this. (This can vary depending on the mobile OS, this example shows how it looks on iOS)Tel <label for="phone">Phone:</label> <input type="text" id="phone" inputmode="tel" placeholder="Enter your phone number"/>The keypad on mobile will look something like this:Email <label for="email">Email:</label> <input type="text" id="email" inputmode="email" placeholder="Enter your email"/>The keypad on mobile will look something like this:UrlHere is an example of using a <div> element in editable mode as a field: <label for="url">Url:</label> <div contenteditable="true" id="url" inputmode="url" placeholder="Enter a url"/>The keypad on mobile will look something like this:When to Use inputmodeIf you're using the HTML <input> element with a specific type attribute (other then 'text'), the keypad will be automatically shown depending on the type. However, if you need a more custom input or other editable element then you might need to use the proper inputmode. Using the correct inputmode will allow you to optimise the input experience for users, especially on mobile devices. Here are some situations where it can be helpful: Numeric: Credit Card Numbers Security Codes (e.g., CVV for credit cards) Bank Account Numbers Social Security Numbers Employee or Student ID Numbers Membership Numbers Serial Numbers for Products Decimal: Prices Weights Product Dimensions Coordinates (e.g., latitude and longitude) Financial Data (e.g., interest rates) Measurement Units (e.g., height, length) Tel: Phone Numbers Fax Numbers Email: Email Addresses Contact Forms URL: Website URLs API Endpoints Search: Search Fields on Websites Search Boxes in Applications Text: Names Addresses General Text Inputs By making these small adjustments, you can significantly improve the user experience on your web forms, making them quicker and easier to fill out.Browser supportinputmode attribute is supported by most major browsers as shown on the table below. :root { --post-background-color: #bee4da; }

— Do & Learn

Why is accessibility in web forms important Accessibility in web forms ensures that all users, including those using assistive technologies such as screen readers and keyboard-only navigation, can interact with and complete web forms easily. There are already established accessibility standards and best practices that developers can follow to create inclusive online web forms that improve the overall user experience by making it usable for everyone. (Some resources are included at the end of this post).Semantic HTML form elements One of the most important step to creating accessible forms is using the proper semantic HTML form elements such as: <form>, <input>, <label>, <select>, <textarea>, <button>, <fieldset>, <legend>, <datalist>, <output>, <option>, <optgroup>. All of these elements clearly describe their meaning in a human and machine-readable way and provide context to web content, enabling assistive technologies to interpret and interact with the content accurately. Properly structured semantic HTML elements also enable better keyboard navigation essential for users who rely on keyboards or other input devices other than mouse. Using the correct element such as <form> will ensure that pressing the Tab key through a form follows a logical order, that will make form completion easier, or using a <button> element will trigger form submission by default when the Enter key is pressed. In the same way, associating a <label> with an <input> helps screen readers announce the label when the input field is focused, which helps users understand the purpose of the field. In some situations, custom form elements might be needed if the provided HTML elements are not enough for the purpose of if a more customised look is required. In which case it is very important to make the custom elements accessible using the proper ARIA (Accessible Rich Internet Applications) roles and attributes. However, relying on semantic HTML elements whenever possible will certainly reduce the need for additional ARIA roles and properties which will minimise complexity and potential errors.How to create accessible formsPlaceholders Most often, placeholder text is used to provide instructions or an example of what kind of data is required for a certain form field. It is usually displayed with lower color contrast and it disappears when the user starts typing. Placeholders can provide valuable guidance for many users, however it is important to always use it alongside a label as assistive technologies do not treat placeholders as labels.LabelsLabel elements provide clear, descriptive text associated with form fields that allow all users to better understand the purpose of each field. Here are a few approaches of using label elements when creating accessible forms.Explicitly associating labels with form fields: The most common and recommended approach is using the for attribute on a <label> element to associate it with an <input> element by matching the for attribute with the id of the input element. <label for="username">Username</label> <input type="text" id="username" name="username"/>Wrapping the form field in label element: Sometimes the id of a form field might not be known or even present. In cases like this, the <label> is used as a container for both the label text and the form field so that the two are associated implicitly. <label> Username <input type="text" name="username"/> </label>However, explicitly associating labels is generally better supported by assistive technology.Using additional instructions aside from labels In some cases, additional instructions aside from the label might be required. Such as: a helper text below the input field or an additional description bellow a label element. To make the form accessible in scenarios like this, you can use the aria-labelledby and aria-describedby attributes. Here is an example: <label id="dateLabel" for="dateOfBirth"> Date of birth:</label> <input type="text" name="dateOfBirth" id="dateOfBirth" aria-labelledby="dateLabel dateHelperText"> <span id="dateHelperText">MM/YYYY</span> <label id="dateLabel" for="dateOfBirth">Date of birth:</label> <input type="text" name="dateOfBirth" id="dateOfBirth" aria-labelledby="dateLabel" aria-describedby="dateHelperText"> <span id="dateHelperText">MM/YYYY</span> Hiding the labelSometimes, the design requires omitting a label from the form field, but it is still necessary for a fully accessible form. Fortunately, there is a solution you can apply in situations like this.Hiding the label visuallyThe most common approach used is to hide the label visually but keep it available to the assistive technology devices. It can be achieved by using css to hide the element. <label for="example" class="visually-hidden">Example Label</label> <input type="text" id="example" name="example"/> .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }Please note that using visibility: hidden will not work properly in this case. The label must be hidden by displaying it in a 1 pixel area like in the example in order for the screen readers to interpret it.Labelling buttonsWhen it comes to labeling buttons, there are also a few possible solutions to make it accessible. Let's take a look at some.Adding the label inside the elementThe standard and most common approach is adding a visible text inside the button element. <button>Submit</button>Using aria-label AttributeThis attribute provides an accessible name to button elements that don't have visible text, usually buttons that contain an icon. <button aria-label="Submit">✔️</button>Using title AttributeAlternatively, the text can be placed in the title attribute. This attribute can provide additional information, although it is less preferred than aria-label.Visually hidden labelA more accessible alternative for buttons that don't have visible text is an approach similar to the visually hidden label: text that is visually hidden using CSS next to the icon. <button> <span class="visually-hidden">Submit</span> ✔️ </button>Using the value attributeWhen using an <input type="button"> for a button element, the label can be placed in the value attribute. <input type="button" value="Submit" />Using image as buttonIf the image button <input type="image"> is used, the label is set in the alt attribute. <input type="image" src="button.png" alt="Submit">Grouping elementsGrouping form elements using the appropriate HTML elements such as <fieldset> and <legend> provides semantic meaning to assistive technologies. Screen readers can understand the relationship between form elements within the group, making it easier for the users to understand the form as well.Grouping form elements also allows users to navigate between related fields more easily using the keyboard. Users can typically jump between form fields within the group using the Tab key, improving the overall usability and accessibility of the form.When a group of form elements is focused, assistive technologies can announce the group's label or legend, providing users with context about the purpose of the group. This helps users better understand the structure of the form.Grouping related fields using Fieldset and LegendThe <fieldset> element semantically groups related form fields which allows assistive technologies to interpret and understand their relationship. Visually grouped elements also make the form easier to understand and use by any user.The <fieldset> element is used in combination with the <legend> element, which provides a caption for the group. Here is an example: <form> <fieldset> <legend>Personal Information</legend> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" name="lastName"> </fieldset> <fieldset> <legend>Address</legend> <label for="street">Street:</label> <input type="text" id="street" name="street"> <label for="city">City:</label> <input type="text" id="city" name="city"> </fieldset> <button type="submit">Submit</button> </form>Radio Buttons, Checkboxes or related fields must also be grouped using <fieldset> with corresponding <legend>.For select elements with groups of options, the <optgroup> element can be used to indicate such groups. The label attribute of the <optgroup> element is used to provide a label for the group.Grouping related fields with WAI-ARIAWhen using <fieldset> and <legend> is not an option (perhaps the design requires more custom element), the same grouping of elements can be achieved by associating the related fields using WAI-ARIA attributes. Such attributes are: aria-labelledby and aria-describedby. For example, aria-labelledby can link a group of related fields to a heading that describes their collective purpose ensuring that screen readers correctly interpret this relationship to the users. Additionally, applying the attribute role="group" on an element such as <div> can be used to define a logical grouping of related fields, providing a semantic structure that assistive technologies can read.Let's modify the code of the previous example by using WAI-ARIA attributes to associate related fields without using <fieldset> and <legend>: <form> <div role="group" aria-labelledby="personalInfoHeading"> <h2 id="personalInfoHeading">Personal Information</h2> <label for="firstName">First Name:</label> <input type="text" id="firstName" name="firstName"> <label for="lastName">Last Name:</label> <input type="text" id="lastName" name="lastName"> </div> <div role="group" aria-labelledby="addressHeading"> <h2 id="addressHeading">Address</h2> <label for="street">Street:</label> <input type="text" id="street" name="street"> <label for="city">City:</label> <input type="text" id="city" name="city"> </div> <button type="submit">Submit</button> </form>Keyboard NavigationAs mentioned in this guide, enabling proper keyboard navigation is a very important step when creating accessible forms to provide a good user experience to users that use keyboard for navigating though the web. If you rely mostly on using semantic HTML elements, this is not something you need to worry about. However, when a certain custom element needs to be incorporated in a web form, you might need to follow some of the establish standards on how it should function so that you can provide proper keyboard navigation and full accessibility in your form.Depending on the type and purpose of element, the standards can slightly differ. For example, creating a custom <select> (comobox) element might require different keyboard navigation than a <button> element would. Since this is a bit larger topic, in this guide we'll only mention a few of the most common requirements for a custom form field.For example, each element contained in a form should be focused and interacted with using the Tab key. This is usually achieved by using the tabindex attribute. Some elements such as <select>, <input> or <button> should have a keyDown event listener on Enter key that will allow the specific option to be selected, the specific button clicked or the form to be submitted. In the same way, pressing the Escape key should dismiss open popups/menus and similar elements.All standards, rules and patterns for specific elements can be found on the WAI-ARIA documentation.Form validation and ErrorsEffective form validation includes providing clear information about required and optional fields along with concise error messages that are accessible to screen readers and other assistive technologies.Required fieldsRequired fields in forms are usually marked by using either the required attribute, the * symbol next to the label or both. While this may provide a good visual experience for some users, to make sure that all users can easily interact with the form additional attributes such as aria-required should be used, especially when using custom elements other than the semantic HTML form elements.Most current web browsers automatically set the value of aria-required to true when the HTML5 required attribute is present.Please note that the aria-required attribute, like all ARIA states and properties, only helps the screen readers and such devices to interpret an element as required but they have no impact on element functionality. Functionality and behaviour must be added in with JavaScript.Displaying errorsDisplaying errors in forms can be as simple as showing a certain text containing a message explaining the error for incorrect input. When using the semantic HTML elements like input with the specific type attribute such as: 'date', 'number', 'tel', 'email' etc. such message is shown by default that is already adapted for accessibility. But when a more customised error message is needed, specific attributes must also be applied to ensure accessibility.The attributes aria-invalid and aria-errormessage should be used together to indicate an error in a form field. Both aria-invalid and aria-errormessage are applied to the input field while the aria-invalid is a boolean value indicating if there is an error or not, and aria-errormessage contains the id of the element where the error message is shown. The aria-errormessage attribute should only be used when the value of a field is not valid that is when aria-invalid is set to 'true'. If the field is valid and you include the aria-errormessage attribute, make sure the element referenced is hidden, as the message it contains is not relevant.Here is an example: <label for="email">*Email address:</label> <input id="email" type="email" name="email" aria-invalid="true" aria-errormessage="emailError" /> <span id="emailError">Incorrect email</span>However, the screen reader won't automatically read the error message when it appears solely based on the presence of aria-errormessage attribute. To allow announcing the error message when there is an error on change on the input or on form submit, you should apply another attribute on the element that contains the error message: aria-live. This attribute can have one of the three values: assertive - Indicates that updates to the region have the highest priority and should be presented to the user immediately. off (default) - Indicates that updates to the region should not be presented to the user unless the user is currently focused on that region. polite - Indicates that updates to the region should be presented at the next graceful opportunity, such as at the end of speaking the current sentence or when the user pauses typing. FormFusion and accessibilityIf you are like me and you are not a fan of repeting code or you simply don't want to worry too much about accessibility you can always use libraries such as FormFusion that make creating forms easy and worry-free. The library offers fully accessible form elements easy to customise along with built-in validation.Here is an example of the form mentioned previously, built using FormFusion: import { Form, Input } from 'formfusion'; import './App.css'; function App() { return ( <Form> <fieldset> <legend>Personal Information</legend> <Input type="alphabetic" id="firstName" name="firstName" label="First name" classes={{ root: 'formControl', error: 'formControl__error' }} /> <Input type="alphabetic" id="lastName" name="lastName" label="Last name" classes={{ root: 'formControl', error: 'formControl__error' }} /> <Input type="email" id="email" name="email" label="Email" required classes={{ root: 'formControl', error: 'formControl__error' }} /> </fieldset> <fieldset> <legend>Address</legend> <Input type="text" id="street" name="street" label="Street" classes={{ root: 'formControl', error: 'formControl__error' }} /> <Input type="alphabetic" id="city" name="city" label="city" classes={{ root: 'formControl', error: 'formControl__error' }} /> </fieldset> <button type="submit">Save</button> </Form> ); } export default App;FormFusion will automatically add all of the necessary attributes to make the form fully accessible. It will also handle the validation and how the errors are displayed depending on the selected validation method (validateOnChange or validateOnBlur). The final HTML structure of this code in the browser, assuming that the email field was already interacted with, will look like this: <form class="FormFusion"> <fieldset> <legend>Personal Information</legend> <div class="FormFusion-Input__root formControl"> <label for="firstName" class="FormFusion-Input__root__label">First name</label> <input id="firstName" name="firstName" class="FormFusion-Input__root__field" type="text" pattern="^[a-zA-Z\s]+" data-type="alphabetic" value="" aria-invalid="false" /> <span class="FormFusion-Input__root__error formControl__error" id="FormFusion-firstName-error" aria-live="polite"> </span> </div> <div class="FormFusion-Input__root formControl"> <label for="lastName" class="FormFusion-Input__root__label">Last name</label> <input id="lastName" name="lastName" class="FormFusion-Input__root__field" type="text" pattern="^[a-zA-Z\s]+" data-type="alphabetic" value="" aria-invalid="false" /> <span class="FormFusion-Input__root__error formControl__error" id="FormFusion-lastName-error" aria-live="polite"> </span> </div> <div class="FormFusion-Input__root formControl"> <label for="email" class="FormFusion-Input__root__label">Email</label> <input id="email" name="email" required="" class="FormFusion-Input__root__field" type="email" data-type="email" value="" aria-invalid="true" aria-errormessage="FormFusion-email-error" /> <span class="FormFusion-Input__root__error formControl__error" id="FormFusion-email-error" aria-live="polite"> Please include an '@' in the email address. 'sa' is missing an '@'. </span> </div> </fieldset> <fieldset> <legend>Address</legend> <div class="FormFusion-Input__root formControl"> <label for="street" class="FormFusion-Input__root__label">Street</label> <input id="street" name="street" class="FormFusion-Input__root__field" type="text" value="" aria-invalid="false" /> <span class="FormFusion-Input__root__error formControl__error" id="FormFusion-street-error" aria-live="polite"> </span> </div> <div class="FormFusion-Input__root formControl"> <label for="city" class="FormFusion-Input__root__label">City</label> <input id="city" name="city" class="FormFusion-Input__root__field" type="text" pattern="^[a-zA-Z\s]+" data-type="alphabetic" value="" /> <span class="FormFusion-Input__root__error formControl__error" id="FormFusion-city-error" aria-live="polite"> </span> </div> </fieldset> <button type="submit">Save</button> </form>The full code for this example can be found on Github and Stackblitz.ConclusionAccessibility in web forms is crucial for creating inclusive web applications. By using semantic HTML elements, following best practices, and applying ARIA roles and attributes, developers can ensure all users, including those that use assistive technologies, can easily complete forms.Well-structured forms with clear labels, logical tab order, and accessible error messages improve usability for everyone. Tools like FormFusion simplify this process by providing accessible form components.Prioritising accessibility from the start ensures a better user experience for all and contributes to a more inclusive digital world.Resources https://developer.mozilla.org/en-US/docs/Web/Accessibility https://www.w3.org/WAI/ARIA/apg/patterns/ https://www.w3.org/WAI/standards-guidelines/aria/ :root { --post-background-color: #511c69; --post-content-color: #ffffff;}