&nbs p;
一、双十一了
现在是2016年11月11日0点11分，大家都在忙着shopping，而对于我而言，正是工作效率最高的时间段，文章写起来~
二、 HTML fieldset,legend元素与可访问性
注：本文可访问性部分的部分内容参考自这篇外文。
我们无论做什么产品，都不能只关注眼前那点东西， 或者 说肉眼所见的表层那点东西。尤其对于有相当用户基数的产品，无障碍访问和无障碍阅读一定要引起重视，否则，对产品的口碑会有严重的影响。
下面这张图是我之前在刷 微博 的时候看到的，是批评跟 滴滴 合并之后的 ub er中国在在无障碍访问这 一块 做得很糟糕：
看来评价者是相当的生气，好奇的我又去看了下滴滴出行APP的反馈，结果不看不 知道 一看吓一跳，对无障碍访问这一块的差评出乎意料的多，几乎全部都是1星，这口碑和评分妥妥地下去了，看来无障碍访问这一块做的确实很糟糕啊！
其实，如果你只要有一些基本的 常识 ，按照文档规范本身语义去实现，并不要求你有多精通，基本的无障碍使用绝对是没有问题的。但是，像上面这样，被批得一无是处的，可见真的是一无是处。
我们做web开发的，也同样需要对无障碍阅读，可访问性等引起重视。
我们平常可能都听过“语义化”这个词，为什么HT ML 代码要语义化，除了代码 可读性 好以外，SEO有帮助外，最主要的还是对一些屏幕阅读设备或者其他辅助阅读设备友好，可以让用户在条件受限的条件下依然可以 正常 使用我们的产品，比方说鼠标坏了，又或者说视力有障碍的用户 等等 。
我们这里介绍两个HTML元素， fieldset 和 legend ，可能有部分小伙伴没见过，说不定会认为是哪个新出的HTML标签，不是的哈，这两个标签在我在津津乐道看《樱桃小丸子》的时候就有了，主要用来 form 表单中，给表单控件们分组用的。
我们先看一个例子，一个带有多个选择项的问题：
如果让小伙伴们来实现，基本上HTML都是下面这种套路：
<form> <p>你有港澳通行证吗？</p> <input ty PE ="radio" id="yes"> <label for="yes">有</label> <input type="radio" id="no"> <label for="no">没有</label> .. . </form>
对于我们以视觉为主要感官的人来讲，上面的最终的视觉呈现是没有问题的，有问题，有单选。但是，由于我们的问题和下面的2个单选他们是有关联的，或者说带有“组”的关系。如果我们使用上述的HTML代码，就会带来一个什么问题呢？屏幕阅读设备就无法知道他们之间的关系，我们听到的仅仅是单选控件的 label 元素中的“有”和“没有”这两个词，然后问题 是什么 可能 永远 都听不到。
对于普通元素，我们如果想让其有特定的可访问特性，可以使用W ai -ARIA中的API，关于ARIA我多年前话很多精力整理过，可参见“WAI-ARIA无障碍网页应用属性完全展示”，例如，你想使用 div 标签模拟按钮，可能需要加个 role="button" 。
虽然说ARIA是一种解决方法，但是，对于开发人员而言，学习 成本 啊什么的还是很麻烦的，对于盲人用户而言，要根据ARIA关键属性的 引导 来引导去，其实效率不太高，于是，还是喜欢使用tab键快速索引，这就导致上面的“你有港澳通行证吗？”被 忽视 掉，也无法和下面的“有”和“没有”联系上。
我自己使用VoiceOver测试了下，确实，标题内容是很难读取的，也可能是我用得不熟的 原因 ，我发现要框选这段标题文字才会读音，但是，如果用户知道哪里可以框选，怕是也就不需要阅读设备了。
实际上，要修复上面的可访问性问题很 简单 ，我们使用form表单中具有语义的 fieldset 和 legend 元素就可以了，如下：
<form> <fieldset> <legend>你有港澳通行证吗？</legend> <input type="radio" id="yes"> <label for="yes">有</label> <input type="radio" id="no"> <label for="no">没有</label> </fieldset> ... </form>
其中， fieldset 表示组的 意思 ，专门用在 form 表单元素中，表示一组内容，例如，我们填写收货地址的时候， 省市区 会有多个输入框后者下拉框，就可以使用 fieldset 归为一组， legend 表示这个组的标题，在我们这里例子中，正好就是问题内容。
此时，你再使用tab键导航 form 表单的时候，就会清晰读出问题“你有港澳通行证吗？”了，这样，用户就能清楚知道，下面的“有”和“没有”到底说的是什么鬼，就不会有困扰了。
注意：IE浏览器中，Jaws屏幕@R_ 406 _2895@会读fieldset中每一个操作框的legend（而不是仅第一个），这其实是有问题的。（原文内容，未测试）
我使用VoiceOver测试了下使用 fieldset 和 legend 元素的表单，确实，读的内容是“组 你有港澳通行证吗？ 2个选项”，这样显然更好理解。
当然，并不是说只要有表单就一定要使用 fieldset 和 legend ，那什么时候该使用，什么时候不该使用呢？
什么时候该使用 fieldset 和 legend ？
使用单选框或多选框的提问内容； 几个输入框使用的是同一个主题，例如，省市区3个下拉和最后详细地址输入框都是“地址”这个主题，此时， legend 元素里面就可以是“收获地址”这样的文字，整个所有表单都套上 fieldset ，例如：<form> <fieldset> <legend>双十一收货地址</legend> <label for=" PR ovince">省：</label><select id="province"><option>上海市</option></select> <label for="c IT y">省：</label><select id="city"><option>上海市</option></select> <label for="district">区：</label><select id="district"><option>浦东新区</option></select> <label for="address">详细地址</label> <input type="text" id="address"> </fieldset> ... </form>
什么时候不建议使用 fieldset 和 legend ？
单打独斗的表单控件元素们。三、fieldset,legend元素在 CSS 布局中的应用
很多HTML标签抛开语义，就本身就一无是处了，比方说 <p> 标签，本身没有任何特异性，也没有私藏的绝活。但是， <legend> 却不一样，其天生带有一种特殊的布局，在某些场合可以轻松实现一些效果。
我们先看下这种HTML原生的样式是 怎样 的：
如下HTML：
<fieldset> <legend>标题</legend> </fieldset>
效果如下（实时）：
标题会看到，有一个方框框，但是这个框不是完全闭合的，有个开口，这个开口上面的就是 <legend> 里面的文字。注意，这里有2个非常 重要 的点，第1个就是开口，也就是线并没有从文字下面穿过去，这个文字的背景看上去是 白色 的，实际上，咳咳，是透明的，再说一遍是透明的。类似这种效果，如果你想使用其他标签和CSS模拟，一般想到的就是用个背景色覆盖，使用背景色的问题在于，如果换了个背景，这个覆盖就穿帮了。而透明没有这种担忧，各种背景各个模块都可以自如地飞起来；第2个就是文字是压在线上的，传统的标签我们写个 border 属性，里面的文字肯定是在 border 里面的，但是， <legend> 偏不，直接压在线上，天然的，你还别说，如果用CSS来模拟这种效果，还真要下点成本的。
基本上，各个浏览器下都是这种框框开口标题文字的效果，我大致看了下，Firefox浏览器的最有质感（设一个深色背景，如下截图），IE就是个浅边框，在白色背景下效果不错，而Ch rom e浏览器的边框类型是 groove （沟槽）。
总而言之，各个浏览器各个系统下差异都不同，但是，注意但是，好在，我们通过特定的CSS代码设置，我们可以让表现保持一致。由于边框是 <fieldset> 元素产生的，所以，我们可以设置：
fieldset { border: 1px solid # ddd; } 所有浏览器下，基本上效果就大 统一 了。
如果我们仅仅希望就上面有一条线，我们可以：
fieldset { border: 0 none; border -t op: 1px solid #ddd; } 如果，我们希望 <legend> 里面的文字 居中对齐 ，而不是飘在左上角，则……说来话长。
首先，C hr ome浏览器下，我们使用 text-align: center 即可~
legend { text-align: center; } IE浏览器，IE8+浏览器下可以使用 m arg in:auto ：
legend { text-align: center; mar gin : auto; } 但是IE7和Firefox浏览器怎么办呢？告诉大家，经过我的反复尝试，几乎无解。有一种方法可以实现居中，那就是：
legend { width: 100%; } 但是，由于 <legend> 元素的原始位置天然镂空下面的边框，因此，这种设置，会让 <fieldset> 元素的上边框 无法显示 ，我们使用这两个元素就是看上了上边框的覆盖和开口特性，如果被覆盖了那还使用个毛线啊。
兼容问题在眼前，难道就这么结束了？其实不是的，虽然CSS有些强弩之末的感觉，但是，毕竟这是上世纪就出现的HTML元素，因此，要想居中对齐，还要看HTML属性，如下设置：
<fieldset> <legend align="center" >标题</legend> </fieldset>
效果如下（实时）：
标题结果所有浏览器下一马平川，一路居中。
这跟 type="file" 的 <input> 需要 size 控制 宽 度的尿性有些类似。
我们还可以设置线框的类型为虚线，例如：
fieldset { border: 0 none; border-top: 1px dashed #ddd; } 但是，有个不幸的消息，在IE浏览器下，如果 border -s tyle 类型如果不是实线 solid ，则边框线就会从标题内容下面穿过去，而不是镂空，如下截图：
我瞬间无言以对，而且所有IE浏览器都是这样，我内心呵呵一下。 不过 IE浏览器很淡定，因为黑色上面再抹点黑色是没 有区别 的。并且几乎无解。并且IE浏览器还不支持 border-radius 圆 角，需要 <legend> 浮动后绝对定位或变成其他 dis play 类型。
如果非对虚线或者点线念念不忘，我能想到的挫方法就是弄个背景色覆盖覆盖了。
然后， <fieldset> 和 <legend> 元素组合使用的时候， <legend> 一定要是第一个子元素，并且是正常块状流。如果我们在 <legend> 前面插入其他元素，则在Chrome和Firefox浏览器下，会忽略，视觉表现上会呈现在 <legend> 的下面。
基本上总结下，如果你有文字压线的效果，使用 <fieldset> 和 <legend> 布局是成本最低的，标题想居中，使用 align="center" 这个HTML属性，如果是实色边框，无论是 solid 或者 double 都可以自如使用，没有兼容性问题，但如果是虚线边框，则要考虑IE浏览器穿透的问题。
好了，说了那么多，我们当场演示一个妙用 <fieldset> 和 <legend> 元素 低成本 实现特殊布局的效果。什么效果呢？我写 文章 的时候，有时候会打上分隔线，写上文字示意这里有一段风格。我之前是使用字符实现的，类似“——————低调的分隔线———————-”，使用字符的问题在于，如果在手机上看，很可能字符换行了，就显得有点傻了。
有了 <fieldset> 和 <legend> 事情就简单多了，如下CSS和HTML：
fieldset { border:0; border-top:1px dashed #ccc; } legend { color: #999; /* for IE */ background-color: #fff; } <fieldset> <legend align="center">低调的分隔线</legend> </fieldset>
效果如下，是不是比之前实现要巧妙和清爽的多。
.fieldset{border:0;border-top:1px dashed #ccc;}.fieldset legend{color:#999;font- Size: 12px;background-color:#fff;} 低调的分隔线实际上，对于本例子，最好的实现是使用伪元素生成“低调的分隔线”这几个字，因为，这几个字实际上不属于文章内容的一部分。
四、结束语
本文时间跨度正好一整日，从开头看我的心情还不错，但是，写结束语的时候，心情哪，五味杂陈。
今天小马哥给腾讯的每个员工送了300股腾讯股票，算算6万多港币，想想自己，也就早走 半 年而已，再想想腾讯股票我160就卖掉了，而现在200多，更是哭晕在厕所。
不过现在好多了，因为 老婆 安慰我说：“没事，我们还有土可以 吃 ！”想想也是，剁手节一过，很多人土都吃不起，顿时平衡了很多。
你还别说，土的味道还不错，要不，也给你来两份？
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML可访问性fieldset,legend元素及CSS布局应用 全部内容，希望文章能够帮你解决 html5教程-HTML可访问性fieldset,legend元素及CSS布局应用 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML可访问性fieldset,legend元素及CSS布局应用的详细内容...