웹 접근성 향상을 위한 10가지 가이드
10 guidelines to improve your web accessibility
해당 링크의 본문을 참조하였습니다
우리는 장애가 있어도, 모든 사람에게 사이트에 대한 접근을 보장하는 10 가지 웹 접근성 가이드 라인 목록을 작성했습니다.
W3C의 제작자이며 World Wide Web의 발명가 인 Tim Berners-Lee의 인용문은 “웹의 힘은 보편성에 있습니다”라고 말합니다.
웹 사이트 제작을 통해 생계를 유지하는 사람들은 모든 사람이 웹 사이트에 액세스 할 수 있도록해야합니다.
웹 접근성이란?
W3C에 따르면 웹 접근성은 모든 사람이 웹을 인식하고, 이해하고, 탐색하고, 상호 작용하고, 웹에 기여할 수 있음을 의미합니다.
이와 관련하여 웹 사이트 접근성에는 시각, 청각, 육체적, 언어 적,인지 적 및 신경 학적 장애를 포함하여 웹 액세스에 영향을 미치는 모든 조건이 포함됩니다.
웹 전반에 걸쳐이 주제에 대한 많은 내용을 찾을 수 있으며,이 주제에 흥미가 있다면, WAI에 대해 자세히 알아야합니다.
이를 염두하고, 우리의 가이드라인을 봅시다.
1. Do not depend on color
색상은 감정을 표현하고 웹에서 메시지를 전달할 때 자주 사용하는 강력한 도구입니다.
그러나 우리는 의미와 정보를 사용자에게 전달하기위해 색에만 의존해서는 안됩니다.
왜일까요?
예를 들어, 녹색은 “맞음”을 의미하고 빨간색은 “잘못됨”을 의미하는 것으로 널리 알려져 있지만, 이것을 의사 소통의 유일한 수단으로 사용하면 어떻게 될까요?
오로지 색상만 사용하여 중요한 메세지나 정보를 UI에 표시하게되면 우리는 인구의 4.5%를 내버려두게 됩니다.
색이 에러나 확인의 메시지가 될수는 있지만, 우리가 사용하는 유일한 도구가 될수는 없습니다.
우리가 모든 사용자에게 다가 갈 수 있도록 항상 양식에 정보가 채워 졌는지 맞고 틀림을 표시하는 레이블이나 아이콘을 추가해야합니다.
caniuse.com가 채택한 매우 흥미로운 해결책은 호환성 표의 내용을 표시 할 수있는 대체 색상 표를 제공하는 것입니다
디자인을 하면서 색맹과 대비를 확인하는것이 이상적이므로 당신과 당신의 팀이 올바른 도구를 갖추고 있는지 확인해야합니다.
접근성을 염두해두고 당신이 디자인하는데 도움이될 Sketch용 Stark 플러그인을 적극 권장합니다.
2. Do not block zoom
반응형 디자인 시대에 우리는 몇가지 무책임한 실수를 범했습니다.
이것들 중 하나는 모바일 장치를 사용하여 웹 페이지를 확대하는 기능을 사용할 수 없도록하는 ‘maximum-scale=1.0’의 사용입니다.
난시는 유럽과 아시아에서 성인의 30-60 %에 영향을 미치지만, 흐릿한 시력은 모든 연령대와 국적의 사람들에게 영향을 미칠 수 있습니다.
확대 기능은 단순한 WCAG 가이드 라인이 아니라 이러한 사람들의 일상 생활을 단순화하는 도구입니다
따라서 다음 당신이 반응형웹을 구축할때는 흐릿한 시력을 가진 모든 사용자를 생각해 보십시오.
사용자가 휴대 기기에서 자유롭게 확대 / 축소 할 수 있도록하는 것 외에도 레이아웃이 데스크탑 브라우저에서 최대 200 %까지 확대되는지 확인해야합니다.
3. Rediscover the alt attribute
웹 사이트를 얼마나 오랫동안 만들어 왔는지에 상관없이 몇가지 유명하고 아직은 미스터리한 alt 속성에 대해 알게된다면 놀라울것입니다.
alt 속성은 모든 img 태그에 필수이지만 빈 alt 속성은 완전히 유효합니다. 이미지가 장식 적이거나 페이지 내용을 이해하는데
필요하지 않은 경우 간단히 alt = “”를 사용할 수 있습니다.
스크린리더는 유저에게 img태그가 이미지인것을 말해주기 때문에 중복될 필요없이 ‘이 사진은 ~’ 이라는 포인트부터 시작하게 됩니다.
이미지의 기능은 의미만큼 중요합니다.만일 당신의 로고가 웹 사이트의 홈페이지로 연결되면 대체 텍스트는 ‘로고’가 아닌 ‘홈페이지’가 되어야 합니다.
대체 텍스트는 오로지 접근성에 관한 것만은 아닙니다. 때때로 느린 데이터 연결을 사용하는 사용자는 이미지를 비활성화하여보다 빠른 브라우저 경험을
얻는 경우도 있습니다. alt 속성을 작성할 때마다 이러한 사용자들도 염두에 두십시오!
하지만 당신의 웹사이트의 모든이미지가 img태그는 아닙니다. 맞나요? 당신의 웹사이트의 한둘의 혹은 전체의 이미지가 svg 아이콘 시스템을 가지고 있을수도 있습니다.
모든 사람들이 SVG에 접근하게 하려면 우린 어떻게 해야할까요?
다행스럽게도 SVG 표준이 우리에게 적용되었습니다.
우리의 벡터를 설명하기 위해 짧고 긴 설명을위한
4. Add subtitles and captions to your videos
이건 아마 WCAG의 가이드라인 중 가장 어려운 것중에 하나일 수 있습니다. 기술적인 어려움 보다는 시간이 오래걸리는 것 떄문입니다.
이 작업을 수행하는 데에는 몇가지 방법이 있습니다.
Youtube를 예로 들어보겠습니다.동영상을 플랫폼에 업로드하면 자막을 사용할 수 있습니다.
이들은 자동으로 생성되며 언어에 따라 경우에 따라 정확하지 않을 수도 있습니다.
배경 잡음 또는 스피커의 강세. 그럼에도 불구하고이 프로그램은 구현하기가 쉽고 대부분의 영어권 동영상에서 잘 작동합니다.만일 우리가 100% 정확한 캡션을 찾는다면, 유투브에 좋은 카피가 있다고 믿기엔 어려움이 있기 떄문에 자막을 써야하거나 자막을 위해 써드파티를 고용해야합니다.
YouTube는 가장 일반적인 자막 형식 (.srt, .sub 및 .sbv)을 사용하고 플랫폼 자체에 자막을 작성하게하므로 자막 소프트웨어가 없거나 원하는 경우 매우 편리 할 수 있습니다.
또 관리자에게 계정에 대한 액세스 권한을 부여하지 않고 콘텐츠를 번역 할 수 있도록 지역 사회에 요청합니다.하지만 아마 YouTube에서 호스팅되는 플랫폼으로 사용하고 싶지 않을 것입니다.
아마도 서버에서 호스팅되는 HTML5 비디오를 사용하고 싶을 것입니다.
HTML5에는
5. Semantics = accessibility
font 태그 기억납니까? 당신이 그랬으면 좋겠네요.
일반적으로 알고 있는것과 달리, 시멘틱은 HTML5에서 태어난 것이 아닙니다.
시멘틱은 첫 번째 HTML 페이지 이후로 우리와 함께 해왔고 그 이후로 크게 개선되었습니다.
HTML5 표준을 사용하여 일상적인 사용을 위해 새로운 시멘틱 태그가 도입되었습니다.
p 또는 span에 대해 의식적으로 h1태그를 선택하면 요소의 의미를 의도적으로 변경하고 계층 구조를 제공하며 페이지 정보의 트리 구조를 구축합니다.
화면 판독기는 이를 인식하지 못합니다. 사실, 시멘틱은 가장 유용한 무기 중 하나입니다.
큰 힘으로 큰 책임을 지게 된다는걸 명심해야합니다. h1에서 새로운 메인 태그까지 각 요소에 대해 적절한 의미 태그를 사용해야합니다.
6. Use the right mark-up
이전의 요지를 이어 가면서 몇 명의 잘못된 부분과 논쟁의 여지가있는 내용에 대해 토론하고 싶습니다.
Time vs Datetime
time 요소는 ISO 8601 표준을 사용하여 날짜와 시간을 나타내는 많은 형식의 날짜 형식, 표준 시간대 및 기간을 표시합니다.
Datetime은
Del and Ins
웹은 끊임없이 변하지 만, 이러한 변화가 눈에 띄지 않게 할 필요는 없습니다.
ins 및 del HTML 태그를 datetime 속성과 함께 사용하여 편집을 표시 할 수 있습니다.
ins 요소는 문서에 대한 추가를 나타냅니다.
del 요소는 삭제 된 내용을 나타냅니다.
Button vs a태그
우리는 무엇을 사용해야 할까요?
a태그는 하나의 파일을 다른 탭이나 새 탭 또는 현재 탭에있는 링크에 연결하기위한 것입니다.
그러나 이 태그는 아코디언메뉴나 이미지 갤러리와 같은 작업을 트리거하려고 할 때 이상적이지 않습니다.
button 요소는 이러한 상황에 적합한 선택이며 일반적으로 JavaScript를 사용할 수 있습니다.
또한 button 태그는 input type=“button”과 쉽게 혼동 될 수 있습니다.
그러나 차이점은 button이 더 많은 내용 (텍스트, 이미지 + 텍스트 또는 이미지 만)을 가질 수 있다는 것에 의존합니다.
button 태그를 사용할 때 고려해야 할 두 가지 사항이 있습니다.
먼저 버튼의 내용이 충분히 명확하지 않으면 (예 : 닫기 버튼에서 “X”표시) 기능을 설명하는 데 도움이되는 aria-label 속성을 추가해야합니다.
둘째, href 속성을 추가하는 것이 의미가 있다면 (검색 컴포넌트 또는 라이트 박스 갤러리), 태그를 사용하고 JavaScript로 링크 행동을 오버라이드 할 수 있습니다.
JavaScript가 활성화되어 있지 않으면 href가있는 태그를 사용하는 이미지 갤러리가 저하됩니다.
7. Use roles when necessary
스크린 리더 사용자에게 링크가 액션을 유발하고 실제로 태그가 아니라는 사실을 알리기 위해서는 role 속성에 “button”값을 추가해야합니다.
자바 스크립트를 작성할 때 클릭 할 때뿐만 아니라 사용자가 스페이스 바를 눌렀을 때도 함수를 호출해야합니다.
버튼에 사용되는 동작이 링크에 사용되는 동작과 다르므로 사용자가 이러한 명령 중 하나에서 동작을 트리거 할 수있게 해주는 작업이 필요합니다.
위의 예와 같이 규칙을 위반하지 않는 한 아리아 역할은 일반적으로 필요하지는 않습니다
HTML 시멘틱 요소에는 이미 적용된 기본 역할이 있습니다. 네비게이션에 대한 nav tag와 링크를 위한 a tag등이 있습니다.
즉 role 속성은 요소의 기본값을 변경하려는 경우에만 필요합니다.
8. On hiding elements
HTML 및 CSS로 항목을 숨길 수있는 몇 가지 방법이 있습니다. 이 표는 모든 상황에 가장 적합한 대안을 찾는 데 도움이 될것입니다.
보기에서 요소를 숨기고 싶은데 스크린 리더가 요소를 알 수 있도록 하려면 마지막 옵션이 가장 좋습니다.
이는 form의 라벨이나이나 내용 건너 뛰기 링크에서 매우 유용합니다.
visuallyHidden 클래스는 당신이 많이 찾아써야 하는 CSS 코드 중 하나이므로 모든 프로젝트에서 쉽게 찾을 수 있습니다.
맞습니다. 당신이 원하는대로 이름을 바꿀 수도 있습니다.
9. Follow web accessibility standards
웹 접근성은 어렵지만 표준 및 지침이 도움이됩니다.
이 글의 이전의 모든사항이 이 내용에도 이어집니다.
button tag는 어떻게 작동할까요, 또 언제 사용해야할까요? display:none과 “hidden”속성의 화면 차이는 무엇일까요?
처음엔 지루할 지라도 W3C표준과 WCAG가이드 라인은 신뢰할 만합니다. 또한 그들은 교육 지향적입니다.
그들이 제공하는 무한한 정보를 놓치지 마세요
당신이 알지 못했던 코드와 사례를 발견하게 될 것입니다!
10. Audit and review
이 지식을 모두 적용했으면 테스트를 해봅시다. 다음은 웹 사이트 접근성을 검사 할 수있는 최상의 도구 목록입니다.
ChromeVox: Mac 및 Windows 사용자 용으로 제공되는이 Chrome 확장 프로그램은 웹 사이트를 테스트하는 데 사용할 수있는 스크린 리더입니다.
Accessibility Developer Tools for Chrome : 일반적인 개발자 도구에 접근성 검사 옵션을 추가 한 또 다른 훌륭한 확장 프로그램입니다.
Color Filter : 이 온라인 도구를 사용하여 다른 유형의 색맹 환자를 위해 웹 사이트를 테스트하십시오.
W3C Validator: 이 공식 W3C 도구는 HTML 마크 업이 웹 접근성 규칙을 따르는 지 알려줍니다!
WAVE : WebAIM에서 만든 웹 접근성 평가 도구.