"(required)" text added to markup for required form elements

The visual "required" marker (i.e., the asterisk) for form elements was only present with CSS.

In situations where CSS was disabled or unavailable, there was no visual indicator that the element was required.

To resolve this, the text "(required)" has been added to the labeling markup of these elements.

To prevent redundancy with the CSS marker and the element's required state in the Accessibility Object Model, this new text is hidden visually with CSS and hidden from Assistive Technology with aria-hidden="true".

Templates affected

• datetime-wrapper.html.twig
• details.html.twig
• fieldset.html.twig
• form-element-label.html.twig

If you have overridden these templates, then you should update your templates in order to improve accessibility.

Examples

datetime-wrapper.html.twig

Before

<h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>

After

<h4{{ title_attributes.addClass(title_classes) }}>
  {{- title -}}
  {%- if required -%}
    <span aria-hidden="true" class="hidden"> {{ '(required)'|t }}</span>
  {%- endif -%}
</h4>

details.html.twig

Before

<summary{{ summary_attributes.addClass(summary_classes) }}>{{ title }}</summary>

After

<summary{{ summary_attributes.addClass(summary_classes) }}>
  {{- title -}}
  {%- if required -%}
    <span aria-hidden="true" class="hidden"> {{ '(required)'|t }}</span>
  {%- endif -%}
</summary>

fieldset.html.twig

Before

<span{{ legend_span.attributes.addClass(legend_span_classes) }}>{{ legend.title }}</span>

After

<span{{ legend_span.attributes.addClass(legend_span_classes) }}>
  {{- legend.title -}}
  {%- if required -%}
    <span aria-hidden="true" class="hidden"> {{ '(required)'|t }}</span>
  {%- endif -%}
</span>

form-element-label.html.twig

Before

<label{{ attributes.addClass(classes) }}>{{ title }}</label>

After

<label{{ attributes.addClass(classes) }}>
  {{- title -}}
  {%- if required -%}
    <span aria-hidden="true" class="hidden"> {{ '(required)'|t }}</span>
  {%- endif -%}
</label>