简介
1 .开发过程中,用正确的HTML标签来表达正确的意图，可以提升网页的可访问性
2 .正确的语义化可以使css和js更加便利的操作网页的样式和行为.
1 .一个操作视频播放的按钮可以写成
<div>Play video</div>
也可以写成
<button>Play video</button>
//button不仅提供了按钮的样式，而且还提供了键盘的可访问性，tab可以更换按钮，回车会点击按钮
3 .优点
1 .便于开发，可以使HTML更加便于理解，全都是div的时候需要看class来区分什么是什么的，并且可以毫不费力的获得一些功能
2 .更加适配移动端：语义化的HTML文件比非语义化的HTML文件更加轻便，并且易于响应响应式开发
3 .更便于SEO优化，比起非语义化的div标签，搜索引擎更加重视在标题，链接等里面的关键字，使用语义化可使网页更容易被搜索到.
腾讯新闻移动端，header，section都用上了，pc端全是div
//百度的移动端就还是一堆div
文本内容
1 .对于屏幕阅读器来说，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构,屏幕阅读器会在您浏览内容的时候读取每个标题，通知您标题是什么？段落是什么等
1 .也就是说，在文本里面，如果合适的使用h1,p,ol,h2这些元素。屏幕阅读器会在你浏览内容时告诉你读取的每个标题，告诉你导航，告诉你段落是什么
2 .他会在每个元素之后停止，以合适的速度向前推进
3 .你可以在许多屏幕阅读器中中跳到下一个、上一个标题
4 .甚至可以再许多屏幕红显示所有标题的列表，使你可以使用像遍历的目录
2 .优秀
<h1>My heading</h1>
<p>This is the first section of my document.</p>
<p>I'll add another paragraph here too.</p>
<ol>
<li>Here is</li>
<li>a list for</li>
<li>you to read</li>
</ol>
<h2>My subheading</h2>
<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
<h2>My 2nd subheading</h2>
<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
3 .不好:拿html和换行符来编写标题和段落：屏幕阅读器没有任何东西可以做路标，无法检索出有用的目录，整个页面被看做是一个巨大的块，只是会一次性独处所有的内容
<font size="7">My heading</font>
<br><br>
This is the first section of my document.
<br><br>
I'll add another paragraph here too.
<br><br>
1. Here is
<br><br>
2. a list for
<br><br>
3. you to read
<br><br>
<font size="5">My subheading</font>
<br><br>
This is the first subsection of my document. I'd love people to be able to find this content!
<br><br>
<font size="5">My 2nd subheading</font>
<br><br>
This is the second subsection of my content. I think is more interesting than the last one.
4 .页面布局的时候不要拿表格来创建:好的，表格布局又多了一个不用他的理由
现代化的网络结构
5 .图片，不要在图片里面加文字，因为屏幕阅读器是根本不知道的，还是应该alt里面加照片的描述。这样就能直接读出来
1 .还需要考虑的一件事，你的图片是否在你的内容中有意义，或者他存粹是为了视觉装饰，意义不大，如果是装饰性的吗，尽量包含在页面中作为css背景图像
6 .通俗易懂的语言。一般而言不应该使用不太清晰的语言，不要使用不必要的行话和俚语。不仅有利于认知或其他残疾的人。某些语句屏幕阅读器顶不住
1 .不要写破折号5-7，而是用“5到7”来替代
2 .展开缩写，写january来替代jan
3 .展开首字母缩略词，至少一次或者两次，例如写明超文本语言，而不是HTML
UI控制
1 .UI控件，我们指的是与用户交互的Web文档的主要部分-通常是按钮，链接和表单控件
2 .UI控件的可访问性的关键是，默认情况下浏览器允许用户通过键盘操作他们，使用tab可以切换到不同的焦点,按enter来追踪获得焦点的链接，或者按照按钮来实现。select元素拥有自己的显示选项。可以使用向上和向下箭头进行循环
3 .div的时候赋予tabindex=0可以使他允许被聚焦。可以使不能被放置的元素变成可以放置的元素.这是tabindex最有用的地方
documet.onKeydown=function(e){
if(e.keyCode===13){
document.activeElement.onClick(e)
//这个从来没有用到过，所以说根本就没有废物的属性，这是自己的使用场景没遇到
}
}
activeElement给我们提供了当前关注页面的元素
有意义的文字标签
1 .用户界面控件的文本标签，对所有用户都非常有用，对于残疾来说尤为重要
2 .确保按钮和链接文本是可以理解和独特的，不要用”点击这里“此类的标签，屏幕阅读器用户有时会列出按钮和表格控件列表。所以说这些优化还是要最后搞出屏幕阅读器之后在看一下
3 .有强调的文本，要有内联标记，赋予其包裹的文本特别的强调
<p>The water is <em>very hot</em>.</p>
<p>Water droplets collecting on surfaces is called <strong>condensation</strong>.</p>
4 .缩写：允许缩写，首字母缩写词或初始化与其扩展关联的元素
<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
可访问的表格
1 .
文本替代品
1 .图像、视频内容不能被视觉残障人士看到，听觉障碍人不能听到音频内容。所以说字幕还是很重要的东西,音频。这俩的互相转化还是很重要的
2 .图像alt属性里面写关于图片的主要内容，longdesc=""这个属性也能用来输出一些包含图像的扩展描述内容
要看下html语义化，什么标签是干啥的，默认的样式，默认的行为
1 .长得像列表的，都用ul>li做的结构，我这边都是div>div.来实现
网友评论