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

External ARIA provided by the aria property:

Use the aria property to pass supported attributes to the native control inside the shadow DOM. Prefer a visible label for the accessible name. Use aria-label when the label is hidden or missing, and aria-description for extra context that should not replace the name. Do not use aria-label to replace a different visible label (WCAG 2.5.3).

ARIA

Usage

aria-label

Defines an accessible name when the visible label is insufficient or hidden; prefer a visible label for most cases.

aria-description

Provides additional context for assistive technologies without replacing the accessible name.

Internal ARIA that is managed by the component:

ARIA

Usage

aria-labelledby="IDREF"

On the listbox: references the field label as the accessible name.

aria-describedby="IDREF"

References the accessible description and status messages of the combobox.

aria-label="STRING"

On options without a value: fallback accessible name (Empty value).

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 pass extra labelling through the aria prop (aria-label, aria-description).

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.

Don't add native aria-* attributes directly on the component host.

Integration examples#

ARIA on component host vs aria prop

❌ Anti-pattern

<p-select name="model" label="Porsche model" aria-label="Accessible name" aria-description="Additional context">
  <p-select-option value="option-a">
    Option A
  </p-select-option>
</p-select>

✅ Recommended

<p-select name="model" label="Porsche model" aria="{'aria-label': 'Accessible name', 'aria-description': 'Additional context'}">
  <p-select-option value="option-a">
    Option A
  </p-select-option>
</p-select>

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)