Design Atlas
한국어
❝ UX writing

Inclusive Language

포용적 언어

Avoiding copy that quietly excludes a user from the default — like a gender field with only two options.

Also known as: Bias-free language
···
html
<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <p class="qlabel" id="bl"></p>
    <div class="opts"><span class="opt">-</span><span class="opt">-</span></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <p class="qlabel" id="gl"></p>
    <div class="opts"><span class="opt">-</span><span class="opt">-</span><span class="opt">-</span><span class="opt">-</span></div>
    <p class="why" id="gw"></p></div>
</div>
css
.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:26px 12px 10px;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;overflow:hidden}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.qlabel{margin:0;font:700 11px/1.3 -apple-system,sans-serif;color:var(--fg)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.opt{position:relative;padding:5px 8px 5px 20px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font:600 9.5px/1.2 -apple-system,sans-serif;color:var(--fg)}
.opt::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;border:1.5px solid var(--muted)}
.why{margin:0;font:500 10px/1.25 -apple-system,sans-serif;color:var(--muted)}
js
const bl = document.getElementById('bl'), bw = document.getElementById('bw');
const gl = document.getElementById('gl'), gw = document.getElementById('gw');
const bOpts = document.querySelectorAll('.pane.bad .opt');
const gOpts = document.querySelectorAll('.pane.good .opt');
const L = {
  ko: { q: '성별', bo: ['남성', '여성'], go: ['남성', '여성', '기타', '응답 안 함'], bw: '두 칸 중 하나를 강제로 선택', gw: '누구도 강제로 분류되지 않음' },
  en: { q: 'Gender', bo: ['Male', 'Female'], go: ['Male', 'Female', 'Other', 'Prefer not to say'], bw: 'forces a choice between two boxes', gw: 'no one is forced into the wrong bucket' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bl.textContent = t.q; gl.textContent = t.q;
  bOpts.forEach((el, i) => (el.textContent = t.bo[i]));
  gOpts.forEach((el, i) => (el.textContent = t.go[i]));
  bw.textContent = t.bw; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2800);

Inclusive language doesn't treat any group as an exception. A common mistake is a gender field with only two options, or a marital-status field that forces an answer from someone who doesn't want to disclose it.

The fix is to widen the options and always include "prefer not to say." If the field isn't strictly necessary, not asking at all is often the better option — requiring non-essential information as if it were mandatory is itself a form of exclusion.

The demo's ✕ forces a choice between two boxes; ✓ adds "other" and "prefer not to say" so no one is forced into the wrong bucket.

When to use

Apply this when designing sign-up fields for gender, family status, or region. First ask whether the field is actually required to run the service.