Porsche Design System

Select

Table of Contents

Accessibility support
Development considerations
Integration examples
Tests

Accessibility support#

Keyboard

Combobox

Key / state

Function

Down Arrow Up Arrow Space

- Opens the listbox if it is not already displayed without moving focus or changing selection.
- DOM focus remains on the combobox.

Space

Closes the listbox if it is displayed.

Listbox

Key / state

Function

Down Arrow Up Arrow

Moves visual focus to the next/previous option.

Home End

Moves visual focus to the first/last option.

ESC

Closes listbox

Enter, Space

Selects an option

ARIA enhancements

Internal ARIA that is managed by the component:

ARIA

Usage

aria-labelledby="IDREF"

References the accessible name of the combobox.

aria-describedby="IDREF"

References the accessible description and status messages of the combobox.

aria-label="STRING"

References the accessible name of the listbox.

role="status", role="alert"

When message and state prop change, the status message is announced.

aria-expanded="BOOLEAN"

Indicates that the listbox element is displayed/hidden.

aria-controls="IDREF"

Identifies the element that serves as the listbox.

aria-hidden="true"

If required attribute is set, the visible indicator is hidden from assistive technologies.

aria-haspopup="listbox"

Indicates that the combobox will open a listbox.

aria-required="true"

Indicates if the element is required.

Development considerations#

Disabled state

In general, avoid using the disabled state. Disabled elements are no longer focusable and may be missed by screen reader users. They can also confuse sighted users if the reason they are disabled is not made clear.

Common do's and don'ts

Do provide a clear, persistent label for what the selection controls.

Do use meaningful option text so choices are understandable out of context.

Do use the component state/message API so validation and status changes are announced.

Do use clear error wording that helps users recover.

Don't use a prompt option or adjacent text as a substitute for a field label.

Don't use very short or ambiguous option labels when context is important.

Don't use hide-label without an accessible name.

Integration examples#

Prompt option used instead of a label

❌ Anti-pattern

<p-select name="model">
  <p-select-option value="">
    Select a model
  </p-select-option>
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

✅ Recommended

<p-select label="Porsche model" name="model" description="Choose the model for your configuration.">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

Ambiguous option labels without field context

❌ Anti-pattern

<p-select label="Model" name="model">
  <p-select-option value="base">
    Base
  </p-select-option>
  <p-select-option value="s">
    S
  </p-select-option>
</p-select>

✅ Recommended

<p-select label="Porsche 911 trim" name="model" description="Select the trim level for your configuration.">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

Hidden label without accessible name

❌ Anti-pattern

<p-select name="model" hide-label="true">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
</p-select>

✅ Recommended

<p-select label="Porsche model" name="model" hide-label="true">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
</p-select>

Validation feedback via state and message API

❌ Anti-pattern

<p-select label="Porsche model" name="model" aria-invalid="true" message="Required">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

✅ Recommended

<p-select label="Porsche model" name="model" state="error" message="Select a model to continue with your configuration.">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

Error state without recovery guidance

❌ Anti-pattern

<p-select label="Porsche model" name="model" state="error" message="Invalid">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

✅ Recommended

<p-select label="Porsche model" name="model" required="true" state="error" message="Select a Porsche model. This field is required to continue.">
  <p-select-option value="carrera">
    911 Carrera
  </p-select-option>
  <p-select-option value="carrera-s">
    911 Carrera S
  </p-select-option>
</p-select>

Tests#

Automated

Technology

Support

AXE-Core (WCAG 2.2 AA, Best-Practice)

✅

High-Contrast Mode (light/dark)

✅

Text-Zoom (200%)

✅

Manual

Technology

Support

Keyboard

✅

Screen reader (VoiceOver, NVDA)

✅ (Note: Though Safari supports ariaActiveDescendantElement the active option doesn't get announced in VoiceOver)