이것은 양식 접근성에 관해 진행 중인 소규모 시리즈의 두 번째 게시물이 될 것입니다. 첫 번째 포스팅을 놓치셨다면 꼭 보세요 의사 클래스를 사용하여 접근 가능한 양식. 이 게시물에서 우리는 :focus-visible과 이를 웹사이트에서 사용하는 방법을 살펴보겠습니다!

집중 터치포인트

우리가 앞으로 나아가기 전에 :focus-visible, 방법을 다시 살펴보겠습니다. :focus CSS에서 작동합니다. 포커스는 키보드, 마우스, 트랙패드 또는 보조 기술을 통해 요소가 상호 작용하고 있음을 나타내는 시각적 표시기입니다. 링크, 버튼, 양식 요소와 같은 특정 요소는 자연스럽게 대화형입니다. 우리는 사용자가 자신의 위치와 상호 작용을 알고 있는지 확인하고 싶습니다.

CSS에서 이 작업을 수행하지 마십시오.!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

초점을 제거하면 다음을 위해 제거됩니다. 모든 사람! 우리는 초점을 유지하고 있는지 확인하고 싶습니다.

어떤 이유로든 포커스를 제거해야 하는 경우 폴백도 있는지 확인하세요. :focus 사용자를 위한 스타일. 대체 색상은 브랜드 색상과 일치할 수 있지만 해당 색상도 접근 가능해야 합니다. 마케팅, 디자인 또는 브랜딩에서 기본 포커스 링 스타일이 마음에 들지 않으면 대화를 시작하고 이를 다시 추가하는 가장 좋은 방법에 대해 협력해야 할 때입니다.

focus-visible?

의사 클래스, :focus-visible, 우리의 기본값과 같습니다 :focus 의사 클래스. 이는 페이지에서 무언가에 초점을 맞추고 있다는 표시를 사용자에게 제공합니다. 당신이 쓰는 방식 :focus-visible 절단되어 건조되었습니다.

:focus-visible {
  /* ... */
}

사용시 :focus-visible 특정 요소를 사용하면 구문은 다음과 같습니다.

.your-element:focus-visible {
  /*...*/
}

사용의 좋은 점은 :focus-visible 요소를 돋보이게 만들 수 있고, 밝고 대담하게! 요소를 클릭하거나 탭하면 표시되는 것에 대해 걱정할 필요가 없습니다. 클래스를 구현하지 않기로 선택한 경우 기본값은 일부 사용자에게 바람직하지 않은 사용자 에이전트 포커스 링이 됩니다.

의 뒷이야기 focus-visible

우리가 가지고 있기 전에 :focus-visible, 사용자 에이전트 스타일이 적용됩니다 :focus 페이지의 대부분의 요소에 적용됩니다. 버튼, 링크 등. 포커스 가능한 요소에 윤곽선 또는 "포커스 링"을 적용합니다. 이는 보기 흉한 것으로 간주되었으며 대부분은 브라우저가 제공하는 기본 포커스 링을 좋아하지 않았습니다. 초점 링이 보기에 좋지 않기 때문에 대부분의 저자는 대안 없이 이를 제거했습니다. 제거할 때 기억하세요. :focus, 유용성을 감소시키고 키보드 사용자가 경험에 액세스할 수 없게 만듭니다.

현재 웹 상태에서 브라우저는 포커스가 있는 다양한 요소 주위에 더 이상 포커스를 시각적으로 표시하지 않습니다. 대신 브라우저는 다양한 경험적 방법을 사용하여 사용자에게 도움이 될 때를 결정하고 그 대가로 포커스 링을 제공합니다. 에 따르면 칸 아카데미, 휴리스틱은, "좋은 선택을 찾기 위해 알고리즘을 안내하는 기술입니다."

이것이 의미하는 바는 브라우저가 사용자가 키보드, 마우스 또는 트랙패드의 경험과 상호 작용하는지 여부를 감지하고 해당 입력 유형에 따라 포커스 링을 추가하거나 제거할 수 있다는 것입니다. 이 게시물의 예에서는 입력 상호 작용을 강조합니다.

초기의 :focus-visible 우리는 a를 사용하고 있었어요 폴리 필 Alice Boxhall과 Brian Kardell이 만든 포커스 링을 처리하기 위해 Mozilla도 자체 가상 클래스를 내놓았습니다. :moz-focusring, 공식 사양 이전. 포커스링 초창기에 대해 더 자세히 알고 싶다면 다음을 확인하세요. A11y 캐스트 롭 도슨과 함께.

초점 중요성

지원서에서 초점이 중요한 데에는 많은 이유가 있습니다. 우선, 위에서 언급한 것처럼 웹 홍보대사로서 우리는 가능한 최고의 접근 가능한 경험을 제공해야 합니다. 우리는 사용자가 경험을 탐색하는 동안 자신이 어디에 있는지 추측하는 것을 원하지 않습니다.

항상 생각나는 한 가지 예는 다음과 같습니다. 눈먼 두 형제 웹사이트. 홈페이지에 접속하여 (모바일에서는 작동) 왼쪽 하단의 닫힌 눈을 클릭/탭하면 눈이 뜨고 시뮬레이션이 시작됩니다. 브래드포드(Bradford)와 브라이언 매닝(Bryan Manning) 형제는 모두 어린 나이에 스타가르트병 진단을 받았습니다. 스타가르트병은 눈의 황반변성의 한 형태입니다. 시간이 지나면 두 형제 모두 완전히 눈이 멀게 됩니다. 사이트를 방문하여 눈을 클릭하여 그들이 어떻게 보는지 확인하십시오.

귀하가 다른 사람의 입장에서 페이지를 탐색해야 한다면 전체 경험을 통해 자신이 어디에 있는지 정확히 알고 싶을 것입니다. 포커스 링은 그러한 힘을 제공합니다.

Rescale과 함께 비즈니스를 가속화하는 방법에 대해 알아보세요.

아래 데모는 방법을 보여줍니다. :focus-visible CSS에 추가하면 작동합니다. 비디오의 첫 번째 부분에서는 마우스를 사용하여 탐색하는 경험을 보여주고, 두 번째 부분에서는 키보드만으로 탐색하는 모습을 보여줍니다. 마우스 사용에서 키보드 사용으로 전환했음을 보여주기 위해 내 자신도 녹음했습니다.

브라우저는 내 입력(키보드/마우스)을 기반으로 포커스 링으로 무엇을 할지 예측한 다음 해당 요소에 포커스 링을 추가합니다. 이 경우 키보드를 사용하여 이 예제를 탐색하면 모든 것이 포커스를 받습니다. 마우스를 사용할 때 입력에만 초점이 맞춰지고 버튼에는 초점이 맞춰지지 않습니다. 제거하면 :focus-visible, 브라우저는 기본 포커스 링을 적용합니다.

아래 코드가 적용됩니다 :focus-visible 포커스 가능한 요소에.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

지정하고 싶은 경우 label 또는 수신 버튼 :focus-visible 그냥 수업 앞에 input or button 각각.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

고객 지원

브라우저가 지원하지 않는 경우 :focus-visible 상호작용을 처리하기 위해 대체할 수 있습니다. 아래 코드는 MDN 플레이그라운드. 당신은을 사용할 수 있습니다 @ 지원 규칙에 따라 또는 "기능 쿼리" 지원을 확인합니다. 한 가지 명심해야 할 점은 규칙이 코드 상단에 배치되거나 다른 그룹 at-rule 내에 중첩되어야 한다는 것입니다.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

추가적인 접근성 문제

경험을 구축할 때 염두에 두어야 할 접근성 문제는 다음과 같습니다.

• 초점 표시기로 선택한 색상이 있는 경우에 문서화된 정보에 따라 계속 액세스할 수 있는지 확인하세요. WCAG 2.2 비텍스트 대비(레벨 AA)
• 인지 과부하는 사용자에게 고통을 줄 수 있습니다. 다양한 대화형 요소의 스타일을 일관되게 유지하세요.

브라우저 지원

링크

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• PlatoData.Network 수직 생성 Ai. 자신에게 권한을 부여하십시오. 여기에서 액세스하십시오.
• PlatoAiStream. 웹3 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 플라톤ESG. 탄소, 클린테크, 에너지, 환경, 태양광, 폐기물 관리. 여기에서 액세스하십시오.
• PlatoHealth. 생명 공학 및 임상 시험 인텔리전스. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/managing-user-focus-with-focus-visible/