티스토리 alt 태그 입력 방법 - 꼭 써야만 하는 이유?

---

alt, caption 입력방법

웹페이지 관리를 하다보면 특히 공공기관에서는 '장애인차별금지 및 권리구제 등에 관한 법률 (장차법)' 이나 '정보통신접근성 지침' 등을 권고하고 이를 엄격히 준수하고 있습니다. 우리나라 뿐만 아니라 미국, 유럽 등의 정부기관에서도 이러한 제도를 의무화하고 있습니다. 

 

블로그 또한 웹접근성 및 사용자 경험, SEO(검색최적화) 측면에서 매우 중요하기 때문에 alt(대체텍스트)와 caption(이미지설명)을 사용하도록 권장하고 있습니다. 웹접근성이 무엇인지 알아보고, html 태그 중에 하나인 alt 또는 caption 태그 사용방법에 대해 포스팅해 보겠습니다. 

서울 숲 공원에서 산책중인 강아지

1. alt 속성 태그

alt 속성은 이미지가 로드되지 않거나 시각장애인이 화면 읽기 도구를 사용할 때 이미지의 내용을 설명하는 데 사용됩니다. 즉 웹접근성, SEO, 오류 대응을 위해 필수적으로 입력해야 합니다.

 

1) 웹 접근성 (Accessibility)

- 시각 장애인들은 스크린 리더(Screen reader)를 사용하여 웹사이트를 탐색합니다.

- 이미지에 alt 텍스트가 있으면, 이 기기가 해당 내용을 읽어줍니다.

- alt가 없으면 이미지가 무엇을 나타내는지 알 수 없어 정보 손실이 발생합니다.

 

▷ 스크린리더(Screen Reader): 시각 장애인이나 시력이 약한 사람들이 컴퓨터나 스마트폰 같은 디지털 기기를 사용할 수 있도록 도와주는 보조 기술 소프트웨어입니다. 화면에 표시된 내용을 음성으로 읽어주거나 점자 장치에 출력해주는 역할을 합니다. 시각장애인 등 모든 사용자에게 동등하게 디지털 정보를 접할 수 있도록 합니다.

 

2) 이미지가 로드되지 않을 때 대체 설명 제공

- 이미지가 깨지거나 네트워크 문제로 안 보일 경우, alt 내용이 대신 표시되어 사용자 혼란을 줄입니다.

 

3) 검색엔진 최적화(SEO)

구글 등의 검색엔진은 이미지를 이해할 수 없기 때문에, alt 텍스트를 기반으로 이미지를 인식하고 검색 결과에 포함시킵니다.

 

 

alt 테그가 있는 경우 html 소스 결과

alt 태그 html 입력결과 화면

 

이 예시에서는 이미지가 로드되지 않더라도 사용자는 "공원에서 빨간 공을 물고 뛰노는 갈색 푸들 강아지"라는 설명을 통해 이미지의 내용을 이해할 수 있습니다. 즉, 사용자 맥락 제공, 정보 전달 보완을 위해 입력해야 합니다.

 

 

2. caption(캡션) 태그

caption은 이미지에 대한 추가 정보를 제공하여 사용자가 이미지의 맥락을 더 잘 이해할 수 있도록 도와줍니다.

 

1) 문맥 이해 보조

이미지만 봐서는 내용을 이해하기 어려운 경우, 캡션이 설명을 보완해줍니다.

 

2) 사용자 경험 향상

특히 블로그나 뉴스기사, 학술자료에서는 이미지와 관련된 설명이 있으면 정보 전달이 훨씬 효율적입니다.

 

3) 접근성과 연결됨

figcaption 태그와 함께 사용할 경우, 시각장애인에게도 이미지에 대한 추가 설명을 제공할 수 있습니다.

 

 

caption 테그가 있는 경우 html 소스 결과

caption 태그 html 입력 결과화면

 

caption은 이미지에 대한 추가 정보를 제공하여 사용자의 이해를 돕는 역할을 하고 있습니다. 

---

티스토리 편집기를 사용해서 alt, caption  입력방법

편집기에서 아래와 같은 기능을 제공하지 않으면, html 편집모드에서 직접 입력해야하는 번거로움이 있습니다. 티스토리 편집기를 통해 이미지에 대한 적절한 태그를 입력하고  적용되었는지 확인하시면 될 것 같습니다.

 

아래 강아지 이미지를 본문에 넣은 상태에서 입력해 보도록 하겠습니다.

 

 

티스토리 편집기 태그 입력방법 안내

 

html 소스코드 적용되었는지 확인방법

티스토리 편집기 HTML 모드로 전환하는 방법

티스토리 html 편집 모드 소스 확인결과

반응형

꼭 입력 해야 하는가?

한국의 KWCAG, 미국 ADA 등 공식 표준이나 법적 요건 때문에 필수입니다. "꼭 해야만 하느냐?"는 맥락에 따라 달라지지만, 좋은 웹사이트를 만들려면 반드시 하는 게 바람직합니다.

 

대한민국: KWCAG (한국형 웹 콘텐츠 접근성 지침)

• 법적 근거:
• 「장애인차별금지 및 권리구제 등에 관한 법률 (장차법)」
• 「정보통신접근성 지침」 및 「웹 접근성 품질인증 기준」

 

미국: ADA + Section 508

• 법적 근거:
• ADA (Americans with Disabilities Act) - 장애인의 디지털 정보 접근 보장
• Section 508 of the Rehabilitation Act - 연방 정부 및 수혜 기관 웹사이트는 접근성 준수 필요

 

유럽연합: EU Web Accessibility Directive

• 대상: 모든 공공부문 웹사이트 및 모바일 앱
• 요구사항: WCAG 2.1 Level AA 준수 의무화, alt와 figcaption 등은 명시적으로 필요한 요소

---

내 콘텐츠는 모두가 이해할 수 있어야 한다.

그 누구도 배제되지 않도록 나는 단 한 줄의 alt, caption에도 정성을 담는다.

---

올바른 블로거의 자세 

1. "보이는 사람만을 위한 콘텐츠가 아니다"라는 인식

시각장애인, 스크린리더 사용자, 이미지가 로딩되지 않는 환경을 고려해야 한다. alt는 단지 SEO용이 아닌, 누군가에게는 유일한 설명 수단이라는 점을 인식해야합니다.

 

2. alt는 기능 중심, caption은 맥락 중심

alt와 caption은 서로 중복되지 않게, 서로 보완적으로 작성하는 것이 이상적입니다.

 

3. 장식용 이미지에는 alt=""으로 명확히 처리

의미 없는 배경 이미지, 화살표 아이콘 등은 스크린리더가 무시하도록 alt=""을 써야 한다. 이 역시 접근성을 높이는 정확한 사용법입니다.

 

4. SEO보다 ‘사람’을 먼저 생각하는 태도

alt를 키워드 뭉치로 쓰는 것은 오히려 사용자 불편을 초래하고, 검색엔진도 이를 감지해 감점할 수 있습니다.

 

5. 정성 어린 태그 작성이 곧 블로그 신뢰도 향상

사용자가 텍스트 설명만으로도 이미지를 그려볼 수 있다면, 그것이 바로 진짜 고퀄리티 블로그입니다. 이는 곧 브랜드 신뢰도와 충성도 있는 독자층 확보로 이어집니다.

 

 

블로그 작성자가 alt와 caption 태그를 올바르게 사용하는 자세는 단순한 태그 입력을 넘어서, 모든 사용자를 배려하는 책임감 있는 콘텐츠 제작 태도를 말하는 것 같습니다. 

 

 

https://withw.tistory.com/72

티스토리 웹&앱의 차이점? 반응형웹이란?

https://withw.tistory.com/75

티스토리 수동광고 설정 방법 - 자동광고 설정 차단?