Web Accessibility FAQ & Answers

Implement WCAG 2.1 compliant keyboard navigation for full accessibility. Core requirements: (1) All interactive elements accessible via keyboard (Tab, Shift+Tab, Enter, Space, Arrow keys), (2) No keyboard traps (users can navigate away from any element), (3) Visible focus indicators (3:1 contrast ratio minimum against background). Key patterns: Tab/Shift+Tab navigate between focusable elements (buttons, links, inputs), Enter activates buttons and links, Space toggles checkboxes and activates buttons, Arrow keys navigate within dropdowns, radio buttons, sliders, Escape closes modals and menus. HTML semantics: use native elements for free keyboard support: not

, for navigation, , , for forms. Custom components need explicit keyboard handling: const handleKeydown = (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(); } }; <div role="button" tabindex="0" @keydown="handleKeydown">. Focus management: (1) Set initial focus in modals: inputRef.value.focus(); onMounted(() => firstFocusable.focus());, (2) Return focus on close: closeModal(); previousElement.focus();, (3) Skip to content links for screen reader users. Roving tabindex for grouped items (radio groups, toolbars): only one item tabindex="0", others tabindex="-1", Arrow keys move focus and update tabindex. Best practices: (1) Maintain logical focus order (top to bottom, left to right), (2) Show clear focus indicators (outline, ring, background change), (3) Test with keyboard only (no mouse), (4) Use tabindex="0" not positive numbers, (5) Ensure all features work without mouse.</p> </div><div class="mt-4 pt-3 border-t border-gray-100"><span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Sources</span><div class="mt-1.5 flex flex-wrap gap-2"><a href="https://www.w3.org/WAI/WCAG21/Understanding/keyboard-accessible" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>w3.org</a><a href="https://www.allaccessible.org/blog/how-to-set-up-keyboard-navigation-for-improved-website-accessibility" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>allaccessible.org</a></div></div><div class="mt-4 flex items-center justify-between flex-wrap gap-2"><span class="text-sm text-amber-600 font-medium">99% confidence</span><button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy Answer</button></div></div></div></div></article><!--astro:end--></astro-island><astro-island uid="Z8752E" prefix="r1" component-url="/_astro/QACard.BmF4VKrW.js" component-export="default" renderer-url="/_astro/client.BuOr9PT5.js" props="{"id":[0,"6518"],"question":[0,"What is the role of accessibility in web design?"],"answer":[0,"Accessibility ensures web content is usable by everyone including people with disabilities. Importance: (1) Legal compliance: ADA Title III and Section 508 require accessibility in US, WCAG 2.1 is international standard, lawsuits increasing for non-compliance, (2) Expanded audience: 15% of world population has disabilities, elderly users need accessible design, temporary disabilities (broken arm, eye strain), (3) Better UX for all: keyboard navigation helps power users, captions help in noisy environments, clear language helps non-native speakers. WCAG 2.1 principles (POUR): (1) Perceivable: text alternatives for images, captions for videos, sufficient color contrast (4.5:1 for text), (2) Operable: keyboard accessible, enough time to interact, no seizure-inducing content, (3) Understandable: readable text, predictable behavior, error prevention and correction, (4) Robust: compatible with assistive technologies (screen readers, magnifiers). Key practices: semantic HTML (<header>, <nav>, <main>, <button>), ARIA labels when needed (aria-label, aria-describedby), keyboard navigation, focus management, color contrast, responsive design, form labels. Testing: automated tools (Lighthouse, axe), manual keyboard testing, screen reader testing (NVDA, JAWS, VoiceOver), user testing with disabled users. Benefits beyond compliance: SEO improvement (semantic HTML), better mobile experience, clearer code structure, improved usability. 2025 focus: enhanced focus visibility (3:1 contrast minimum), keyboard shortcut controls, improved screen reader support."],"confidence":[0,0.99],"sources":[1,[[0,"https://www.w3.org/TR/WCAG21/"],[0,"https://accessibility-test.org/blog/compliance/wcag-2-2-simplified-2025-compliance-essentials/"]]],"topic":[0,"web_accessibility"],"slug":[0,"what-is-the-role-of-accessibility-in-web-design"]}" ssr="" client="visible" opts="{"name":"QACard","value":true}" await-children=""><article id="what-is-the-role-of-accessibility-in-web-design" class="scroll-mt-20 bg-white border border-gray-200 rounded-xl mb-4 hover:border-gray-300 transition-colors"><div class="p-5 border-b border-gray-100"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-amber-500 text-white text-xs font-bold rounded flex-shrink-0">Q</span><div class="flex-1"><a href="#what-is-the-role-of-accessibility-in-web-design" class="text-lg font-medium text-gray-900 hover:text-amber-600 transition-colors">What is the role of accessibility in web design?</a></div><div class="flex items-center gap-2 flex-shrink-0"><button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors" title="Copy link to this Q&A"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></button></div></div></div><div class="p-5"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-gray-900 text-white text-xs font-bold rounded flex-shrink-0">A</span><div class="flex-1 min-w-0"><div class="prose prose-sm max-w-none prose-p:my-2 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-gray-800 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-gray-900 prose-pre:text-gray-100"><p>Accessibility ensures web content is usable by everyone including people with disabilities. Importance: (1) Legal compliance: ADA Title III and Section 508 require accessibility in US, WCAG 2.1 is international standard, lawsuits increasing for non-compliance, (2) Expanded audience: 15% of world population has disabilities, elderly users need accessible design, temporary disabilities (broken arm, eye strain), (3) Better UX for all: keyboard navigation helps power users, captions help in noisy environments, clear language helps non-native speakers. WCAG 2.1 principles (POUR): (1) Perceivable: text alternatives for images, captions for videos, sufficient color contrast (4.5:1 for text), (2) Operable: keyboard accessible, enough time to interact, no seizure-inducing content, (3) Understandable: readable text, predictable behavior, error prevention and correction, (4) Robust: compatible with assistive technologies (screen readers, magnifiers). Key practices: semantic HTML (<header>, <nav>, <main>, <button>), ARIA labels when needed (aria-label, aria-describedby), keyboard navigation, focus management, color contrast, responsive design, form labels. Testing: automated tools (Lighthouse, axe), manual keyboard testing, screen reader testing (NVDA, JAWS, VoiceOver), user testing with disabled users. Benefits beyond compliance: SEO improvement (semantic HTML), better mobile experience, clearer code structure, improved usability. 2025 focus: enhanced focus visibility (3:1 contrast minimum), keyboard shortcut controls, improved screen reader support.</p> </div><div class="mt-4 pt-3 border-t border-gray-100"><span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Sources</span><div class="mt-1.5 flex flex-wrap gap-2"><a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>w3.org</a><a href="https://accessibility-test.org/blog/compliance/wcag-2-2-simplified-2025-compliance-essentials/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>accessibility-test.org</a></div></div><div class="mt-4 flex items-center justify-between flex-wrap gap-2"><span class="text-sm text-amber-600 font-medium">99% confidence</span><button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy Answer</button></div></div></div></div></article><!--astro:end--></astro-island><astro-island uid="qvD9G" prefix="r2" component-url="/_astro/QACard.BmF4VKrW.js" component-export="default" renderer-url="/_astro/client.BuOr9PT5.js" props="{"id":[0,"6519"],"question":[0,"How to handle complex form layouts?"],"answer":[0,"Use semantic HTML and ARIA for accessible complex forms. Structure: (1) Fieldsets for grouped inputs: <fieldset><legend>Shipping Address</legend><input name=\"street\"><input name=\"city\"></fieldset>, screen readers announce group context. (2) Labels for all inputs: <label for=\"email\">Email</label><input id=\"email\">, click label focuses input, screen readers read label. (3) Required field indicators: <label>Name <span aria-label=\"required\">*</span></label><input required aria-required=\"true\">, both visual and semantic. (4) Error messages: <input aria-describedby=\"email-error\" aria-invalid=\"true\"><div id=\"email-error\" role=\"alert\">Invalid email</div>, screen readers announce errors. Multi-step forms: (1) Progress indicator with aria-current: <ol><li aria-current=\"step\">Step 1</li><li>Step 2</li></ol>, (2) Save state between steps, (3) Allow backward navigation. Complex inputs: (1) Date pickers: provide text input fallback, <input type=\"date\"> native support best. (2) Autocomplete: aria-autocomplete=\"list\" aria-controls=\"suggestions\", <ul id=\"suggestions\" role=\"listbox\">. (3) Multi-select: <select multiple> or checkboxes with fieldset. Validation: (1) Client-side: immediate feedback on blur, pattern attribute for regex, HTML5 types (email, tel, url), (2) Server-side: always validate, return specific errors, preserve user input. Keyboard navigation: Tab through fields, Enter submits, Escape clears (document clearly). Best practices: (1) One column layout (easier to scan), (2) Group related fields, (3) Clear labels above inputs, (4) Inline validation not just on submit, (5) Disable submit during processing, (6) Success confirmation after submit."],"confidence":[0,0.99],"sources":[1,[[0,"https://www.w3.org/WAI/tutorials/forms/"],[0,"https://web.dev/articles/sign-in-form-best-practices"]]],"topic":[0,"web_accessibility"],"slug":[0,"how-to-handle-complex-form-layouts"]}" ssr="" client="visible" opts="{"name":"QACard","value":true}" await-children=""><article id="how-to-handle-complex-form-layouts" class="scroll-mt-20 bg-white border border-gray-200 rounded-xl mb-4 hover:border-gray-300 transition-colors"><div class="p-5 border-b border-gray-100"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-amber-500 text-white text-xs font-bold rounded flex-shrink-0">Q</span><div class="flex-1"><a href="#how-to-handle-complex-form-layouts" class="text-lg font-medium text-gray-900 hover:text-amber-600 transition-colors">How to handle complex form layouts?</a></div><div class="flex items-center gap-2 flex-shrink-0"><button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors" title="Copy link to this Q&A"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></button></div></div></div><div class="p-5"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-gray-900 text-white text-xs font-bold rounded flex-shrink-0">A</span><div class="flex-1 min-w-0"><div class="prose prose-sm max-w-none prose-p:my-2 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-gray-800 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-gray-900 prose-pre:text-gray-100"><p>Use semantic HTML and ARIA for accessible complex forms. Structure: (1) Fieldsets for grouped inputs: <fieldset><legend>Shipping Address</legend><input name="street"><input name="city"></fieldset>, screen readers announce group context. (2) Labels for all inputs: <label for="email">Email</label><input id="email">, click label focuses input, screen readers read label. (3) Required field indicators: <label>Name <span aria-label="required">*</span></label><input required aria-required="true">, both visual and semantic. (4) Error messages: <input aria-describedby="email-error" aria-invalid="true"><div id="email-error" role="alert">Invalid email</div>, screen readers announce errors. Multi-step forms: (1) Progress indicator with aria-current: <ol><li aria-current="step">Step 1</li><li>Step 2</li></ol>, (2) Save state between steps, (3) Allow backward navigation. Complex inputs: (1) Date pickers: provide text input fallback, <input type="date"> native support best. (2) Autocomplete: aria-autocomplete="list" aria-controls="suggestions", <ul id="suggestions" role="listbox">. (3) Multi-select: <select multiple> or checkboxes with fieldset. Validation: (1) Client-side: immediate feedback on blur, pattern attribute for regex, HTML5 types (email, tel, url), (2) Server-side: always validate, return specific errors, preserve user input. Keyboard navigation: Tab through fields, Enter submits, Escape clears (document clearly). Best practices: (1) One column layout (easier to scan), (2) Group related fields, (3) Clear labels above inputs, (4) Inline validation not just on submit, (5) Disable submit during processing, (6) Success confirmation after submit.</p> </div><div class="mt-4 pt-3 border-t border-gray-100"><span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Sources</span><div class="mt-1.5 flex flex-wrap gap-2"><a href="https://www.w3.org/WAI/tutorials/forms/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>w3.org</a><a href="https://web.dev/articles/sign-in-form-best-practices" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>web.dev</a></div></div><div class="mt-4 flex items-center justify-between flex-wrap gap-2"><span class="text-sm text-amber-600 font-medium">99% confidence</span><button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy Answer</button></div></div></div></div></article><!--astro:end--></astro-island><astro-island uid="Z1n4lxu" prefix="r3" component-url="/_astro/QACard.BmF4VKrW.js" component-export="default" renderer-url="/_astro/client.BuOr9PT5.js" props="{"id":[0,"6520"],"question":[0,"How to implement custom form controls?"],"answer":[0,"Use ARIA to make custom controls accessible to assistive technologies. Custom checkbox: <div role=\"checkbox\" aria-checked=\"false\" tabindex=\"0\" @click=\"toggle\" @keydown.space.prevent=\"toggle\"><span v-if=\"checked\">✓</span></div>. Required attributes: role defines element type, aria-checked (true/false/mixed) for state, tabindex=\"0\" for keyboard focus, keyboard handlers (Space/Enter). Custom select dropdown: <div role=\"combobox\" aria-expanded=\"false\" aria-controls=\"listbox\" aria-activedescendant=\"option-1\"><input role=\"textbox\" /><ul id=\"listbox\" role=\"listbox\"><li id=\"option-1\" role=\"option\" aria-selected=\"true\">Option 1</li></ul></div>. Required: role=\"combobox\" container, aria-expanded for dropdown state, aria-activedescendant for selected option, role=\"listbox\" and role=\"option\", keyboard navigation (Arrow keys, Enter, Escape). Custom slider: <div role=\"slider\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\" aria-valuetext=\"50%\" tabindex=\"0\">. Arrow keys adjust value, Home/End for min/max. Best practices: (1) Use native HTML when possible (<input type=\"checkbox\">), (2) Follow WAI-ARIA Authoring Practices patterns, (3) Implement full keyboard support, (4) Provide clear focus indicators, (5) Test with screen readers (NVDA, JAWS, VoiceOver), (6) Include value change announcements (aria-live). Common mistakes: (1) Missing keyboard support, (2) Incorrect ARIA roles, (3) No focus management, (4) Poor screen reader announcements. Alternative: use accessible component libraries (Radix UI, Headless UI, Reach UI) with built-in accessibility."],"confidence":[0,0.99],"sources":[1,[[0,"https://www.w3.org/WAI/ARIA/apg/patterns/"],[0,"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles"]]],"topic":[0,"web_accessibility"],"slug":[0,"how-to-implement-custom-form-controls"]}" ssr="" client="visible" opts="{"name":"QACard","value":true}" await-children=""><article id="how-to-implement-custom-form-controls" class="scroll-mt-20 bg-white border border-gray-200 rounded-xl mb-4 hover:border-gray-300 transition-colors"><div class="p-5 border-b border-gray-100"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-amber-500 text-white text-xs font-bold rounded flex-shrink-0">Q</span><div class="flex-1"><a href="#how-to-implement-custom-form-controls" class="text-lg font-medium text-gray-900 hover:text-amber-600 transition-colors">How to implement custom form controls?</a></div><div class="flex items-center gap-2 flex-shrink-0"><button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors" title="Copy link to this Q&A"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></button></div></div></div><div class="p-5"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-gray-900 text-white text-xs font-bold rounded flex-shrink-0">A</span><div class="flex-1 min-w-0"><div class="prose prose-sm max-w-none prose-p:my-2 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-gray-800 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-gray-900 prose-pre:text-gray-100"><p>Use ARIA to make custom controls accessible to assistive technologies. Custom checkbox: <div role="checkbox" aria-checked="false" tabindex="0" @click="toggle" @keydown.space.prevent="toggle"><span v-if="checked">✓</span></div>. Required attributes: role defines element type, aria-checked (true/false/mixed) for state, tabindex="0" for keyboard focus, keyboard handlers (Space/Enter). Custom select dropdown: <div role="combobox" aria-expanded="false" aria-controls="listbox" aria-activedescendant="option-1"><input role="textbox" /><ul id="listbox" role="listbox"><li id="option-1" role="option" aria-selected="true">Option 1</li></ul></div>. Required: role="combobox" container, aria-expanded for dropdown state, aria-activedescendant for selected option, role="listbox" and role="option", keyboard navigation (Arrow keys, Enter, Escape). Custom slider: <div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-valuetext="50%" tabindex="0">. Arrow keys adjust value, Home/End for min/max. Best practices: (1) Use native HTML when possible (<input type="checkbox">), (2) Follow WAI-ARIA Authoring Practices patterns, (3) Implement full keyboard support, (4) Provide clear focus indicators, (5) Test with screen readers (NVDA, JAWS, VoiceOver), (6) Include value change announcements (aria-live). Common mistakes: (1) Missing keyboard support, (2) Incorrect ARIA roles, (3) No focus management, (4) Poor screen reader announcements. Alternative: use accessible component libraries (Radix UI, Headless UI, Reach UI) with built-in accessibility.</p> </div><div class="mt-4 pt-3 border-t border-gray-100"><span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Sources</span><div class="mt-1.5 flex flex-wrap gap-2"><a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>w3.org</a><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>developer.mozilla.org</a></div></div><div class="mt-4 flex items-center justify-between flex-wrap gap-2"><span class="text-sm text-amber-600 font-medium">99% confidence</span><button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy Answer</button></div></div></div></div></article><!--astro:end--></astro-island><astro-island uid="Z1GijyC" prefix="r4" component-url="/_astro/QACard.BmF4VKrW.js" component-export="default" renderer-url="/_astro/client.BuOr9PT5.js" props="{"id":[0,"6521"],"question":[0,"How to handle multi-language support in applications?"],"answer":[0,"Implement internationalization (i18n) with proper language metadata and content structure. HTML lang attribute: <html lang=\"en\"> for primary language, <span lang=\"es\">Hola</span> for inline changes, screen readers use this for pronunciation. Vue i18n setup: const i18n = createI18n({ locale: 'en', fallbackLocale: 'en', messages: { en: { greeting: 'Hello' }, es: { greeting: 'Hola' } } });. Usage: {{ $t('greeting') }} or const { t } = useI18n(); t('greeting');. Language switcher: <select @change=\"changeLocale\" aria-label=\"Select language\"><option value=\"en\">English</option><option value=\"es\">Español</option></select>. Store preference: localStorage.setItem('locale', locale); persist across sessions. RTL support: <html dir=\"rtl\"> for Arabic, Hebrew, etc., CSS logical properties: margin-inline-start instead of margin-left, flexbox and grid automatically adjust. Pluralization: { \"apple\": \"no apples | one apple | {count} apples\" }, $t('apple', count). Number/date formatting: {{ n(1000, 'currency') }} → $1,000.00 (locale-aware), {{ d(date, 'long') }} → January 15, 2025. Accessibility considerations: (1) Set lang on dynamically loaded content, (2) Announce language changes to screen readers: <div aria-live=\"polite\">Language changed to Spanish</div>, (3) Translate ARIA labels and descriptions, (4) Test with screen readers in each language. SEO: separate URLs per language (/en/, /es/) or subdomains (en.example.com), hreflang tags: <link rel=\"alternate\" hreflang=\"es\" href=\"/es/\">. Best practices: (1) Externalize all text (no hardcoded strings), (2) Load translations lazily per route, (3) Detect browser language: navigator.language, (4) Provide manual language selector, (5) Test layout with long translations (German, Finnish)."],"confidence":[0,0.99],"sources":[1,[[0,"https://vue-i18n.intlify.dev/"],[0,"https://www.w3.org/International/questions/qa-html-language-declarations"]]],"topic":[0,"web_accessibility"],"slug":[0,"how-to-handle-multi-language-support-in-applications"]}" ssr="" client="visible" opts="{"name":"QACard","value":true}" await-children=""><article id="how-to-handle-multi-language-support-in-applications" class="scroll-mt-20 bg-white border border-gray-200 rounded-xl mb-4 hover:border-gray-300 transition-colors"><div class="p-5 border-b border-gray-100"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-amber-500 text-white text-xs font-bold rounded flex-shrink-0">Q</span><div class="flex-1"><a href="#how-to-handle-multi-language-support-in-applications" class="text-lg font-medium text-gray-900 hover:text-amber-600 transition-colors">How to handle multi-language support in applications?</a></div><div class="flex items-center gap-2 flex-shrink-0"><button class="p-1.5 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors" title="Copy link to this Q&A"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg></button></div></div></div><div class="p-5"><div class="flex items-start gap-3"><span class="px-2.5 py-1 bg-gray-900 text-white text-xs font-bold rounded flex-shrink-0">A</span><div class="flex-1 min-w-0"><div class="prose prose-sm max-w-none prose-p:my-2 prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:text-gray-800 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-gray-900 prose-pre:text-gray-100"><p>Implement internationalization (i18n) with proper language metadata and content structure. HTML lang attribute: <html lang="en"> for primary language, <span lang="es">Hola</span> for inline changes, screen readers use this for pronunciation. Vue i18n setup: const i18n = createI18n({ locale: 'en', fallbackLocale: 'en', messages: { en: { greeting: 'Hello' }, es: { greeting: 'Hola' } } });. Usage: {{ $t('greeting') }} or const { t } = useI18n(); t('greeting');. Language switcher: <select @change="changeLocale" aria-label="Select language"><option value="en">English</option><option value="es">Español</option></select>. Store preference: localStorage.setItem('locale', locale); persist across sessions. RTL support: <html dir="rtl"> for Arabic, Hebrew, etc., CSS logical properties: margin-inline-start instead of margin-left, flexbox and grid automatically adjust. Pluralization: { "apple": "no apples | one apple | {count} apples" }, $t('apple', count). Number/date formatting: {{ n(1000, 'currency') }} → $1,000.00 (locale-aware), {{ d(date, 'long') }} → January 15, 2025. Accessibility considerations: (1) Set lang on dynamically loaded content, (2) Announce language changes to screen readers: <div aria-live="polite">Language changed to Spanish</div>, (3) Translate ARIA labels and descriptions, (4) Test with screen readers in each language. SEO: separate URLs per language (/en/, /es/) or subdomains (en.example.com), hreflang tags: <link rel="alternate" hreflang="es" href="/es/">. Best practices: (1) Externalize all text (no hardcoded strings), (2) Load translations lazily per route, (3) Detect browser language: navigator.language, (4) Provide manual language selector, (5) Test layout with long translations (German, Finnish).</p> </div><div class="mt-4 pt-3 border-t border-gray-100"><span class="text-xs font-medium text-gray-500 uppercase tracking-wide">Sources</span><div class="mt-1.5 flex flex-wrap gap-2"><a href="https://vue-i18n.intlify.dev/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>vue-i18n.intlify.dev</a><a href="https://www.w3.org/International/questions/qa-html-language-declarations" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-800 rounded transition-colors"><svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>w3.org</a></div></div><div class="mt-4 flex items-center justify-between flex-wrap gap-2"><span class="text-sm text-amber-600 font-medium">99% confidence</span><button class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors"><svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>Copy Answer</button></div></div></div></div></article><!--astro:end--></astro-island> </div> </section> </div> <div class="mt-16 text-center"> <a href="/kb" class="btn btn-primary inline-flex items-center gap-2"> <svg class="w-5 h-5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path> </svg> Browse All Topics </a> </div> </main> </div> </div> </section> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script><astro-island uid="22C7GK" prefix="r5" component-url="/_astro/BackToTop.Dfk0RXfA.js" component-export="default" renderer-url="/_astro/client.BuOr9PT5.js" props="{}" ssr="" client="load" opts="{"name":"BackToTop","value":true}"></astro-island> </main> <footer class="relative bg-gray-900 text-white mt-auto border-t-2 border-amber-500 overflow-hidden"> <!-- Subtle decorative gradient --> <div class="absolute top-0 right-0 w-96 h-96 bg-amber-500/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2"></div> <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16"> <!-- Main Grid: Brand left, Links right --> <div class="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12"> <!-- Brand Column --> <div class="lg:col-span-4"> <a href="/" class="inline-flex items-center gap-3 mb-4 group no-underline"> <img src="/logo-footer.svg" alt="AgentsKB" class="h-8 w-auto"> <span class="text-xl font-bold text-white transition-colors group-hover:text-amber-500">AgentsKB</span> </a> <p class="text-gray-400 text-sm leading-relaxed mb-6 max-w-xs"> Give your AI expert-level knowledge. Researched answers to any problem. </p> <!-- Stats badges --> <div class="flex flex-wrap gap-3"> <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-800 rounded-full text-xs text-gray-300 border border-gray-700"> <span class="w-1.5 h-1.5 bg-amber-500 rounded-full"></span> 26,841+ Q&As </span> <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-gray-800 rounded-full text-xs text-gray-300 border border-gray-700"> <span class="w-1.5 h-1.5 bg-amber-500 rounded-full"></span> 0 domains </span> </div> </div> <!-- Links Grid: 2x2 on mobile, 3 cols on desktop --> <div class="lg:col-span-8 grid grid-cols-2 sm:grid-cols-3 gap-8"> <!-- Product --> <div> <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Product</h4> <ul class="space-y-2.5"> <li> <a href="/features" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Features </a> </li> <li> <a href="/kb" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Knowledge Base </a> </li> <li> <a href="/pricing" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Pricing </a> </li> <li> <a href="/comparison" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> AI Comparison </a> </li> </ul> </div> <!-- Developers --> <div> <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Developers</h4> <ul class="space-y-2.5"> <li> <a href="/docs" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Documentation </a> </li> <li> <a href="/playground" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Playground </a> </li> <li> <a href="https://github.com/Cranot/agentskb-mcp" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> GitHub <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li> <li> <a href="/status" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> System Status </a> </li> </ul> </div> <!-- Company --> <div class="col-span-2 sm:col-span-1"> <h4 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-4">Company</h4> <ul class="space-y-2.5"> <li> <a href="/about" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> About Us </a> </li> <li> <a href="/changelog" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Changelog </a> </li> <li> <a href="https://modelcontextprotocol.io" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> About MCP <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> </svg> </a> </li> <li> <astro-island uid="2b4fuQ" prefix="r6" component-url="/_astro/ObfuscatedEmail.CR8ZgwAp.js" component-export="default" renderer-url="/_astro/client.BuOr9PT5.js" props="{"className":[0,"text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"]}" ssr="" client="load" opts="{"name":"ObfuscatedEmail","value":true}" await-children=""><span class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"><span class="text-gray-400">Loading...</span></span><!--astro:end--></astro-island> </li> <li> <a href="/legal/privacy" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Privacy Policy </a> </li> <li> <a href="/legal/terms" class="text-sm text-gray-400 hover:text-amber-500 transition-colors no-underline"> Terms of Service </a> </li> </ul> </div> </div> </div> <!-- Bottom Bar --> <div class="mt-12 pt-8 border-t border-gray-800"> <div class="flex flex-col sm:flex-row items-center justify-between gap-4"> <p class="text-sm text-gray-500"> © 2025 AgentsKB. All rights reserved. </p> <div class="flex items-center gap-4"> <a href="https://github.com/Cranot/agentskb-mcp" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-white transition-colors no-underline" aria-label="GitHub"> <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"> <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path> </svg> </a> </div> </div> </div> </div> </footer> </body></html>