JavaScript 中的 Accessibility：如何让网站对所有人都友好

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

JavaScript 中的 Accessibility：如何让网站对所有人都友好

\n\n

想象一下，您访问一个网站，但“购买”按钮无法用鼠标点击——只能用键盘。或者您看不见屏幕，而屏幕阅读器却跳过了大半内容。这很不爽，对吧？而对于数百万人来说，这就是日常现实。

\n\n

Accessibility（或 a11y）不仅仅是一个时髦的术语。它是让您的代码变得诚实的一种方式。JavaScript 中的可访问性关乎让您的网站为所有人服务：为视力受限的人、有运动障碍的人、以及那些仅使用键盘或语音控制的人。是的，这也关乎 SEO：搜索引擎喜欢干净、语义正确的代码。

\n\n

在本文中，我们将探讨一些今天就能实施的、基于 JavaScript 的真实示例。没有空话——只有代码和实践。

\n\n

为什么可访问性是您的责任？

\n\n

如果您用 JavaScript 编写代码，您就在控制界面的行为。正是 JS 最常破坏可访问性：动态弹窗、无限滚动、自定义选择框。屏幕阅读器（屏幕朗读软件）无法读懂您的想法——它们只能读取您通过 HTML 和 ARIA 告诉它们的内容。

\n\n

好消息是：大多数问题一个晚上就能修复。坏消息是：如果一开始不考虑可访问性，重写可能需要数周时间。

\n\n

ARIA 属性：您的主要工具

\n\n

ARIA（Accessible Rich Internet Applications）是一组属性，帮助辅助技术理解页面上发生了什么。JavaScript 非常适合动态更新这些属性。

\n\n

示例 1：动态更新 aria-live

\n\n

假设您有一个聊天室，消息无需刷新页面即可加载。屏幕阅读器需要宣布新消息。没有 aria-live，用户根本不会知道有更新。

\n\n

// 创建一个通知容器\nconst liveRegion = document.createElement('div');\nliveRegion.setAttribute('aria-live', 'polite');\nliveRegion.setAttribute('aria-atomic', 'true');\nliveRegion.classList.add('sr-only'); // 在视觉上隐藏\ndocument.body.appendChild(liveRegion);\n\n// 添加消息的函数\nfunction addChatMessage(message) {\n  liveRegion.textContent = ''; // 清空\n  liveRegion.textContent = `新消息：${message}`;\n}\n\n// 调用示例\naddChatMessage('你好！最近怎么样？');

\n\n

重要提示： aria-live="polite" 告诉屏幕阅读器：“等你读完当前内容后再宣布”。aria-live="assertive" 会中断阅读——用于关键错误。

\n\n

示例 2：自定义折叠面板/手风琴

\n\n

标准的 <details> 和 <summary> 已经具备可访问性，但如果您用 JS 制作自定义手风琴，则需要添加 ARIA 角色和状态。

\n\n

// 对于手风琴的每个部分\nconst accordionButton = document.querySelector('.accordion-button');\nconst accordionPanel = document.querySelector('.accordion-panel');\n\naccordionButton.setAttribute('aria-expanded', 'false');\naccordionButton.setAttribute('aria-controls', 'panel-1');\naccordionPanel.setAttribute('id', 'panel-1');\naccordionPanel.setAttribute('aria-hidden', 'true');\n\naccordionButton.addEventListener('click', () => {\n  const isOpen = accordionButton.getAttribute('aria-expanded') === 'true';\n  accordionButton.setAttribute('aria-expanded', !isOpen);\n  accordionPanel.setAttribute('aria-hidden', isOpen);\n});

\n\n

现在屏幕阅读器知道按钮控制着一个面板，并且知道它是打开还是关闭状态。

\n\n