Part1. 웹 접근성과 웹표준
웹 접근성 : 웹사이트에서 제공하는 정보를 차별 및 제한없이 동등하게 이용할 수 있도록 보장하는 것
접근성은 장애인과 밀접한 관계가 있다.
- 장애인 및 고령자를 포함한 모든사람
- 다양한 platform 및 Device와 웹 브라우저 등 모든 환경
평등(Equality) , 공평(Equity) 차이
평등은 사용자를 고려하지않고 다 똑같이 적용한 것이지만
공평은 사용자에 따라 배려를 하는 것 공평하게 웹 접근성이 되어야 함
계단에 눈을 치울때 계단과 경사로가 있는데 계단부터 치우는 것 보다 경사로를 치우는 것을 먼저 생각한다면 비장애인과 장애인이 모두 사용할 수 있다. 계단부터 치우면 경사로가 꽁꽁 얼어서 손을 대지못 할 수 있다.
- 웹개발을 할때 장애를 고민하는 것은 선택이 아니라 필수다!
- 돈만벌고 싶은지 재미있고 보람을 느끼는지.. 프로로 살아남기 위해서
이 둘은 엔드조건으로 웹 개발을 해야함(최소한의 시간과 노력하기 위해선)
-웹 접근성 지침 준수
WCAG (Web Content Accessibility Guidelines) 지침을 한번쯤읽어보고
현재 기술만으론 부족할땐 ? WAI-ARIA
WAI-ARIA 해당 가이드 라인을 접근 할수 있게 도와주는 스펙
- 사례집 어떻게 활용해야할지 :
WCAG 보다는 완화한 한국형에 맞게 한 것 -> KWCAG 한국형 웹 접근성 지침 준수
-웹 표준 기술의 활용
- 견고한 구조 설계를 위한 HTML (마네킹)
- 레이아웃 및 스타일을 위한 CSS (옷)
- 동작 및 제 어를 위한 Javascript (인공지능)
구조가 잘짜여있으면 CSS가 쉽다
Part2. 웹 접근성을 고려한 HTML Markup
원칙 4가지
- 인식의 용이성
- 모든 콘텐츠는 사용자가 인식할 수 있어야 한다.
- 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야한다
- 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
- 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.
- 이웃한 콘텐츠는 구별될 수 있어야 한다.
- 운용의 용이성
- 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
- (제목제공): 페이지 프레임
- 모든 기능은 키보드만으로 사용할 수 있어야 한다.
- 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
- 이해의 용이성
- 콘텐츠는 이해할 수 있어야 한다.
- (기본언어 표시) 주로 사용하는 언어를 명시해야 한다.
- "lang" 속성 모든태그에서 사용할 수 있다 lang 속성을 이용하면 페이지 웹 접근성이 높아진다(스크린리더 소리로들을때 접근성 높아짐) (기본언어 설정)
- 콘텐츠는 논리적인 순서로 제공해야 한다.(위에서 아래로내려올때 논리적으로)
- 사용자 입력에는 대응하는 레이블을 제공해야 한다.
- 견고성
- 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.
Tota11y(특정레벨의 헤딩레벨을 볼수있다 크롬앱 툴)
- 컨텐츠 블록에는 보이지 않는 제목을 입력해야 웹 접근성이 높아진다.
- 제목을 입력할 땐 대제목-중제목-소제목 순으로 해야함
- SEO 관점에서도 중요함(검색엔진최적화)
- 정확한 헤딩과 정확한 제목이 있어야 (SEO 됨)
Aria 에 role 속성을 이용해서 랜드마크롤을 이용해서 함 네이티브 규칙 과 섞어 쓸수 없다
컨텐츠 블록에는 제목을 적여야 한다 <h2 class="a11y-hidden">메인 메뉴</h2>
css 숨길때 none으로 사용하면 스크린리더로 읽지 못함 hidden으로 숨겨야함
Css 음수값 사용 하는것 자제
button 이면 button 으로 맞게 사용 컨텐츠 관점으로 만들어야 함
레이블은 메뉴열기
Title 속성은 보충설명 툴팁형태
Aria-label = "메뉴열기"
메뉴열기 메뉴리스트 메뉴닫기 이런식으로 마크업 작성 해야함
Label 과 input을 같이 써야함 input에 id를 label에서 사용하면 둘이 이어짐
<Label for:"input_id">
시맨틱하고 논리적 관점으로 봐야함
클릭했을 때 약관페이지로 이동
스크린리더로
Aria에 dialog 속성을 사용하면 modal창으로 인식할수있음
Aria-modal = true
Aria-labelledby = item_id
'세미나' 카테고리의 다른 글
| 개발 공부 방법, T 자로 관리해서 더 높은 연봉 받기 (0) | 2020.12.21 |
|---|