📂 광주은행 [웹접근성 전담반] 프로젝트 정리
- 프로젝트명: 광주은행 웹접근성 전담반
- 사이트유형: 스마트뱅킹
✅ Check Point
- 웹접근성의 이슈와 해결방법 정리
⚠️ 대체 텍스트가 부적절한 이미지
⌨ 대체텍스트에 대한 오류는 [alt, IR기법, WAI-ARIA]를 사용하여 처리하였다.
❗alt 속성
이 부분은 기존 이미지에는 '광주 와뱅크'라는 로고로 화면에 표시되있지만, 대체텍스트에는
'광주은행'으로 제공되어, 간단하게 alt 속성을 이용하여, '광주 와뱅크'로 수정하였다.
❌ Before
<img class="logo" src="../images/logo.png" alt="광주은행">✔️ After
<img class="logo" src="../images/logo.png" alt="광주 와뱅크">❗IR 기법
기존 타 사이트에서도 자주 사용하는 .blind에 CSS를 넣어 사용하였다.
이건 이번 접근성 심사에서 오류부분에 없었지만, 대체텍스트에 대한 접근성 내용인 만큼 함께 넣었다.
예시 UI는 인스타그램과 같이 좋아요 ♥️아이콘이 들어가는 형태
🔷 HTML
<div class="like">
<em><span class="blind">좋아요</span></em>
<span>9</span>
</div>
🌈 CSS
.blind {
ovflow:hidden;
position:absolute;
width:1px;
height:1px;
clip:rect(0 0 0 0);
margin:-1px;
padding:0;
color:transparent;
}❗WAI-ARIA
오류 내용: 본문 이미지 콘텐츠에 대체 텍스트가 제공되지 않아 스크린리더 초점이 접근되지 않습니다. 따라서 스크린리더 사용자는 숨김 텍스트가 제공된 것을 파악하기 어렵습니다.
🌟 본문 이미지 콘텐츠에 초점이 접근되도록 대체 텍스트를 제공하고 이후 숨김 텍스트를 탐색할 수 있도록 제공해야 합니다.
❌ Before
<div class="detail_wrap">
<img src="../images/img.jpg" alt="다음 내용 참조">
<div class="blind">
<h2>제목</h2>
<p>이미지 콘텐츠 본문 내용...</p>
<p>이미지 콘텐츠 본문 내용...</p>
<p>이미지 콘텐츠 본문 내용...</p>
<p>이미지 콘텐츠 본문 내용...</p>
</div>
</div>✔️ After
<div class="detail_wrap">
<img src="../images/img.jpg" alt="다음 내용 참조" aria-describedby="img-desc">
<div id="img-desc" class="blind">
<h2>제목</h2>
<p>이미지 콘텐츠 본문 내용...</p>
<p>이미지 콘텐츠 본문 내용...</p>
<p>이미지 콘텐츠 본문 내용...</p>
<p>이미지 콘텐츠 본문 내용...</p>
</div>
</div>⚠️ 슬라이드 관련 초점오류 및 대체텍스트 오류
⌨ 슬라이드 영역은 swiper js로 구현되었고, 오류에 대해 해결하기 위해 먼저 swiper api문서를 확인해보았다.
❗부적절하게 접근되는 초점
오류 내용:
1. 스크린리더 순차탐색 시 가로 스크롤이 실행되지 않고 숨겨진 슬라이드로 초점만 접근되어 레이어가 틀어지는 현상이 발생합니다.
2. 슬라이드 변경 컨트롤의 대체 텍스트가 'Go to slide 1'등 영문으로 제공되었습니다.
🌟 대체 텍스트를 국문으로 변경하고, 상태정보를 함께 제공해야 합니다.
해결 내용:
1. swiper 옵션 중 on:{} 추가하여, jQuery 활용해, aria-hidden="ture"인 숨겨진 영역에는 tabindex="-1"을 넣어 부적절한 초점이동에 대한 이슈를 해결하였다.
2. swiper 옵션 중 ally:{paginationBulletMessage: '{{index}}번째 슬라이드로 가기'}를 추가하여, swiper에서 기본제공하는 pagination에 대한 영문 대체텍스트에서 원하는 국문 대체텍스트로 변경하였다.
🔷 HTML (✔️ After)
<div class="swiper-container board-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title-wrap">
<h3 class="title">
<!-- ... -->
</h3>
<img src="../images/img.png" alt="이미지">
</div>
</div>
<!-- //이하생략 -->
</div>
</div>
🔶 SCRIPT (✔️ After)
var sliderImg = new Swiper(".board-slider", {
speed: 800,
autoplay: {
delay: 2200,
disableOnInteraction: false,
},
loop: true,
observer: true,
ovserveParents: true,
pagination: {
el: ".swiper-pagination",
type: "bullets",
clickable: true,
},
a11y: {
paginationBulletMessage: '{{index}}번째 슬라이드로 가기',
},
on: {
afterInit: function() {
var swiperThis = $(this.el);
swiperThis.find('.swiper-slide').attr('aria-hidden', 'true').find('> *').attr('tabindex', '-1');
swiperThis.find('.swiper-slide-active').attr('aria-hidden', 'false').find('> *').attr('tabindex', '0');
swiperThis.find('.swiper-pagination-bullet-active').attr('title', '현재 슬라이드');
swiperThis.find('.botSwiper_autoplay_control button').attr({'tabindex':'0', 'role':'button', 'aria-label':'슬라이드 정지'});
},
transitionEnd: function() {
var swiperThis = $(this.el);
swiperThis.find('.swiper-slide').attr('aria-hidden', 'true').find('> *').attr('tabindex', '-1');
swiperThis.find('.swiper-slide-active').attr('aria-hidden', 'false').find('> *').attr('tabindex', '0');
swiperThis.find('.swiper-pagination-bullet').removeAttr('title');
swiperThis.find('.swiper-pagination-bullet-active').attr('title', '현재 슬라이드');
}
}
});
$('.botSwiper_autoplay_control button').on('click', function() {
var $this = $(this);
$this.toggleClass('on');
if($this.hasClass('on')){
$this.attr('aria-label', '슬라이드 시작');
sliderImg.autoplay.stop();
return false;
} else {
$this.attr('aria-label', '슬라이드 정지');
sliderImg.autoplay.start();
return false;
}
});