- 结构上，form下面应该分section，section应该用aria-labelledby属性和role属性
- section下面，使用h2做标题，添加id属性，跟aria-labelledby保持一致
- h2下面，每一个要填的内容，用div框起来，div可以有统一的class
- div里面，添加label和input标签，label的for和input的id要一致
- input要有type和name，最好不要有placeholder属性
眼睛阅读的时候，可以看缩写，但是屏幕阅读的时候，只有缩写是不够的，需要把完成的内容放进网页里但又只有朗读屏幕的时候可用，例如，选择生日，屏幕上可以指写D.O.B，但是要用span把完整的词放上并进行隐藏处理，这个叫accessible technology如下：
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label> .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }- div里面，也可以放fieldset，里面需要有name属性
- fieldset里，可以放一个legend，好像是个框左上角的标题
- label和input可以包含，也可以不包含，我发现
很有意思的处理，当有系列标签是按顺序的，比如<p>1</p>、<p>2</p>、<p>3</p>这样，可以在p上加一个before伪类，然后添加同样的内容，就可以避免冲服copy paste
<p>1</p> <p>2</p> <p>3</p> p:before { content: "Number"; } // 就可以实现Number 1、Number 2、Number 3
最后编辑：2023年10月13日
©著作权归作者所有
最新回复