日常笔记

Prefers Reduced Motion

https://www.a11yproject.com/posts/understanding-vestibular-disorders/

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
}

visually-hidden

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

加载动画

<div class="spinner loading"></div>
<style>
.spinner {
  --spinner-color: purple;
}
.spinner.loading {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: var(--spinner-color) var(--spinner-color) var(--spinner-color) transparent;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

UK政府网站link

<code-demo>
<template shadowrootmode="open">
<a href="#">Buy tickeet</a>
<style>
a {
  text-decoration: underline;
  text-decoration-thickness: max(1px, .0625rem);
  text-underline-offset: .1578em;
}
a:hover {
  text-decoration-thickness: max(3px, .1875rem, .12em);
  text-decoration-skip-ink: none;
}
a:active, a:focus {
  outline: 3px solid rgba(0, 0, 0, 0);
  background-color: #fd0;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  text-decoration: none;
}
</style>
</template>
</code-demo>

使用heading来描述一个nav组件

我在阅读英国政府网站html代码时学习到，我们可以使用nav元素里面的heading元素来描述这个nav组件。网站的源代码如下：

<nav 
  role="navigation" 
  class="gem-c-related-navigation__nav-section" 
  aria-labelledby="related-nav-topics-8663b31f"
>

  <h2 id="related-nav-topics-8663b31f" class="gem-c-related-navigation__sub-heading gem-c-related-navigation__sub-heading--footer">
    Explore the topic
  </h2>

  <ul class="gem-c-related-navigation__link-list">
    <li class="gem-c-related-navigation__link">
      <a class="govuk-link gem-c-related-navigation__section-link--footer" href="/government/content-publishing">
        Government content and publishing
      </a>
    </li>
    <li class="gem-c-related-navigation__link">
      <a class="govuk-link govuk-link gem-c-related-navigation__section-link--footer" href="/government/digital-accessibility">
        Digital accessibility
      </a>
    </li>
  </ul>
</nav>

我之前的直觉一直都是将heading放在nav元素之前，即使这样，应该也需要在nav上面增加一个aria-label属性来描述这个nav，但是语义并没有uk政府网站这样来的好。

当我们使用firefox浏览检查uk政府网站这个nav元素会看到这样的accessibility dom tree。

navigation:           "Explore the topic"
  heading:            "Explore the topic"
    text leaf:        "Explore the topic"
  list:
    listitem:         "Government content and publishing"
      link:           "Government content and publishing"
        text leaf:    "Government content and publishing"
    listitem:         "Digital accessibility"
      link:           "Digital accessibility"
        text leaf:    "Digital accessibility"

我们现在可以去掉他们的class，简化成我们未来可以在项目中直接复制粘贴使用的html结构。

<nav role="navigation" aria-labelledby="unique-id">
  <h2 id="unique-id">Explore the topic</h2>
  <ul>
    <li>
      <a href="/">Link text</a>
    </li>
    <li>
      <a href="/">Link text</a>
    </li>
  </ul>
</nav>