Accessibility Issue on Contacts Page: Form Control Element (WCAG 2.1: 4.1.2 Name, Role, Value & 1.1.1 Non-text Content)

How to use GitHub

• Please use the 👍 reaction to show that you are affected by the same issue.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Steps to reproduce

1. Go to Contact Page
2. Use a screen reader and navigate within contact's information

Expected behaviour

Each form control must have an associated label.

Why is this important?

Associating a meaningful label with every UI control allows the browser and assistive technology to expose and announce the control to a user. Associating a visible label also provides a larger clickable area.

Who does this affect?

• Blind people using screen readers who cannot see the context around the control
• People with dexterity impairment using voice control

Actual behaviour

Form control element has no associated label.

<input name="fullname" spellcheck="false" autocorrect="off" autocomplete="off" type="text" placeholder="Name" id="contact-fullname">

<input name="org" spellcheck="false" autocorrect="off" autocomplete="off" type="text" placeholder="Firma" id="contact-org">

<input style="width: 0px; position: absolute; padding: 0px;" class="multiselect__input" tabindex="0" placeholder="Typ auswählen" autocomplete="nope" type="text" name="">

<input class="property__value property__value--with-ext" type="text" inputmode="tel">

<button data-original-title="null" aria-label="" property-component="[object Object]" class="action-item action-item--single property__actions icon-delete undefined undefined has-tooltip" rel="noreferrer noopener" data-v-1b33c33b="">

<input class="property__value" type="text">

<input style="width: 0px; position: absolute; padding: 0px;" class="multiselect__input" tabindex="0" placeholder="Eigenschaftstyp auswählen" autocomplete="nope" type="text" name="">

What to do

• If the control is a labelable element, add a for attribute to a visible label with the id of this control (e.g. );
• OR if the control is a labelable element, put the control inside a visible element;
• OR add an aria-labelledby attribute to the control. It must point to visible text on the page that is meaningful as a label;
• OR if the design cannot have a visible label, provide a label using the aria-label attribute (e.g. aria-label="Activities");
• OR if the design cannot have a visible label, use the title attribute to provide a label.

Start on the Contacts page and reproduce the problem with a screen reader while navigating the listed inputs and delete button. Check each control against the reported markup and add a meaningful visible or ARIA label as appropriate; done means every form control has an associated, meaningful label.