import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as n}from"./index-BeeV6X6A.js";import"./index-_dyfSX8u.js";import{M as o}from"./index-DLgQDw3r.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-D06dtFvI.js";import"./iframe-Cf-Lpz6Y.js";import"./DocsRenderer-CFRXHY34-CCeAz_jE.js";import"./client-ByW5HbEz.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";function s(i){const t={a:"a",code:"code",h2:"h2",h3:"h3",h4:"h4",p:"p",...n(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{}),`
`,e.jsx(t.h2,{id:"form-field-accessibility",children:"Form Field Accessibility"}),`
`,e.jsx(t.h3,{id:"placeholders",children:"Placeholders"}),`
`,e.jsx(t.p,{children:"Except for Search inputs, we advise against using placeholder text for inputs."}),`
`,e.jsx(t.h4,{id:"translation",children:"Translation"}),`
`,e.jsx(t.p,{children:"To prevent triggering a change in page layout, browsers don't translate certain attributes. Because of this, users will see untranslated placeholder text."}),`
`,e.jsx(t.h4,{id:"recall",children:"Recall"}),`
`,e.jsx(t.p,{children:"Placeholder text disappears when a field is interacted with. For this reason, it's not suitable for formatting guidelines or necessary context."}),`
`,e.jsx(t.h4,{id:"utility",children:"Utility"}),`
`,e.jsx(t.p,{children:"Placeholder content is limited to static text. Additionally, placeholder text is truncated beyond the width of its input."}),`
`,e.jsx(t.h4,{id:"field-value-confusion",children:"Field value confusion"}),`
`,e.jsx(t.p,{children:"Low-contrast placeholders may be illegible for some users. Yet, placeholders with compliant contrast can be mistaken for field values. High Contrast Mode will make placeholders and values appear identical."}),`
`,e.jsx(t.p,{children:"Finally, Users with low digital literacy may not understand the purpose or behavior of placeholder text."}),`
`,e.jsx(t.h3,{id:"purpose",children:"Purpose"}),`
`,e.jsxs(t.p,{children:["When collecting an individual's personal data, you must define the input's purpose via the ",e.jsx(t.code,{children:"autocomplete"})," attribute. This allows users to automate the filling of fields and ensures the purpose is known, regardless of the label. A complete list of fields this is required for may be found ",e.jsx("a",{href:"https://www.w3.org/TR/WCAG21/#input-purposes",children:"in the WCAG spec"}),"."]}),`
`,e.jsx(t.h3,{id:"autofocus",children:"Autofocus"}),`
`,e.jsxs(t.p,{children:["Except for very specific cases, we advise against using the ",e.jsx(t.code,{children:"autoFocus"}),' prop; unless used considerately, the sense of focus being "teleported" to an unexpected part of the page can be jarring to users, especially those using screen readers.']}),`
`,e.jsxs(t.p,{children:["More details can be found ",e.jsxs(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus#accessibility_considerations",rel:"nofollow",children:["on MDN's ",e.jsx(t.code,{children:"autofocus"})," page"]}),"."]})]})}function y(i={}){const{wrapper:t}={...n(),...i.components};return t?e.jsx(t,{...i,children:e.jsx(s,{...i})}):s(i)}export{y as default};
