웹 접근성
모든 사용자가 물리적 또는 환경적 조건에 관계없이 인터넷에 액세스하고 사용할 수 있도록 보장하는 것을 의미합니다.
웹접근성은 많이 들어봐서 알 뿐 웹접근 가능한 코드를 작성하는 연습은 해본적이 없었습니다.
얼마 전 시각장애인 유튜버의 영상을 보다가 내가 당연하게 여겼던 것들이 누군가에게는 당연하지 않을 수 있다는 걸 깊이 깨달았다. 지금 개발 중인 웹사이트 또는 언젠가 개발할 웹 서비스 내가 ‘당연하다’고 생각했던 부분이 누군가를 나도 모르게 차별하는 것일 수도 있다.웹접근성을 고민하고 적용하기로 했습니다.
물론 지금은 모든 웹 접근성을 고려하기는 어렵겠지만, 생각만 하고 멈추는 것보다 이런 부분들을 실천하고 생각해볼 수 있는 경험을 하는 것이 더 중요하다고 느꼈습니다. 그렇다면 사용자를 차별하지 않는 웹 개발자로 성장할 수 있지 않을까요?
지금 신청해도 될까요… 취업활동 사이드 프로젝트에 적용하기로 했습니다. 했다.
첫 번째 목표 설정
너무 많은 것에 욕심을 내면 실패하거나 포기하기 쉽다는 것을 너무 잘 알기에 작은 것부터 시작하기로 했다. 우선 나의 사이드 프로젝트 이 목표는 로그인 페이지에서 시작하여 탭 키로 모든 기능을 이동하는 것입니다.오전.
다른 웹사이트는 웹의 접근성을 어떻게 반영했습니까?
지금은 탭키의 움직임에 대해 반성을 해볼까 생각중입니다. 탭 키를 사용하여 사이트 탐색로 만든
네이버 탭 해보고 오세요.. 끝입니다..!!! ㅎㅎ 대기업이구나..!
말할 필요도 없이 기본 페이지는 거의 탭으로 액세스할 수 있는 것처럼 보였습니다. 다른 쪽도 똑같이했지만.
내가 개발하고 있는 사이트는 어떻습니까…? ㅋㅋㅋㅋㅋㅋㅋꉂꉂ(ᵔᗜᵔ*)
물론 실제로 초점이 맞춰진 입력과 버튼을 제외한 모든 요소는 Tab 키로 접근할 수 없었습니다… 아아아아아아아아아아아아
탭 인덱스
화면 판독기 사용자를 위해 키보드에서 Tab 키를 누를 때 요소의 초점 및 패닝을 허용합니다.
숫자가 낮을수록 우선 순위가 높습니다. 음수 값(-1)은 초점을 잃고 0은 초점이 맞지 않은 요소에 초점을 맞춥니다. 항목의 순서도 웹접근성에 중요하기 때문에 함부로 색인을 낮은 순서로 바꾸시면 안될 것 같습니다.
필요한 경우 tabIndex 속성을 추가합니다.했다.
와 신세계.. ㅎㅎ 이런 간단한 속성을 추가해도 키보드가 안눌려서.. ㅠㅠ
이제 접근성에 관심이 생겼으니 이 작은 실천이 나비효과를 만들어냈으면 좋겠습니다..!
참고 자료