210617 오늘은 HTML 태그 중 링크(a), 이미지(img), 목록(list) 태그에 관해 학습했다.
Today's tips
VSC 자동 태그 닫기가 적용이 안된다면 하단에 HTML 설정이 되어 있는지 확인한다.
창 크기가 작어서 긴 문장 등을 보기 불편하면 alt + z 키를 누른다.
웹 접근성 참고 사이트 : 네이버 널리
1. 웹 접근성에 준하는 마크업
- pdf파일과 같은 형식의 경우 링크에 텍스트를 명확하게 표기한다.
<a href="한국형웹콘텐츠접근성지침2.1.pdf" target="_blank" title="새 창">한국형 웹 콘텐츠 접근성 지침 2.1 가이드라인 내려받기</a> - img의 경우 alt에 적절한 대체 텍스트를 써 준다.
(이미지에 있는 텍스트는 모두 작성해야 하고 이모티콘, QR코드 등도 충분한 설명을 해야 함) - IR 기법 > 특수문자, 기호 포함, 조직도, 차트 등 복잡한 콘텐츠의 경우 숨김 처리로 대체 텍스트를 제공한다.
- 이미지에 해당하는 텍스트를 a태그로 묶어서 중복 제공되지 않도록 제공한다.
묶을 수 없는 경우에는 중복되더라도 이미지에 대한 대체 텍스트를 제공한다.
<a href=”#”><img src=”thumb01.jpg” alt=”” /><span>하원 후 스스로 공부하는 비결은?</span></a>- 지도의 같은 경우 위치를 잘 찾아갈 수 있게끔 설명해 주어야 한다.
ex)불정교 사거리에서 정자지하차도 방면으로 직진 후 한 블럭 지나 좌측에 위치한 NHN 그린팩토리 - 이미지의 텍스트가 너무 많을 경우에는 longdesc(참고 파일)라는 속성을 넣어 준다.
- h1태그는 주로 로고이기 때문에 콘텐츠의 제목은 h2부터 사용하자.
- 이미지 옆에 설명이 있는 경우에는 대체 텍스트를 간략하게 쓸 수 있다.
<li><img src="images/431_i4.jpg" alt="매실장아찌 요리과정 2" />매실의 꼭지를 이쑤시개로 제거한다.</li>- 주 메뉴의 경우 대표하는 제목이 보이지 않더라도 h2등의 요소로 '메뉴'등의 제목을 지정해 준다.
UI개발자 in Hivelab