HTML 和 CSS 初学者的可访问性

2025-05-25

HTML 和 CSS 初学者的可访问性

这是我根据我在 freeCodeCamp 上学到的材料为 #100DaysOfCode Day 2 所写的一篇文章。

网站应该开放，让每个人都能访问，无论用户的能力如何，但现实往往适得其反。这里有一份关于如何使用 HTML 和 CSS 提升网站可访问性的快速指南。

1. 当图片内容无法从文本中明显看出时，应添加替代文本

<img src="logo.jpeg" alt="Company logo">
Enter fullscreen mode Exit fullscreen mode

2. h1 - h6 文本对于屏幕阅读器很重要，请保持其顺序

<!-- Don't do this -->
<h1>A header</h1>
<h4>A smaller header</h4>
<!-- Do this -->
<h1>A header</h1>
<h2>A smaller header</h2>
Enter fullscreen mode Exit fullscreen mode

3. 使用主页、页眉、页脚、导航、文章、部分和音频来构建页面结构

<header>
  <h1>The header!</h1>
</header>
<main>The document body</main>
<footer></footer>
Enter fullscreen mode Exit fullscreen mode

4. 使用article元素来记录博客文章、论坛帖子或新闻文章

<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
Enter fullscreen mode Exit fullscreen mode

5. 同时使用视觉和听觉内容
，以便有视觉和/或听觉障碍的用户也可以访问。

6. 使用图形元素制作图表

<figure>
  <img src="your_chart.jpeg" alt="Short description of the chart">
  <br>
  <figcaption>
    Description of the chart.
  </figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

7. 使用带有输入的标签元素

<label for="name">Name:</label>
<input type="text" id="name" name="name">
Enter fullscreen mode Exit fullscreen mode

8. 将单选按钮分组到字段集中

<fieldset>
  <legend>Choose one of these three items:</legend>
  <input id="one" type="radio" name="items" value="one">
  <label for="one">Choice One</label><br>
  <input id="two" type="radio" name="items" value="two">
  <label for="two">Choice Two</label><br>
  <input id="three" type="radio" name="items" value="three">
  <label for="three">Choice Three</label>
</fieldset>
Enter fullscreen mode Exit fullscreen mode

9. 使用选择器来输入日期

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
Enter fullscreen mode Exit fullscreen mode

10. 使用时间元素标准化时间。
此元素的 datetime 属性是辅助设备访问的值。它通过声明标准化的时间版本来帮助避免混淆，即使在文本中以非正式或口语化的方式书写。

<time datetime="2013-02-13">last Wednesday</time>
Enter fullscreen mode Exit fullscreen mode

11. 使某些内容仅对屏幕阅读器可见，
如下所示：

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
Enter fullscreen mode Exit fullscreen mode

不要使用：

  • display: none；或visibility: hidden；它们对所有人隐藏内容，包括屏幕阅读器用户。

  • 像素大小为零值，例如宽度：0px；高度：0px；它会从文档流中删除该元素，屏幕阅读器将忽略它

12. 使用高对比度文本。Web
内容可访问性指南 (WCAG) 建议普通文本的对比度至少为 4.5:1。该比率是通过比较两种颜色的相对亮度值计算得出的。对比度范围从 1:1（相同颜色或无对比度）到 21:1（白色与黑色）。前景色和背景色需要足够的对比度，以便色盲用户能够区分它们。

13. 使用描述性链接文本

This:
<a href="">information about computers</a>
is better than this:
<a href="">Click here</a>
Enter fullscreen mode Exit fullscreen mode

14. 使用访问键访问重要链接

<button accesskey="b">Important Button</button>
Enter fullscreen mode Exit fullscreen mode

15. 使用 tabindex 添加键盘焦点：
当用户在页面上按 Tab 键时，链接和表单控件会自动获得键盘焦点。此功能可以通过在任何其他元素上使用 tabindex="n" 来实现，其中 n 不能为负数。

<a href="" tabindex="1">First accessed link</a>
<a href="" tabindex="2">Second accessed link</a>
Enter fullscreen mode Exit fullscreen mode

照片由Rodion Kutsaev在Unsplash上拍摄

文章来源：https://dev.to/mxl/accessibility-for-beginners-with-html-and-css-16j7
Devto 翻译
PREV
使用 React 函数组件保护路由
NEXT
告别 Web API