网络无障碍性（Web Accessibility）是指能够让尽可能多的人可以轻松浏览和使用网站，尤其是对于那些具有身体或认知障碍者。网站无障碍性对于所有的网站都很重要，因为任何人都有可能需要使用该网站，而未考虑无障碍性可能会挡住其他人获取信息的门槛。这次我们来聊聊无障碍性中的“份量”。
什么是“份量”？
在网站无障碍性的设计中，“份量”（Weight）是指在页面上不同插件，比如图片、文本等的重要性。比如，你在文章开头放了一张主题图片，这张图片的“权重”可能就比其他几个图片和文本更高，因为它提供了页面主题和文章大意的表现。
在网站的无障碍性中，我们需要制定一个“份量等级”，以确定哪些信息对于使用这个网站的人更重要。对于没有视觉障碍的人来说，页面上的各个部分都是可以看见，并从视觉上获得建议。但是，对于有视觉障碍的人来说，则是需要需要依靠思维和工具才能获取信息。
如何确定“份量”？
在我们制定“份量等级”时，考虑一下以下几点：
- 主要功能：这个UI需要在页面上的具体功能，这个功能有多重要？它符合页面主题的要求吗？
- 使用场景：页面设计的目的是什么？是给用户提供信息，还是给用户带来愉悦体验？
- 单独的元素：页面上的单独的元素各自的重要程度。
- 社会含义：页面上的元素是否具有广义价值，比如宣传积极价值观。
以下是一个简单的例子，展示了如何使用 HTML5 的“aria-label”属性来确定“份量”：
<!-- 展示了三张图片，第一张图被认为是最主要的 --> <img src="exampleImg1.png" alt="" aria-label="Main Image" /> <img src="exampleImg2.png" alt="" aria-label="Supporting Image" /> <img src="exampleImg3.png" alt="" aria-label="Supporting Image" />
通过使用 aria-label 使用 ，我们清楚了解到哪些图片成为了“重点”，在无障碍性使用中，则确保了正确的信息被正确标记。
总结
在网站的无障碍性设计中，“份量”就是确定页面上元素的重要性等级，这对于无障碍性使用者来说将为他们获取必要的信息行为提供更多便利。在设计中，我们需要综合考虑一些重要因素，比如主要功能、单独的元素和社会含义。在确定了各个元素的重要性等级之后，我们可以使用 HTML5 的“aria-label”等属性来明确定义这些元素的重要性等级。这将使我们的网站更加友好，更加无障碍。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d81d4968c7c53b0ff50c9
