What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.

For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1:

Search box:

    <form class="search">
<input aria-labelledby="search-button" />
<button id="search-button">
<span aria-hidden="true" class="icon icon-search"></span>
<span class="visuallyhidden">Search</span>
</button>
</form>

Input field is labelled by the button, button is labelled by the text content.

Read more link:

<a href="#" aria-labelledby="readmore1 readMoreLabel1">
<span id="readmore1">Read more</span>
<span id="readMoreLabel1" class="visuallyhidden"> articles about cute animals</span>
</a>

aria-labelledby can accpet multi ids.

DIalog:

<dialog open role="dialog" aria-label="Newsletter sign up">
<!-- For custom button, we can use aria-label & aria-describedby-->
<custom-button role="button" tabindex="0" aria-label="Cancel" aria-describedby="cancelNote">
X
</custom-button>
<fieldset>
<!-- it is good to use legend to tell users what this form is all about-->
<legend>
<h2>Sign up your favorite friends for our newsletter!</h2>
</legend>
<div>
<!-- label for-->
<label for="dogs">Dog</label>
<input type="text" id="dogs" name="dogs" />
</div> <div>
<!-- best: using both for & label wrapping-->
<label for="cats">
Cat
<input type="text" id="cats" name="cats" />
</label>
</div> <div>
<!-- who else will be the label -->
<label>
Who else?
<input type="text" placeholder="e.g. Frank the Lizard" name="superfriends" />
</label>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</fieldset>
<p id="cancelNote">Closing this dialog will cancel your submission.</p>
</dialog>

[ARIA] What is Accessible Name Calculation?的更多相关文章

  1. [ARIA] Create an Accessible Tooltip on a Text Input

    Here we use HTML and CSS to create a stylish yet semantic tooltip on a form input. I am using aria-d ...

  2. [ARIA] Accessible modal dialogs

    Learn how to create a modal dialog with accessible keyboard and screen reader mechanics using the na ...

  3. ARIA无障碍技术

    ARIA Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用(特别是那些由 Ajax 和 JavaScript 开发的 ...

  4. HTML5+Bootstrap 学习笔记 3

    HTML5 aria-* and role aria是指Accessible Rich Internet Application.role的作用是描述一个非标准的tag的实际作用,而aria-*的作用 ...

  5. ARIA(Accessible Rich Internet Application)

    ARIA 为Web app提供满足用户不同需求的解决方案.建设起用户和软件之间的桥梁. 新的HTML5标准中增加 aria-* 的标签属性,全称Accessible Rich Internet App ...

  6. [ARIA] Accessible animations with reduced motion

    Animations can make people sick, or worse! By adding animation toggles and listening in to the user' ...

  7. [HTML5] Accessible Icon Buttons

    Icon buttons are very common in web applications, yet they often have accessibility problems. Learn ...

  8. web语义化之SEO和ARIA

    在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...

  9. [翻译]如何在HTML5中有效使用ARIA

    ARIA是Accessible Rich Internet Application的简称,指无障碍富互联网应用.可以使一些有功能障碍(如听力,视力)的人群,使用你的网站.下面看一下做为开发人员的我们, ...

随机推荐

  1. a+b的问题

    题目描述: 给定两个整数 a, b (a, b 均不超过 int 类型的表示范围),求出 a + b 的和. 输入描述: 每行输入两个整数 a 和 b,用空格隔开. 输出描述: a + b 的值. 样 ...

  2. Arraylist的遍历方式、java反射机制

    先定义ArrayList再添加几条数据:         ArrayList arr=new ArrayList(); //往arrList中增加几条数据 arr.add(1); arr.add(2) ...

  3. 正整数序列 Help the needed for Dexter ,UVa 11384

    题目描述 Description 给定正整数n,你的任务是用最少的操作次数把序列1, 2, …, n中的所有数都变成0.每次操作可从序列中选择一个或多个整数,同时减去一个相同的正整数.比如,1,2,3 ...

  4. Java UpperBound

    Java UpperBound /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternational ...

  5. ASP.NET Core利用拦截器 IActionFilter实现权限控制

    “麦荻网教系统”采用了前后端代码分离的架构,即“Miidy.Cloud.Console”站与“Miidy.Cloud.Manage”站(两个前端站)同时通过web api的方式调用“Miidy.Clo ...

  6. FreeRTOS 基础简介

    为什么选择FreeRTOS UCOS资料多,尤其是中文资料.FreeRTOS资料少,而且大多数是英文的.原因如下: 1.FreeRTOS免费!UCOS收费.这是主要原因 2.很多半导体厂商,采用Fre ...

  7. iOS10推送必看UNNotificationAttachment以及UNTimeIntervalNotificationTrigger

    虽然这篇文章比较长,也不好理解,但是还是建议大家收藏,以后用到的时候,可以看看,有耐心的还是读一读. 这篇文章开始,我会跟大家好好讲讲,苹果新发布的iOS10的所有通知类. 一.创建本地通知事例详解: ...

  8. 只需五分钟-用Maven快速搭建Spring Cloud微服务

    Maven安装手册 1.准备安装包 安装包: apache-maven-3.5.4-bin.zip  (最好JDK 1.7及以上版本) 集成包: eclipse-maven3-plugin.zip 2 ...

  9. Django中使用geetest验证

    一.geetest的使用方法 首先需要在setting中配置好文件 GEE_TEST = { "gee_test_access_id": "37ca5631edd1e88 ...

  10. RestFramework之频率组件

    一.频率组件的使用 频率组件的存在对我们这web开发有着很大的影像,它的作用就是限制用户在一段时间内访问的次数. 下面让我们介绍一下频率组件怎样使用 1.首先需要导入 from rest_framew ...