UX&A11y에 대한 짧은 8월 개발자 팁 3개

여러분!

전정 장애가 있는 사람들을 위한 애니메이션 제작, 양식 유효성 검사 시 UX 개선, 스크린 리더 검색 코딩에 대해 이야기하고 싶습니다.

그러나 독서를 시작하기 전에 나는 떠납니다 the link on my Substack newsletter about UX and a11y tips . 당신은 무엇을 만들지 알고 있습니다 😎

또한 저의 스폰서인 Ben Rinehart, Jesse Willard, Tanya Ten, Konstantinos Kapenekakis에게도 감사드립니다. 저는 그들의 지원 없이 이 글을 쓰지 않았습니다.

갑시다!

현기증, 메스꺼움 및 두통을 경험할 수 있는 사용자 관리

애니메이션이 현기증, 메스꺼움 및 두통을 유발할 수 있다는 것을 알고 계셨습니까?

WCAG 2.2에는 섹션 2.3.3이 있습니다. 전정 장애가 있는 사용자가 모션 애니메이션을 볼 때 현기증, 메스꺼움 및 두통을 경험한다고 설명합니다 😩

그런 일이 발생하지 않도록 선호 감소 동작 미디어 기능을 사용해야 합니다 👀 전정 장애가 있는 사용자는 OS 옵션에서 애니메이션을 비활성화할 수 있습니다.

그리고 장애가 없는 사람들에게만 애니메이션을 표시하기 위해 선호하는 움직임 감소 미디어 기능을 사용하는 것을 감지할 수 있습니다. 그래서 유저분들 더 잘 챙겨드리겠습니다 😊

이러지 마

.example {
  animation-name: zoomInDown;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.3s;
}

대신 이것을 사용할 수 있습니다

@media (prefers-reduced-motion: no-preference){
  .example {
    animation-name: zoomInDown;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-delay: 0.3s;
  }
}

양식 유효성 검사 후 포커스 저장

폼 유효성 검사를 거치면 포커스가 사용자 수명을 향상시킬 수 있다고 확신합니다 😊

Preply를 살펴보겠습니다. 암호를 실수하면 앱에서 실수를 알려줍니다. 하지만... 사용자 포커스도 초기화되서 🤦‍♂️ 그래서 다시 마우스로 비밀번호 입력란을 클릭해야 합니다. 그래야만 실수를 고칠 수 있습니다 😒



대신 무엇을 만들 수 있습니까? Booking에서 좋은 예를 찾았습니다. 로그인을 시도하면 앱이 포커스를 저장합니다! 그리고 더 이상 조치를 취하지 않고 실수를 바로잡을 수 있습니다. 예이!🙌

시각 장애가 있는 사용자가 검색을 사용하도록 지원

특별한 검색 WAI-ARIA 역할이 있습니다. 검색에 사용할 때 스크린 리더는 사용자가 페이지별로 빠른 탐색을 위해 사용하는 "지역 목록"모드로 표시하기 시작합니다 ☝️

그렇지 않으면 사용자가 손으로 확인해야 합니다. 많이 힘드네요.... 😐 그러니 앱에서 역할="검색"을 검색에 추가해주세요 🙏