无障碍 CSS 和 JavaScript

当 CSS 和 JavaScript 使用得当，很有可能改善 Web 访问体验，相反如果滥用的话，则会在极大程度上损害无障碍

css

用户群体：

视力受损：希望使其访问的所有网站上的文本变大

严重色缺乏：希望将所有网站置于易于查看的高对比度颜色中

正确的语义和用户期望

经验法则是，你可以更新页面功能的样式以适应你的设计，但不要更改它太多，使其不再按预期的外观或活动。

例如： 对标题进行样式设置，则标题将失去其视觉目的，使其看起来不像标题。

“标准”的内容结构

html

    <h1>Heading</h1>

    <p>Paragraph</p>

    <ul>
      <li>My list</li>
      <li>has two items.</li>
    </ul>

css

h1 {
  font-size: 5rem;
}

p, li {
  line-height: 1.5;
  font-size: 1.6rem;
}

应该：

• 字体： 文本具有逻辑性、清晰性和阅读舒适性
• 标签样式： 标题从正文文本中脱颖而出，通常像默认样式一样大而粗壮。你的列表应类似于列表。
• 颜色： 颜色应与背景颜色形成良好对比

css的错误示范：

强调的文本

<p>The water is <em>very hot</em>.</p>

你可能希望向强调的文本添加一些简单的颜色：

strong, em {
  color: #a60000;
}

但是，粗体和斜体文本的标准约定非常容易识别，更改样式可能会导致混淆。

缩写

允许缩写、首字母缩略词或初始化与其扩展关联的元素：

<p>Web content is marked up using <abbr title="Hypertext Markup Language">HTML</abbr>.</p>

同样，你可能希望以某种简单方式设置样式：

abbr {
  color: #a60000;
}

缩写的公认样式约定是虚线下划线，偏离这一原则明显是不明智的