웹 접근성을 향상시키기 위해서는 여러 태그 속성들을 적절히 사용해야합니다.
그 중에서도 alt와 title 속성이 있는데요
이 둘의 차이점을 알아볼까요?🤗
alt 속성
이미지를 볼 수 없는 환경에서도 내용을 확인할 수 있는 대체 텍스트입니다
| 사용 가능 태그 | <img/>, <area />, <input type="image" /> | |||
| 유의사항 | 1. 명쾌하고 짧은 대체 텍스트 제공 2. 파일명을 대체 텍스트로 제공하는 것은 ❌ 3. 이미지 맵에 대한 대체 텍스트 제공 4. 의미없는 이미지에는 공백으로 대체 5. 의미를 제대로 파악할 수 없는 대체 텍스트 지양 6. 의미있는 이미지에 무의미한 대체 텍스트 제공 지양 7. '~하십시오.', '~됩니다.' 등 친절한 설명을 자제 (간단명료) 8. '링크', '여기', '클릭', '바로가기' 등의 목적지를 구체적으로 알려주지 않는 단어 사용❌ |
|||
| ❌잘못된 예❌ |
|
|||
| ⭕올바른 예⭕ |
|
title 속성
해당 객체에 대한 제목 또는 특성을 설명하기 위한 것입니다.
| 사용 가능 태그 | <html>, <head>, <title>, <base>, <basefont>, <meta>, <script>, <param> 을 제외한 모든 태그 |
|||
| <a> | 이동할 목적지에 대해 명확히 이해가 가능하도록 title을 제공해야 합니다.
|
|||
| <abbr> | 축약된 단어들(ex. 'www', 'url', 'html', 'IT' 등)을 정의하는 태그
|
|||
| <acronym> | 두 문자어로 구성된 단어들을 정의하는 태그이나 HTML5에서는 삭제되었습니다. <abbr>과 의미가 혼동되기 때문에 <acronym>을 사용하지 않고 <abbr>로 통합하여 사용합니다.
|
|||
| <input> | input type 종류 : button, checkbox, file, image, password, radio, text, submit 등 radio나 checkbox 의 경우는 함께 쓰는 <label>에 사용자를 위한 텍스트를 제공합니다. 만약 input에 label이 연결되지 않았을 경우, 꼭 title을 사용하여 정보를 제공하도록 합니다.
|
|||
| <iframe> | (가능한 한 사용을 지양합니다) 프레임 제목은 프레임의 내용을 인식할 수 있도록 짧고 간결하게 제목을 제공해야 합니다. 또한 내용이 없는 빈 프레임의 경우에도 title="빈 프레임" or "내용 없는 프레임"과 같이 title을 제공해야 합니다.
|
alt 속성과 title 속성의 의미는 전혀 다르기 때문에
사용 되어야 하는 곳에 알맞게 사용이 필요합니다.
❗ 또한 title 속성을 alt 속성으로 대신해서 사용해서는 안 됩니다 ❗
'📁 Language > 🌏 HTML' 카테고리의 다른 글
| [html] 모바일 상태바 색상 변경하는 방법 (0) | 2021.11.26 |
|---|---|
| [html]대화형 컨트롤에 대해 알아보자 (0) | 2021.07.31 |
