접근성 우선 웹 개발
대부분의 기업은 웹사이트를 구축할 때 잘못된 질문을 던집니다. 모든 사람이 사용할 수 있는지 묻지 않습니다.
그들은 고성능 노트북과 완벽한 시력을 가진 사람들을 위해 웹사이트를 만듭니다. 스크린 리더를 사용하는 사람을 잊습니다. 마우스 대신 키보드에 의존하는 사용자를 잊습니다. 콘텐츠를 이해하기 위해 명확한 레이아웃이 필요한 사람을 잊습니다.
만약 여러분의 사이트가 이 사람들에게 제대로 작동하지 않는다면, 그 사이트는 제대로 작동하는 것이 아닙니다.
접근성은 종종 마지막 순간에 확인하는 체크리스트 항목으로 취급됩니다. 이는 실수입니다. 첫날부터 접근성을 염두에 두고 구축하면 더 나은 웹사이트를 만들 수 있습니다. 로딩 속도가 빨라지고, 코드가 깔끔해지며, SEO도 향상됩니다.
다음은 따라야 할 실질적인 프레임워크입니다:
Use Semantic HTML 적절한 작업에는 적절한 요소를 사용하세요. 코드상에서 버튼은 반드시 버튼이어야 합니다. 버튼 대신 스타일링된
div를 사용하면 보조 도구에서 여러분의 사이트가 보이지 않게 됩니다. 나중에 이를 수정하는 것은 비용이 많이 듭니다. 지금 하는 것은 비용이 들지 않습니다.Build for Keyboard Navigation 많은 사용자가 마우스를 사용하지 않습니다. 모든 링크, 버튼, 양식(form)은 Tab 키와 Enter 키로 작동해야 합니다. 사용자가 페이지의 어디에 있는지 알 수 있도록 포커스 표시기(focus indicator)가 잘 보이도록 하세요.
Check Color Contrast 텍스트는 배경과 뚜렷하게 구분되어야 합니다. 최소 4.5:1의 대비 비율을 목표로 하세요. 의미를 전달할 때 색상에만 의존하지 마세요. 오류가 단순히 빨간색 텍스트로만 표시된다면, 색약 사용자는 이를 놓칠 수 있습니다. 아이콘이나 레이블을 추가하세요.
Write Meaningful Alt Text "image1.jpg"와 같은 파일 이름을 대체 텍스트로 사용하는 것을 중단하세요. 이미지가 무엇을 보여주는지, 그리고 왜 중요한지 설명하세요. 이미지가 단순히 장식용이라면, 스크린 리더가 건너뛸 수 있도록 빈
alt속성을 사용하세요.Test with Real Tools 자동화 도구는 문제의 약 40%만 잡아낼 수 있습니다. NVDA, JAWS 또는 VoiceOver와 같은 실제 스크린 리더로 테스트해야 합니다. 소프트웨어에만 의존한다면 실제적인 격차를 놓치게 될 것입니다.
가장자리를 위해 구축할 때, 중심은 모두를 위해 더 좋아집니다. 밝은 햇빛 아래에서 휴대폰을 사용하는 사람이나, 한 손으로 아기를 안고 있는 부모도 여러분의 접근성 있는 디자인으로부터 혜택을 받습니다.
접근성을 법적인 의무로 취급하는 것을 멈추세요. 품질의 기준으로 취급하세요.