标签：bottom this href any ora user ack why lex
In this lesson, we are going to use aria-current to give a screen reader user more context about what the current page is. Historically, many developers use an .active class to indicate that the page in a menu is the same that you‘re on.
Instead of using a class, we are going to use the aria-current attribute to add more semantic value to the HTML and use that attribute to style the active link.
Note: VoiceOver testing works best on the Native Safari Browser, hence why we should always use Safari to test.
More resources:
<nav> <ul class="menu"> <li class="menu__item"> <a href="/" class="menu__link" aria-current="page">Home</a> </li> <li class="menu__item"> <a href="/" class="menu__link">About</a> </li> <li class="menu__item"> <a href="/" class="menu__link">News</a> </li> <li class="menu__item"> <a href="/" class="menu__link">Contact</a> </li> </ul> </nav>
.menu { display: flex; padding: 0; list-style: none; .menu__link { display: inline-block; position: relative; text-transform: uppercase; font-weight: bold; color: #6505cc; padding: 0.675rem; margin: 0 0.5rem; font-size: 1.5rem; text-decoration: none; &[aria-current="page"] { border-bottom: 8px solid #6505cc; } } }
[HTML5] Add Semantic Styling to the Current Page of a Navigation Item with aria-current
标签：bottom this href any ora user ack why lex
原文地址：https://www.cnblogs.com/Answer1215/p/11347719.html
