[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 ...
随机推荐
- Java面试笔记整理4
一.Java内存溢出的产生原因和解决办法? java.lang.OutOfMemoryError这个错误我相信大部分开发人员都有遇到过,产生该错误的原因大都出于以下原因:JVM内存过小.程序不严密,产 ...
- python学习-46 时间模块
时间模块 ····时间戳 print(time.time()) 运行结果: 1564294158.0389376 Process finished with exit code 0 ·····结构化时 ...
- HTML 前端
昨日内容回顾 HTML文档结构 标签要封闭,全封闭,自封闭 html文件不识别多个空格或者换行,都识别成一个空格 注释: <!-- 注释 --> head标签 网页源信息,配置信息 tit ...
- 变量————if语句——结构使用
1简述变量的命名规范 变量是以字母 数字 下划线组合而成 不能以数字开头 不能使用python中的关键字命名 变量要具有可描述性 区分大小写 name变量是什么数据类型通过代码检测 name = in ...
- win10 右键新建卡顿
前段时间不知道自己搞啥了,右键变得很慢,找了一些常规的解决方案,什么清除注册表等等的,对我来说,没好用. 然后将就继续使用,然后觉得是office的问题,卸载,重装2010的,发现还是一样卡... 继 ...
- (十) 使用Hibernate 注解
Hibernate里有两种注解 : Hibernate 注解 JPA注解 主键生成机制 : http://www.cnblogs.com/ph123/p/5692194.html 案例一: 用注解 ...
- linux 串口接收
#include <stdio.h> #include <stdlib.h> #include <unistd.h> #include <sys/types. ...
- java01_简介_开发环境
JAVA的前世今生 美国SUN(Stanford University Network)公司,在中国大陆的正式中文名为"太阳计算机系统(中国)有限公司",在中国台湾的正式中文名为& ...
- 关于Vue中,在方法中使用(操作)子组件获取到的数据
已知,子组件通过props获取父组件传过来的数据,而这个数据是无法在created.mounted生命周期中使用的,只能在beforeUpdated或者updated获取到: 但是如果我们要使用这个数 ...
- 使用vue国际化中出现内置的组件无法切换语言的问题(element-ui、ivew)
在main.js中引入对应组件的语言包 eg: import VueI18n from 'vue-i18n'; // 引入国际化 import elementEn from 'element-ui/l ...