20、网站可访问性优化指南

网站可访问性优化指南

1. 颜色盲与网站设计

1.1 颜色盲现状

在美国，约 8% 的男性患有某种类型的色盲，且男性色盲的比例远高于女性。这意味着在网站设计中，不能仅依赖颜色作为唯一的信息传达方式。

1.2 常见色盲类型对网站的影响

不同类型的色盲会使网站呈现出不同的视觉效果，以下是几种常见色盲类型下 Audio - 2 - Go 网站的表现：
| 色盲类型 | 特点 | 对 Audio - 2 - Go 网站的影响 |
| ---- | ---- | ---- |
| 绿色盲（Deutanopia） | 缺乏绿色视锥细胞 | 颜色方案有所减弱，但大部分元素仍可区分 |
| 红色盲（Protanopia） | 缺乏红色视锥细胞 | 页面看起来平淡，星星图标模糊在一起 |
| 蓝色盲（Tritanopia） | 缺乏蓝色视锥细胞 | 影响黄色色调，星星图标完全无用，违反 WCAG 优先级 1 |

1.3 解决方案：为星星添加标签

由于 Audio - 2 - Go 网站中书籍的评分星星仅通过颜色传达信息，违反了 WCAG 标准，我们可以为其添加文本评分。以下是具体代码：

<div id="featured-books"> 
  <ul> 
    <li><a tabindex="7" href="/books/1"> 
      <img alt="the elements of cooking" src="elements.j