各位观众老爷，大家好！今天咱们来聊聊一个在前端开发中经常被忽略，但其实贼有用的 CSS 属性——aria-current。这玩意儿，说白了，就是专门用来告诉屏幕阅读器，以及其他辅助技术设备，当前页面对应于导航栏里的哪个链接。
为啥需要 aria-current？
想象一下，你是一个视力障碍人士，正在浏览一个网站。当你点击导航栏里的链接时，你希望知道你现在在哪儿，对吧？如果你使用屏幕阅读器，它会读出当前页面的标题，但如果你想快速确认这个页面对应于导航栏里的哪个链接，就需要 aria-current 来帮忙了。
aria-current 属性就像一个路标，清晰地告诉用户：“嘿，你现在的位置就是这儿！” 没了它，用户就得靠猜，或者反复听屏幕阅读器朗读页面内容，效率简直低到姥姥家。
aria-current 的取值
aria-current 属性可以取以下几个值：
page: 表示当前页面。这是最常用的值，通常用于导航栏的链接，表明当前页面就是该链接指向的页面。step: 表示步骤，通常用于向导或分步流程中，表明当前步骤。location: 表示当前位置，例如地图应用中的当前位置。date: 表示当前日期，例如日历应用中。time: 表示当前时间。true: 表示当前元素是当前上下文中的活动元素，但没有更具体的语义。false: 表示当前元素不是当前上下文中的活动元素。""(空字符串): 表示该元素不表示当前上下文中的活动元素。none: 表示该元素不表示当前上下文中的活动元素。
今天咱们重点关注 page，因为它在导航栏中使用最广泛。
aria-current="page" 的用法
直接上代码，咱们用一个简单的导航栏示例来说明：
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于我们</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/contact" aria-current="page">联系我们</a></li>
</ul>
</nav>在这个例子中，假设我们当前正在“联系我们”页面。那么，我们就给“联系我们”这个链接加上 aria-current="page" 属性。
CSS 样式配合 aria-current
光有 aria-current 还不够，我们还需要用 CSS 来给当前链接加上一些醒目的样式，让视觉用户也能一眼看出当前页面。
nav ul li a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #333;
}
nav ul li a[aria-current="page"] {
font-weight: bold;
color: #007bff;
border-bottom: 2px solid #007bff;
}这段 CSS 代码做了两件事：
- 给所有链接设置了基本的样式，比如内边距、颜色等。
- 给
aria-current="page"的链接设置了更醒目的样式，比如加粗字体、改变颜色、添加下划线。
这样一来，当用户访问“联系我们”页面时，导航栏里的“联系我们”链接就会显示为粗体蓝色，并且带有下划线，非常醒目。
JavaScript 动态设置 aria-current
在实际项目中，我们通常会使用 JavaScript 来动态设置 aria-current 属性。这是因为，页面加载时，我们需要根据当前 URL 来判断哪个链接应该被设置为 aria-current="page"。
下面是一个简单的 JavaScript 示例：
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('nav ul li a');
navLinks.forEach(link => {
if (link.getAttribute('href') === currentPath) {
link.setAttribute('aria-current', 'page');
} else {
link.removeAttribute('aria-current'); // 移除其他链接的 aria-current 属性
}
});
});这段代码做了以下几件事：
- 监听
DOMContentLoaded事件，确保页面加载完成后再执行。 - 获取当前页面的 URL 的路径部分（例如
/contact）。 - 获取导航栏里所有的链接。
- 遍历所有链接，如果链接的
href属性与当前路径匹配，就给它设置aria-current="page"属性；否则，移除它的aria-current属性。
复杂场景：子页面高亮父级菜单
有时候，我们的网站结构比较复杂，例如有子页面。例如，“产品”下面有“产品A”、“产品B”、“产品C”等子页面。当用户访问“产品A”页面时，我们希望不仅“产品A”链接高亮，还要让“产品”这个父级菜单也高亮。
这时，我们可以修改 JavaScript 代码，来判断当前页面是否是某个父级菜单的子页面。
document.addEventListener('DOMContentLoaded', function() {
const currentPath = window.location.pathname;
const navLinks = document.querySelectorAll('nav ul li a');
navLinks.forEach(link => {
const href = link.getAttribute('href');
// 检查当前页面是否是某个父级菜单的子页面
if (currentPath.startsWith(href) && href !== '/') {
// 找到父级菜单的链接
const parentLink = link.closest('ul').closest('li').querySelector('a');
if(parentLink){
parentLink.setAttribute('aria-current', 'page');
}
link.setAttribute('aria-current', 'page');
} else if (href === currentPath) {
link.setAttribute('aria-current', 'page');
} else {
link.removeAttribute('aria-current');
// 移除父级菜单的 aria-current 属性，避免错误高亮
const parentLink = link.closest('ul').closest('li').querySelector('a');
if(parentLink && parentLink.getAttribute('aria-current')){
parentLink.removeAttribute('aria-current');
}
}
});
});这段代码的关键在于 currentPath.startsWith(href)，它可以判断当前路径是否以某个链接的 href 属性开头。如果是，就说明当前页面是该链接指向的页面的子页面。 找到父级链接然后设置aria-current
aria-current 的最佳实践
- 只在一个链接上使用
aria-current="page": 在一个页面上，应该只有一个链接拥有aria-current="page"属性。如果多个链接都拥有这个属性，屏幕阅读器可能会感到困惑。 - 保持一致性: 在整个网站上，
aria-current的使用方式应该保持一致。例如，如果在一个页面上使用粗体来表示当前链接，那么在其他页面上也应该使用粗体。 - 测试你的网站: 使用屏幕阅读器或其他辅助技术设备来测试你的网站，确保
aria-current属性能够正确地工作。 - 使用语义化的 HTML:
aria-current只是辅助手段，更重要的是使用语义化的 HTML 结构。例如，使用<nav>元素来表示导航栏，使用<ul>和<li>元素来表示列表。 - 考虑无 JavaScript 的情况: 虽然我们通常使用 JavaScript 来动态设置
aria-current属性，但我们也要考虑在 JavaScript 被禁用或加载失败的情况下，网站的可用性。可以考虑在服务器端渲染时设置aria-current属性。
aria-current 与其他 ARIA 属性的比较
aria-current 只是 ARIA (Accessible Rich Internet Applications) 属性中的一个。ARIA 属性是一组 HTML 属性，用于增强网页的可访问性，特别是对于使用辅助技术设备（如屏幕阅读器）的用户。
一些与 aria-current 相关的 ARIA 属性包括：
aria-selected: 用于表示选项卡或列表框中当前被选中的元素。aria-expanded: 用于表示可折叠/展开的区域是否展开。aria-disabled: 用于表示元素是否被禁用。
这些 ARIA 属性可以与 CSS 结合使用，来创建更具可访问性的用户界面。
aria-current 的兼容性
aria-current 属性的兼容性非常好，主流浏览器都支持它。但是，为了确保最佳的兼容性，建议使用最新的浏览器版本，并进行充分的测试。
示例：使用 aria-current 的面包屑导航
面包屑导航是一种常见的导航模式，用于帮助用户了解他们在网站中的位置。我们可以使用 aria-current 属性来增强面包屑导航的可访问性。
<nav aria-label="breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li aria-current="page">产品详情</li>
</ol>
</nav>在这个例子中，aria-current="page" 被添加到了“产品详情”这个面包屑上，表明当前页面是“产品详情”页面。
示例：使用 aria-current 的选项卡
选项卡是一种用于组织内容的常见用户界面模式。我们可以使用 aria-selected 和 aria-current 属性来增强选项卡的可访问性。
<div role="tablist" aria-label="Sample Tabs">
<button role="tab" aria-selected="true" aria-controls="panel1" id="tab1" aria-current="page">选项卡 1</button>
<button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">选项卡 2</button>
<button role="tab" aria-selected="false" aria-controls="panel3" id="tab3">选项卡 3</button>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1">
<p>选项卡 1 的内容。</p>
</div>
<div role="tabpanel" id="panel2" aria-labelledby="tab2" hidden>
<p>选项卡 2 的内容。</p>
</div>
<div role="tabpanel" id="panel3" aria-labelledby="tab3" hidden>
<p>选项卡 3 的内容。</p>
</div>在这个例子中，aria-selected="true" 表示选项卡 1 是当前被选中的选项卡，aria-current="page" 也被设置到了选项卡1上。 注意 JavaScript 需要用来切换选项卡和更新 aria-selected 属性。
总结
aria-current 属性是一个简单但强大的工具，可以用来提高网站的可访问性。通过合理地使用 aria-current 属性，我们可以让网站对所有用户都更加友好，无论他们是否使用辅助技术设备。记住，可访问性不仅仅是为了符合法律法规，更是为了让每个人都能平等地访问信息和服务。
希望今天的讲解对大家有所帮助！下次再见！