Allow Accessible Forms that do not have a submit button

[barclayd]

Summary

iPlayer web has a <select> option for category selection that allows users to chose their preferred sorting of content. On selection of an option, users are redirected to a url which matches their selection. This can be seen on the top right of this page.

Due to a bug introduced by Chrome, if a user navigates back to the previous page after selecting a category, Chrome will auto-complete the <select> with the user's previously selected option, thus making it out of sync with the url and page the user is on.

A workaround for this was found by wrapping the <select> element in a <form autocomplete="off">, as opposed to a wrapping <span> that was previously used.

However, the use of a <form> element without one of the following causes the form must have a submit button specfile to fail:

• input[type=submit]
• button[type=submit]
• input[type=image]

None of these solutions are applicable for the <select> component as the onchange handler of a selected option redirects the user, acting as an implicit submit button, and it would not be practical to re-work the dropdown in order to implement this functionality.

In order to make it accessible, we have followed the W3 guidelines for 3.2.2. In its list of sufficient techniques of implementations, the first suggestion to make a <form> accessible without the presence of submit button is to use the aria-describedby property here.

Therefore, we have adjusted the markup below in order to make it accessible and fulfill the W3 guidelines for 3.2.2.

Markup for the dropdown is as follows:

<form class="dropdown category-dropdown dropdown--transparent" autocomplete="off" aria-describedby="description">
  <p id="#description">Selecting a sort option from the list will redirect you to the category page sorted by your selection</p>
  <label for="sort_by" class="dropdown__label">Sort by</label>
  <span class="dropdown__label-separator">:</span>
  <select id="sort_by" class="dropdown__select typo typo--bullfinch typo--bold">
    <option selected="" value="featured">Featured</option>
    <option value="a-z">A-Z</option>
    <option value="most-recent">Most recent</option>
  </select>
  <svg role="presentation" class="dropdown__icon" focusable="false">
    <use
      xmlns:xlink="http://www.w3.org/1999/xlink"
      xlink:href="#tvip-down-triangle"
      href="#tvip-down-triangle"
      role="presentation">
      </use>
  </svg>
</span>

Expected Behaviour

Suggestion:

Given: a form is present
When: there is no submit button for the form
Then: the form must fulfill criteria as specified by W3 3.2.2 accessibility guidelines in order to be accessible. Examples includes a property of aria-describedby being an attribute on the <form> element.

Current Behaviour

The following error is outputted when the a11y tests run against a <form> without a submit button, resulting from this specfile:

Forms must have submit buttons

Improvement:

Adjust the formsMustHaveSubmitButtons.js to check, in the case there are no submit buttons within the context of the form, for the presence of an aria-describedby property on the form itself.

Possible Solution

Amend the following file formsMustHaveSubmitButtons.js:

module.exports = {
  name: 'Forms must have submit buttons or descriptive labels',

  type: 'automated',

  failsForEach: 'visible <form> element that has no submit button (can be any of' +
                ' input[type=submit], button[type=submit], input[type=image])' or has no form[aria-describedby=""] property,

  test: function ({ $, fail }) {
    $('form:visible').each(function (index, form) {
      var submits = $(form).find('input[type=submit], button[type=submit], input[type=image]')
      if (submits.length > 0) {
        return;
      }
    var formHasDescriptiveLabel = $(form).attr("aria-describedby"));
    if (formHasDescriptiveLabel) {
       return;  
     }
    fail('Form has no submit button or accessibility:', form)
   })
  }
}

Context & Motivation

Forms without submit buttons can be accessible, as per the W3 3.2.2 guidelines

[JamieKnightBBC]

Hi,

Thanks for raising this issue and the extensive example and insight. It is extremely useful.

It appears BBC-a11y is acting correctly, in that it is applying the BBC specific HTML guidelines.

The BBC guidance on forms (https://www.bbc.co.uk/accessibility/forproducts/guides/html/form-interactions/) explicitly disallows this approach:

"Only change the users location in a page on an explicit user action, such as when a submit button is activated, not when blur, change (particularly for select elements), or focus events are fired."

I think the first step would be to open a discussion about the technique and based on that determine if a change to the guideline is required.

@EmmaJP can advise on the best way to proceed that discussion. If the guideline changes we could then look at changing bbc-a11y to match the updated guidelines.

Kind Regards,

Jamie + Lion

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.