이미지 속성표기 질문?

[디에스]

이미지에
alt 를 해주면 IE 브라우저에서는 마우스 오버시 풍선말이 보입니다
그런데 모질라에서는 마우스 오버시 풍선말이 안보이네요
대신 title 을 해주면 IE, 모질라 둘다 풍선말이 보이던데
그럼 alt, title 두개 다해줘야하는지 아니면 title 하나만 해줘도 되는것인지
alt만 해줘도 상관이 없는것인지 알려주세요

[hyeonseok]

alt, title 속성은 풍선 도움말과는 상관이 없는 속성입니다. 풍선 도움말이 나오는 것은 전적으로 브라우져에 달려 있습니다.
그러므로 풍선 도움말을 위해서 alt, title 등을 사용해서는 안됩니다.

alt 는 대체 택스트를 나타내는 속성으로 이미지를 대신할 수 있는 텍스트를 사용해야 합니다.
title 은 해당 엘리먼트의 보조 설명을 나타내는 것입니다.

각각을 적절한 용도로 사용하는 것이 우선이고 풍선 도움말은 브라우져에 맡기는 수 밖에 없습니다.

하지만...
이런 고리타분한 스펙 얘기를 떠나서 풍선 도움말을 사용하고 싶으시다면.
alt 에는 이미지를 대체 할 수 있는 적정한 텍스트를 입력해 주시고 title 에 풍선 도움말로 나타낼 설명을 넣으시면 됩니다. 그러면 속성의 의미를 해치지도 않고, IE 나 firefox 등과 같은 브라우져에서 풍선 도움말을 사용할 수 있습니다. 요즘 나오는 대부분의 브라우져는 title 속성을 풍선 도움말로 표현해 줍니다.

[alogblog]

alt, title 두개다 적어주는게 좋습니다.

alt속성은 필수 속성입니다.
여기서 필수속성이라는 의미는, 이 속성이 있어야만 이미지가 나타난다는 의미가 아니라, 스펙상 alt속성이 존재해야 verification을 통과한다는 뜻입니다.

alt자체는 말그대로, 이미지를 표시하지 못하는 기기에서 그림대신 나타낼 문자열이기때문에, 그 특성상 반드시 존재해야하는게 맞습니다.

반면 title속성은 implied 속성으로서, 있어도 그만 없어도 그만이죠.

엄격하게 의미를 구분해보자면,

{img src="60th-birthday.jpg" title="회갑기념사진" alt="회갑을 맞아 온가족이 모여 찍은 사진입니다." /}

이런식으로 alt는 사진설명, title은 말그대로 사진제목 정도로 사용하면 되겠죠.

다만 현실적으로 사진하나 박는데, 제목따로 설명따로 하기 귀찮으니까, 그냥 alt,title에 모두 같은 값을 넣는게 보통이죠.


결론적으로,
alt는 스펙상 필수므로 넣어주고, title은 IE와 파폭에서 각각 풍선말에 사용하는 속성이 다르므로, 파폭을 위해 title을 이용해야하므로, 결국 스펙에 따르고 또 브라우져 호환성을 위해 둘다 적어주는게 좋다봅니다.
다만 구지 스펙 verification에 신경을 안쓰고 오직 풍선말이 둘다 뜨는것만 관심이라면 title하나로 절약할수도 있겠지만, 바람직하진 않아보입니다.

[hyeonseok]

{img src="60th-birthday.jpg" title="회갑기념사진" alt="회갑을 맞아 온가족이 모여 찍은 사진입니다." /}

제 생각에 alt 와 title 이 서로 바뀐 것 같습니다.

alt : For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
title : This attribute offers advisory information about the element for which it is set.

회갑 기념 사진이 있을 때, 이미지를 표현해 주지 못하게 되면 "회갑기념사진" 이라는 대체 텍스트로 설명이 충분합니다. 그리고 그것에 대한 상세 설명 - 회갑을 맞아 온 가족이 모여 찍은 사진 입니다. - 을 title 로 지정을 해 주어야 합니다. 사실 이미지의 경우 title 을 지정해주어야만 하는 특별한 이유는 없다고 생각 합니다. alt 적어주는 것으로 충분 하니까요.
이미지 버튼 등을 클릭했을때 어떤 javascript 가 구동되게 된다면 이러한 것을 title 로 설명해 주어야 합니다. alt 에는 단순히 버튼에 쓰여진 text 를 적어주면 되겠죠.

이는 title 을 anchor 등에 사용할 때의 역할을 생각해 보시면 확실해 집니다.

Code: Select all

<a href="60th-birthday.html" title="회갑일 있었던 일"><img src="60th-birthday.jpg" alt="회갑기념사진" /></a>

이렇게 작성을 하게 되면 스크린 리더 등은 "회갑기념사진"에 "회갑일 있었던 일" 페이지가 링크로 걸려있다는 것을 알수 있게 해 줍니다.

[박민권]

{img src="60th-birthday.jpg" title="회갑기념사진" alt="회갑을 맞아 온가족이 모여 찍은 사진입니다." /}

제 생각에 alt 와 title 이 서로 바뀐 것 같습니다.

alt : For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.
title : This attribute offers advisory information about the element for which it is set.

저도 반대로 생각하고 있었는데 좋은 정보 감사합니다.

[alogblog]

제가 말씀드리고 싶었던 내용은, 스펙상 alt는 필수속성이고 title은 임의속성인데, ie와 파폭이 풍선말을 표시하는 데 사용하는 속성이 다르므로, 표준도 지키고 양 브라우져상에서 모두 풍선말을 나타내려면, 둘다 사용하는게 좋다! 머 이거였는데,

과연 semantic적으로 좀 따져볼때, alt와 title의 각각의 쓰임새는 어떠할까...다시 궁리해봐도, 제가 원래 말씀드린 내용이 좀더 타당한게 아닐까 싶습니다.

즉, alt에는 사진설명, title에는 제목.

title 속성에 대한 설명에서 advisory information 를 설명적 내용/정보라고 볼 필요는 없다 봅니다. 말그대로 title속성은 우리가 흔히 사용하는 타이틀적인 의미로 받아들이는게 가장 자연스럽다는 거죠. 그런 타이틀/제목에 대한 설명으로 advisory inform..을 받아들여도 무리는 없습니다. 다만, 지금은 이런 단어해석적 차원에서 title/alt의 쓰임새를 논하는것은 비it적인것이니, 그 해석에 대한 부분은 일단 접고, 제가 그리 생각하는 이유를 설명해 보겠습니다.



우리가 {img}태그를 사용해서 사진을 삽입한다는 것은, 그 사진이 담고 있는 상황/내용을 좀더 풍부하게 전달하기 위함입니다. 단순히 그 사진의 제목에 해당하는 짧은 설명적 문자열로 나타내기보다, 그림으로서 좀더 종합적으로 전달하기 위해 이미지를 이용하는 것입니다.

title 이라는 속성은 {img}태그에만 사용하는 속성이 아니라, 일반적인 다른 태그에도 선택 속성으로 준비된 범용적인 속성값입니다.

그에 반해, alt라는 속성은 {img}에만(정확히는 다 조사해보지 못했지만...) 사용되고 또 거기다 필수 속성입니다. 이것은 결국 alt속성이 {img}태그가 전달하고자 하는 고유의 기능(상황의 그림에 의한 설명)과 밀접한 의미론적인 연관성이 있는 속성이라는 결론에 자연스레 도달한다 봅니다.(그래서 필수속성)

{img}태그에 의한 그림을 통해 정보를 전달하지 못하는 장치에서는, 그에 상응해서 원래 {img}에 의해 전달코자 하는 혹은 사진이 담고 있는 내용에 대해서, 어느 정도 충분히 사진의 내용을 글로 전달받을수 있는 정도의 정보가 제공되어야, alt 라고하는 그림자체와 동등한(정확히는 대체적인) 역할을 하는 필수속성으로서의 존재이유가 있다 봅니다.

따라서

Code: Select all

<img src="회갑사진.jpg" alt="가운데가 할배고 뒤가 고모부시며, 맨 끝이 바로 접니다."/>

와 같은 필수 한쌍의 정보는 그 자체로 <img>태그의 역활을, 그림을 보여주는 장치나 안그런 장치에서, 원래 전하고자 하던 내용을 완전히(물론 alt로만 보여지는 장치에선 상대적으로 불완전하겠지만) 정의하는거라 봅니다.

사진을 나타내지 못하는 장치에서 alt값은, 사진이 전하고자 하는 원정보를 비교족 서술적으로 유사하게 설명한 문구로 나타내지는게, {img}태그의 사용과 의미론적으로 일치합니다.

이때 선택속성인 title을 만약 사용한다면, 이는 말그대로 "제목"성격의 짧은 어구로 이런 (사진자체 혹은 alt에 의해) 설명된 내용을 비교적 짧게 이해하기 쉬운 일반적인 제목성격으로 "선택적"으로 표시하면 되는것입니다.


hyeonseok 님이 예를 들어주신,

Code: Select all

<a href="60th-birthday.html" title="회갑일 있었던 일"><img src="60th-birthday.jpg" alt="회갑기념사진" /></a>

이 부분은 사실 이미지와 링크를 같이 사용하는 경우에 두개의 title 속성의 성격(혹은 중복가능여부) 에 대해 많이 혼동하는 부분이기도 합니다.


위와 같은 경우 {a}태그 상에서의 title값과, {img}에서의 title은 이론적으로 아무 상관이 없는 별개의 정보입니다.(물론 실제적으론 굳이 구별해서 사용할 필요까진 없겠지만, 지금 논의는 좀더 구체적인 시멘틱스를 따지는 것이므로...)

Code: Select all

<a href="회갑소식.html" title="우리 아버님 회갑소식"><img src="회갑사진.jpg" alt="사진 설명적 어구..." title="회갑사진"/></a>

위와 같은 예를 볼 때, {a}태그 상의 title 속성값은 그냥 해당 링크가 가리키는 자원(일반적으로 html페이지겠지만, 대상 자체도 사진일수도..)의 제목값이라 보면 됩니다. 즉 링크가 가리키는 자원(href)의 제목입니다. 사진의 제목이 아닙니다.

마찬가지로 {img}태그상의 title은 이미지의 제목이면 됩니다. {img}태그 내에서 정의되어야하는 사진제목을, {a}태그 상의 title로 대치해 이용하는것은, 그자체로 잘못된것이다! 라기 말할순 없겠지만, 적어도 지금 논의하는 관점에서 보자면, 바른 사용은 아닙니다.
가령 엄밀히 구분해서, 사진에 대한 {a}링크가 가리키는 대상이 자신의 포토갤러리의 인덱스페이지일수도 있습니다. 이런 경우에 {a}태그 상의 title 속성값은, "내 사진첩" 정도가 될 수 있을겁니다.

결국 일반적으로 두 값이 "우연히" 같은 값을 가질 수도 있지만, 이는 결코 우연일뿐 이것이 {img}태그상의 title의 성격을 규정짓는데 영향을 미칠순 없다는 겁니다.

이와 별개로, 위와 같은 경우에 브라우져(그림을 보여주던 말던)가 겹쳐서 하나의 콘텐츠로 나타나는 이미지링크에서 둘중 어떤 tilte값 혹은 alt값을 이용해 풍선말을 보여줄것인가 하는 것은, 순전히 구현상의 선택문제일 뿐일것입니다.



===================
좀 너무 탁상공론적인 논의가 아닌지 싶지만, 이왕 쓰레드가 생긴 김에 한번 저도 생각해봤습니다.

[hyeonseok]

alt 와 title 은 여러 논란이 있었고 한번에 이해하기도 힘든 이슈 입니다.

먼저...
alt 는 이미지를 대체할 수 있는 텍스트 입니다.
title 은 해당 엘리먼트의 설명입니다.
longdesc 는 이미지에 대한 상세한 설명이 필요할때 링크를 제공하는 것입니다.

무엇을 말씀 하시고자 하는 지는 알겠지만, semantic 이라는 것에 대한 오해가 있지 않은가 싶습니다. 이상하게 들릴 수도 있겠지만 HTML 의 semantic meaning 은 spec 이 정하는 것이지 영어 사전이 정하는 것이 아닙니다. 우리가 일상적으로 title 을 간결한 제목의 용도로 사용한다고 해서 HTML 의 title 도 그와 같을 것이라고 생각 하면 안됩니다. HTML 은 약속이고 규정입니다. <title> 엘리먼트는 문서의 내용을 잘 표현할 수 있도록 구체적인 설명이 들어가는 것이고 title 어트리뷰트는 해당 엘리먼트의 추가 정보를 기술하는 어트리뷰트 입니다.

제가 든 예에 대해서 오해가 있는 것 같은데 저는 a 의 title 이 img 를 지칭한다고 예를 든 것이 아니라 일반적인 title 의 사용예를 들어본 것입니다.

이렇게 작성을 하게 되면 스크린 리더 등은 "회갑기념사진"에 "회갑일 있었던 일" 페이지가 링크로 걸려있다는 것을 알수 있게 해 줍니다.

이와같이 title 은 스펙에서 말하는 것 같이 말 그대로 advisory information 을 나타내는 속성입니다. 그렇다고 alt 가 단순한 한 단어여야 하고 이미지 내용을 설명하면 안된다는 것을 말한 것은 아닙니다. 이미지의 묘사가 중요한 컨텐츠의 역할을 하고 있다고 판단되면 얼마든지 저자가 이미지에 대한 설명을 기술 할 수 있습니다. 그리고 보다 상세한 이미지 설명이 필요하면 longdesc 를 사용해서 설명을 보강 할 수 있고요. 하지만 예로 드신 "회갑기념사진" 은 title 을 본래의 목적대로 사용하지 못한 것 입니다.

그리고 두번째 예로 드신 "가운데가 할배고 뒤가 고모부시며, 맨 끝이 바로 접니다." 라는 내용은 이미지를 대체할 수 없는 잘못된 alt 사용입니다. 이미지가 보이지 않는데 가운데고 뒤고 맨끝이고가 전혀 의미가 없기 때문입니다. 이러한 것은 title 을 사용하는 것이 맞습니다.

http://www.456bereastreet.com/archive/2 ... ttributes/
이글이 이해에 도움이 될 수 있을 것 같습니다.

[소프트원트]

브라우저간 풍선도움말 문제가 생기는 것은 [MS]가 스팩을 따르지 않는 것입니다. 그래서 모질라에선 title을 사용할 것을 권합니다.

alt와 title을 한가지만, 또는 모두를 사용하든 그 이유가 무엇인가하는 생각이 듭니다.

alt는 alternative로 이미지를 꺼놓거나 시각장애자를 위한 목적일 것입니다. alt든 title이든 어느 쪽이든 긴 설명을 하든 제대로된 안내를 할 수 있을 지 의문입니다. 스크린리더를 사용해야하는 사용자에게 [긴 설명]은 텍스트 내용의 중복/반복이 될 것입니다. 적절한 수준에서 alt/title 사용이여야한다는 생각입니다.

또 풍선도움말을 언급하신 것에서 이것은 시각장애인을 위한 것이 아닌 일반 사용자들이 해당 이미지에 마우스를 위치시켰을 때, 어떤 도움이 될 정보를 제공한다는 의미일 것입니다.

우리가 정보 전달에 있어, 텍스트 이외에 다른 매체를 이용하는 것은 텍스트가 가진 한계를 조금이나마 극복/보완하기 위한 것이라는 점을 생각해야 하지 않을까 합니다.

저는 a 태그에 title을 사용합니다. 저의 모질라 사용법에 추천 확장기능 링크가 있는 데, 여기에 title을 사용합니다. 아래는 한 예입니다.

Code: Select all

<a href='http://downloads.mozdev.org/ieview/ieview.xpi' title='파이어폭스에서 IE로 넘겨주는 확장기능으로 1버전대에서는 사용자가 등록한 사이트를 자동으로 IE로 넘겨준다. 현재 영문버전'>IEView[En]</a>

일관되게는 아니지만, 이미지에는 alt 태그만을 씁니다. title 태그를 사용하여 해당 페이지의 검색어의 비중도를 높이면 검색엔진의 상위에 등록될 가능성이 높아질 수 있지만, 국내 검색엔진의 형태(개인적 판단)를 보니 큰 의미는 없다고 봅니다.

alt와 title의 혼란은 MS에게 있음은 분명하며, 이런 문제가 텍스트 내용의 중복과 반복적 코딩을 만들고 있다는 생각입니다. 역시 짜증나게 하는 MS...

그리고 만드는 사이트의 용도와 대상자가 분명해야한다는 생각입니다.
모두를 만족시키려 한다면, 브라우저/사용자(장애유무)/사용자 이용습관(이미지/스크립트해제여부)/검색엔진 등을 고려해야할 것입니다.

그러나 일부는 버리고 가야할 것이 생길 수 밖에 없을 것입니다.