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:;
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的更多相关文章

  1. 小程序报错Do not have xx handler in current page的解决方法

    看到小程序这一大串的“Do not have bindName handler in current page: pages/card/card. Please make sure that bind ...

  2. Reporting Service 告警"w WARN: Thread pool pressure. Using current thread for a work item"

    如果Reporting Service偶尔出现不可访问或访问出错情况,这种情况一般没有做监控的话,很难捕捉到.出现这种问题,最好检查Reporting Service的日志文件. 今天早上就遇到这样一 ...

  3. [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 ...

  4. [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 - ...

  5. (GoRails)链接link_to到当前页current Page 并使用参数 (类ActionController::Parameters)

    https://gorails.com/episodes/rails-link-to-current-page-with-params?autoplay=1 如何链接到当前页并增加,移除,或者修改UR ...

  6. Do not have XXX handler in current page

    这种错误没有什么技术含量,也很容易解决. 一般就是wxml里面的button/form之类的,你用bindtap/bindsubmit给它绑了一个XXX函数,但是呢,你没有在相关js页面里面定义这个函 ...

  7. 问题:HttpContext.Current.Session;结果:Session与HttpContext.Current.Session到底有什么区别呢?

    我在做练习的时候遇到了这样一个问题,在母版页页面中写入登录和密码修改的js代码,在登录的方法中写 入 HttpContext.Current.Session.Add("UserPwd&quo ...

  8. Using the Security System 使用安全系统

    In this lesson, you will learn how to use a Security System in the application. When you use this sy ...

  9. V-Play 文档翻译 Page

    V-Play 文档翻译 Page 翻译:qyvlik 应用的一个页面. VPlayApps 1.0 Inherits: MouseArea Inherited By: ListPage 属性 Item ...

随机推荐

  1. WUSTOJ 1277: 小吉吉读书(Java)

    1277: 小吉吉读书 题目   有一本 n 页的书,每天都看 ai 页,已知星期 k 买的书,问星期几能看完?更多内容点击标题. 分析   统计出一个星期能看 a 页,看了 a 页又会回到买书的那一 ...

  2. 1205: 求一元二次方程的实数根(C)

    一.题目 acm.wust.edu.cn/problem.php?id=1205&soj=0 二.分析 一元二次方程有三个系数a.b.c,两个根x1.x2,以及d(德尔塔): a.b.c均为实 ...

  3. 安全篇-AES/RSA加密机制

    在服务器与终端设备进行HTTP通讯时,常常会被网络抓包.反编译(Android APK反编译工具)等技术得到HTTP通讯接口地址和参数.为了确保信息的安全,我们采用AES+RSA组合的方式进行接口参数 ...

  4. 数据库与MySQL进阶(4)

    1,事务 事务指的是满足 ACID 特性的一组操作,可以通过 Commit 提交一个事务,也可以使用 Rollback 进行回滚. 1.1 ACID四大特性 原子性(Atomicity) 事务被视为不 ...

  5. 【web】Chrome 浏览器中查看 webSocket 连接信息

    1.以下代码实现一个webSocket连接,在文本输入框中输入内容,点击发送,通过服务器,返回相同的内容显示在下方. 1 <!DOCTYPE html> 2 <html lang=& ...

  6. Linux查看系统及版本信息

    1.查看操作系统版本cat /proc/version 2.查看系统发行版cat /etc/issue 或cat /etc/redhat-release 3.查看系统内核信息uname -a

  7. node express4 + 前端自动刷新

    官网快速生成:http://www.expressjs.com.cn/starter/generator.html 1.安装  express 1.应用生成器工具 express-generator  ...

  8. Redis面试题记录--缓存双写情况下导致数据不一致问题

    转载自:https://blog.csdn.net/lzhcoder/article/details/79469123 https://blog.csdn.net/u013374645/article ...

  9. 【python】python3连接mysql数据库

    一.安装pymysql 详见http://www.runoob.com/python3/python3-mysql.html 二.连接mysql数据库 db = pymysql.connect( #连 ...

  10. 编译和执行 C# 应用程序