aria

有关aria-hidden和role

由 烂漫一生 提交于 2020-02-19 22:42:35
Accessible Rich Internet Applications (ARIA) 规定了能够让 Web 内容和 Web 应用（特别是那些由 Ajax 和 JavaScript 开发的）对于残障人士更易使用的各种机制。例如，ARIA 提供了易用的导航地标、JavaScript 组件、表单提示以及错误信息、实时内容更新等。 ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告，或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值。 ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现。尽管如此，实现方式有所不同，而且旧的技术对其支持不好（或者不支持）。使用可以优雅降级的“安全的” ARIA，或者要求用户升级使用新的技术。 引用https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA 有关使用可更多详情可以去以上网站 来源： https://www.cnblogs.com/seven777/p/7261258.html

ARIA(Accessible Rich Internet Application)

由 时光怂恿深爱的人放手 提交于 2019-12-23 04:49:39
ARIA 为Web app 提供满足用户不同需求的解决方案。建设起用户和软件之间的 桥梁 。 新的 HTML5 标准中增加 aria-* 的标签属性，全称Accessible Rich Internet Application。与role标签属性配合使用。 role属性表示一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button。而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。 最简单的应用比如， <div role="checkbox" aria-checked="checked"></div> 辅助工具就会知道，这个div实际上是个checkbox的角色，为选中状态。 具体所有内容可以参考w3c： http://www.w3.org/TR/wai-aria/rdf_model png图： 来源： https://www.cnblogs.com/guangshan/p/4532492.html

快速理解web语义化

由 ＊爱你＆永不变心＊ 提交于 2019-12-17 10:57:07
什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。 简单来说就是利于 SEO，便于阅读维护理解。 总结起来就是： 正确的标签做正确的事情 页面内容结构化 无CSS样子时也容易阅读，便于阅读维护和理解 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO html 语义化标签 HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。 代码示例： <html> <body> <article> <header> <h1>h1 - WEB 语义化</h1> </header> <nav> <ul> <li>nav1 - HTML语义化</li> <li>nav2 - CSS语义化</li> </ul> </nav> <section>

快速理解web语义化

由 本秂侑毒 提交于 2019-12-06 05:34:43
什么是Web语义化 Web语义化是指使用恰当语义的html标签、class类名等内容，让页面具有良好的结构与含义，从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息，从而可以读懂网页的内容，然后将收集汇总的信息进行分析，结果为人类所用；另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器（如果访客有视障）能够读懂内容。 简单来说就是利于 SEO，便于阅读维护理解。 总结起来就是： 正确的标签做正确的事情 页面内容结构化 无CSS样子时也容易阅读，便于阅读维护和理解 便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO html 语义化标签 HTML为网页文档内容提供上下文结构和含义。对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，让页面元素有含义，便于被浏览器、搜索引擎解析、利于SEO。通常我们所说的HTML应该是完全脱离表现信息的，其中的标签应该都是语义化地定义了文档的结构。 代码示例： <html> <body> <article> <header> <h1>h1 - WEB 语义化</h1> </header> <nav> <ul> <li>nav1 - HTML语义化</li> <li>nav2 - CSS语义化</li> </ul> </nav> <section>

web语义化之SEO和ARIA

由 人盡茶涼 提交于 2019-12-06 04:14:58
在 快速理解web语义化 的时候，只知道web语义化有利于 SEO 和便于屏幕阅读器阅读，但并不知道它是如何有利于 SEO 和便于阅读器阅读的，带着这个疑问，进行了一番探索总结。 SEO 什么是SEO？ SEO （Search Engine Optimization，搜索引擎优化 ），是一种利用搜索引擎的搜索规则来提高目的网站在有关搜索引擎内的排名的方式。通俗来讲就是根据搜素引擎的规则来优化你的网站，让你的网站能够在用户的搜索结果中排在前面，提高网站的访问量。 SEO常用方式 采用DIV+CSS布局 采用div-css布局的网站对于搜索引擎很是友好，因此其避免了Table嵌套层次过多而无法被搜索引擎抓取的问题，而且简洁、结构化的代码更加有利于突出重点和适合搜索引擎抓取。 尽量不使用表格布局，因为搜索引擎对表格布局嵌套3层以上的内容懒的去抓取。 TDK优化 TDK，即 title , description , keywords 。 一、title 在 SEO 中，标题的优化占着举足轻重的地位，无论是从用户体验的角度出发，还是从搜索引擎的排名效果出发， title 都是页面优化最最重要的因素。 title 的分隔符一般有 , ， _ ， - 和空格。其中 _ 对百度比较友好，而 - 对谷歌比较友好，空格在英文站点可以使用但中文少用。 推荐做法： 每个网页应该有一个独一无二的标题

无障碍开发（一）之初认识

由 ≯℡__Kan透↙ 提交于 2019-11-30 04:10:22
ARIA是什么？ WAI-ARIA是 Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，WAI-ARIA是指无障碍的网页应用技术。 主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。尤其像盲人，眼睛看不到，其浏览网页则需要借助辅助设备，如 屏幕阅读器 ，屏幕阅读机可以大声朗读或者输出盲文。 而ARIA就是可以让 屏幕阅读器 准确识别网页中的 内容，变化，状态 的技术规范，可以让盲人这类用户也能无障碍阅读！ 为什么需要ARIA？ 回答标题问题前我先问其他几个问题？ 如何让盲人用户知道当前浏览区域就是网站主导航？ 如果让盲人用户知道点击某个按钮后出来的是弹框？ 如何让盲人用户知道点击某个按钮后页面另外一个区域的文字发生了变化？ 如何让盲人用户知道您使用了 li 标签是用来模拟标准 select 控件呢？ 如何让盲人用户知道您模拟的select控件是单选呢还是可以多选呢？ 在你现有的知识范围内，您有办法解决上面的问题吗？有人会说，我使用HTML5, 恩，确实，HTML5的出现大大增强了网页的可访问性和无障碍阅读，但是，其不是万能的，例如无法让盲人知道 模拟控件的类型 等。 因此，才需要ARIA. ARIA是个是非主流？ ARIA是非主流吗？ARIA规范一直在更新维护
订阅 aria