이미지 대체 텍스트

· 10년 전 · 2449 · 9

웹 페이지에서 보여지는 이미지에는 이미지 내용과 동등한 내용의 대체텍스트를 제공해야 한다고 합니다.

 

예)

cc8f8b543826951c88fd9a10c62a78d5_1448848932_2657.jpg

일반적으로는

alt에 로고 혹은 logo로 처리를 많이들 하게 되지만, 아래와 같이 동일한 대체 텍스트를 제공해주셔야 합니다.

 

<img src=~~/img/logo.png alt="GNUBOARD5"> 

|

댓글 9개

// 문서내 alt 없는 것만 파일명 추출해서 alt 넣기 : 구누보드
$(window).load(function()
{
var alt, s, r;
$('img').each(function()
{
alt = $(this).attr('alt');

// <img src='' alt='' /> or <img src='' />
if(!alt || alt == 'undefined')
{
s = $(this).attr('src');
r = s.replace(/^.+\//, '');
$(this).attr('alt', r);
}
});
});
좋은 스크립트네요.

하지만 접근성 관점에서 볼 때 처음부터 alt 속성값이 빈값으로 존재하는 경우에는 그대로 놔두는 편이 바람직합니다.
문서에서 특별한 의미를 가진 이미지라기보다는 장식용 요소에 가까운 이미지가 되도록요.
ex) <img src="~" alt="">

alt 속성값이 아예 제공되지 않은 경우에 대해서는 alt 속성값을 빈값으로 만들어주거나 혹은 더 많은 고민이 필요할 지도 모릅니다.
ex) <img src="~">
$(window).load(function()
{
var alt, s, r;
$('img').each(function()
{
alt = $(this).attr('alt');

// alt='제목' 와 alt='' 는 그냥 가고
// <img src='' /> alt 자체가 없는 것만
if(!alt)
$(this).attr('alt', '');
});
});
10년 전
정말 대단하십니다...
맞는 말씀이신데 실천이 어렵네요.
구글봇이 alt 값을 좋아한다는 걸 어디선 본 것도 같습니다.
관심은 계속 갖어야겠습니다.
10년 전
진짜 실천이 가장 어럽더라구요...마감 기간에 쫒기다 보니...ㅠ
알고는 있지만 제목달기 버거운 경우는 무조건 빈값.... 그러면 일단 넘어는 가주니까요 ㅠ
10년 전
검사 프로그램의 경우는 통과가 되어서, 습관처럼 이랬는데...
막상 장애인 이용자에게 연락이 오니, 제가 아차 싶더라구요 ㅠ
댓글을 작성하시려면 로그인이 필요합니다.

장차법

+
제목 글쓴이 날짜 조회
4년 전 조회 603
7년 전 조회 1,279
8년 전 조회 1,801
10년 전 조회 1,602
10년 전 조회 1,807
10년 전 조회 1,671
10년 전 조회 2,450
10년 전 조회 1,848
10년 전 조회 1,522
10년 전 조회 1,475
10년 전 조회 1,580
10년 전 조회 1,446
10년 전 조회 1,352
10년 전 조회 1,445
10년 전 조회 1,585
10년 전 조회 1,473
10년 전 조회 1,417
10년 전 조회 1,356
10년 전 조회 1,345
10년 전 조회 1,643
10년 전 조회 1,456
10년 전 조회 1,494