.callout{padding:12px 16px;border-radius:6px;margin:16px 0;font-size:14px;line-height:1.6}
.callout strong{display:block;margin-bottom:6px}
.callout p{margin:4px 0 0}
.callout-placeholder{background:#F9FAFB;border:1px dashed #D1D5DB;border-left:4px solid #9CA3AF}
.do-dont{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
@media(max-width:640px){.do-dont{grid-template-columns:1fr}}
.do{border-left:4px solid #1A7F5A;padding:12px 16px;background:#F0FDF4;border-radius:0 4px 4px 0}
.dont{border-left:4px solid #B91C1C;padding:12px 16px;background:#FFF5F5;border-radius:0 4px 4px 0}
.do-dont-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.do-label{color:#1A7F5A}
.dont-label{color:#B91C1C}
.do-dont-content p{margin:0;font-size:13px;line-height:1.6}
.spec-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0}
.spec-table th{text-align:left;padding:8px 12px;background:#F3F4F6;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#6B7280;border-bottom:2px solid #E5E7EB}
.spec-table td{padding:8px 12px;border-bottom:1px solid #F3F4F6;vertical-align:top;line-height:1.5}
.spec-table code{background:#F3F4F6;padding:1px 5px;border-radius:3px;font-size:12px}
.related-pages{margin-top:32px;padding-top:20px;border-top:1px solid #E5E7EB}
.related-pages h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#6B7280;margin-bottom:10px}

# Labels and accessible names

Every interactive control in Petrel must have an accessible name that describes its purpose to users of assistive technology.
## Purpose

Screen reader users navigate Petrel by listening to the names of controls read aloud. Without accurate accessible names, controls are announced as generic types (Button, TextBox) without context, making it impossible to understand or operate the interface.

## Core requirements

- Every interactive control must have a non-empty accessible name.
- Names must be descriptive of the control's purpose, not its type.
- Icon-only buttons must have an accessible name defined in `AutomationProperties.Name`.
- Form fields must have labels that are programmatically associated with the input.
- Group containers (GroupBox, TabItem) must have labels that identify the group.


## WPF implementation

In WPF, accessible names are provided using the `AutomationProperties` class:

Property
Purpose
Example
AutomationProperties.Name
The accessible name of the control
"Delete selected well"
AutomationProperties.HelpText
Additional description (help text)
"Removes the selected well from the project. This action cannot be undone."
AutomationProperties.LabeledBy
Associates a label control with an input
Points to the associated TextBlock
AutomationProperties.IsRequiredForForm
Marks required form fields
true
## Do and Don't

DO
Set 
AutomationProperties.Name
on every icon button, toolbar button, and image control. Use the same text as the tooltip, written as an imperative verb phrase: "Open well selector", "Close dialog".
DON'T
Don't use generic names like "Button 1", "OK", or "X". "OK" and "X" have no context when heard by a screen reader user who may have multiple open dialogs.
## Petrel example

Petrel example placeholder
Examples of correctly and incorrectly labelled Petrel toolbar buttons will be added here, with accompanying XAML snippets.
### Related pages

Keyboard and focus
— Focus and tab sequence
Custom controls
— UI Automation for complex controls
Form controls
— Label associations for form fields