1.使用占位符属性而不是标签元素
我经常看到的流行错误是使用占位符属性而不是标签元素。但屏幕阅读器的用户在这种情况下无法填充字段，因为屏幕读取器无法从占位符属性读取文本。
因此，我建议使用字段名称的标签元素和占位符属性作为用户需要填写的数据示例。
别这样
<input type="email" placeholder="Enter your email">
您可以使用此代替
<label> <span>Enter your email</span> <input type="email" placeholder="e.g. example@gmail.com"> </label>
2.使用 img 元素创建装饰图形
如今，开发人员经常将装饰图形与内容图像混淆。例如，他们使用 img 元素标记社交图标。
但是社交图标是一个装饰图标，它可以帮助用户更快地理解元素的含义，而无需阅读文本。如果我们删除图标，我们不会失去元素的含义，因此我们可以使用背景图像属性。
别这样
<a href="https://www.csdn.net/" class="social"> <img class="social__icon" src="csdn.svg" alt> <span class="social__name">CSDN</span> </a>
您可以使用此代替
<a href="https://www.csdn.net/" class="social"> <span class="social__name">CSDN</span> </a> .social::before { background-image: url("csdn.svg"); }
3.使用大小：无
我每次开发人员制作小文本区域时都会遭受损失，我无法更改它，因为他们禁用了调整大小。他们在添加调整大小时不会考虑：没有表单可访问性变差，用户无法轻松输入数据。
如果您想要限制文本区域的大小，您可以使用最小宽度、最大宽度、最小高度和最大高度属性。但是，你应该拿起高度值，以便用户可以填补领域一个舒适的方式为自己。
别这样
textarea { width: 100%; height: 200px; resize: none; }
您可以使用此代替
textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; }
4.使用空元素
在 Web 中，使用空 HTML 元素造型元素的做法很差。例如，汉堡包标记使用空 div 或跨度元素。
但这个问题应该用伪元素之前和之后来解决。在这种情况下，HTML看起来更干净。此外，最主要的是为屏幕阅读器添加文本，以便用户可以与此按钮进行交互。
别这样
<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; }
您可以使用此代替
<button class="hamburger" type="button"> <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; }
