경기도청 클론코딩(적응형)

📎 https://github.com/eveneul/ggd
📎 https://eveneul.github.io/ggd

웹 표준, 웹 접근성에 맞게 tabindex, role, aria-를 활용해서 마크업했습니다
익스플로러 서비스 종료됨에 따라 float보다는 flex를 사용했고,
자바스크립트로 기능 구현은 swiper와 탭으로 focus가 될 때 aria-seleted="true"가 설정되게끔 구현했습니다

blind

화면에서는 콘텐츠를 숨겨야 하지만 스크린 리더에서는 읽혀야 하는 경우가 있습니다

❌ 좋지 못한 예

width: 0;
height: 0;
display: none;
visibility: hidden;
font-size: 0;
line-height: 0;
opacity: 0;

위와 같은 속성을 사용할 경우 화면에서 영역이 잡히지 않기 때문에 스크린 리더로 읽을 수 없어 웹 접근성에 좋지 않은 속성들입니다

🔵 좋은 예

position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
margin: -1px;

위와 같은 속성들로 blind라는 클래스에 적용하게끔 설정했습니다
콘텐츠는 숨기면서 스크린 리더로는 웹을 정상적으로 읽히기 때문에 눈으로 웹을 사용하기 불편한 유저들에게 정확한 콘텐츠를 전달할 수 있습니다

Tabindex

메인 슬라이드 영역에서 이미지 양쪽으로 있는 검은색 버튼으로는 Tab으로 접근이 가능하지만, 아래에 있는 세 개의 버튼은 Tab으로 접근이 불가능했습니다

이럴 때 tabindex으로 접근이 가능한데, "-1"이면 접근이 불가능하고, "0"이면 접근이 가능합니다

<div class="swiper-controls">
  <a href="" class="btn-set prev" tabindex="0"><span class="blind">이전</span></a>
  <a href="" class="btn-set play-control stop" tabindex="0"><span class="blind">정지</span></a>
  <a href="" class="btn-set next" tabindex="0"><span class="blind">다음</span></a>
</div>

aria-selected

tab으로 어떠한 영역을 포커스했을 시 스크린 리더기에서는 그 영역이 선택되었다고 알려 주어야 합니다

예를 들어 두 번째 경기도의 더 큰 평화를 위한 시작..이 포커스 되었을 때 HTML에서는 aria-selected="true"가 되어야 하는데 각각 섹션마다 HTML로 적용하는 것이 아닌 모든 a 태그에 포커스가 되었을 시 기존에 설정되어 있을 aria-selected를 지우고, aria-selected="true"로 설정하여 다른 a 태그로 이동하면 그전에 적용되었던 aria-selected는 지워 버릴 수 있습니다

	$('a').focus(function (e) {
		$('a').removeAttr('aria-selected');
		$(this).attr('aria-selected', true);
	});

MENU Tab, Keyup(13) Event

기존 경기도청 사이트와 제가 한 클론코딩의 차이점이 무엇이냐면 바로 매뉴에서 원하는 카테고리로 바로 변경할 수 있는 것입니다

기존 경기도청 사이트

클론코딩 작품

기존 경기도청 사이트는 매뉴 탭에서 3번째에 있는 '정보공개'로 이동할 때 뉴스 탭 안에 있는 작은 링크 하나하나까지 이동하고 그 다음에서야 민원, 정보공개로 이동할 수 있었습니다

하지만 스크린 리더기를 사용하는 사람이라면 이러한 점이 불편할 수 있겠다 싶어서 저는 keyup 이벤트로 엔터 키를 눌렀을 때에 링크 박스가 보이게끔 설정했습니다

	$('.header .menu-item > a').click(function (e) {
		e.preventDefault();
	});

	$('.header .menu-item > a').keyup(function (key) {
		if (key.keyCode == 13) {
			$(this).siblings('.sub-menu').css('display', 'flex');
		}
	});

.menu-item을 클릭했을 때 따로 링크가 걸려져 있지 않아서 e.preventDefault()로 a 태그의 기본 동작(href="" 링크로 이동)을 막아 주었고,

keyup 이벤트로 keyCode가 13이면 (Enter) siblings 메소드를 통해 형제로 있는 .sub-menu가 display: none에서 display: flex로 되게끔 설정했습니다

role

<form action="" method="get" role="search">
	<fieldset>
		<legend class="blind">검색하기</legend>
		<input type="text" placeholder="검색어를 입력하세요" class="search-input">
		<a href="" class="btn-akc"><span class="blind">최근 검색어 보기</span></a>
		<a href="" class="btn-search"><span class="blind">검색하기</span></a>
	</fieldset>
</form>

role은 웹 태그에 용도, 쓰임새를 정확히하기 위함입니다

경기도청 클론 코딩을 하면서 처음 접해 보는 것이라서 구글링도 많이 하고, 네이버나 다른 사이트를 참고해서
form에 role="search"를 적용시켰습니다

느낀점: 실무에서는 role, aria-를 어디까지, 무엇을 써야 하는지 궁금함.. tabindex를 알았을 때는 머리에서 상투스 울리듯이 너무 재미있었음..