React 19 useId 与无障碍关联实践

概览useId 能在服务端与客户端生成稳定一致的标识，避免 SSR 水合后出现不一致。通过该标识可将 label、描述与错误提示可靠关联到输入控件，满足可访问性要求并改善表单体验。基础关联import { useId, useState } from 'react'

export default function Field() {

const id = useId()

const [value, setValue] = useState('')

const hintId = `${id}-hint`

return (

<div>

<label htmlFor={id}>邮箱</label>

<input

id={id}

type="email"

value={value}

onChange={(e) => setValue(e.target.value)}

aria-describedby={hintId}

required

/>

<p id={hintId}>我们仅用于通知</p>

</div>

)

}

错误信息关联import { useId, useState } from 'react'

export function PasswordField() {

const id = useId()

const [error, setError] = useState<string | null>(null)

const errId = `${id}-error`

return (

<div>

<label htmlFor={id}>密码</label>

<input

id={id}

type="password"

aria-errormessage={errId}

aria-invalid={Boolean(error)}

onBlur={(e) => {

const v = e.target.value

setError(v.length < 8 ? '至少 8 个字符' : null)

}}

/>

{error && <p id={errId} role="alert">{error}</p>}

</div>

)

}

复合控件import { useId } from 'react'

export function RadioGroup() {

const gid = useId()

const labelId = `${gid}-label`

return (

<div role="radiogroup" aria-labelledby={labelId}>

<p id={labelId}>选择一个选项</p>

<label><input type="radio" name={gid} value="a" />A</label>

<label><input type="radio" name={gid} value="b" />B</label>

</div>

)

}

工程要点以 useId 为根派生子标识，避免重复或冲突。SSR 与 CSR 保持一致，避免因随机 id 导致水合差异。与表单状态结合，在错误出现时提供 ARIA 提示并维持焦点语义。验证与指标React：19.0+；Next.js：15.0+在 SSR 场景下不产生水合警告，读屏器能正确关联提示与错误信息