TIL: 2022-11-07

⚙️ 오늘 배운 주제

웹 접근성 이론 & 리팩토링 과제

 

🐹 오늘의 기분

웹 접근성을 학습하고 페어분과 웹 접근성을 지키지 않은 페이지를 리팩토링하는 과제를 했다. 내일 블로깅 과제가 있어서 오늘은 과제 복습 내용을 올려두려고 한다. 생각보다 할 게 많았던 과제였다. 스크린리더도 써봤는데 코드 작성 방식에 따라 다르게 읽어주는 게 신기했다. 웹 접근성이 중요한 페이지를 만들 때 유용할 것 같다. html로 표를 그려보는 것도 재밌었다.
저번 유닛에서 했던 리덕스 과제를 리팩토링하는 문제도 있었는데 거기까지는 시간이 부족해서 아직 들어가지 못했다.

 

🗝 키워드

웹 접근성, WAI-ARIA

 

🗣 과제 되돌아보기

과제 각 페이지에서 포인트라고 느꼈던 부분이다.

Page 1

웹페이지는 <div>와 <span> 만으로도 표현할 수 있다.
하지만 웹 접근성을 높이기 위해서는 시맨틱 태그를 사용하는 것이 좋다.

Page 2

인라인 요소는 블록 요소 안에 위치해야 한다.
글자를 진하게 하는 <b> 태그나 기울임체로 만들어주는 <i> 태그는 시맨틱 태그가 아니다.
➡️ <b>는 <strong>으로, <i>는 <em>으로 바꿔쓰는 것이 좋다.
인라인 스타일링보다는 CSS 파일 혹은 스타일 컴포넌트를 이용하는 것이 좋다.

Page 3

대체 텍스트는 alt 속성을 이용하여 간단하게 작성해주면 좋다.
너무 광범위해서도 안되고, 너무 길어서도 안된다. 딱 적당하게!
이 때, 이미 아래에서 텍스트로 사진에 대해 설명하고 있다면 alt를 아예 작성하지 않는 것이 아니라 alt="" 이렇게 빈문자열로 남겨둬야 한다.

Page 4

콘텐츠의 논리적 구조를 고려하여 작성하는 것이 좋다.
예를 들어 탭을 작성한다고 가정한다면,

// 이것보다는 
<div>탭1</div>
<div>탭2</div>
<div>탭1 관련 내용</div>
<div>탭2 관련 내용</div>

// 이렇게 쓰는게 스크린리더에서 더 논리적인 구조로 읽힌다.
<div>탭1</div>
<div>탭1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>

하지만 스타일링이 까다로워서 이렇게 작성하는 것이 꼭 정답은 아니다.

Page 5

WAI-ARIA
요소의 이름이 요소의 역할을 충분히 설명하지 못할 때에 role을 작성한다.
여기서는 div가 버튼처럼 쓰이는 경우, role="button"을 추가해주면 스크린리더로 들을 때 더 이해하기 쉬워진다.

<div role="button"></div>

요소 이름에서 요소의 역할을 유추할 수 있을 때에는 굳이 작성하지 않아도 된다.

Page 6

html로 표를 작성할 수 있다.
<caption> 표의 제목
<thead> 열의 제목을 묶음
<tbody> 표의 내용을 묶음
<tr> table row, 열 생성
<th> 열의 제목
<td> table data, 표의 데이터

표의 구조가 복잡하다면 최대한 간소화하거나 scope, id, headers 속성을 사용해 작성한다.

Page 7

사용자 입력에 대응하는 레이블을 제공하는 것이 적절하다.
스크린리더에서 레이블 없이 input 태그를 읽으면 무엇을 입력하는 건지 알 수가 없기 때문.

<label for="비밀번호"></label>
<input type="text" id="비밀번호" />

placeholder가 있더라도 레이블을 써주는 것이 좋다.
placeholder는 내용을 입력하는 순간 사라지기 때문에 일부 스크린리더에서는 읽지 못하기 때문이다.

input 요소 옆에 텍스트로 어떤 요소를 입력해야하는지 알려주고 있어도 <label>로 <input>과 연결해주는 것이 좋다.
WAI-ARIA의 aria-label을 활용할 수도 있다. 하지만 이건 꼭 필요한 경우가 아니라면 쓰지 않는 것이 좋다.