diff --git a/packages/checkbox-group/src/vaadin-checkbox-group.js b/packages/checkbox-group/src/vaadin-checkbox-group.js
index 872eadbc1b..5be2d42e49 100644
--- a/packages/checkbox-group/src/vaadin-checkbox-group.js
+++ b/packages/checkbox-group/src/vaadin-checkbox-group.js
@@ -161,15 +161,6 @@ class CheckboxGroup extends FieldMixin(FocusMixin(DisabledMixin(DirMixin(Themabl
     });
   }
 
-  /**
-   * @return {string}
-   * @override
-   * @protected
-   */
-  get _ariaAttr() {
-    return 'aria-labelledby';
-  }
-
   /**
    * Override method inherited from `ValidateMixin`
    * to validate the value array.
diff --git a/packages/checkbox-group/test/checkbox-group.test.js b/packages/checkbox-group/test/checkbox-group.test.js
index 2cbae70fc4..4904b8e622 100644
--- a/packages/checkbox-group/test/checkbox-group.test.js
+++ b/packages/checkbox-group/test/checkbox-group.test.js
@@ -448,7 +448,7 @@ describe('vaadin-checkbox-group', () => {
     let error, helper, label;
 
     beforeEach(() => {
-      group = fixtureSync('<vaadin-checkbox-group helper-text="Choose one"></vaadin-checkbox-group>');
+      group = fixtureSync('<vaadin-checkbox-group helper-text="Choose one" label="Label"></vaadin-checkbox-group>');
       error = group.querySelector('[slot=error-message]');
       helper = group.querySelector('[slot=helper]');
       label = group.querySelector('[slot=label]');
diff --git a/packages/checkbox/src/vaadin-checkbox.js b/packages/checkbox/src/vaadin-checkbox.js
index 374c75444b..8ff1901d4e 100644
--- a/packages/checkbox/src/vaadin-checkbox.js
+++ b/packages/checkbox/src/vaadin-checkbox.js
@@ -7,10 +7,10 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -176,7 +176,7 @@ class Checkbox extends SlotLabelMixin(
         this.stateTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 
   /**
diff --git a/packages/combo-box/src/vaadin-combo-box.js b/packages/combo-box/src/vaadin-combo-box.js
index c69c192e53..00a7f4b579 100644
--- a/packages/combo-box/src/vaadin-combo-box.js
+++ b/packages/combo-box/src/vaadin-combo-box.js
@@ -6,11 +6,10 @@
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-combo-box-dropdown.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -147,7 +146,6 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes InputControlMixin
@@ -156,7 +154,7 @@ registerStyles('vaadin-combo-box', inputFieldShared, { moduleId: 'vaadin-combo-b
  * @mixes ComboBoxMixin
  */
 class ComboBox extends ComboBoxDataProviderMixin(
-  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))))))
+  ComboBoxMixin(PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))))
 ) {
   static get is() {
     return 'vaadin-combo-box';
@@ -244,7 +242,7 @@ class ComboBox extends ComboBoxDataProviderMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
     this._positionTarget = this.shadowRoot.querySelector('[part="input-field"]');
     this._toggleElement = this.$.toggleButton;
   }
diff --git a/packages/custom-field/src/vaadin-custom-field.js b/packages/custom-field/src/vaadin-custom-field.js
index a49a062cfc..76ff8e9902 100644
--- a/packages/custom-field/src/vaadin-custom-field.js
+++ b/packages/custom-field/src/vaadin-custom-field.js
@@ -189,14 +189,6 @@ class CustomField extends FieldMixin(FocusMixin(ThemableMixin(ElementMixin(Polym
     };
   }
 
-  /**
-   * Attribute used by `FieldMixin` to set accessible name.
-   * @protected
-   */
-  get _ariaAttr() {
-    return 'aria-labelledby';
-  }
-
   /** @protected */
   connectedCallback() {
     super.connectedCallback();
diff --git a/packages/date-picker/src/vaadin-date-picker.d.ts b/packages/date-picker/src/vaadin-date-picker.d.ts
index 0efcc521eb..7af94c751d 100644
--- a/packages/date-picker/src/vaadin-date-picker.d.ts
+++ b/packages/date-picker/src/vaadin-date-picker.d.ts
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -126,9 +125,7 @@ export interface DatePickerEventMap extends HTMLElementEventMap, DatePickerCusto
  * @fires {CustomEvent} opened-changed - Fired when the `opened` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class DatePicker extends DatePickerMixin(
-  InputControlMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))))
-) {
+declare class DatePicker extends DatePickerMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   addEventListener<K extends keyof DatePickerEventMap>(
     type: K,
     listener: (this: DatePicker, ev: DatePickerEventMap[K]) => void,
diff --git a/packages/date-picker/src/vaadin-date-picker.js b/packages/date-picker/src/vaadin-date-picker.js
index fc51f02c4f..a003c82e5a 100644
--- a/packages/date-picker/src/vaadin-date-picker.js
+++ b/packages/date-picker/src/vaadin-date-picker.js
@@ -9,11 +9,10 @@ import './vaadin-date-picker-overlay.js';
 import './vaadin-date-picker-overlay-content.js';
 import { GestureEventListeners } from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { DatePickerMixin } from './vaadin-date-picker-mixin.js';
@@ -113,13 +112,12 @@ registerStyles('vaadin-date-picker', [inputFieldShared, datePickerStyles], { mod
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes InputControlMixin
  */
 class DatePicker extends DatePickerMixin(
-  InputControlMixin(GestureEventListeners(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))))
+  InputControlMixin(GestureEventListeners(ThemableMixin(ElementMixin(PolymerElement))))
 ) {
   static get is() {
     return 'vaadin-date-picker';
@@ -214,7 +212,7 @@ class DatePicker extends DatePickerMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 
   /** @private */
diff --git a/packages/date-time-picker/src/vaadin-date-time-picker.js b/packages/date-time-picker/src/vaadin-date-time-picker.js
index 6150b36b77..e69617e627 100644
--- a/packages/date-time-picker/src/vaadin-date-time-picker.js
+++ b/packages/date-time-picker/src/vaadin-date-time-picker.js
@@ -405,14 +405,6 @@ class DateTimePicker extends FieldMixin(SlotMixin(DisabledMixin(ThemableMixin(El
     this.ariaTarget = this;
   }
 
-  /**
-   * Attribute used by `FieldMixin` to set accessible name.
-   * @protected
-   */
-  get _ariaAttr() {
-    return 'aria-labelledby';
-  }
-
   /** @private */
   __filterElements(node) {
     return node.nodeType === Node.ELEMENT_NODE;
diff --git a/packages/field-base/index.d.ts b/packages/field-base/index.d.ts
index 7dc89f9947..f217671f9a 100644
--- a/packages/field-base/index.d.ts
+++ b/packages/field-base/index.d.ts
@@ -1,12 +1,13 @@
-export { AriaLabelController } from './src/aria-label-controller.js';
 export { CheckedMixin } from './src/checked-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
+export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
 export { InputControlMixin } from './src/input-control-mixin.js';
 export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputMixin } from './src/input-mixin.js';
+export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
 export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';
diff --git a/packages/field-base/index.js b/packages/field-base/index.js
index 7dc89f9947..f217671f9a 100644
--- a/packages/field-base/index.js
+++ b/packages/field-base/index.js
@@ -1,12 +1,13 @@
-export { AriaLabelController } from './src/aria-label-controller.js';
 export { CheckedMixin } from './src/checked-mixin.js';
 export { DelegateFocusMixin } from './src/delegate-focus-mixin.js';
 export { DelegateStateMixin } from './src/delegate-state-mixin.js';
+export { FieldAriaController } from './src/field-aria-controller.js';
 export { FieldMixin } from './src/field-mixin.js';
 export { InputController } from './src/input-controller.js';
 export { InputControlMixin } from './src/input-control-mixin.js';
 export { InputFieldMixin } from './src/input-field-mixin.js';
 export { InputMixin } from './src/input-mixin.js';
+export { LabelledInputController } from './src/labelled-input-controller.js';
 export { LabelMixin } from './src/label-mixin.js';
 export { PatternMixin } from './src/pattern-mixin.js';
 export { ShadowFocusMixin } from './src/shadow-focus-mixin.js';
diff --git a/packages/field-base/src/field-aria-controller.d.ts b/packages/field-base/src/field-aria-controller.d.ts
new file mode 100644
index 0000000000..6442a68468
--- /dev/null
+++ b/packages/field-base/src/field-aria-controller.d.ts
@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for managing ARIA attributes for a field element:
+ * either the component itself or slotted `<input>` element.
+ */
+export class FieldAriaController {
+  constructor(host: HTMLElement);
+
+  /**
+   * The controller host element.
+   */
+  host: HTMLElement;
+
+  /**
+   * Sets a target element to which ARIA attributes are added.
+   */
+  setTarget(target: HTMLElement): void;
+
+  /**
+   * Toggles the `aria-required` attribute on the target element
+   * if the target is the host component (e.g. a field group).
+   * Otherwise, it does nothing.
+   */
+  setRequired(required: boolean): void;
+
+  /**
+   * Links the target element with a slotted label element
+   * via the target's attribute `aria-labelledby`.
+   *
+   * To unlink the previous slotted label element, pass `null` as `labelId`.
+   */
+  setLabelId(labelId: string | null): void;
+
+  /**
+   * Links the target element with a slotted error element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted error element, pass `null` as `errorId`.
+   */
+  setErrorId(errorId: string | null): void;
+
+  /**
+   * Links the target element with a slotted helper element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted helper element, pass `null` as `helperId`.
+   */
+  setHelperId(helperId: string | null): void;
+}
diff --git a/packages/field-base/src/field-aria-controller.js b/packages/field-base/src/field-aria-controller.js
new file mode 100644
index 0000000000..5ba0747cf9
--- /dev/null
+++ b/packages/field-base/src/field-aria-controller.js
@@ -0,0 +1,175 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+
+/**
+ * A controller for managing ARIA attributes for a field element:
+ * either the component itself or slotted `<input>` element.
+ */
+export class FieldAriaController {
+  constructor(host) {
+    this.host = host;
+    this.__required = false;
+  }
+
+  /**
+   * Sets a target element to which ARIA attributes are added.
+   *
+   * @param {HTMLElement} target
+   */
+  setTarget(target) {
+    this.__target = target;
+    this.__setAriaRequiredAttribute(this.__required);
+    this.__setLabelIdToAriaAttribute(this.__labelId);
+    this.__setErrorIdToAriaAttribute(this.__errorId);
+    this.__setHelperIdToAriaAttribute(this.__helperId);
+  }
+
+  /**
+   * Toggles the `aria-required` attribute on the target element
+   * if the target is the host component (e.g. a field group).
+   * Otherwise, it does nothing.
+   *
+   * @param {boolean} required
+   */
+  setRequired(required) {
+    this.__setAriaRequiredAttribute(required);
+    this.__required = required;
+  }
+
+  /**
+   * Links the target element with a slotted label element
+   * via the target's attribute `aria-labelledby`.
+   *
+   * To unlink the previous slotted label element, pass `null` as `labelId`.
+   *
+   * @param {string | null} labelId
+   */
+  setLabelId(labelId) {
+    this.__setLabelIdToAriaAttribute(labelId, this.__labelId);
+    this.__labelId = labelId;
+  }
+
+  /**
+   * Links the target element with a slotted error element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted error element, pass `null` as `errorId`.
+   *
+   * @param {string | null} errorId
+   */
+  setErrorId(errorId) {
+    this.__setErrorIdToAriaAttribute(errorId, this.__errorId);
+    this.__errorId = errorId;
+  }
+
+  /**
+   * Links the target element with a slotted helper element via the target's attribute:
+   * - `aria-labelledby` if the target is the host component (e.g a field group).
+   * - `aria-describedby` otherwise.
+   *
+   * To unlink the previous slotted helper element, pass `null` as `helperId`.
+   *
+   * @param {string | null} helperId
+   */
+  setHelperId(helperId) {
+    this.__setHelperIdToAriaAttribute(helperId, this.__helperId);
+    this.__helperId = helperId;
+  }
+
+  /**
+   * `true` if the target element is the host component itself, `false` otherwise.
+   *
+   * @return {boolean}
+   * @private
+   */
+  get __isGroupField() {
+    return this.__target === this.host;
+  }
+
+  /**
+   * @param {string | null | undefined} labelId
+   * @param {string | null | undefined} oldLabelId
+   * @private
+   */
+  __setLabelIdToAriaAttribute(labelId, oldLabelId) {
+    this.__setAriaAttributeId('aria-labelledby', labelId, oldLabelId);
+  }
+
+  /**
+   * @param {string | null | undefined} errorId
+   * @param {string | null | undefined} oldErrorId
+   * @private
+   */
+  __setErrorIdToAriaAttribute(errorId, oldErrorId) {
+    // For groups, add all IDs to aria-labelledby rather than aria-describedby -
+    // that should guarantee that it's announced when the group is entered.
+    if (this.__isGroupField) {
+      this.__setAriaAttributeId('aria-labelledby', errorId, oldErrorId);
+    } else {
+      this.__setAriaAttributeId('aria-describedby', errorId, oldErrorId);
+    }
+  }
+
+  /**
+   * @param {string | null | undefined} helperId
+   * @param {string | null | undefined} oldHelperId
+   * @private
+   */
+  __setHelperIdToAriaAttribute(helperId, oldHelperId) {
+    // For groups, add all IDs to aria-labelledby rather than aria-describedby -
+    // that should guarantee that it's announced when the group is entered.
+    if (this.__isGroupField) {
+      this.__setAriaAttributeId('aria-labelledby', helperId, oldHelperId);
+    } else {
+      this.__setAriaAttributeId('aria-describedby', helperId, oldHelperId);
+    }
+  }
+
+  /**
+   * @param {boolean} required
+   * @private
+   */
+  __setAriaRequiredAttribute(required) {
+    if (!this.__target) {
+      return;
+    }
+
+    if (!this.__isGroupField) {
+      // native <input> or <textarea>, required is enough
+      return;
+    }
+
+    if (required) {
+      this.__target.setAttribute('aria-required', 'true');
+    } else {
+      this.__target.removeAttribute('aria-required');
+    }
+  }
+
+  /**
+   * @param {string | null | undefined} newId
+   * @param {string | null | undefined} oldId
+   * @private
+   */
+  __setAriaAttributeId(attr, newId, oldId) {
+    if (!this.__target) {
+      return;
+    }
+
+    const value = this.__target.getAttribute(attr);
+    const ids = value ? new Set(value.split(' ')) : new Set();
+
+    if (oldId) {
+      ids.delete(oldId);
+    }
+    if (newId) {
+      ids.add(newId);
+    }
+
+    this.__target.setAttribute(attr, [...ids].join(' '));
+  }
+}
diff --git a/packages/field-base/src/field-mixin.d.ts b/packages/field-base/src/field-mixin.d.ts
index 90f8b23069..732cb37cb9 100644
--- a/packages/field-base/src/field-mixin.d.ts
+++ b/packages/field-base/src/field-mixin.d.ts
@@ -4,7 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
-import { DelegateStateMixinClass } from './delegate-state-mixin.js';
+import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import { LabelMixinClass } from './label-mixin.js';
 import { ValidateMixinClass } from './validate-mixin.js';
 
@@ -14,7 +14,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
 export declare function FieldMixin<T extends Constructor<HTMLElement>>(
   superclass: T
 ): T &
-  Constructor<DelegateStateMixinClass> &
+  Constructor<ControllerMixinClass> &
   Constructor<FieldMixinClass> &
   Constructor<LabelMixinClass> &
   Constructor<ValidateMixinClass>;
@@ -39,17 +39,19 @@ export declare class FieldMixinClass {
    */
   errorMessage: string | null | undefined;
 
-  protected readonly _ariaAttr: 'aria-labelledby' | 'aria-describedby';
-
-  protected _ariaTargetChanged(target: HTMLElement): void;
-
   protected readonly _errorNode: HTMLElement;
 
   protected readonly _helperNode?: HTMLElement;
 
   protected _helperTextChanged(helperText: string | null | undefined): void;
 
-  protected _updateAriaAttribute(target: HTMLElement, invalid: boolean, helperId: string): void;
+  protected _ariaTargetChanged(target: HTMLElement): void;
+
+  protected _updateErrorMessage(invalid: boolean, errorMessage: string | null | undefined): void;
+
+  protected _requiredChanged(required: boolean): void;
+
+  protected _helperIdChanged(helperId: string): void;
 
-  protected _updateAriaRequiredAttribute(target: HTMLElement, required: boolean): void;
+  protected _invalidChanged(invalid: boolean): void;
 }
diff --git a/packages/field-base/src/field-mixin.js b/packages/field-base/src/field-mixin.js
index c918c6a4b0..e3ddac8e29 100644
--- a/packages/field-base/src/field-mixin.js
+++ b/packages/field-base/src/field-mixin.js
@@ -5,7 +5,9 @@
  */
 import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { animationFrame } from '@vaadin/component-base/src/async.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { FieldAriaController } from './field-aria-controller.js';
 import { LabelMixin } from './label-mixin.js';
 import { ValidateMixin } from './validate-mixin.js';
 
@@ -13,11 +15,12 @@ import { ValidateMixin } from './validate-mixin.js';
  * A mixin to provide common field logic: label, error message and helper text.
  *
  * @polymerMixin
+ * @mixes ControllerMixin
  * @mixes LabelMixin
  * @mixes ValidateMixin
  */
 export const FieldMixin = (superclass) =>
-  class FieldMixinClass extends ValidateMixin(LabelMixin(superclass)) {
+  class FieldMixinClass extends ValidateMixin(LabelMixin(ControllerMixin(superclass))) {
     static get properties() {
       return {
         /**
@@ -66,9 +69,11 @@ export const FieldMixin = (superclass) =>
 
     static get observers() {
       return [
-        '__ariaChanged(invalid, _helperId, required)',
         '__observeOffsetHeight(errorMessage, invalid, label, helperText)',
-        '_updateErrorMessage(invalid, errorMessage)'
+        '_updateErrorMessage(invalid, errorMessage)',
+        '_invalidChanged(invalid)',
+        '_requiredChanged(required)',
+        '_helperIdChanged(_helperId)'
       ];
     }
 
@@ -88,14 +93,6 @@ export const FieldMixin = (superclass) =>
       return this._getDirectSlotChild('helper');
     }
 
-    /**
-     * @protected
-     * @return {string}
-     */
-    get _ariaAttr() {
-      return 'aria-describedby';
-    }
-
     constructor() {
       super();
 
@@ -106,6 +103,8 @@ export const FieldMixin = (superclass) =>
 
       // Save generated ID to restore later
       this.__savedHelperId = this._helperId;
+
+      this._fieldAriaController = new FieldAriaController(this);
     }
 
     /** @protected */
@@ -166,6 +165,8 @@ export const FieldMixin = (superclass) =>
           this.__applyDefaultHelper(this.helperText);
         }
       });
+
+      this.addController(this._fieldAriaController);
     }
 
     /** @private */
@@ -206,6 +207,7 @@ export const FieldMixin = (superclass) =>
       }
 
       helper.id = this.__savedHelperId;
+      this._helperId = helper.id;
       this.appendChild(helper);
       this._currentHelper = helper;
 
@@ -266,9 +268,25 @@ export const FieldMixin = (superclass) =>
       );
     }
 
+    /**
+     * @protected
+     * @override
+     */
+    _toggleHasLabelAttribute() {
+      super._toggleHasLabelAttribute();
+
+      // Label ID should be only added when the label content is present.
+      // Otherwise, it may conflict with an `aria-label` attribute possibly added by the user.
+      if (this.hasAttribute('has-label')) {
+        this._fieldAriaController.setLabelId(this._labelId);
+      } else {
+        this._fieldAriaController.setLabelId(null);
+      }
+    }
+
     /**
      * @param {boolean} invalid
-     * @param {string} errorMessage
+     * @param {string | null | undefined} errorMessage
      * @protected
      */
     _updateErrorMessage(invalid, errorMessage) {
@@ -320,66 +338,42 @@ export const FieldMixin = (superclass) =>
     }
 
     /**
-     * @param {HTMLElement} target
+     * @param {HTMLElement | null | undefined} target
      * @protected
      */
     _ariaTargetChanged(target) {
       if (target) {
-        this._updateAriaAttribute(target, this.invalid, this._helperId);
-        this._updateAriaRequiredAttribute(target, this.required);
+        this._fieldAriaController.setTarget(target);
       }
     }
 
     /**
-     * @param {HTMLElement} target
-     * @param {boolean} invalid
-     * @param {string} helperId
+     * @param {boolean} required
      * @protected
      */
-    _updateAriaAttribute(target, invalid, helperId) {
-      const attr = this._ariaAttr;
-
-      if (target && attr) {
-        // For groups, add all IDs to aria-labelledby rather than aria-describedby -
-        // that should guarantee that it's announced when the group is entered.
-        const ariaIds = attr === 'aria-describedby' ? [helperId] : [this._labelId, helperId];
-
-        // Error message ID needs to be dynamically added / removed based on the validity
-        // Otherwise assistive technologies would announce the error, even if we hide it.
-        if (invalid) {
-          ariaIds.push(this._errorId);
-        }
-
-        target.setAttribute(attr, ariaIds.join(' '));
-      }
+    _requiredChanged(required) {
+      this._fieldAriaController.setRequired(required);
     }
 
     /**
-     * @param {HTMLElement} target
-     * @param {boolean} required
+     * @param {string} helperId
      * @protected
      */
-    _updateAriaRequiredAttribute(target, required) {
-      if (target !== this) {
-        // native <input> or <textarea>, required is enough
-        return;
-      }
-
-      if (required) {
-        target.setAttribute('aria-required', true);
-      } else {
-        target.removeAttribute('aria-required');
-      }
+    _helperIdChanged(helperId) {
+      this._fieldAriaController.setHelperId(helperId);
     }
 
     /**
-     * @param {boolean} invalid
-     * @param {string} helperId
      * @param {boolean} required
-     * @private
+     * @protected
      */
-    __ariaChanged(invalid, helperId, required) {
-      this._updateAriaAttribute(this.ariaTarget, invalid, helperId);
-      this._updateAriaRequiredAttribute(this.ariaTarget, required);
+    _invalidChanged(invalid) {
+      // Error message ID needs to be dynamically added / removed based on the validity
+      // Otherwise assistive technologies would announce the error, even if we hide it.
+      if (invalid) {
+        this._fieldAriaController.setErrorId(this._errorId);
+      } else {
+        this._fieldAriaController.setErrorId(null);
+      }
     }
   };
diff --git a/packages/field-base/src/input-control-mixin.d.ts b/packages/field-base/src/input-control-mixin.d.ts
index 6fcdcf99d3..1a1d3a39f6 100644
--- a/packages/field-base/src/input-control-mixin.d.ts
+++ b/packages/field-base/src/input-control-mixin.d.ts
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
+import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
@@ -21,6 +22,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputControlMixin<T extends Constructor<HTMLElement>>(
   base: T
 ): T &
+  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
diff --git a/packages/field-base/src/input-field-mixin.d.ts b/packages/field-base/src/input-field-mixin.d.ts
index 88021bf900..b948235e80 100644
--- a/packages/field-base/src/input-field-mixin.d.ts
+++ b/packages/field-base/src/input-field-mixin.d.ts
@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { Constructor } from '@open-wc/dedupe-mixin';
+import { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 import { DisabledMixinClass } from '@vaadin/component-base/src/disabled-mixin.js';
 import { FocusMixinClass } from '@vaadin/component-base/src/focus-mixin.js';
 import { KeyboardMixinClass } from '@vaadin/component-base/src/keyboard-mixin.js';
@@ -22,6 +23,7 @@ import { ValidateMixinClass } from './validate-mixin.js';
 export declare function InputFieldMixin<T extends Constructor<HTMLElement>>(
   base: T
 ): T &
+  Constructor<ControllerMixinClass> &
   Constructor<DelegateFocusMixinClass> &
   Constructor<DelegateStateMixinClass> &
   Constructor<DisabledMixinClass> &
diff --git a/packages/field-base/src/label-mixin.js b/packages/field-base/src/label-mixin.js
index b6d875dd9e..c4ac5e076c 100644
--- a/packages/field-base/src/label-mixin.js
+++ b/packages/field-base/src/label-mixin.js
@@ -87,7 +87,6 @@ export const LabelMixin = dedupingMixin(
           const hasLabel = this._labelNode.children.length > 0 || this._labelNode.textContent.trim() !== '';
 
           this.toggleAttribute('has-label', hasLabel);
-          this.dispatchEvent(new CustomEvent('has-label-changed', { detail: { value: hasLabel } }));
         }
       }
     }
diff --git a/packages/field-base/src/aria-label-controller.d.ts b/packages/field-base/src/labelled-input-controller.d.ts
similarity index 62%
rename from packages/field-base/src/aria-label-controller.d.ts
rename to packages/field-base/src/labelled-input-controller.d.ts
index 50a5f16017..70d040db96 100644
--- a/packages/field-base/src/aria-label-controller.d.ts
+++ b/packages/field-base/src/labelled-input-controller.d.ts
@@ -6,6 +6,6 @@
 import { ReactiveController } from 'lit';
 
 /**
- * A controller to link an input element with a slotted `<label>` element.
+ * A controller for linking a `<label>` element with an `<input>` element.
  */
-export class AriaLabelController implements ReactiveController {}
+export class LabelledInputController implements ReactiveController {}
diff --git a/packages/field-base/src/aria-label-controller.js b/packages/field-base/src/labelled-input-controller.js
similarity index 60%
rename from packages/field-base/src/aria-label-controller.js
rename to packages/field-base/src/labelled-input-controller.js
index 90e8079b21..1dfeff0917 100644
--- a/packages/field-base/src/aria-label-controller.js
+++ b/packages/field-base/src/labelled-input-controller.js
@@ -5,10 +5,10 @@
  */
 
 /**
- * A controller to link an input element with a slotted `<label>` element.
+ * A controller for linking a `<label>` element with an `<input>` element.
  */
-export class AriaLabelController {
-  constructor(host, input, label) {
+export class LabelledInputController {
+  constructor(input, label) {
     this.input = input;
     this.__preventDuplicateLabelClick = this.__preventDuplicateLabelClick.bind(this);
 
@@ -17,11 +17,6 @@ export class AriaLabelController {
 
       if (input) {
         label.setAttribute('for', input.id);
-
-        this.__setAriaLabelledBy(input, host.hasAttribute('has-label') ? label.id : null);
-        host.addEventListener('has-label-changed', (event) =>
-          this.__setAriaLabelledBy(input, event.detail.value ? label.id : null)
-        );
       }
     }
   }
@@ -41,18 +36,4 @@ export class AriaLabelController {
     };
     this.input.addEventListener('click', inputClickHandler);
   }
-
-  /**
-   * Sets or removes the `aria-labelledby` attribute on the input element.
-   * @param {HTMLElement} input
-   * @param {string | null | undefined} value
-   * @private
-   */
-  __setAriaLabelledBy(input, value) {
-    if (value) {
-      input.setAttribute('aria-labelledby', value);
-    } else {
-      input.removeAttribute('aria-labelledby');
-    }
-  }
 }
diff --git a/packages/field-base/test/field-aria-controller.test.js b/packages/field-base/test/field-aria-controller.test.js
new file mode 100644
index 0000000000..0e722fcbdc
--- /dev/null
+++ b/packages/field-base/test/field-aria-controller.test.js
@@ -0,0 +1,221 @@
+import { expect } from '@esm-bundle/chai';
+import { fixtureSync } from '@vaadin/testing-helpers';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { FieldAriaController } from '../src/field-aria-controller.js';
+
+customElements.define('field-element', class extends ControllerMixin(PolymerElement) {});
+
+describe('field-aria-controller', () => {
+  let element, input, controller;
+
+  describe('default', () => {
+    beforeEach(() => {
+      element = fixtureSync(`<field-element></field-element>`);
+      controller = new FieldAriaController(element);
+      element.addController(controller);
+    });
+
+    it('should not set aria-labelledby attribute initially', () => {
+      expect(element.hasAttribute('aria-labelledby')).to.be.false;
+    });
+
+    it('should not set aria-describedby attribute initially', () => {
+      expect(element.hasAttribute('aria-describedby')).to.be.false;
+    });
+
+    it('should not set aria-required attribute initially', () => {
+      expect(element.hasAttribute('aria-required')).to.be.false;
+    });
+  });
+
+  describe('field', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <field-element>
+          <input aria-labelledby="custom-id" aria-describedby="custom-id">
+        </field-element>
+      `);
+      input = element.querySelector('input');
+      controller = new FieldAriaController(element);
+      element.addController(controller);
+    });
+
+    describe('label id', () => {
+      beforeEach(() => {
+        controller.setLabelId('label-id');
+        controller.setTarget(input);
+      });
+
+      it('should add label id to aria-labelledby attribute', () => {
+        expect(input.getAttribute('aria-labelledby')).equal('custom-id label-id');
+      });
+
+      it('should not add label id to aria-describedby attribute', () => {
+        expect(input.getAttribute('aria-describedby')).not.to.include('label-id');
+      });
+    });
+
+    describe('error id', () => {
+      beforeEach(() => {
+        controller.setErrorId('error-id');
+        controller.setTarget(input);
+      });
+
+      it('should add error id to aria-describedby attribute', () => {
+        expect(input.getAttribute('aria-describedby')).equal('custom-id error-id');
+      });
+
+      it('should not add error id to aria-labelledby attribute', () => {
+        expect(input.getAttribute('aria-labelledby')).not.to.include('error-id');
+      });
+    });
+
+    describe('helper id', () => {
+      beforeEach(() => {
+        controller.setHelperId('helper-id');
+        controller.setTarget(input);
+      });
+
+      it('should add helper id to aria-describedby attribute', () => {
+        expect(input.getAttribute('aria-describedby')).equal('custom-id helper-id');
+      });
+
+      it('should not add helper id to aria-labelledby attribute', () => {
+        expect(input.getAttribute('aria-labelledby')).not.to.include('helper-id');
+      });
+    });
+
+    describe('aria-required', () => {
+      it('should not add aria-required attribute', () => {
+        controller.setRequired(true);
+        controller.setTarget(input);
+        expect(element.hasAttribute('aria-required')).to.be.false;
+      });
+    });
+
+    describe('target is set initially', () => {
+      beforeEach(() => {
+        controller.setTarget(input);
+      });
+
+      it('should set label id to aria-labelledby attribute', () => {
+        controller.setLabelId('label-id');
+        expect(input.getAttribute('aria-labelledby')).equal('custom-id label-id');
+        controller.setLabelId(null);
+        expect(input.getAttribute('aria-labelledby')).equal('custom-id');
+      });
+
+      it('should set error id to aria-describedby attribute', () => {
+        controller.setErrorId('error-id');
+        expect(input.getAttribute('aria-describedby')).equal('custom-id error-id');
+        controller.setErrorId(null);
+        expect(input.getAttribute('aria-describedby')).equal('custom-id');
+      });
+
+      it('should set helper id to aria-describedby attribute', () => {
+        controller.setHelperId('helper-id');
+        expect(input.getAttribute('aria-describedby')).equal('custom-id helper-id');
+        controller.setHelperId(null);
+        expect(input.getAttribute('aria-describedby')).equal('custom-id');
+      });
+    });
+  });
+
+  describe('field group', () => {
+    beforeEach(() => {
+      element = fixtureSync(`
+        <field-element aria-labelledby="custom-id" aria-describedby="custom-id"></field-element>
+      `);
+      controller = new FieldAriaController(element);
+      element.addController(controller);
+    });
+
+    describe('label id', () => {
+      beforeEach(() => {
+        controller.setLabelId('label-id');
+        controller.setTarget(element);
+      });
+
+      it('should add label id to aria-labelledby attribute', () => {
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id label-id');
+      });
+
+      it('should not add label id to aria-describedby attribute', () => {
+        expect(element.getAttribute('aria-describedby')).not.to.include('label-id');
+      });
+    });
+
+    describe('error id', () => {
+      beforeEach(() => {
+        controller.setErrorId('error-id');
+        controller.setTarget(element);
+      });
+
+      it('should add error id to aria-labelledby attribute', () => {
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id error-id');
+      });
+
+      it('should not add error id to aria-describedby attribute', () => {
+        expect(element.getAttribute('aria-describedby')).not.to.include('error-id');
+      });
+    });
+
+    describe('helper id', () => {
+      beforeEach(() => {
+        controller.setHelperId('helper-id');
+        controller.setTarget(element);
+      });
+
+      it('should add helper id to aria-labelledby attribute', () => {
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id helper-id');
+      });
+
+      it('should not add helper id to aria-describedby attribute', () => {
+        expect(element.getAttribute('aria-describedby')).not.to.include('helper-id');
+      });
+    });
+
+    describe('aria-required', () => {
+      it('should add aria-required attribute', () => {
+        controller.setRequired(true);
+        controller.setTarget(element);
+        expect(element.getAttribute('aria-required')).to.equal('true');
+      });
+    });
+
+    describe('target is set initially', () => {
+      beforeEach(() => {
+        controller.setTarget(element);
+      });
+
+      it('should set label id to aria-labelledby attribute', () => {
+        controller.setLabelId('label-id');
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id label-id');
+        controller.setLabelId(null);
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id');
+      });
+
+      it('should set error id to aria-labelledby attribute', () => {
+        controller.setErrorId('error-id');
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id error-id');
+        controller.setErrorId(null);
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id');
+      });
+
+      it('should set helper id to aria-labelledby attribute', () => {
+        controller.setHelperId('helper-id');
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id helper-id');
+        controller.setHelperId(null);
+        expect(element.getAttribute('aria-labelledby')).equal('custom-id');
+      });
+
+      it('should toggle aria-required attribute', () => {
+        controller.setRequired(true);
+        expect(element.getAttribute('aria-required')).to.equal('true');
+        controller.setRequired(false);
+        expect(element.hasAttribute('aria-required')).to.be.false;
+      });
+    });
+  });
+});
diff --git a/packages/field-base/test/field-mixin.test.js b/packages/field-base/test/field-mixin.test.js
index 046c0b75ac..4bb0bec9ba 100644
--- a/packages/field-base/test/field-mixin.test.js
+++ b/packages/field-base/test/field-mixin.test.js
@@ -2,14 +2,13 @@ import { expect } from '@esm-bundle/chai';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { FieldMixin } from '../src/field-mixin.js';
 import { InputController } from '../src/input-controller.js';
 import { InputMixin } from '../src/input-mixin.js';
 
 customElements.define(
   'field-mixin-element',
-  class extends FieldMixin(InputMixin(ControllerMixin(PolymerElement))) {
+  class extends FieldMixin(InputMixin(PolymerElement)) {
     static get template() {
       return html`
         <style>
@@ -64,10 +63,6 @@ customElements.define(
       `;
     }
 
-    get _ariaAttr() {
-      return 'aria-labelledby';
-    }
-
     ready() {
       super.ready();
 
@@ -552,52 +547,84 @@ describe('field-mixin', () => {
     });
   });
 
-  describe('aria-describedby', () => {
-    beforeEach(() => {
-      element = fixtureSync(`<field-mixin-element helper-text="Helper"></field-mixin-element>`);
-      label = element.querySelector('[slot=label]');
-      error = element.querySelector('[slot=error-message]');
-      helper = element.querySelector('[slot=helper]');
-      input = element.querySelector('[slot=input]');
-    });
+  describe('aria', () => {
+    describe('field', () => {
+      beforeEach(() => {
+        element = fixtureSync(
+          `<field-mixin-element label="Label" helper-text="Helper" error-message="Error Message"></field-mixin-element>`
+        );
+        input = element.querySelector('[slot=input]');
+        label = element.querySelector('[slot=label]');
+        error = element.querySelector('[slot=error-message]');
+        helper = element.querySelector('[slot=helper]');
+      });
 
-    it('should only add helper text to aria-describedby when field is valid', () => {
-      const aria = input.getAttribute('aria-describedby');
-      expect(aria).to.include(helper.id);
-      expect(aria).to.not.include(error.id);
-      expect(aria).to.not.include(label.id);
-    });
+      describe('aria-labelledby', () => {
+        it('should only contain label id when the field is valid', () => {
+          const aria = input.getAttribute('aria-labelledby');
+          expect(aria).to.equal(label.id);
+        });
 
-    it('should add error message to aria-describedby when field is invalid', () => {
-      element.invalid = true;
-      const aria = input.getAttribute('aria-describedby');
-      expect(aria).to.include(helper.id);
-      expect(aria).to.include(error.id);
-      expect(aria).to.not.include(label.id);
-    });
-  });
+        it('should only contain label id when the field is invalid', () => {
+          element.invalid = true;
+          const aria = input.getAttribute('aria-labelledby');
+          expect(aria).to.equal(label.id);
+        });
+      });
 
-  describe('aria-labelledby', () => {
-    beforeEach(() => {
-      element = fixtureSync(`<field-mixin-group-element helper-text="Helper"></field-mixin-group-element>`);
-      label = element.querySelector('[slot=label]');
-      error = element.querySelector('[slot=error-message]');
-      helper = element.querySelector('[slot=helper]');
-    });
+      describe('aria-describedby', () => {
+        it('should only contain helper id when the field is valid', () => {
+          const aria = input.getAttribute('aria-describedby');
+          expect(aria).to.equal(helper.id);
+        });
 
-    it('should add label and helper text to aria-labelledby when field is valid', () => {
-      const aria = element.getAttribute('aria-labelledby');
-      expect(aria).to.include(helper.id);
-      expect(aria).to.not.include(error.id);
-      expect(aria).to.include(label.id);
+        it('should contain error id when the field is invalid', () => {
+          element.invalid = true;
+          const aria = input.getAttribute('aria-describedby');
+          expect(aria).to.include(helper.id);
+          expect(aria).to.include(error.id);
+          expect(aria).to.not.include(label.id);
+        });
+      });
     });
 
-    it('should add error message to aria-labelledby when field is invalid', () => {
-      element.invalid = true;
-      const aria = element.getAttribute('aria-labelledby');
-      expect(aria).to.include(helper.id);
-      expect(aria).to.include(error.id);
-      expect(aria).to.include(label.id);
+    describe('field group', () => {
+      beforeEach(() => {
+        element = fixtureSync(
+          `<field-mixin-group-element label="Label" helper-text="Helper" error-message="Error Message"></field-mixin-group-element>`
+        );
+        label = element.querySelector('[slot=label]');
+        error = element.querySelector('[slot=error-message]');
+        helper = element.querySelector('[slot=helper]');
+      });
+
+      describe('aria-labelledby', () => {
+        it('should only contain label id and helper id when the field is valid', () => {
+          const aria = element.getAttribute('aria-labelledby');
+          expect(aria).to.include(label.id);
+          expect(aria).to.include(helper.id);
+          expect(aria).to.not.include(error.id);
+        });
+
+        it('should contain error id when the field is invalid', () => {
+          element.invalid = true;
+          const aria = element.getAttribute('aria-labelledby');
+          expect(aria).to.include(label.id);
+          expect(aria).to.include(helper.id);
+          expect(aria).to.include(error.id);
+        });
+      });
+
+      describe('aria-describedby', () => {
+        it('should be empty when the field is valid', () => {
+          expect(element.hasAttribute('aria-describedby')).to.be.false;
+        });
+
+        it('should be empty when the field is invalid', () => {
+          element.invalid = true;
+          expect(element.hasAttribute('aria-describedby')).to.be.false;
+        });
+      });
     });
   });
 
diff --git a/packages/field-base/test/input-control-mixin.test.js b/packages/field-base/test/input-control-mixin.test.js
index 48ab03c9a7..36cdcbdb2d 100644
--- a/packages/field-base/test/input-control-mixin.test.js
+++ b/packages/field-base/test/input-control-mixin.test.js
@@ -2,13 +2,12 @@ import { expect } from '@esm-bundle/chai';
 import { escKeyDown, fixtureSync } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { InputControlMixin } from '../src/input-control-mixin.js';
 import { InputController } from '../src/input-controller.js';
 
 customElements.define(
   'input-control-mixin-element',
-  class extends InputControlMixin(ControllerMixin(PolymerElement)) {
+  class extends InputControlMixin(PolymerElement) {
     static get template() {
       return html`
         <div part="label">
diff --git a/packages/field-base/test/input-field-mixin.test.js b/packages/field-base/test/input-field-mixin.test.js
index 956a0bb6ac..694787d0f9 100644
--- a/packages/field-base/test/input-field-mixin.test.js
+++ b/packages/field-base/test/input-field-mixin.test.js
@@ -2,13 +2,12 @@ import { expect } from '@esm-bundle/chai';
 import { fixtureSync, keyDownOn } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { InputController } from '../src/input-controller.js';
 import { InputFieldMixin } from '../src/input-field-mixin.js';
 
 customElements.define(
   'input-field-mixin-element',
-  class extends InputFieldMixin(ControllerMixin(PolymerElement)) {
+  class extends InputFieldMixin(PolymerElement) {
     static get template() {
       return html`
         <div part="label">
diff --git a/packages/field-base/test/aria-label-controller.test.js b/packages/field-base/test/labelled-input-controller.test.js
similarity index 62%
rename from packages/field-base/test/aria-label-controller.test.js
rename to packages/field-base/test/labelled-input-controller.test.js
index 2d57a12cf3..181b78eaae 100644
--- a/packages/field-base/test/aria-label-controller.test.js
+++ b/packages/field-base/test/labelled-input-controller.test.js
@@ -3,12 +3,12 @@ import { fixtureSync } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
-import { AriaLabelController } from '../src/aria-label-controller.js';
 import { InputMixin } from '../src/input-mixin.js';
 import { LabelMixin } from '../src/label-mixin.js';
+import { LabelledInputController } from '../src/labelled-input-controller.js';
 
 customElements.define(
-  'aria-label-input-mixin-element',
+  'label-for-input-mixin-element',
   class extends LabelMixin(InputMixin(ControllerMixin(PolymerElement))) {
     static get template() {
       return html`<slot name="label"></slot><slot name="input"></slot>`;
@@ -17,7 +17,7 @@ customElements.define(
 );
 
 customElements.define(
-  'aria-label-textarea-mixin-element',
+  'label-for-textarea-mixin-element',
   class extends LabelMixin(InputMixin(ControllerMixin(PolymerElement))) {
     static get template() {
       return html`<slot name="label"></slot><slot name="textarea"></slot>`;
@@ -25,40 +25,25 @@ customElements.define(
   }
 );
 
-describe('aria-label-mixin', () => {
+describe('labelled-input-controller', () => {
   let element, target, label;
 
   ['input', 'textarea'].forEach((el) => {
     describe(el, () => {
       beforeEach(() => {
-        element = fixtureSync(`<aria-label-${el}-mixin-element label="label"></aria-label-${el}-mixin-element>`);
+        element = fixtureSync(`<label-for-${el}-mixin-element label="label"></label-for-${el}-mixin-element>`);
         label = element.querySelector('[slot=label]');
         target = document.createElement(el);
         target.setAttribute('slot', el);
         element.appendChild(target);
         element._setInputElement(target);
-        element.addController(new AriaLabelController(element, target, label));
+        element.addController(new LabelledInputController(target, label));
       });
 
       it('should set for attribute on the label', () => {
         expect(label.getAttribute('for')).to.equal(target.id);
       });
 
-      it('should set aria-labelledby attribute on the ' + el, () => {
-        expect(target.getAttribute('aria-labelledby')).to.equal(label.id);
-      });
-
-      it('should remove aria-labelledby attribute from the ' + el, () => {
-        element.label = '';
-        expect(target.hasAttribute('aria-labelledby')).to.be.false;
-      });
-
-      it('should restore aria-labelledby attribute on the ' + el, () => {
-        element.label = '';
-        element.label = 'label';
-        expect(target.getAttribute('aria-labelledby')).to.equal(label.id);
-      });
-
       it('should only run click handler once on label click', () => {
         const spy = sinon.spy();
         element.addEventListener('click', spy);
diff --git a/packages/number-field/src/vaadin-number-field.d.ts b/packages/number-field/src/vaadin-number-field.d.ts
index 91dd750c97..e4bfef618b 100644
--- a/packages/number-field/src/vaadin-number-field.d.ts
+++ b/packages/number-field/src/vaadin-number-field.d.ts
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
@@ -53,9 +52,7 @@ export interface NumberFieldEventMap extends HTMLElementEventMap, NumberFieldCus
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class NumberField extends InputFieldMixin(
-  SlotStylesMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))))
-) {
+declare class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**
    * Set to true to display value increase/decrease controls.
    * @attr {boolean} has-controls
diff --git a/packages/number-field/src/vaadin-number-field.js b/packages/number-field/src/vaadin-number-field.js
index 7d4771f1f2..771867636d 100644
--- a/packages/number-field/src/vaadin-number-field.js
+++ b/packages/number-field/src/vaadin-number-field.js
@@ -5,11 +5,10 @@
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import { html, PolymerElement } from '@polymer/polymer';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { SlotStylesMixin } from '@vaadin/field-base/src/slot-styles-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -45,15 +44,12 @@ registerStyles('vaadin-number-field', inputFieldShared, { moduleId: 'vaadin-numb
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes InputFieldMixin
  * @mixes SlotStylesMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-export class NumberField extends InputFieldMixin(
-  SlotStylesMixin(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))))
-) {
+export class NumberField extends InputFieldMixin(SlotStylesMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-number-field';
   }
@@ -237,7 +233,7 @@ export class NumberField extends InputFieldMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 
   /** @private */
diff --git a/packages/radio-group/src/vaadin-radio-button.js b/packages/radio-group/src/vaadin-radio-button.js
index ca5fea5ade..49d127bbcb 100644
--- a/packages/radio-group/src/vaadin-radio-button.js
+++ b/packages/radio-group/src/vaadin-radio-button.js
@@ -7,10 +7,10 @@ import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ActiveMixin } from '@vaadin/component-base/src/active-mixin.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { CheckedMixin } from '@vaadin/field-base/src/checked-mixin.js';
 import { DelegateFocusMixin } from '@vaadin/field-base/src/delegate-focus-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { SlotLabelMixin } from '@vaadin/field-base/src/slot-label-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -184,7 +184,7 @@ class RadioButton extends SlotLabelMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 }
 
diff --git a/packages/radio-group/src/vaadin-radio-group.js b/packages/radio-group/src/vaadin-radio-group.js
index 665b393648..a422486c32 100644
--- a/packages/radio-group/src/vaadin-radio-group.js
+++ b/packages/radio-group/src/vaadin-radio-group.js
@@ -221,15 +221,6 @@ class RadioGroup extends FieldMixin(FocusMixin(DisabledMixin(KeyboardMixin(DirMi
     return this.getAttribute('dir') === 'rtl' && this.theme !== 'vertical';
   }
 
-  /**
-   * @return {string}
-   * @override
-   * @protected
-   */
-  get _ariaAttr() {
-    return 'aria-labelledby';
-  }
-
   /**
    * Override method inherited from `KeyboardMixin`
    * to implement the custom keyboard navigation as a replacement for the native one
diff --git a/packages/radio-group/test/radio-group.test.js b/packages/radio-group/test/radio-group.test.js
index 33c45751fa..82e93b79c2 100644
--- a/packages/radio-group/test/radio-group.test.js
+++ b/packages/radio-group/test/radio-group.test.js
@@ -533,7 +533,7 @@ describe('radio-group', () => {
     let error, helper, label;
 
     beforeEach(() => {
-      group = fixtureSync('<vaadin-radio-group helper-text="Choose one"></vaadin-radio-group>');
+      group = fixtureSync('<vaadin-radio-group helper-text="Choose one" label="Label"></vaadin-radio-group>');
       error = group.querySelector('[slot=error-message]');
       helper = group.querySelector('[slot=helper]');
       label = group.querySelector('[slot=label]');
diff --git a/packages/text-area/src/vaadin-text-area.d.ts b/packages/text-area/src/vaadin-text-area.d.ts
index de0b440d12..e6d46d5e42 100644
--- a/packages/text-area/src/vaadin-text-area.d.ts
+++ b/packages/text-area/src/vaadin-text-area.d.ts
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -67,7 +66,7 @@ export interface TextAreaEventMap extends HTMLElementEventMap, TextAreaCustomEve
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
+declare class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement))) {
   /**
    * Maximum number of characters (in Unicode code points) that the user can enter.
    */
diff --git a/packages/text-area/src/vaadin-text-area.js b/packages/text-area/src/vaadin-text-area.js
index 9d50b336b7..c0ccf10b3e 100644
--- a/packages/text-area/src/vaadin-text-area.js
+++ b/packages/text-area/src/vaadin-text-area.js
@@ -5,10 +5,9 @@
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import { html, PolymerElement } from '@polymer/polymer';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { TextAreaController } from '@vaadin/field-base/src/text-area-controller.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -55,12 +54,11 @@ registerStyles('vaadin-text-area', inputFieldShared, { moduleId: 'vaadin-text-ar
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes InputFieldMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement)))) {
+export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-text-area';
   }
@@ -212,7 +210,7 @@ export class TextArea extends InputFieldMixin(ThemableMixin(ElementMixin(Control
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
     this.addEventListener('animationend', this._onAnimationEnd);
   }
 
diff --git a/packages/text-field/src/vaadin-text-field.d.ts b/packages/text-field/src/vaadin-text-field.d.ts
index 30afe2ce14..207cdafe90 100644
--- a/packages/text-field/src/vaadin-text-field.d.ts
+++ b/packages/text-field/src/vaadin-text-field.d.ts
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
@@ -89,9 +88,7 @@ export interface TextFieldEventMap extends HTMLElementEventMap, TextFieldCustomE
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class TextField extends PatternMixin(
-  InputFieldMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))))
-) {
+declare class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**
    * Maximum number of characters (in Unicode code points) that the user can enter.
    */
diff --git a/packages/text-field/src/vaadin-text-field.js b/packages/text-field/src/vaadin-text-field.js
index ab0852b27a..bf90c8f1b4 100644
--- a/packages/text-field/src/vaadin-text-field.js
+++ b/packages/text-field/src/vaadin-text-field.js
@@ -5,11 +5,10 @@
  */
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import { html, PolymerElement } from '@polymer/polymer';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
 import { InputFieldMixin } from '@vaadin/field-base/src/input-field-mixin.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -79,15 +78,12 @@ registerStyles('vaadin-text-field', inputFieldShared, { moduleId: 'vaadin-text-f
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes PatternMixin
  * @mixes InputFieldMixin
  */
-export class TextField extends PatternMixin(
-  InputFieldMixin(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))))
-) {
+export class TextField extends PatternMixin(InputFieldMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-text-field';
   }
@@ -178,7 +174,7 @@ export class TextField extends PatternMixin(
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
   }
 }
 
diff --git a/packages/time-picker/src/vaadin-time-picker.d.ts b/packages/time-picker/src/vaadin-time-picker.d.ts
index 4ccbb73ac1..dd1703aad2 100644
--- a/packages/time-picker/src/vaadin-time-picker.d.ts
+++ b/packages/time-picker/src/vaadin-time-picker.d.ts
@@ -3,7 +3,6 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
@@ -90,9 +89,7 @@ export interface TimePickerEventMap extends HTMLElementEventMap, TimePickerCusto
  * @fires {CustomEvent} invalid-changed - Fired when the `invalid` property changes.
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  */
-declare class TimePicker extends PatternMixin(
-  InputControlMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement))))
-) {
+declare class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(HTMLElement)))) {
   /**
    * The time value for this element.
    *
diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js
index ed9c7fc95a..c0764924e1 100644
--- a/packages/time-picker/src/vaadin-time-picker.js
+++ b/packages/time-picker/src/vaadin-time-picker.js
@@ -6,11 +6,10 @@
 import '@vaadin/input-container/src/vaadin-input-container.js';
 import './vaadin-time-picker-combo-box.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { AriaLabelController } from '@vaadin/field-base/src/aria-label-controller.js';
 import { InputControlMixin } from '@vaadin/field-base/src/input-control-mixin.js';
 import { InputController } from '@vaadin/field-base/src/input-controller.js';
+import { LabelledInputController } from '@vaadin/field-base/src/labelled-input-controller.js';
 import { PatternMixin } from '@vaadin/field-base/src/pattern-mixin.js';
 import { inputFieldShared } from '@vaadin/field-base/src/styles/input-field-shared-styles.js';
 import { registerStyles, ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -67,13 +66,12 @@ registerStyles('vaadin-time-picker', inputFieldShared, { moduleId: 'vaadin-time-
  * @fires {CustomEvent} value-changed - Fired when the `value` property changes.
  *
  * @extends HTMLElement
- * @mixes ControllerMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  * @mixes InputControlMixin
  * @mixes PatternMixin
  */
-class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(ControllerMixin(PolymerElement))))) {
+class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMixin(PolymerElement)))) {
   static get is() {
     return 'vaadin-time-picker';
   }
@@ -322,7 +320,7 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
         this.ariaTarget = input;
       })
     );
-    this.addController(new AriaLabelController(this, this.inputElement, this._labelNode));
+    this.addController(new LabelledInputController(this.inputElement, this._labelNode));
     this._inputContainer = this.shadowRoot.querySelector('[part~="input-field"]');
   }