[HTML5] Add Semantic Styling to the Current Page of a Navigation Item with aria-current
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:
- Using the aria current attribute
- W3 WAI-ARIA - aria-current
- Breadcrumb Example - w3-WAI ARIA Practices
<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:;
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的更多相关文章
- 小程序报错Do not have xx handler in current page的解决方法
看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...
- Reporting Service 告警"w WARN: Thread pool pressure. Using current thread for a work item"
如果Reporting Service偶尔出现不可访问或访问出错情况,这种情况一般没有做监控的话,很难捕捉到.出现这种问题,最好检查Reporting Service的日志文件. 今天早上就遇到这样一 ...
- [ARIA] Add aria-expanded to add semantic value and styling
In this lesson, we will be going over the attribute aria-expanded. Instead of using a class like .op ...
- [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript
We want to show an SVG avatar of the patio11bot, so we'll do that in three ways: Using an img tag - ...
- (GoRails)链接link_to到当前页current Page 并使用参数 (类ActionController::Parameters)
https://gorails.com/episodes/rails-link-to-current-page-with-params?autoplay=1 如何链接到当前页并增加,移除,或者修改UR ...
- Do not have XXX handler in current page
这种错误没有什么技术含量,也很容易解决. 一般就是wxml里面的button/form之类的,你用bindtap/bindsubmit给它绑了一个XXX函数,但是呢,你没有在相关js页面里面定义这个函 ...
- 问题:HttpContext.Current.Session;结果:Session与HttpContext.Current.Session到底有什么区别呢?
我在做练习的时候遇到了这样一个问题,在母版页页面中写入登录和密码修改的js代码,在登录的方法中写 入 HttpContext.Current.Session.Add("UserPwd&quo ...
- Using the Security System 使用安全系统
In this lesson, you will learn how to use a Security System in the application. When you use this sy ...
- V-Play 文档翻译 Page
V-Play 文档翻译 Page 翻译:qyvlik 应用的一个页面. VPlayApps 1.0 Inherits: MouseArea Inherited By: ListPage 属性 Item ...
随机推荐
- WUSTOJ 1277: 小吉吉读书(Java)
1277: 小吉吉读书 题目 有一本 n 页的书,每天都看 ai 页,已知星期 k 买的书,问星期几能看完?更多内容点击标题. 分析 统计出一个星期能看 a 页,看了 a 页又会回到买书的那一 ...
- 1205: 求一元二次方程的实数根(C)
一.题目 acm.wust.edu.cn/problem.php?id=1205&soj=0 二.分析 一元二次方程有三个系数a.b.c,两个根x1.x2,以及d(德尔塔): a.b.c均为实 ...
- 安全篇-AES/RSA加密机制
在服务器与终端设备进行HTTP通讯时,常常会被网络抓包.反编译(Android APK反编译工具)等技术得到HTTP通讯接口地址和参数.为了确保信息的安全,我们采用AES+RSA组合的方式进行接口参数 ...
- 数据库与MySQL进阶(4)
1,事务 事务指的是满足 ACID 特性的一组操作,可以通过 Commit 提交一个事务,也可以使用 Rollback 进行回滚. 1.1 ACID四大特性 原子性(Atomicity) 事务被视为不 ...
- 【web】Chrome 浏览器中查看 webSocket 连接信息
1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. 1 <!DOCTYPE html> 2 <html lang=& ...
- Linux查看系统及版本信息
1.查看操作系统版本cat /proc/version 2.查看系统发行版cat /etc/issue 或cat /etc/redhat-release 3.查看系统内核信息uname -a
- node express4 + 前端自动刷新
官网快速生成:http://www.expressjs.com.cn/starter/generator.html 1.安装 express 1.应用生成器工具 express-generator ...
- Redis面试题记录--缓存双写情况下导致数据不一致问题
转载自:https://blog.csdn.net/lzhcoder/article/details/79469123 https://blog.csdn.net/u013374645/article ...
- 【python】python3连接mysql数据库
一.安装pymysql 详见http://www.runoob.com/python3/python3-mysql.html 二.连接mysql数据库 db = pymysql.connect( #连 ...
- 编译和执行 C# 应用程序