作者 | Stas Melnikov
译者 | 弯月，责编 | 刘静
出品 | CSDN（ID：CSDNnews）
以下为译文：
用placeholder属性代替label元素
开拓职员常常用placeholder属性代替label元素。但是，在这种写法下，利用屏幕阅读器的用户无法填写字段，由于屏幕阅读器无法从placeholder属性中读取文本。
<input type=\公众email\公众 placeholder=\公众Enter your email\公众>
因此，我建议用label元素显示字段名称，而placeholder该当作为例子显示在用户须要添补的数据中。
<label><span>Enter your email</span><input type=\"大众email\"大众 placeholder=\"大众e.g. example@gmail.com\公众></label>
用img元素标记装饰用的图片
我常常看到开拓职员稠浊装饰图片和内容图片。例如，他们会利用img元向来显示社交图标。
<a href=\"大众https://twitter.com\公众 class=\公众social\公众><img class=\公众social__icon\"大众 src=\公众twitter.svg\公众 alt><span class=\"大众social__name\公众>Twitter</span></a>
然而，社交图标是装饰性图标，其目的是帮助用户迅速理解元素的含义，而无需阅读文本。即便我们删除这些图标，元素的含义也不会消逝，以是我们该当利用background-image属性。
<a href=\"大众https://twitter.com\"大众 class=\"大众social\"大众><span class=\"大众social__name\"大众>Twitter</span></a>
.social::before {background-image: url(\"大众twitter.svg\"大众);}
利用resize属性
如果利用resize属性来禁止textarea调度大小，那么你就毁坏了可访问性。由于用户无法舒适地输入数据。
textarea {width: 100%;height: 200px;resize: none;}
你该当利用min-width、max-width、min-height以及max-height属性，这些属性可以限定元素的大小，而且用户也可以舒舒畅服地输入数据。
textarea {min-width: 100%;max-width: 100%;min-height: 200px;max-height: 400px;}
同时利用display: block和position: absolute（fixed）
我常常瞥见开拓职员像下面这样利用display和position属性：
.button::before {content: \"大众\"大众;display: block;position: absolute;top: 0;left: 0;}
但是，浏览器会默认设置block。因此，你无需为absolute或fixed的元素设置这个值。也便是说，以下代码的结果与上述代码完备相同。
.button::before {content: \"大众\"大众;position: absolute;top: 0;left: 0;}
Outline属性的none值
无法通过键盘访问网站；链接打不开；无法注册等等。涌现这些情形是由于开拓职员将outline属性设置成了none值，因此元素无法聚焦。
.button:focus {outline: none;}/ or /.button:focus {outline: 0;}
如果你须要禁用默认的聚焦，那么也别忘了指定取而代之的聚焦状态。
.button:focus {outline: none;box-shadow: 0 0 3px 0 blue;}
空元素
开拓职员常常利用HTML空元向来调度元素的样式。例如，利用空div或span元向来显示导航栏菜单。
<button class=\"大众hamburger\"大众><span></span><span></span><span></span></button>.hamburger {width: 60px;height: 45px;position: relative;}.hamburger span {width: 100%;height: 9px;background-color: #d3531a;border-radius: 9px;position: absolute;left: 0;}.hamburger span:nth-child(1) {top: 0;}.hamburger span:nth-child(2) {top: 18px;}.hamburger span:nth-child(3) {top: 36px;}
实在，你可以利用 ::before和 ::after伪元素达成同样的效果。
<button class=\"大众hamburger\"大众><span class=\公众hamburger__text\"大众><span class=\"大众visually-hidden\"大众>Open menu</span></span></button>.hamburger {width: 60px;height: 45px;position: relative;}.hamburger::before,.hamburger::after,.hamburger__text::before {content: \"大众\公众;width: 100%;height: 9px;background-color: #d3531a;border-radius: 9px;position: absolute;left: 0;}.hamburger::before {top: 0;}.hamburger::after {top: 18px;}.hamburger__text::before {top: 36px;}.visually-hidden {position: absolute !important;clip: rect(1px, 1px, 1px, 1px);width: 1px !important;height: 1px !important;overflow: hidden;}
原文：https://dev.to/melnik909/the-6-most-common-mistakes-developers-when-writing-html-and-css-f92
本文为 CSDN 翻译，转载请注明来源出处。
【END】
