Guided: Keyboard Navigation and Form Design for Web Accessibility

Table of Contents

1. Challenge

   Introduction

   Keyboard navigation and accessible form design are important for web accessibility because they help users with motor or visual impairments, as well as users who rely on assistive technologies, interact effectively with web content. Applying these practices helps create more inclusive and user-friendly experiences.

   ---

   Scenario

   You have been assigned to improve the accessibility of a new user registration form for ABC-mobile. The form includes the following fields:

   • First Name
   • Last Name
   • Area Code and Cell Phone Number
   • User ID
   • Password

   ABC-mobile, an e-commerce site that sells phone accessories, requires new customers to register by providing this information. In this lab, you will apply web accessibility practices to make the form easier to use for people who rely on keyboard navigation and screen readers.

   A pre-built version of the form is provided as a starter file. Your task is to enhance its accessibility by improving keyboard navigation, focus visibility, form labeling, contextual information, and error handling.

   ---

   By completing this lab, you will be able to:

   1. Implement character key shortcuts: Set up keyboard shortcuts for more efficient navigation.
   2. Improve keyboard focus and visibility: Ensure interactive elements are keyboard-accessible and visually distinct when focused.
   3. Associate labels with form controls: Link labels with their corresponding form controls for better screen reader support.
   4. Add contextual information to form elements: Associate additional instructions or descriptive information with form controls.
   5. Implement accessible error messages: Use ARIA attributes to communicate validation states and error messages.

   ---

   Before you start, note the following:

   1. You will primarily work in the index.html file, with additional changes in script.js and styles.css.

   2. If you need help, refer to the solution directory.

   3. After making code changes, refresh the web browser to view the updates.

   4. To test accessibility features with a screen reader, use the following keyboard shortcuts:

      • Windows: Windows key + Control + Enter
      • Linux: Alt + Windows key + S (Orca screen reader)
      • macOS: Command + F5
2. Challenge

   Implement character key shortcuts

   In this step, you will implement character key shortcuts that users can use to quickly move focus to specific fields in the form.

   You can create these shortcuts by adding the accesskey attribute to an <input> element.

   In the following example, accesskey="q" is added to the <input> element.

   Example:

   <input type="text" id="first-name" name="first-name" accesskey="q" required>
   

   Use the appropriate access key shortcut for your operating system to move focus to the associated field:

   • Windows and Linux: Alt + [Key]
   • macOS: Control + Option + [Key]

   info> Avoid assigning an accesskey that conflicts with existing browser or assistive technology shortcuts. In this step, you learned how to add keyboard shortcuts to help users quickly access specific form fields, improving keyboard navigation.

   In the next step, you'll learn how to improve keyboard focus and visibility by verifying a logical navigation order and making focused elements easier to identify.

3. Challenge

   Enhance keyboard focus & visibility

   Designing webpages for users with motor and visual impairments involves supporting keyboard navigation, providing clear focus indicators, and minimizing the need for fine motor control, such as precise clicks.

   For users with visual impairments, clear and visible focus indicators help them track their location on a page as they navigate forms or other interactive elements.

   In this step, you'll:

   • Verify that form controls follow a logical keyboard navigation order.
   • Apply clear CSS outlines or background changes to improve the visibility of focused elements.

   ---

   Keyboard navigation order

   Interactive elements such as input fields and buttons are included in the keyboard navigation order by default. When these elements are arranged in a logical order in the HTML, users can move through them sequentially by using the Tab key.

   For accessible keyboard navigation, rely on the natural document order rather than assigning positive tabindex values to form controls.

   Try it out

   Click somewhere on the page that is not inside a form field so that no form control has focus.

   Then, press the Tab key repeatedly and confirm that focus moves through the controls in this order:

   1. First Name
   2. Last Name
   3. Phone Number
   4. User ID
   5. Password
   6. Register

   You can also press Shift + Tab to navigate through the controls in reverse order.

   Because the form controls are already arranged in a logical order in the HTML, no tabindex attribute is required.

   If the focus order matches the sequence above, continue to the next task. In this step, you verified that the form controls follow a logical keyboard navigation order and applied clear visual indicators to show which element has focus.

   Next, you'll focus on associating form controls with labels to improve screen reader accessibility.

4. Challenge

   Associate labels with form controls

   In this step, you'll focus on ensuring that labels are properly associated with their corresponding form controls. This is important for accessibility because it helps screen readers provide users with the context they need when interacting with form fields.

   Link each form control to its label by using the for attribute on the <label> element and a matching id on the associated <input>.

   Example:

   <div class="form-group">
       <label for="ageField">Age (Number)</label>
       <input type="text" id="ageField" name="first-name" required>
   </div>
   

   In this example, the for="ageField" attribute on the label links it to the input with id="ageField". When a user navigates to the input, a screen reader can announce the label text, "Age (Number)." This association helps users understand the purpose of the field.

   info> The screen reader can announce "Age (Number)" when you navigate to the input because the label is associated with it.

   Now, you'll update the registration form by associating each label with its corresponding input field. Linking a label helps users understand the purpose of an input field, but some fields may also require additional instructions or descriptive information.

   In these cases, you can use the aria-describedby attribute to associate the input with additional text. A screen reader can then announce that descriptive text along with the field information.

   Example:

   <label for="dob">Date of Birth</label>
   <input type="date" id="dob" name="dob" aria-describedby="dob-help" required>
   <small id="dob-help">Use the format MM/DD/YYYY.</small>
   

   info> In this example, the screen reader can announce the Date of Birth label along with the additional instruction, "Use the format MM/DD/YYYY."

   The visible label remains concise while the associated description provides additional context for users who rely on assistive technologies.

   ---

   You will now add descriptive information to the Phone Number field by using aria-describedby. Great job! These updates have improved the form's accessibility by associating labels with their corresponding form controls and providing additional descriptive information for the Phone Number field.

   In the next step, you'll continue using aria-describedby to associate the User ID field with additional instructions for users who rely on assistive technologies.

5. Challenge

   Enhance form elements with contextual information

   In this step, you will learn how to associate form elements with additional contextual information, making them more accessible and easier to understand for users who rely on screen readers.

   Some form fields require more than a simple label. They may also need additional instructions to help users understand what information is required.

   For example, a form may have a User ID label, but users may also need to know that the User ID must be between 8–12 characters.

   You can provide a brief message below the input field to convey this information. To make the additional information available to assistive technologies, associate the input with the message by using the aria-describedby attribute.

   ---

   Now, you'll add additional information to the User ID field.

   Great! When you navigate to the User ID field, the screen reader will announce: "User ID should be 8-12 characters, letters, and numbers only."

   Next, you'll explore how to ensure error messages are accessible to users who rely on assistive technologies.

6. Challenge

   Present error messages

   In this step, you will enhance the form's error handling by implementing accessible error messages. These messages provide users with feedback when required fields are empty or contain invalid input.

   You'll use ARIA attributes such as aria-live and aria-invalid to help screen readers communicate validation errors.

   ---

   The aria-invalid attribute

   The aria-invalid attribute indicates whether an input field contains an invalid value. When a field fails validation, setting aria-invalid="true" helps communicate its invalid state to assistive technologies.

   ---

   The aria-live attribute

   The aria-live attribute allows content, such as error messages, to be announced automatically by screen readers without requiring the user to move focus to it.

   It can use different values, such as:

   • aria-live="polite" : Announces changes when the user is idle, without immediately interrupting the current task.
   • aria-live="assertive": Announces changes immediately.

   This is useful for notifying users about validation errors as they occur.

   ---

   Using aria-invalid and aria-live attributes together

   Combining aria-invalid and aria-live makes form validation more accessible. aria-invalid marks a field as invalid, while aria-live ensures error messages are automatically announced.

   How it works:

   • Invalid input: aria-invalid="true" indicates that the field is in an invalid state.
   • Error announcement: The error message with aria-live="assertive" is announced when its content changes.

   ---

   Now, you'll apply aria-invalid="false" to all form input fields. Great! Now all of the fields are initially marked as valid.

   Next, update the error message to include the aria-live attribute so screen readers can announce new validation errors when they appear. Next, you will validate whether each input field is empty. If a field is empty, mark it as invalid by setting aria-invalid to true.

   You will make these changes in the script.js file, which loops through the form fields and checks their values. You can test the form by leaving one field empty. An error message in red should appear at the bottom, and the screen reader will announce the relevant error.

   ---

   Great job! With these changes, error messages are now announced to users, making it easier for them to understand the issue.

   You can use the screen reader to test the webpage by entering data and submitting the form.

7. Challenge

   Conclusion & next steps

   In this lab, you learned how to make web forms more accessible by implementing character key shortcuts, improving keyboard focus visibility, associating labels with form controls, providing additional contextual information, and making validation states and error messages available to assistive technologies by using ARIA attributes.

   These techniques can help create a more inclusive user experience, especially for people who rely on keyboard navigation or assistive technologies.

   Next steps:

   • Explore additional ARIA attributes and their appropriate use cases.
   • Continue practicing these concepts by applying them to more complex forms and other interactive elements.
   • Test your forms with screen readers and keyboard navigation to better understand how users interact with them.

   By incorporating these accessibility practices into your development workflow, you can make your websites more usable and inclusive for a wider range of users.