无障碍性设计是指让所有人都能够方便地使用产品和服务。在前端领域，我们需要遵循一些法则来保障无障碍性设计。下面，我们将介绍 5 条保障无障碍性设计的法则。
1. 提供语义化的 HTML 标签
语义化的 HTML 标签可以让屏幕阅读器和搜索引擎正确理解页面的内容，从而提高页面的可访问性。以下是一些常用的语义化标签及其作用：
<header>：用于定义页面或部分的页眉。<nav>：用于定义导航链接的区域。<main>：用于定义页面的主要内容区域。<section>：用于定义文档中的节或区域。<article>：用于定义独立的文章或内容块。<aside>：用于定义页面内容的侧边栏区域。<footer>：用于定义页面或部分的页脚。
示例代码：
// www.javascriptcn.com code example
<header>
<h1>网页标题</h1>
<nav>
<ul>
<li><a href="/about">关于我们</a></li>
<li><a href="/blog">博客</a></li>
<li><a href="/contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>第一篇文章标题</h2>
<article>
<p>第一篇文章内容</p>
</article>
</section>
<section>
<h2>第二篇文章标题</h2>
<article>
<p>第二篇文章内容</p>
</article>
</section>
</main>
<aside>
<h2>侧边栏标题</h2>
<ul>
<li><a href="/ad">广告</a></li>
<li><a href="/popular">热门文章</a></li>
</ul>
</aside>
<footer>
版权信息
</footer>2. 使用无障碍技术实现交互
无障碍技术可以提供对键盘、屏幕阅读器等辅助设备的支持，使得残障人士也能够方便地使用网站。以下是一些常用的无障碍技术：
- WAI-ARIA：定义网页的语义，使得屏幕阅读器等辅助设备能够正确地理解页面的结构和交互元素。
- 焦点管理：通过 Tab 键实现网页元素的焦点切换。
- 键盘事件：通过键盘事件实现交互操作。
示例代码：
// www.javascriptcn.com code example
<button aria-label="播放/暂停">
<span class="play-icon"></span>
<span class="pause-icon"></span>
</button>
<script>
const button = document.querySelector('button');
let isPlaying = false;
button.addEventListener('click', function() {
isPlaying = !isPlaying;
if (isPlaying) {
button.setAttribute('aria-label', '暂停');
button.classList.add('is-playing');
} else {
button.setAttribute('aria-label', '播放');
button.classList.remove('is-playing');
}
});
button.addEventListener('keydown', function(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
button.click();
}
});
</script>3. 提供明确的反馈和错误提示
提供明确的反馈和错误提示可以帮助用户更准确地理解页面信息和操作结果，从而提高页面的可访问性。以下是一些常用的反馈和错误提示：
aria-live属性：用于指示页面中的重要信息是否需要立即更新。aria-atomic属性：用于指示页面中的信息是否需要整体更新。aria-describedby属性：用于指定描述页面元素的文本。
示例代码：
// www.javascriptcn.com code example
<div id="alert" aria-live="assertive" aria-atomic="true"></div>
<form>
<label for="username">用户名：</label>
<input type="text" id="username" required aria-describedby="username-error">
<div id="username-error">请输入用户名</div>
<label for="password">密码：</label>
<input type="password" id="password" required aria-describedby="password-error">
<div id="password-error">请输入密码</div>
</form>
<script>
const alert = document.querySelector('#alert');
function showMessage(message) {
alert.textContent = message;
}
function showError(message, input) {
input.setCustomValidity(message);
const errorElement = input.nextElementSibling;
errorElement.textContent = message;
}
function hideError(input) {
input.setCustomValidity('');
const errorElement = input.nextElementSibling;
errorElement.textContent = '';
}
const username = document.querySelector('#username');
const password = document.querySelector('#password');
username.addEventListener('invalid', function(event) {
event.preventDefault();
showError('请输入用户名', username);
});
username.addEventListener('input', function() {
hideError(username);
});
password.addEventListener('invalid', function(event) {
event.preventDefault();
showError('请输入密码', password);
});
password.addEventListener('input', function() {
hideError(password);
});
</script>4. 提供自定义样式和字体大小
提供自定义样式和字体大小可以让用户根据自己的需求来设置页面样式和字体大小，从而提高页面的可访问性。以下是一些常用的自定义样式和字体大小：
- 用户样式表：用户可以通过自己的样式表来设置页面样式。
rem单位：使用rem单位可以让用户根据根元素的字体大小来设置页面元素的字体大小。
示例代码：
// www.javascriptcn.com code example
<style>
:root {
font-size: 16px;
}
body {
font-size: 1rem;
}
</style>
<button class="btn">按钮</button>
<script>
const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
document.body.classList.toggle('dark');
});
</script>5. 使用可访问的颜色和对比度
使用可访问的颜色和对比度可以让用户更轻松地识别页面元素和文字，从而提高页面的可访问性。以下是一些常用的可访问性颜色和对比度：
- WCAG 颜色对比度标准：使用符合 WCAG 颜色对比度标准的颜色组合可以提高页面的对比度，使得页面元素和文字更容易被用户识别。
- 增强对比度：通过增加页面元素和文字的对比度来提高页面的可访问性。
示例代码：
<button style="background-color: #007acc; color: #fff;">按钮</button>
以上是 5 条保障无障碍性设计的法则。通过这些法则和示例代码的学习和掌握，我们可以更好地保障前端页面的可访问性，让所有人都能够方便地使用我们的产品和服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d68c56a941bf7134c555a0