[HTML] 시맨틱 코드 작성

시맨틱한 코드 작성

 

1. table > tr > th [scope = " "] 

table태그의 th태그에 scope속성 사용으로
(scope = "row", scope = "col")
row, col에 정보 정렬 기준 등으로

시맨틱한 정보를 전달 할 수 있다

 

2. a태그 target = "_blank" 일 때   안내하기

<a href = "구글" target="_blank">구글로 이동(새창에서)</a>

a 태그의 target속성으로 _blank를 사용하여
새로운 창을 생성하여 사용하면

텍스트 리더를 쓰는 분들은
새 창으로 전환된 것에 당황할 수 있기 때문에
(새창으로) 와 같이 안내문을 사용하는 것이 좋다.

 

3. img alt 사용

<img src="그림" alt="그림(새창으로 이동)">

 

img 태그 사용 시 alt로 내용 설명
alt를 사용하지 않으면

스크린 리더는 src를 읽게됨

 

4. <progress> <meter> 

이 또한 2번과 같이 텍스트 리더를 위해
컨텐츠에 설명을 적어주자

 

5. <address>

단체, 조직, 사람의 연락처나 정보를 입력할 때 사용

6. href의 tel:

href="tel:010-1234-4567" 과 같이
tel : 을 사용하게 되면
전화 관련 기능을 자동 실행하게 됨

7. href의 mailto:

<a href = "mailto:test@naver.com">
이 기능 이용 시 메일의 제목과 참조를 추가로 작성해서 사용이 가능하다.

 

8. 숨겨진 태그 이용

아래와 같은 숨김 기능들이 있지만, 접근성면이나 공간차지 등의 문제점이 있기 때문에 쓰지 않는다. 

opacity: 0
공간 o, 이벤트 o

visibility: hidden
공간 o, 이벤트 x

display: none
공간 x, 이벤트 x

대신 아래와 같은 숨김스타일을 이용하여 설명과 같은 정보를 제공 할 수 있다.

.screen_reader_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

width : 0, height : 0인 경우 이를 무시하는 스크린 리더도 있기 때문에 1로 한다음 마진을 -1 처리

 

9. <dt> <dt> <dd> 이용

뜬금없는 위치에 나열된 문자 같은 경우

뜬금없는 위치에 나열된 문자 같은 경우
위와 같은 처리를 <dd>에 해주면

보이진 않고, 스크린 리더로 읽을 때
관련 설명을 들을 수 있게 됨

 

10. aria-label 속성 이용

접근가능한 리치 인터넷 어플리케이션(Accessible Rich Internet Applications, ARIA)
전용 태그이다.

11. aria-hidden 속성 이용

스크린 리더가 읽을 필요가 없는 태그에게
aria-hidden = "true"를 하여 감출 수 있다.

12. 이모지 role, aria-label 이용

이모지 사용 시 role속성에 img 임을 명시하고
role="img" aria-label="이모지내용" 이런식으로 나타내면

이모지 사용 중이고, 내용은 이모지 내용이구나 판단하여
이모지내용으로 해석하게 된다.

 

nulli - 스크린리더 관련 참고

https://nuli.navercorp.com/