웹접근성_01
01) 웹 접근성 : 웹 페이지에 잘 접근할 수 있는지 없는지의 정도를 웹 접근성이라고 함.
02) 웹 접근성을 지켜야하는 이유 :
- 장애인 차별 금지법(장차법) - 장애인들도 비장애인들과 동등하게 전자정보를 사용할 수 있게 해야한다는 법이 있음. 안지킬시 형사고발 삽가능.
- 웹의 힘은 보편성에 있다. 장애의 구애 없이 모든 사람이 웹에 접근할 수 있도록 하는 것이 웹의 필수이기 때문.
장애의 종류
→ 신체적장애 - 시각장애 : 스크린리더 사용 / 시야장애, 시력저하장애 : 화면확대기능 이용 / 색약, 색맹 : 고대비 / 중증운동장애 : 보조기기 이용하여 웹 사용 / 청각장애 : 시각을 통하여 정보인식
→ 인터넷 속도가 느려 UI가 깨져 웹 사용이 어려운 경우도 장애
→ 맥 사용자가 윈도우에서만 사용하게 되어있는 웹을 이용 못하는 것도 장애임
WCAG : W3C에서 발표한 웹 콘텐츠 접근성 지침 / Web Content Accessibility Guidelines
KWCAG : 해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침 ( WCAG의 한국ver )
/* 뷁 */
1. 적절한 대체 텍스트 제공 : 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야함
→ 의미있는 이미지는 alt 속성에 대체텍스트 넣어주기
ex) <img src="btn_next.png" alt="다음 콘텐츠 보기" >
만약 alt 에 설명문구가 길어지는 경우라면 마크업으로 대체 텍스트 제공
ex) <img src="banner.png" alt="" />
<p class="blind">
주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료,
신용이자 연 3.5% 60일 우대
</p>
이런 식으로 alt는 빈칸으로 두고 p태그나 span태그로 대체택스트 만들어줘야함, 근데 대체택스트 작성해놓고 display:none 이나
display:hidden 스타일을 걸어두면 스크린리더기가 읽어주지 않기 때문에 font-size:0 이나 화면밖으로 빼주던 해줘야할거같음
→ 데이터 차트나 복잡한 콘텐츠의 이미지도 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체텍스트를 제공해야함.
ex) <img src="chart.png alt="">
<table class="blind">
<caption>...</caption>
<thead><tr><th scope="col">년도</th><th scope="col">학과</th><th scope="col">지원 수</th></tr></thead>
<tbody><tr><td>2003</td><td>언어학</td><td>10200명</td></tr></tbody>
</table>
→ 의미있는 이미지인 경우 이미지가 background-image로 깔린 경우 에도 대체 택스트를 넣어줘야 함
ex) <a href="#" style="background:url('./btn_next.png');">다음 콘텐츠 보기</a>
→ 의미없는 이미지에도 alt속성은 무조건 제공해야함 (웹 표준)
의미없는 이미지라고 alt 속성을 안넣으면 스크린리더는 src="123456.jpg" 를 읽어주고,
alt=" " 로 빈칸을 넣어도 src="123456.jpg" 를 읽어 줌
ex) <img src="deco.jpg" alt="" /> (O)
<img src="deco.jpg" /> (X)
<img src="deco.jpg" alt=" " /> (X)
→ 이모티콘 이미지의 의미도 대체텍스트로 자세히 설명해줘야함
ex) <img src="icon_brownbear.jpg" alt="행복해하는 갈색 곰 이모티콘" /> (O)
<img src="icon_brownbear.jpg" alt="이모티콘" /> (X)
→ QR코드는 시각장애가 있는사람들이 해당 링크 주소를 알 수 있도록 대체택스트를 넣어줘야함
ex)
</a>
→
뀨
내일 계속 ~