70 웹접근성 개선하기
70.1 건너뛰기 링크(skip - navigation)
키보드를 이용하여 홈페이지를 이용, 조작하는 분들은 키보드 탭으로 이동시
메뉴 등으로 인해 본문으로 이동하는 오래 걸리기 때문에 키보드 조작수를 감소시켜줄수 있는 기능이 필요합니다.
이 때 필요한게 본문 바로가기 등의 건너띄기링크 입니다.
일반 사용자들 눈에는 안보이지만
키보드 TAB을 이용하실 경우 본문 바로가기 메뉴가 시각적으로 구현 및 접근하여 동작이 가능하도록 제공하였습니다.
base.html
<div id="u_skip">
<a href="#content"><span>본문 바로가기</span></a>
</div>
styles.css
/*웹접근성 본문바로가기*/
#u_skip {position: relative;z-index: 3000;}
#u_skip span {display: inline-block;padding: 2px 6px 0 0;font-size: 13px;line-height: 26px;color: #fff;letter-spacing: -1px;white-space: nowrap;}
#u_skip a {position: absolute;top: -30px;left: 0;width: 138px;border: 1px solid #4ec53d;background: #333;text-align: center;}
#u_skip a:hover, #u_skip a:active, #u_skip a:focus {width:100%; height:auto; margin:0; padding:5px 0;top: 0px;font-size:12px; line-height:1; text-decoration:none;}
70.2 텍스트가 아닌 콘텐츠 적절한 대체 텍스트 제공
이미지의 정보가 스크린리더 사용자에게 동등하게 전달될 수 있도록 alt속성을 활용하 여 대체 텍스트를 제공해야 하며, 이미지의 내용이 긴 경우 이미지에는 제목을 alt속성에 제공 해야합니다.
alt는 이미지가 없거나 엑박이 뜰때 보여지는 텍스트 title : 이미지 위에 마우스를 오버했을경우 나타나는 텍스트
<div class="text-center">
<img class="lazyload img-fluid px-3 px-sm-4 mt-3 mb-4" data-src="{{list.pb_detail__img_url}}" onerror="this.src='대체이미지.jpg'" style="width: {{list.pb_detail__img_size}}rem;" alt="{{list.pb_detail__sub_title}}" title="{{list.pb_detail__sub_title}}"/>
</div>
70.3 레이블 제공- 입력서식 대응 레이블
입력서시과 대응되는 제목 텍스트가 존재할 경우
입력서식이 단독일경우 title 속성으로 레이블 제공
<label for="cse-search-input-box-id1" class="toast hide">구글검색1</label>
<input type="text" id="cse-search-input-box-id1" class="form-control bg-light border-0 small" placeholder="Search for..." size="500"aria-label="Search" aria-describedby="basic-addon2" onKeypress="javascript:if(event.keyCode==13) {gOpen(1);}">
Comments
Login: