可访问性是指让网页可供所有人（包括残障人士）轻松使用。

该篇文章为 freecodecape Learn Accessibility by Building a Quiz 学习笔记

查看效果：accessibility-quiz

SVG

SVG（可缩放矢量图形），它包含一个 path 属性，允许图像被缩小，并保持其原始大小。

css aspect-ratio

CSS 属性，用于设置元素的宽高比。

1
2
3
4
5
6
#logo {
  width: max(10rem, 18vw);
  background-color: #0a0a23;
  aspect-ratio: 35/4;
  padding: 0.4rem;
}

子组合选择器（>）

用于选择器之间，匹配第一个选择器的直接子集的元素。

1
2
3
nav > ul {
  display: flex;
}

html role 属性

role 属性可用于指示页面上元素背后的用途，是 Web Accessibility Initiative(WAI)的一部分，并接受预设值。

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
   <section role="region" aria-labelledby="student-info">
      <h2 id="student-info">Student Info</h2>
   </section>
   <section role="region" aria-labelledby="html-questions">
      <h2 id="html-questions">HTML</h2>
   </section>
   <section role="region" aria-labelledby="css-questions">
      <h2 id="css-questions">CSS</h2>
   </section>
</form>

在视觉主题上，元素之间对比是一个关键因素。例如，标题的文本和背景之间的对比度应至少为 4.5:1。

在小的屏幕上，无序列表会溢出屏幕右侧，可以通过 Flexbox wrap 来解决：

1
2
3
4
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;

scroll-behavior

设置滚动行为

  • smooth：平滑滚动
  • auto：默认值，无滚动动画
1
2
3
4
5
@media(refers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

@media：CSS 媒体查询特性 prefers-reduced-motion 用于检测用户的系统是否被开启了动画减弱功能。

prefers-reduced-motion

accesskey

accesskey 全局属性 提供了为当前元素生成快捷键的方式。属性值必须包含一个可打印字符。

1
2
3
4
5
<ul>
  <li><a href="#student-info" accesskey="I">INFO</a></li>
  <li><a href="#html-questions" accesskey="H">HTML</a></li>
  <li><a href="#css-questions" accesskey="C">CSS</a></li>
</ul>