inert를 활용해 스크롤로 가려진 항목 탐색을 막는 방법
종종, 어떤 웹사이트에서 특정 개수만큼만 제한적으로 표시하는 목록을 볼 수 있습니다. 예를들어, 목록 앞 뒤에 이전과 다음 버튼이 있고, 항목 네개가 목록에 표시되고 있고, 다음이나 이전 버튼을 누를때, 4개 이하의 사용 가능한 항목들이 표시됩니다.
모니터를 보고 컴퓨터를 사용하는 사람은 "다음"버튼을 누르기 전까지 다섯번쩨 버튼을 누를 수 없을겁니다.
하지만, 스크린리더를 포함한 키보드 사용자는 보이지 않는 스크롤 영역에 있는 요소에 초점을 보내고, 클릭할 수 있습니다. 이는 누군가에게는 매우 심각한 문제일 수 있고, 누군가에게는 별 것 아닌 문제일 수도 있습니다.
A 사용자: 저는 화면을 보고 컴퓨터를 사용하지만 마우스 포인터를 사용할 수 없어요. 그래서 키보드나 키보드랑 유사항 제어 장치(스위치 컨트롤러)로 컴퓨터를 사용합니다.
B 사용자: 저는 음성 낭독 프로그램을 사용하기 때문에 컴퓨터를 사용할 때 음성을 듣고 웹사이트 내용을 이해합니다. 그래서 저는 디스플레이 장치가 필요하지 않아요.
이 두 사용자는 컴퓨터 사용 방법에 유사성을 가지고 있습니다.. 키보드, 오직 키보드나 유사 장치만으로 컴퓨터를 제어하죠. 하지만 A 사용자와 B 사용자의 컴퓨터 사용에는 차이점이 있습니다..
A 사용자는 시각적 정보에 의존하여 컴퓨터를 사용합니다. 반면에, B 사용자는 귀로 듣는 정보를 의존하여 컴퓨터를 사용합니다. B 사용자는 항목이 눈에 보이지 않더라도, 스크롤에 가려진 항목을 탐색할 수 있습니다, 가려진 항목도 음성안내로 듣기 때문에 때문에 원하는 항목을 정보를 듣고 골라서 클릭할 수도 있습니다. 하지만, A 사용자는 스크롤로 인해 가려진 항목에 초점을 보내도 아무런 정보를 얻을 수 없습니다. A 사용자는 숨겨진 항목을 클릭할 수는 있지만, 자신이 무엇을 클릭했는지는 모릅니다.
이제 새로운 "inert" 속성으로 그 문제를 해결할 수 있습니다!