Missing label on recaptcha_response_field

Created on 7 March 2014, almost 11 years ago
Updated 25 November 2024, about 2 months ago

Performed an accessibility test on form that included ReCaptcha. Test caught that input named "recaptcha_response_field" lacks a label or alt attribute.

πŸ› Bug report
Status

Closed: works as designed

Version

2.0

Component

General

Created by

πŸ‡ΊπŸ‡ΈUnited States harpermd

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • πŸ‡§πŸ‡ͺBelgium hansrossel

    Drupal 10: copy web/modules/contrib/recaptcha/templates/recaptcha-widget-noscript.html.twig to your theme and replace the content with:

    {#
    /**
     * @file recaptcha-widget-noscript.tpl.php
     * Default theme implementation to present the reCAPTCHA noscript code.
     *
     * Available variables:
     * - sitekey: Google web service site key.
     * - language: Current site language code.
     * - url: Google web service API url.
     *
     * @see template_preprocess()
     * @see template_preprocess_recaptcha_widget_noscript()
     *
     * @ingroup themeable
     *
     * Accessibility issue https://www.drupal.org/project/recaptcha/issues/2213337
     */
    #}
    
    <noscript>
      <div style="width: 302px; height: 352px;">
        <div style="width: 302px; height: 352px; position: relative;">
          <div style="width: 302px; height: 352px; position: absolute;">
            <iframe src="{{ url }}" title="Google captcha" style="border: none; overflow: hidden; width: 302px; height:352px; border-style: none;"></iframe>
          </div>
          <div style="width: 250px; height: 80px; position: absolute; border-style: none; bottom: 21px; left: 25px; margin: 0px; padding: 0px; right: 25px;">
            <label class="visually-hidden" for="g-recaptcha-response">Recaptcha response</label>
            <textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 80px; border: 1px solid #c1c1c1; margin: 0px; padding: 0px; resize: none;" value="" aria-hidden="true"></textarea>
          </div>
        </div>
      </div>
    </noscript>
Production build 0.71.5 2024