접근성은 모든 사람이 웹사이트를 사용할 수 있게 하는 것.
모든 사람이 접근할 수 있는 웹사이트는, 그렇지 않은 사이터보다 더 많은 view 를 얻을 것이다.
고려해야할 것 중 중요한 측면은 '웹사이트의 내용이다.'
인터넷의 수 많은 페이지에서 접근성조차 전혀 구현하지 않은 수많은 웹사이트들을 발견할 수 있다.
What Is a Bad Accessible Design?
다음은 피해야 할 잘못된 웹 사이트 설계 관행의 몇가지 예시다.
● Using Flash animations
● Using images as links
● Using underlined text
● Using too many colors
● Not using any color contrast
● Not using captions
● Not using alt text
● Not having a clear heading hierarchy
● Using a web font that is not easy to read
● Using only visual design elements without providing any text
● Not providing any accessible content at all
● Using a fixed font size that is too small to read
moz 'alt text/what is alt text'
어떤 웹사이트경우 서치엔진에 노출되는 것을 노려 alt text를 많이 사용한다.
안타깝게도 마케팅 담당자들은 키워드를 alt텍스트에 추가하면 구글에서 키워드가 더 높게 나타나고 접근성을 위해
이미지를 설명하는 대신 더 많은 검색 트래픽을 얻는다는 사실을 알게 되었다,
이런식으로 알트 문자를 잘못 사용하는 것은 비윤리적이고 나쁜 것이다. (이미지에 대한 설명을 얻을 수 없다.)
What Is a Good Accessible Design?
1. 좋은 웹사이트란 모든 사람이 사용할 수 있는 것을 말한다.
Universal Design
:creation of products that are usable by people of all ages, abilities, and disabilities.
2. 사용자 인터페이스의 테스트를 고려한 것.
즉, 색상 대비, 글꼴 크기 및 웹사이트의 사용성에 방해가 될 수 있는 기타 요소에 대해 설계를 테스트하고 평가한다.
접근성이 좋은 디자인이 특히 더 부각되어 보이는 요소는 세부사항이다.
모든 이미지에 대한 대체 텍스트 설명을 제공한다.
화면에서 텍스트를 들을 수 있는 소프트웨어 프로그램인 화면 판독기를 사용하는 사용자를 위한 대체 내비게이션 옵션도 제공한다.
3. High level of 유연성을 제공하는 디자인
다양한 스크린 사이즈에도 적용된다는 것을 의미한다.
사용자들은 각각 다른 디바이스를 이용하여 접근하기 때문에 중요하다
How to Make it Better
1.Contrast and Colors
가끔식 까먹게 되는 콘트레스트.
웹사이트는 어느정도의 콘트레스트가 있어야한다. (가독성을 위해서)
색상은 정말 다양하다는 것을 잊지말자.
(적당히 사용하는 것을 알 것!)
2.Label Forms and Provide Feedback for Errors
양식이 없는 사이트가 많다.
양식 레이블을 올바르게 지정하지 않는 경우 화면 판독기가 양식을 통과시킬 수 없다 (가령 로그인 페이지)
사용자에게 오류에 대한 피드백을 제공해야한다.
eg. 암호 보안 등급 '비밀번호는 8개 이상, 기호를 포함해야한다...' 와같은 양식을 제공하라.
3. Simple Navigation and Keyboard Navigation
네비게이션 바를 쉽고 웹사이트의 상단에 고정되게 만들 것.
다른 페이지에서 길을 잃지 않게 만들 것.
(어떤 장애를 가지신 분들 경우 키보드만을 통해서 navigate할 수 있다는 것을 고려할 것.)
4. Proper Headings Hierarchy
h1, h2, h3 ...
5. Responsive Design
(위에 있던 내용. 사용하는 기기에 맞게 response 하는 디자인일 것)
6. Use Both Text and Videos.
캡션을 넣는 것을 잊지 말자.
정리 :
일부 접근성 정책을 구현하는 동안 실수로 다른 정책을 제거할 수 도 있다.
이것이 많은 사람들이 정책을 적용하는 자동화된 규정 준수 검사기를 이용하는 이유기도 하다.
하지만 충분한 헌신과 시간이 있으면 웹사이트의 규정을 완벽하게 준수할 수 있다.
WCAG만 제대로 따른다면 웹 사이트는 어떤 면에서도 완벽해 보일 것이다!
***WCAG란***
Web Content Accessibility Guidelines
[웹 접근성 평가]
웹 콘텐츠를 보다 더 접근 가능하게 만들기 위한 광범위한 권장표준을 포함하고 있다.
이 지침을 준수하면, 전맹과 저시력, 난청과 청각장애, 운동장애, 언어장애, 광과민성, 그리고 이러한 장애의 조합뿐만 아니라 학습장애와 인지장애를 위한 약간의 조절을 포함하여 훨씬 더 광범위한 장애인들을 위한 보다 더 접근 가능한 콘텐츠를 만들 수 있다.
이 지침은 데스크톱, 랩톱, 태블릿, 모바일 장치에서의 웹 콘텐츠의 접근성을 다룬다. 이 지침을 준수하면, 전반적으로 사용자들도 웹 콘텐츠를 더 많이 사용할 수 있도록 해 줄 것이다.
하단은 우리나라의 웹접근성 평가 기준이다.
http://www.kwacc.or.kr/WAI/wcag21/#abstract
내용예시 :
성공기준-명도대비(최소)
http://www.kwacc.or.kr/WAI/wcag21/#dfn-contrast-ratio최소한 4.5:1 이상이 되어야 한다. 단, 다음의 경우는 제외한다.
커다란 텍스트(Large Text)
커다란 텍스트와 텍스트 이미지의 명도대비가 최소한 3:1 이상이다.
부수적인(Incidental)
비활성 사용자 인터페이스 구성요소의 일부, 순수한 장식, 사용자에게 보이지 않는, 또는 의미있는 다른 시각적 콘텐츠를 포함하고 있는 그림의 일부인 텍스트 또는 텍스트 이미지에는 어떠한 명도대비 요구사항도 없다.
로고타입(Logotypes)
로고 또는 상표명에 포함된 텍스트에는 어떠한 명도대비 요구사항도 없다.
W3C
W3C는 월드 와이드 웹을 위한 표준을 개발하고 장려하는 조직
