접근성 주의해야 할 점

웹접근성 프로젝트를 하면서 새롭게 알았던 점, 의외였던 점이 많았다.

왜 이렇게 까지 해야 할까 라는 의구심이 들수도 있지만 직접 경험해보면 이해와 납득이 되는 점이 많았다.

접근성은 프로젝트마다 검수방법이 조금씩 다르다고 하던데 이 글을 읽고 '이런게 있고 유의해야 겠다' 라는 생각으로 보았으면 좋겠다✍️✍️

 

 

(1) 헤딩태그

• `h1` : 로고링크 영역
• `h2~h3` : 컨텐츠 타이틀
• 시각장애인 사용성을 고려했을 때 `h1`태그는 대부분 "홈"으로 인식해 로고로 사용한다.
• 단, SEO 위해 `h1`을 로고가 아닌 본문 타이틀로 하는 경우도 있다.

 

(2) 이미지 alt

• `<img src="" alt="">` 에서 이미지 설명 부분인 `alt`는 200자 넘어가면 스크린리더 사용자가 내용을 인지하기가 어렵다고 한다.
  이를 대체텍스트(blind) https://jmjmjm.tistory.com/78 로 대체 하는 것이 좋다.

 

(3) 로그인화면 포커스 순서

로그인화면 포커스 순서

 

(4) title 속성

• input에 label이 따로 있지 않을 경우 해당 input에 title을 넣어줘야 한다.
  • gpt에서는 title 속성을 읽어 주지 않는 경우도 많다고 해서 `aria` 속성을 권고하고 있다.
  • aria속성을 하는 것이 더 확실한 것 같다.
• input에 placeholder 내용도 넣어줘야 한다. (단, "입력", "선택" 은 빼준다(애초에 input이라는 것이 저 두단어를 포함하므로))
• 일부 스크린리더기는 placeholder를 읽어주지 않는다고 한다. 

<span class="label">주제</span>
<input type="text" placeholder="입력해주세요" title="주제">

<span class="label">배정번호</span>
<input type="number" placeholder="3자리 입력해주세요" title="배정번호 3자리">

<button type="button" class="btn-delete">
	<span class="blind">파일명.pdf 삭제</span>
</button>
<!-- 또는 -->
<button type="button" class="btn-delete" aria-label="파일명.pdf 삭제"></button>

• `<frame><iframe><abbr><a><img><input><label>` 요소 이외에 사용하는 것은 접근성 관점에서 사용을 지양한다.
• title속성은 모바일 기기, 키보드 사용자, 보조 기술 사용자에게 접근이 어려울 수 있어(터치 문제) 모든 사용자가 쉽게 접근할 수 있는 방식으로 제공하는 것이 좋다(blind)

 

(5) aria-label

<button type="button" class="btn-delete" aria-label="파일명.pdf 삭제">
	삭제텍스트
</button>

• 스크린리더기로 읽어주면 button 안의 "삭제텍스트"는 `aria-label` 속성으로 인해 읽어주지 않는다.
• `aria-label` 속성은 요소의 접근 가능한 이름을 제공하며 대부분의 스크린리더기에서 요소의 내부 텍스트보다 우선 순위가 높다고 한다.
• 이는 `aria-label` 텍스트가 앵커 텍스트를 재정의하는 것을 의도한 것.

(6) input type="radio", "checkbox" required

1. input type="radio" 일 경우

• `<label>`안에 대체텍스트를 넣어준다.
• `required` 속성을 넣어준다.

<div class="label">구분<span class="required"><strong class="blind">필수입력</strong></span></div>
<div class="forms-box">
	<input type="radio" name="rdo" id="rdo1" required>
    <label for="rdo1">선택<span class="blind">구분</span></label>
</div>
<div class="forms-box">
	<input type="radio" name="rdo" id="rdo2" required>
    <label for="rdo2">미선택<span class="blind">구분</span></label>
</div>

 

2. input type="checkbox" 일 경우

• "필수입력" 텍스트가 아닌 "한 가지 이상 필수 선택" 을 넣어준다.
• `required` 속성은 넣지 않는다.

<div class="label">구분<span class="required"><strong class="blind">한 가지 이상 필수 선택</strong></span></div>
<div class="forms-box">
	<input type="checkbox" name="chk" id="chk1">
    <label for="chk1">선택1<span class="blind">구분</span></label>
</div>
<div class="forms-box">
	<input type="checkbox" name="chk" id="chk2">
    <label for="chk2">선택2<span class="blind">구분</span></label>
</div>

 

 

(7) 테이블 tabindex

• 테이블 가로스크롤, 세로스크롤이 생길 경우 포커스가 되어야 한다.
  이 때 `tabindex="0"` 을 사용해 포커스를 주어 화살표 키를 사용해 내용을 볼 수 있도록 하기 위함이다.

---

 

일단은 여기까지 정리.. 차후에 생각나면 더 추가해야겠다✏️