# Element “div” is missing one or more of the following attributes: “aria-expanded”, “aria-valuemax”, “aria-valuemin”, “aria-valuenow”, “role”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-div-is-missing-one-or-more-of-the-following-attributes-aria-expanded-aria-valuemax-aria-valuemin-aria-valuenow-role
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

The `aria-required` attribute tells assistive technologies that a form field must be filled in before the form can be submitted. However, this attribute is only valid on elements that function as interactive widgets. A bare `div` has no implicit ARIA role, so assistive technologies have no context for what kind of input is expected. The validator flags this because an `aria-required` attribute on a generic `div` is effectively meaningless without additional ARIA attributes that define the element's role and behavior.

This matters for several reasons:

- **Accessibility:** Screen readers and other assistive technologies rely on roles to understand how to present an element to users. Without a role, `aria-required` provides incomplete information.
- **Standards compliance:** The WAI-ARIA specification defines which attributes are allowed on which roles. Using `aria-required` without an established role violates these constraints.
- **Browser behavior:** Browsers may ignore or misinterpret ARIA attributes when they appear on elements that lack the proper role context.

## How to fix it

### Option 1: Use native semantic HTML (preferred)

Whenever possible, use native HTML form elements. They come with built-in accessibility semantics, keyboard interaction, and validation — no ARIA needed.

Replace a `div` with `aria-required="true"` with an appropriate form control using the native `required` attribute:

```html
<input type="text" required>
<select required>
  <option value="">Choose one</option>
  <option value="1">Option 1</option>
</select>
<textarea required></textarea>
```

### Option 2: Add an appropriate `role` attribute

When you must use a `div` as a custom widget (styled and enhanced with CSS and JavaScript), add the correct `role` attribute to give it semantic meaning. Choose the role that matches the widget's actual behavior — don't just pick one arbitrarily.

Common roles that support `aria-required`:

- `combobox` — a custom dropdown with text input
- `listbox` — a custom selection list
- `radiogroup` — a group of radio-like options
- `spinbutton` — a numeric stepper (also requires `aria-valuemax`, `aria-valuemin`, and `aria-valuenow`)
- `textbox` — a custom text input

### Option 3: Add other qualifying ARIA attributes

For certain widgets like sliders or spinbuttons, you may need `aria-valuemax`, `aria-valuemin`, and `aria-valuenow` in addition to (or as part of) defining the role. These attributes inherently establish a widget context.

## Examples

### ❌ Invalid: `aria-required` on a plain `div`

```html
<div aria-required="true">
  <div data-value="One">1</div>
  <div data-value="Two">2</div>
  <div data-value="Three">3</div>
</div>
```

This triggers the validation error because the `div` has no role or other ARIA attributes to define what kind of widget it is.

### ✅ Fixed: Adding the appropriate `role`

```html
<div aria-required="true" role="radiogroup" aria-label="Pick a number">
  <div role="radio" aria-checked="false" tabindex="0">1</div>
  <div role="radio" aria-checked="false" tabindex="0">2</div>
  <div role="radio" aria-checked="false" tabindex="0">3</div>
</div>
```

Adding `role="radiogroup"` gives the `div` a semantic identity. Note that child elements also need appropriate roles and attributes for the widget to be fully accessible.

### ✅ Fixed: Using native HTML instead

```html
<fieldset>
  <legend>Pick a number</legend>
  <label><input type="radio" name="number" value="1" required> 1</label>
  <label><input type="radio" name="number" value="2"> 2</label>
  <label><input type="radio" name="number" value="3"> 3</label>
</fieldset>
```

This approach uses native radio buttons with the `required` attribute, eliminating the need for ARIA entirely. The browser handles accessibility, keyboard navigation, and form validation automatically.

### ✅ Fixed: A custom spinbutton with value attributes

```html
<div role="spinbutton"
  aria-required="true"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="50"
  aria-label="Quantity"
  tabindex="0">
  50
</div>
```

For a spinbutton role, you must also provide `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` to fully describe the widget's state.