SECTION
Settings row
A preference: what it is, what it does, and the control that changes it. Goes inside a rule stack.
Three preferences
Tab into them. Every switch is a real input and carries its own name.
A short note every Friday with what shipped and what is next.
Show the booked, holding and open months on the front page.
Display starting figures next to each way of working together.
<div class="rule-stack rule-stack-on-sunk" style="width:100%">
<div class="rule-row settings-row">
<div class="settings-row-text">
<span class="settings-row-title" id="set-1">Weekly build emails</span>
<p class="settings-row-body">A short note every Friday with what shipped and what is next.</p>
</div>
<input class="switch" type="checkbox" aria-labelledby="set-1" checked>
</div>
<div class="rule-row settings-row">
<div class="settings-row-text">
<span class="settings-row-title" id="set-2">Public availability</span>
<p class="settings-row-body">Show the booked, holding and open months on the front page.</p>
</div>
<input class="switch" type="checkbox" aria-labelledby="set-2" checked>
</div>
<div class="rule-row settings-row">
<div class="settings-row-text">
<span class="settings-row-title" id="set-3">Rate card</span>
<p class="settings-row-body">Display starting figures next to each way of working together.</p>
</div>
<input class="switch" type="checkbox" aria-labelledby="set-3">
</div>
</div>Reference
Read from sections/settings-row.css when this page was built, so it cannot fall behind the stylesheet.
.settings-row.settings-row-text.settings-row-title.settings-row-body--ds-font-body--ds-font-display--ds-gap--ds-gap-tight--ds-gap-wide--ds-ink--ds-ink-faint--ds-measure-settings--ds-pad-row-lg--ds-settings-text-basis--ds-text-caption--ds-weight-displayNotes
A switch alone on a row is announced as “checkbox, unchecked” and nothing more. The title beside it is a separate element and no assistive technology infers the association. Point aria-labelledby at the title's id, as the specimen does, or wrap the control in a .choice label with visually-hidden text.
This component cannot do it for you, and the omission is completely invisible on screen — which is why it is the first thing this page says.
A settings list is scanned rather than read, and a description running the full width of a wide page stops being scannable long before it stops being readable.