차례
    1. 4.8 포함된 컨텐츠
      1. 4.8.1 The img element
        1. 4.8.1.1 이미지에 대한 대체로 사용될 텍스트를 제공하는 것에 대한 요구사항
          1. 4.8.1.1.1 범용 가이드라인
          2. 4.8.1.1.2 이미지만을 포함하는 링크 혹은 버튼
          3. 4.8.1.1.3 대체적인 그래픽 표현 - 차트, 다이어그램, 그래프, 지도, 일러스트레이션 - 을 갖는 구문이나 문단
          4. 4.8.1.1.4 대체적인 그래픽 표현 - 아이콘, 로고 - 을 갖는 짧은 구문이나 레이블
          5. 4.8.1.1.5 글자 표현 효과를 위해 그래픽으로 렌더링된 텍스트
          6. 4.8.1.1.6 주위 텍스트 일부를 그래픽으로 표현한 것
          7. 4.8.1.1.7 아무런 정보도 전달하지 않는 순수한 장식적 이미지
          8. 4.8.1.1.8 링크를 형성하지 않는, 더 큰 하나의 이미지를 형성하는 이미지 그룹
          9. 4.8.1.1.9 링크를 형성하는, 더 큰 하나의 이미지를 형성하는 이미지 그룹
          10. 4.8.1.1.10 내용의 핵심 파트
          11. 4.8.1.1.11 사용자에게 보일 의도가 없는 이미지
          12. 4.8.1.1.12 이미지를 볼 수 있음을 알고 있는 특정한 사람이 볼 것으로 의도된 이메일, 또는 사적인 문서에 포함된 이미지
          13. 4.8.1.1.13 마크업 생성기를 위한 가이드
          14. 4.8.1.1.14 유효성 검사기를 위한 가이드

4.8 포함된 컨텐츠

4.8.1 The img element

요소가 속하는 범주Categories
플로우 컨텐츠Flow content
구문 컨텐츠Phrasing content
포함된 컨텐츠Embedded content

요소에 usemap 속성이 있는 경우: 대화형 컨텐츠

If the element has a usemap attribute: Interactive content.

이 요소가 사용될 수 있는 문맥:Contexts in which this element can be used

포함된 컨텐츠가 올 수 있는 곳

Where embedded content is expected.

이 요소가 포함할 수 있는 것:Content model
이 요소는 비어 있어야 합니다.Empty
요소에 사용할 수 있는 속성:Content attributes
전역 속성Global attributes
alt
src
usemap
ismap
width
height
DOM interface:
[NamedConstructor=Image(),
 NamedConstructor=Image(in unsigned long width),
 NamedConstructor=Image(in unsigned long width, in unsigned long height)]
interface HTMLImageElement : HTMLElement {
           attribute DOMString alt;
           attribute DOMString src;
           attribute DOMString useMap;
           attribute boolean isMap;
           attribute unsigned long width;
           attribute unsigned long height;
  readonly attribute unsigned long naturalWidth;
  readonly attribute unsigned long naturalHeight;
  readonly attribute boolean complete;
};

img 요소는 이미지를 나타냅니다. 역주

An img element represents an image.

src 속성으로 주어지는 이미지는 삽입된 내용이며, alt 속성의 값은 폴백 컨텐츠입니다.

The image given by the src attribute is the embedded content, and the value of the alt attribute is the img element's fallback content.

src 속성은 반드시 사용되어야 하며, 유효한, 앞뒤로 공백을 허용하고 비어 있지 않은 URL 값을 가져야 합니다. 값이 참조하는 이미지는 상호작용이 필요하지 않은 것이어야 하며, 애니메이션이 포함될 수 있고, 스크립트되거나 페이지되지 않은 것이어야 합니다.

The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

그러므로, 이미지는 정적인 비트맵(PNG, GIF, JPEG), 단일페이지 벡터 도큐먼트(단일페이지 PDF, SVG 루트의 XML 파일), 애니메이션 비트맵(APNG, GIF), 애니메이션 벡터 그래픽(SMIL + SVG 기반 XML 파일) 등이 될 수 있습니다. 스크립트를 포함하는 SVG 파일, 다중페이지 PDF, 상호작용을 포함하는 MNG, HTML 문서, 텍스트 문서 등은 이미지가 될 수 없습니다.

Images can thus be static bitmaps (e.g. PNGs, GIFs, JPEGs), single-page vector documents (single-page PDFs, XML files with an SVG root element), animated bitmaps (APNGs, animated GIFs), animated vector graphics (XML files with an SVG root element that use declarative SMIL animation), and so forth. However, this also precludes SVG files with script, multipage PDF files, interactive MNG files, HTML documents, plain text documents, and so forth.

alt 속성의 값이 준수해야 할 사항은 다음 섹션에서 다룹니다.

The requirements on the alt attribute's value are described in the next section.

img 요소를 레이아웃 도구로 사용해서는 안됩니다. 특히, img 요소를 사용해서 투명한 이미지를 표시하는 것은 좋지 않은데, 그러한 이미지는 거의 아무것도 의미하지 않으며, 유용한 어떤 것을 문서에 더하지 않기 때문입니다.

The img must not be used as a layout tool. In particular, img elements should not be used to display transparent images, as they rarely convey meaning and rarely add anything useful to the document.


An img is always in one of the following states:

Unavailable
The user agent hasn't obtained any image data.
Partially available
The user agent has obtained some of the image data.
Completely available
The user agent has obtained all of the image data.
Broken
The user agent has obtained all of the image data that it can, but it cannot decode the image (e.g. the image is corrupted, or the format is not supported, or no data could be obtained).

When an img element is either in the partially available state or in the completely available state, it is said to be available.

An img element is initially unavailable.

User agents may obtain images immediately or on demand.

A user agent that obtains images immediately must synchronously update the image data of an img element whenever that element is either created with a src attribute, or has its src attribute set, changed, or removed.

A user agent that obtains images on demand must update the image data of an img element whenever it needs the image data (i.e. on demand), but only if the img element has a src attribute, and if it has not updated the image data since the last time the src attribute was set. When an img element's src attribute is changed or removed, if the user agent only obtains images on demand, the img element must return to the unavailable state.

When the user agent is to update the image data of an img element, it must run the following steps:

  1. Return the img element to the unavailable state.

  2. If an instance of the fetching algorithm is still running for this element, then abort that algorithm, discarding any pending tasks generated by that algorithm.

  3. Forget the img element's current image data, if any.

  4. If the user agent cannot support images, or its support for images has been disabled, then abort these steps.

  5. If the element's src attribute's value is the empty string, then set the element to the broken state, queue a task to fire a simple event named error at the img element, and abort these steps.

  6. Otherwise, resolve the value of the element's src attribute, relative to the element, and, if that is successful, fetch that resource.

    The resouce obtained in this fashion is the img element's image data.

    Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.

    This, unfortunately, can be used to perform a rudimentary port scan of the user's local network (especially in conjunction with scripting, though scripting isn't actually necessary to carry out such an attack). User agents may implement cross-origin access control policies that mitigate this attack, but unfortunately such policies are typically not compatible with existing Web content.

Each task that is queued by the networking task source while the image is being fetched must set the img element's state to partially available and update the presentation of the image appropriately.

The task that is queued by the networking task source once the resource has been fetched must act as appropriate given the following alternatives:

If the download was successful
Set the img element to the completely available state, update the presentation of the image appropriately, and queue a task to fire a simple event named load at the img element.
Otherwise
Set the img element to the broken state, and queue a task to fire a simple event named error at the img element.

If at any point the user agent discovers that the image data is corrupted in some fatal way, or that the image is not in a supported file format, then the user agent must set the img element to the broken state. If the fetching algorithm is still running for this element, then the user agent must also abort that algorithm, discarding any pending tasks generated by that algorithm, and then queue a task to fire a simple event named error at the img element.

When an img element is in the completely available state and the user agent can completely decode the media data without errors, then the img element is said to be fully decodable.

Whether the image is fetched successfully or not (e.g. whether the response code was a 2xx code or equivalent) must be ignored when determining the image's type and whether it is a valid image.

This allows servers to return images with error responses, and have them displayed.

The user agents should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.

User agents must not support non-image resources with the img element (e.g. XML files whose root element is an HTML element). User agents must not run executable code (e.g. scripts) embedded in the image resource. User agents must only display the first page of a multipage resource (e.g. a PDF file). User agents must not allow the resource to act in an interactive fashion, but should honor any animation in the resource.

This specification does not specify which image types are to be supported.

The task source for these tasks is the DOM manipulation task source.


What an img element represents depends on the src attribute and the alt attribute.

If the src attribute is set and the alt attribute is set to the empty string

The image is either decorative or supplemental to the rest of the content, redundant with some other information in the document.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the element represents nothing, and may be omitted completely from the rendering. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

If the src attribute is set and the alt attribute is set to a value that isn't empty

The image is a key part of the content; the alt attribute gives a textual equivalent or replacement for the image.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the element represents the text given by the alt attribute. User agents may provide the user with a notification that an image is present but has been omitted from the rendering.

If the src attribute is set and the alt attribute is not

The image might be a key part of the content, and there is no textual equivalent of the image available.

In a conforming document, the absence of the alt attribute indicates that the image is a key part of the content but that a textual replacement for the image was not available when the image was generated.

If the image is available and the user agent is configured to display that image, then the element represents the element's image data.

Otherwise, the user agent should display some sort of indicator that there is an image that is not being rendered, and may, if requested by the user, or if so configured, or when required to provide contextual information in response to navigation, provide caption information for the image, derived as follows:

  1. If the image has a title attribute whose value is not the empty string, then the value of that attribute is the caption information; abort these steps.

  2. If the image is a descendant of a figure element that has a child figcaption element, and, ignoring the figcaption element and its descendants, the figure element has no text node descendants other than inter-element whitespace, and no embedded content descendant other than the img element, then the contents of the first such figcaption element are the caption information; abort these steps.

If the src attribute is not set and either the alt attribute is set to the empty string or the alt attribute is not set at all

The element represents nothing.

Otherwise

The element represents the text given by the alt attribute.

The alt attribute does not represent advisory information. User agents must not present the contents of the alt attribute in the same way as content of the title attribute.

User agents may always provide the user with the option to display any image, or to prevent any image from being displayed.

While user agents are encouraged to repair cases of missing alt attributes, authors must not rely on such behavior. Requirements for providing text to act as an alternative for images are described in detail below.

The contents of img elements, if any, are ignored for the purposes of rendering.


usemap 속성이 있다면, 그것은 이미지에 연관된 이미지 맵이 있음을 나타냅니다.

The usemap attribute, if present, can indicate that the image has an associated image map.

href 속성을 가진 a 요소의 자식인 img 요소에 ismap 속성이 있다면, 그것은 img 요소가 서버사이드 이미지 맵에 접근할 수 있는 수단을 제공함을 나타냅니다. 이 속성은 a 요소에서 이벤트들이 어떻게 다루어질지에 영향을 미칩니다.

The ismap attribute, when used on an element that is a descendant of an a element with an href attribute, indicates by its presence that the element provides access to a server-side image map. This affects how events are handled on the corresponding a element.

ismap 속성은 불리언 속성입니다. 이 속성은 href 속성을 가진 a 요소의 자손 요소에서만 사용할 수 있습니다.

The ismap attribute is a boolean attribute. The attribute must not be specified on an element that does not have an ancestor a element with an href attribute.

img 요소는 크기 속성을 지원합니다.

The img element supports dimension attributes.

The IDL attributes alt, src, useMap, and isMap each must reflect the respective content attributes of the same name.

image . width [ = value ]
image . height [ = value ]

이 프로퍼티는 이미지가 실제로 렌더링된 크기를 반환하며, 그러한 것을 알 수 없다면 0 을 반환합니다.

These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.

대응하는 내용의 속성을 변경하도록 설정할 수 있습니다.

They can be set, to change the corresponding content attributes.

image . naturalWidth
image . naturalHeight

이미지의 원래 크기를 반환합니다. 그러한 크기를 알 수 없다면 0 을 반환합니다.

These attributes return the intrinsic dimensions of the image, or zero if the dimensions are not known.

image . complete

이미지가 다운로드되고, 디코드되고, 유효하다고 판정되었을 경우 참을 반환합니다. 아닐 경우 거짓을 반환합니다.

Returns true if the image has been completely downloaded or if no image is specified; otherwise, returns false.

image = new Image( [ width [, height ] ] )

새로운 img 요소를 반환합니다. 반환된 요소의 widthheight는 이에 대응하는 매개변수의 값이 있다면 그것으로 정해집니다.

Returns a new img element, with the width and height attributes set to the values passed in the relevant arguments, if applicable.

The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available. [CSS]

On setting, they must act as if they reflected the respective content attributes of the same name.

The IDL attributes naturalWidth and naturalHeight must return the intrinsic width and height of the image, in CSS pixels, if the image is available, or else 0. [CSS]

The IDL attribute complete must return true if any of the following conditions is true:

Otherwise, the attribute must return false.

The value of complete can thus change while a script is executing.

Three constructors are provided for creating HTMLImageElement objects (in addition to the factory methods from DOM Core such as createElement()): Image(), Image(width), and Image(width, height). When invoked as constructors, these must return a new HTMLImageElement object (a new img element). If the width argument is present, the new object's width content attribute must be set to width. If the height argument is also present, the new object's height content attribute must be set to height. The element's document must be the active document of the browsing context of the Window object on which the interface object of the invoked constructor is found.

하나의 이미지는 문맥에 따라 여러가지 대체 텍스트를 가질 수 있습니다.

A single image can have different appropriate alternative text depending on the context.

다음의 각 경우에 대해, 같은 이미지가 사용되고 있지만, alt 텍스트는 매번 다릅니다. 이미지는 스위스 제네바에 있는 방패 휘장coat of arms 입니다.

In each of the following cases, the same image is used, yet the alt text is different each time. The image is the coat of arms of the Carouge municipality in the canton Geneva in Switzerland.

여기에서는 보충적인 아이콘으로 사용되었습니다.

Here it is used as a supplementary icon:

<p>I lived in <img src="carouge.svg" alt=""> Carouge.</p>

여기에서는 마을을 나타내고 있습니다.

Here it is used as an icon representing the town:

<p>Home town: <img src="carouge.svg" alt="Carouge"></p>

여기에서는 마을에 대한 텍스트의 일부분으로 사용되었습니다.

Here it is used as part of a text on the town:

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt="The coat of arms depicts a lion, sitting in front of a tree."></p>
<p>It is used as decoration all over the town.</p>

alt: 방패 휘장에는 나무 앞에 앉아 있는 사자가 그려져 있습니다.

텍스트: 이 휘장이 마을 전체를 장식합니다.

여기에서는 비슷한 텍스트를 보충하고 있습니다. 대체 텍스트를 대신하는 설명도 함께 제공됩니다.

Here it is used as a way to support a similar text where the description is given as well as, instead of as an alternative to, the image:

<p>Carouge has a coat of arms.</p>
<p><img src="carouge.svg" alt=""></p>
<p>The coat of arms depicts a lion, sitting in front of a tree.
It is used as decoration all over the town.</p>

방패 휘장에는 나무 앞에 앉아 있는 사자가 그려져 있습니다. 이 휘장이 마을 전체를 장식합니다.

이야기의 일부분입니다.

Here it is used as part of a story:

<p>He picked up the folder and a piece of paper fell out.</p>
<p><img src="carouge.svg" alt="Shaped like a shield, the paper had a
red background, a green tree, and a yellow lion with its tongue
hanging out and whose tail was shaped like an S."></p>
<p>He stared at the folder. S! The answer he had been looking for all
this time was simply the letter S! How had he not seen that before? It all
came together now. The phone call where Hector had referred to a lion's tail,
the time Marco had stuck his tongue out...</p>
[p]그가 폴더를 집어들자, 종이가 몇 장 떨어졌습니다.[/p]
[p][img alt="그 종이는 방패 모양이었고, 붉은색 배경에
녹색의 나무와 S 모양의 꼬리를 가진 노란 사자가
그려져 있었습니다."][/p]
[p]그는 폴더를 응시했습니다. S! 그가 그토록 찾아 헤매던 답은
S 였습니다! 어떻게 그동안 이것을 보지 못했을까요? 이제 모든
것이 분명해졌습니다...[/p]

문서를 제공하는 시점에서 이미지를 정확히 알 수 없는 상황입니다. 단지 그 이미지가 방패 휘장에 대한 것임은 알고 있습니다. 따라서 대체 텍스트를 제공할 수는 없으며, 대신 간단한 캡션이 title 요소를 통해 제공됩니다.

Here it is not known at the time of publication what the image will be, only that it will be a coat of arms of some kind, and thus no replacement text can be provided, and instead only a brief caption for the image is provided, in the title attribute:

<p>The last user to have uploaded a coat of arms uploaded this one:</p>
<p><img src="last-uploaded-coat-of-arms.cgi" title="User-uploaded coat of arms."></p>

이상적으로는, 이러한 경우에도 대체 텍스트를 제공할 방법을 찾을 수 있을 것입니다. 예를 들어 업로드한 사용자에게 질문한다거나 하는 방법입니다. 대체 텍스트를 제공하지 않으면, 이미지를 볼 수 없는 사람들이 문서를 이용하기가 어려워집니다.

Ideally, the author would find a way to provide real replacement text even in this case, e.g. by asking the previous user. Not providing replacement text makes the document more difficult to use for people who are unable to view images, e.g. blind users, or users or very low-bandwidth connections or who pay by the byte, or users who are forced to use a text-only Web browser.

같은(위의 사진이 아닙니다) 사진을 서로 다른 문맥에서 사용하는 다른 예제들이 있습니다. 각 경우에 대해 서로 다른 대체텍스트가 사용되고 있습니다.

Here are some more examples showing the same picture used in different contexts, with different appropriate alternate texts each time.

<article>
 <h1>My cats</h1>
 <h2>Fluffy</h2>
 <p>Fluffy is my favorite.</p>
 <img src="fluffy.jpg" alt="She likes playing with a ball of yarn.">
 <p>She's just too cute.</p>
 <h2>Miles</h2>
 <p>My other cat, Miles just eats and sleeps.</p>
</article>

내가 좋아하는 고양이는 Fluffy 입니다. [img: Fluffy가 털실뭉치를 가지고 노는 사진입니다.] 게다가 너무 귀엽습니다. 내 다른 고양이인 Miles는 그저 먹고 자기만 합니다.

<article>
 <h1>Photography</h1>
 <h2>Shooting moving targets indoors</h2>
 <p>The trick here is to know how to anticipate; to know at what speed and
 what distance the subject will pass by.</p>
 <img src="fluffy.jpg" alt="A cat flying by, chasing a ball of yarn, can be
 photographed quite nicely using this technique.">
 <h2>Nature by night</h2>
 <p>To achieve this, you'll need either an extremely sensitive film, or
 immense flash lights.</p>
</article>

.. 실내에서, 움직이는 물체를 찍는 방법: 요점은 예상하는 방법을 아는 것입니다. 물체가 어떤 속도로, 어느정도의 거리를 지나갈지 아는 것입니다. [img: 털실 뭉치를 쫓아서 점프한 고양이를, 이 테크닉을 사용해서 멋지게 촬영할 수 있습니다.] 야간 촬영...

<article>
 <h1>About me</h1>
 <h2>My pets</h2>
 <p>I've got a cat named Fluffy and a dog named Miles.</p>
 <img src="fluffy.jpg" alt="Fluffy, my cat, tends to keep itself busy.">
 <p>My dog Miles and I like go on long walks together.</p>
 <h2>music</h2>
 <p>After our walks, having emptied my mind, I like listening to Bach.</p>
</article>

Fluffy 라는 고양이와, Miles 라는 개를 얻게 되었습니다. [img: 내 고양이 Fluffy는 항상 뭔가에 바쁩니다.] Miles 와 나는 종종 길게 산책...

<article>
 <h1>Fluffy and the Yarn</h1>
 <p>Fluffy was a cat who liked to play with yarn. He also liked to jump.</p>
 <aside><img src="fluffy.jpg" alt="" title="Fluffy"></aside>
 <p>He would play in the morning, he would play in the evening.</p>
</article>

Fluffy 는 털실 뭉치를 갖고 노는 것을 좋아하는 고양입니다. Fluffy는 점프도 즐겨 합니다. [img]...

4.8.1.1 이미지에 대한 대체로 사용될 텍스트를 제공하는 것에 대한 요구사항

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

4.8.1.1.1 범용 가이드라인

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

달리 명시된 바가 없다면, alt 속성을 반드시 사용하여야 하며, 그 값은 비어 있지 않아야 하고, 이미지를 대체하기에 적합한 것이어야 합니다. alt 속성에 대한 명확한 요구 사항은 이미지가 무엇을 나타내려고 의도했느냐에 따라 달라지며, 그러한 것들이 이어지는 섹션들에서 설명됩니다.

Except where otherwise specified, the alt attribute must be specified and its value must not be empty; the value must be an appropriate replacement for the image. The specific requirements for the alt attribute depend on what the image is intended to represent, as described in the following sections.

대체 텍스트를 사용할 때 고려해야 할 가장 일반적인 규칙은 이렇습니다 : 모든 이미지를 그것의 대체텍스트로 교체해도 페이지의 의미가 달라지지 않아야 합니다.

The most general rule to consider when writing alternative text is the following: the intent is that replacing every image with the text of its alt attribute not change the meaning of the page.

따라서, 일반적으로, 이미지를 포함시킬 수 없었을 경우 무엇을 적었을 것인지 고려함으로서 대체텍스트를 작성할 수 있습니다.

So, in general, alternative text can be written by considering what one would have written had one not been able to include the image.

이러한 고려의 자연스러운 결론은, alt 속성의 값에는 이미지의 캡션, 타이틀, 범례 등에 썼을 법한 텍스트는 사용하지 말아야 한다는 것입니다. 대체텍스트는 이미지 대신 사용될 수 있는 것이지, 이미지를 보충하는 것이 아닙니다. title 속성은 보충적인 정보로 사용될 수 있습니다.

A corollary to this is that the alt attribute's value should never contain text that could be considered the image's caption, title, or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

대체 텍스트에 대해 한가지 더 고려해볼만한 것은, 그러한 이미지가 있다는 사실은 배제한 체 전화로 그 이미지를 포함한 페이지에 대해 설명하는 상황을 생각해 보는 것입니다. 전화로 이야기했을 내용은 대체 텍스트를 위한 좋은 출발점이 될 수 있습니다.

One way to think of alternative text is to think about how you would read the page containing the image to someone over the phone, without mentioning that there is an image present. Whatever you say instead of the image is typically a good start for writing the alternative text.

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

하이퍼링크를 나타내는 a 요소, 또는 button 요소가 별다른 문맥 내용을 포함하지는 않지만 하나 이상의 이미지를 포함하는 경우, alt 속성을 반드시 사용하여야 하며, 그 내용은 링크나 버튼의 목적을 설명하는 것이어야 합니다.

When an a element that creates a hyperlink, or a button element, has no textual content but contains one or more images, the alt attributes must contain text that together convey the purpose of the link or button.

사용자에게 3가지 목록 중 원하는 색을 고를 것을 요청하고 있습니다. 각각의 색상은 이미지로 주어지지만, 이미지를 비활성화시킨 사용자를 고려해서 색상의 이름이 대체 텍스트로 사용되고 있습니다.

In this example, a user is asked to pick his preferred color from a list of three. Each color is given by an image, but for users who have configured their user agent not to display images, the color names are used instead:

<h1>Pick your color</h1>
<ul>
 <li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
 <li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
 <li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
</ul>

각각의 버튼은 사용자가 원하는 색상을 나타내는 이미지를 포함하고 있습니다. 각각의 경우에서, 처음의 이미지가 대체 텍스트를 제공하고 있습니다.

In this example, each button has a set of images to indicate the kind of color output desired by the user. The first image is used in each case to give the alternative text.

<button name="rgb">
  <img src="red" alt="R">
  <img src="green" alt="G">
  <img src="blue" alt="B">
</button>
<button name="cmyk">
  <img src="cyan" alt="C">
  <img src="magenta" alt="M">
  <img src="yellow" alt="Y">
  <img src="black" alt="K">
</button>

원문이 가로로 너무 길어서 줄을 나눴습니다.

개별적인 이미지가 텍스트의 일부분을 나타내므로, 다음과 같이 쓸 수도 있습니다.

Since each image represents one part of the text, it could also be written like this:

<button name="rgb">
  <img src="red" alt="R">
  <img src="green" alt="G">
  <img src="blue" alt="B">
</button>
<button name="cmyk">
  <img src="cyan" alt="C">
  <img src="magenta" alt="M">
  <img src="yellow" alt="Y">
  <img src="black" alt="K">
</button>

그러나, 다른 대체 텍스트로는 이것이 적합하지 않을 것입니다. 따라서, 각각의 경우에 대해 모든 대체 텍스트를 하나의 이미지에 넣는 것이 좀 더 이치에 맞을 것입니다.

However, with other alternative text, this might not work, and putting all the alternative text into one image in each case might make more sense:

<button name="rgb">
  <img src="red" alt="sRGB profile">
  <img src="green" alt="">
  <img src="blue" alt="">
</button>
<button name="cmyk">
  <img src="cyan" alt="CMYK profile">
  <img src="magenta" alt="">
  <img src="yellow" alt="">
  <img src="black" alt="">
</button>
4.8.1.1.3 대체적인 그래픽 표현 - 차트, 다이어그램, 그래프, 지도, 일러스트레이션 - 을 갖는 구문이나 문단

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

가끔씩은, 그래픽 형태로 나타내는 것이 더 명확할 수 있는 경우가 있습니다. 예를 들어 순서도, 다이어그램, 그래프, 방향을 보여주는 간단한 지도 등입니다. 그러한 경우, 이미지는 img 요소를 통해 주어지겠지만, 덜 명확한 텍스트 버전 역시 반드시 제공하여서 이미지를 볼 수 없는 사람들도 전달하고자 하는 내용을 이해하도록 해야 합니다.

Sometimes something can be more clearly stated in graphical form, for example as a flowchart, a diagram, a graph, or a simple map showing directions. In such cases, an image can be given using the img element, but the lesser textual version must still be given, so that users who are unable to view the image (e.g. because they have a very slow connection, or because they are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice Web browser, or simply because they are blind) are still able to understand the message being conveyed.

텍스트는 반드시 alt 속성으로 주어져야 하며, src 속성에서 명시한 이미지와 동일한 메시지를 전달할 수 있는 것이어야 합니다.

The text must be given in the alt attribute, and must convey the same message as the image specified in the src attribute.

대체 텍스트는 이미지의 설명이 아니라 대체 수단 이란 것을 깨닫는 것이 중요합니다.

It is important to realize that the alternative text is a replacement for the image, not a description of the image.

순서도를 이미지로 제공하면서, alt 속성에 그 순서도를 텍스트로 제공하고 있습니다.

In the following example we have a flowchart in image form, with text in the alt attribute rephrasing the flowchart in prose form:

<p>In the common case, the data handled by the tokenization stage
comes from the network, but it can also come from script.</p>
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt="The network
passes data to the Tokenizer stage, which passes data to the Tree
Construction stage. From there, data goes to both the DOM and to
Script Execution. Script Execution is linked to the DOM, and, using
document.write(), passes data to the Tokenizer."></p>

네트워크는 데이터를 토큰 형태로 전달합니다. 이러한 데이터는 트리 형성 상태에서 주어집니다. 그때부터, 데이터는 DOM과 스크립트 실행으로 넘어갑니다. 스크립트 실행은 DOM에 연결되어 있으며, Document.write() 를 사용해서 토큰화 됩니다.

이미지를 설명에 포함시키는 것이 좋은 해결책인 경우와 나쁜 해결책인 경우를 보여줍니다.

Here's another example, showing a good solution and a bad solution to the problem of including an image in a description.

먼저, 좋은 해결책입니다. 이미지가 전혀 존재하지 않았다면 어떠한 텍스트를 제공했을지, 바로 그 텍스트를 대체 텍스트로 사용하는 방법을 보여줍니다.

First, here's the good solution. This sample shows how the alternative text should just be what you would have put in the prose if the image had never existed.

<!-- This is the correct way to do things. -->
<p>
 당신은 집 왼편의 탁 트인 공간에 서 있습니다.
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="집은 흰 색이며, 현관은 널빤지로 덧대어져 있습니다.">
 <img src="house.jpeg" alt="The house is white, with a boarded front door.">
 작은 우편함도 있습니다.
 There is a small mailbox here.
</p>

마크업을 제거하고 쭉 읽어봅니다.
"당신은 집 왼편의 탁 트인 공간에 서 있습니다. 집은 흰 색이며, 현관은 널빤지로 덧대어져 있습니다. 작은 우편함도 있습니다."
그림이 없어도, 내용이 자연스럽게 이어집니다.

나쁜 해결책입니다. 대체 텍스트는 이미지의 대체수단이 아니라 그저 이미지에 대한 설명일 뿐입니다. 이미지가 없을 경우, 텍스트는 앞의 예에서 보였던 것처럼 흘러가지 않게 됩니다.

Second, here's the bad solution. In this incorrect way of doing things, the alternative text is simply a description of the image, instead of a textual replacement for the image. It's bad because when the image isn't shown, the text doesn't flow as well as in the first example.

<!-- This is the wrong way to do things. -->
<p>
 당신은 집 왼편의 탁 트인 공간에 서 있습니다.
 You are standing in an open field west of a house.
 <img src="house.jpeg" alt="널빤지로 덧댄 현관이 있는 흰 집.">
 <img src="house.jpeg" alt="A white house, with a boarded front door.">
 작은 우편함도 있습니다.
 There is a small mailbox here.
</p>

"당신은 집 왼편의 탁 트인 공간에 서 있습니다. 널빤지로 덧댄 현관이 있는 흰 집. 작은 우편함도 있습니다."
앞의 예제와 다르게, 내용이 자연스럽게 이어지지 않습니다.

"널빤지로 덧댄 현관이 있는 흰 집의 사진" 과 같은 텍스트도 마찬가지로 좋지 않은 대체텍스트입니다. (그러한 텍스트는 title 속성, 또는 이미지와 함께 있는 figure 요소의 figcaption 요소에는 적합할 수 있습니다.)

Text such as "Photo of white house with boarded door" would be equally bad alternative text (though it could be suitable for the title attribute or in the figcaption element of a figure with this image).

4.8.1.1.4 대체적인 그래픽 표현 - 아이콘, 로고 - 을 갖는 짧은 구문이나 레이블

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

문서에 아이콘 형태의 정보를 넣을 수 있습니다. 그러한 아이콘의 목적은 시각적인 브라우저의 사용자들이 얼핏 보는 것으로도 기능을 파악할 수 있게 하는 것입니다.

A document can contain information in iconic form. The icon is intended to help users of visual browsers to recognize features at a glance.

몇가지 경우, 그러한 아이콘은 같은 의미를 전달하는 텍스트 레이블에 대한 보충적인 성격을 갖습니다. 그러한 경우, alt 속성이 반드시 있어야 하고, 또한 그 값은 반드시 빈 텍스트여야 합니다.

In some cases, the icon is supplemental to a text label conveying the same meaning. In those cases, the alt attribute must be present but must be empty.

아이콘이 같은 의미를 가진 텍스트 다음에 있으므로, 빈 alt 속성을 가집니다.

Here the icons are next to text that conveys the same meaning, so they have an empty alt attribute:

<nav>
 <p><a href="/help/"><img src="/icons/help.png" alt=""> Help</a></p>
 <p><a href="/configure/"><img src="/icons/configuration.png" alt="">
 Configuration Tools</a></p>
</nav>

다른 경우, 아이콘은 자신을 설명하는 텍스트 근처에 있지 않습니다. 아이콘은 스스로를 설명할 것으로 간주됩니다. 그러한 경우, 동등한 텍스트 레이블이 alt 속성으로 주어져야 합니다.

In other cases, the icon has no text next to it describing what it means; the icon is supposed to be self-explanatory. In those cases, an equivalent textual label must be given in the alt attribute.

뉴스 사이트의 글에 토픽을 설명하는 아이콘 레이블이 붙어 있습니다.

Here, posts on a news site are labeled with an icon indicating their topic.

<body>
 <article>
  <header>
   <h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
   <p><img src="movies.png" alt="Movies"></p>
  </header>
  <p>Pixar has won yet another <i>Best Movie of the Year</i> award,
  making this its 8th win in the last 12 years.</p>
 </article>
 <article>
  <header>
   <h1>Latest TWiT episode is online</h1>
   <p><img src="podcasts.png" alt="Podcasts"></p>
  </header>
  <p>The latest TWiT episode has been posted, in which we hear
  several tech news stories as well as learning much more about the
  iPhone. This week, the panelists compare how reflective their
  iPhones' Apple logos are.</p>
 </article>
</body>

많은 페이지들이 로고, 휘장, 깃발, 상징 같은것을 포함합니다. 그러한 것들은 보통 회사, 조직, 프로젝트, 모임, 소프트웨어, 나라, 기타 비슷한 개체들을 나타냅니다.

Many pages include logos, insignia, flags, or emblems, which stand for a particular entity such as a company, organization, project, band, software package, country, or some such.

로고가 페이지 헤딩과 같은 개체를 나타내고 있다면, alt 속성은 반드시 그 로고가 나타내는 개체의 이름을 포함해야 합니다. alt 속성은 "로고"라는 단어를 포함해서는 안되는데, 왜냐하면 전달하는 의미가 로고라는 단어가 아니며 그 개체 자체이기 때문입니다.

If the logo is being used to represent the entity, e.g. as a page heading, the alt attribute must contain the name of the entity being represented by the logo. The alt attribute must not contain text like the word "logo", as it is not the fact that it is a logo that is being conveyed, it's the entity itself.

로고가 개체를 표현하는 이름 옆에 사용되었다면, 로고는 보충의 성격을 가지며 그러한 경우 alt 속성은 반드시 비어 있어야 합니다.

If the logo is being used next to the name of the entity that it represents, then the logo is supplemental, and its alt attribute must instead be empty.

로고가 장식적인 목적으로 사용되었다면, 아래에서 설명할 순수한 장식적인 이미지에 관한 예제가 적용됩니다. 로고가 실제로 논의되는 것이라면, 로고는 대체적인 그래픽 표현(로고 자체)을 갖는 구문이나 문단(로고의 설명) 인 것이며 첫번째 예제가 적용됩니다.

If the logo is merely used as decorative material (as branding, or, for example, as a side image in an article that mentions the entity to which the logo belongs), then the entry below on purely decorative images applies. If the logo is actually being discussed, then it is being used as a phrase or paragraph (the description of the logo) with an alternative graphical representation (the logo itself), and the first entry above applies.

다음의 예제들에는 위의 네가지 경우가 모두 있습니다. 먼저, 로고가 회사를 나타내는 경우입니다.

In the following snippets, all four of the above cases are present. First, we see a logo used to represent a company:

<h1><img src="XYZ.gif" alt="The XYZ company"></h1>

다음으로는, 로고가 회사 이름의 옆에 나타나는 문단입니다. 따라서 대체텍스트를 사용하지 않고 있습니다.

Next, we see a paragraph which uses a logo right next to the company name, and so doesn't have any alternative text:

<article>
 <h2>News</h2>
 <p>We have recently been looking at buying the <img src="alpha.gif"
 alt=""> ΑΒΓ company, a small Greek company
 specializing in our type of product.</p>

세번째로, 로고가 aside 요소 내에서 사용되는 경우입니다. 요소는 이득에 대해 논의하고 있는 좀더 큰 글의 일부분입니다.

In this third snippet, we have a logo being used in an aside, as part of the larger article discussing the acquisition:

 <aside><p><img src="alpha-large.gif" alt=""></p></aside>
 <p>The ΑΒΓ company has had a good quarter, and our
 pie chart studies of their accounts suggest a much bigger blue slice
 than its green and orange slices, which is always a good sign.</p>
</article>

마지막으로, 로고에 대해 이야기하는 건의입니다. 따라서 로고는 대체텍스트에서 자세히 설명됩니다.

Finally, we have an opinion piece talking about a logo, and the logo is therefore described in detail in the alternative text.

<p>Consider for a moment their logo:</p>

<p><img src="/images/logo" alt="It consists of a green circle with a
green question mark centered inside it."></p>

<p>How unoriginal can you get? I mean, oooooh, a question mark, how
<em>revolutionary</em>, how utterly <em>ground-breaking</em>, I'm
sure everyone will rush to adopt those specifications now! They could
at least have tried for some sort of, I don't know, sequence of
rounded squares with varying shades of green and bold white outlines,
at least that would look good on the cover of a blue book.</p>
[p]그들의 로고에 대해 잠시 생각해 보십시오:[/p]

[img: 그것은 녹색의 원 가운데에 녹색의 물음표가 그려진 모양입니다.]

[p]...[/p]

이 예제는 이미지가 사용 가능하지 않아서 텍스트가 대신 사용되었을 때, 대체텍스트가 주변 텍스트와 매끄럽게 연결되어서 마치 처음부터 이미지 없이 마크업되었던것처럼 대체텍스트를 사용하는 방법에 대해 보여주고 있습니다.

This example shows how the alternative text should be written such that if the image isn't available, and the text is used instead, the text flows seamlessly into the surrounding text, as if the image had never been there in the first place.

4.8.1.1.5 글자 표현 효과를 위해 그래픽으로 렌더링된 텍스트

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

이따금씩, 이미지가 텍스트만으로 구성된 경우가 있습니다. 그리고 그 이미지의 목적은 텍스트를 표시하기 위해 사용되는 실제 효과들을 강조하는 것이 아니라, 텍스트 자체를 전달하는 경우입니다.

Sometimes, an image just consists of text, and the purpose of the image is not to highlight the actual typographic effects used to render the text, but just to convey the text itself.

그러한 경우, alt 속성이 반드시 있어야 하며, 그 값은 이미지에 사용된 텍스트 그 자체여야 합니다.

In such cases, the alt attribute must be present but must consist of the same text as written in the image itself.

Earth Day 라는 텍스트를 포함하는 이미지를 생각해 보십시오. 글자들은 나무와 꽃으로 장식되어 있습니다. 만약 텍스트가 단순히 제목으로 사용되는 것이라면, 그리고 그래픽으로 효과를 주기 위해 이미지를 사용한 것이라면, 정확한 대체텍스트는 Earth Day 그 자체이며, 장식에 대해서 언급할 필요는 없습니다.

Consider a graphic containing the text "Earth Day", but with the letters all decorated with flowers and plants. If the text is merely being used as a heading, to spice up the page for graphical users, then the correct alternative text is just the same text "Earth Day", and no mention need be made of the decorations:

<h1><img src="earthdayheading.png" alt="Earth Day"></h1>
4.8.1.1.6 주위 텍스트 일부를 그래픽으로 표현한 것

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

많은 경우에, 이미지는 사실 단순히 보충적인 구실을 하며, 주변의 텍스트를 강화하는 역할을 할 뿐입니다. 이러한 경우, alt 속성이 있어야 하지만 그 값은 빈 문자열이어야 합니다.

In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.

일반적으로, 이미지를 삭제해도 페이지의 유용함에 전혀 손상이 없지만, 이미지를 삽입함으로서 시각적 브라우저의 사용자들이 컨셉을 매우 쉽게 이해할 수 있는 경우가 이에 해당합니다.

In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.

앞 문단의 내용을 그래픽 형태로 반복하고 있는 순서도입니다.

A flowchart that repeats the previous paragraph in graphical form:

<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt=""></p>

이러한 경우, 단순히 캡션 구실을 하는 대체텍스트를 삽입하는 것은 잘못된 것입니다. 캡션을 사용해야 한다면, title 속성을 사용하거나 figure + figcaption 요소를 사용할 수 있습니다. 두번째 경우, 이미지는 사실 구문이나 문단의 그래픽 표현이었을 것이므로 대체 택스트가 있어야 합니다.

In these cases, it would be wrong to include alternative text that consists of just a caption. If a caption is to be included, then either the title attribute can be used, or the figure and figcaption elements can be used. In the latter case, the image would in fact be a phrase or paragraph with an alternative graphical representation, and would thus require alternative text.

<!-- Using the title="" attribute -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt=""
        title="Flowchart representation of the parsing model."></p>
<!-- Using <figure> and <figcaption> -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<figure>
 <img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png" alt="The Network leads
 to the Tokenizer, which leads to the Tree Construction. The Tree
 Construction leads to two items. The first is Script Execution, which
 leads via document.write() back to the Tokenizer. The second item
 from which Tree Construction leads is the DOM. The DOM is related to
 the Script Execution.">
 <figcaption>Flowchart representation of the parsing model.</figcaption>
</figure>
<!-- This is WRONG. Do not do this. Instead, do what the above examples do. -->
<p>The network passes data to the Tokenizer stage, which
passes data to the Tree Construction stage. From there, data goes
to both the DOM and to Script Execution. Script Execution is
linked to the DOM, and, using document.write(), passes data to
the Tokenizer.</p>
<p><img src="http://dev.w3.org/html5/spec/images/parsing-model-overview.png"
        alt="Flowchart representation of the parsing model."></p>
<!-- Never put the image's caption in the alt="" attribute! -->

앞 문단의 내용을 그래픽 평태로 표현하는 그래프입니다.

A graph that repeats the previous paragraph in graphical form:

<p>According to a study covering several billion pages,
about 62% of documents on the Web in 2007 triggered the Quirks
rendering mode of Web browsers, about 30% triggered the Almost
Standards mode, and about 9% triggered the Standards mode.</p>
<p><img src="rendering-mode-pie-chart.png" alt=""></p>
4.8.1.1.7 아무런 정보도 전달하지 않는 순수한 장식적 이미지

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

이미지가 장식적이며 특별히 페이지에 밀접한 관련이 없는 경우가 있습니다. 이미지가 사이트 전체에 걸친 디자인 스키마의 일부분인 경우인데, 이런 이미지는 문서의 마크업이 아니라 사이트의 CSS에서 명시해야 합니다.

In general, if an image is decorative but isn't especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site's CSS, not in the markup of the document.

그러나, 장식적인 이미지가 주변의 텍스트에서 논의되고 있지는 않지만 일정수준의 연관관계를 가지는 경우, code>img 요소를 사용해서 페이지에 포함시킬 수 있습니다. 그러한 이미지는 장식적이지만 내용의 한 부분입니다. 이러한 경우, alt 속성이 반드시 사용되어야 하며 그 값은 비어 있어야 합니다.

However, a decorative image that isn't discussed by the surrounding text but still has some relevance can be included in a page using the img element. Such images are decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty string.

이미지가 텍스트와의 연관성에는 관계 없이 순수하게 장식적인 경우의 예를 든다면 Burning Man 에서의 이벤트에 대한 블로그 포스트에 사용된 블랙락 시티 전경의 사진이라든가, 시 를 다루는 페이지에서 그 시에 영감을 받은 그림 등이 있습니다. 다음의 예제는 두번째 경우를 보여줍니다(예제에는 첫번째 구 만 포함되어 있습니다).

Examples where the image is purely decorative despite being relevant would include things like a photo of the Black Rock City landscape in a blog post about an event at Burning Man, or an image of a painting inspired by a poem, on a page reciting that poem. The following snippet shows an example of the latter case (only the first verse is included in this snippet):

<h1>The Lady of Shalott</h1>
<p><img src="shalott.jpeg" alt=""></p>
<p>On either side the river lie<br>
Long fields of barley and of rye,<br>
That clothe the wold and meet the sky;<br>
And through the field the road run by<br>
To many-tower'd Camelot;<br>
And up and down the people go,<br>
Gazing where the lilies blow<br>
Round an island there below,<br>
The island of Shalott.</p>

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

하나의 이미지가 몇개의 이미지 파일들로 나뉜 후, 다시 그 이미지 파일들이 함께 표시되어서 원래의 그림을 나타내는 경우, 그러한 이미지 파일들 중 하나는 alt 속성을 가져야 하며, 속성의 값은 전체 이미지에 사용했어야 할 대체텍스트가 되어야 하고, 다른 이미지들은 alt 속성이 빈 값을 가져야 합니다.

When a picture has been sliced into smaller image files that are then displayed together to form the complete picture again, one of the images must have its alt attribute set as per the relevant rules that would be appropriate for the picture as a whole, and then all the remaining images must have their alt attribute set to the empty string.

XYZ Corp 라는 회사를 나타내는 회사 로고가 두개로 나뉘어져 있습니다. 첫번째 것은 XYZ 라는 글자를 포함하고 있고, 두번째 것은 Corp 라는 단어를 포함합니다. 대체텍스트인 XYZ Corp 는 전부 첫번째 이미지에 들어 있습니다.

In the following example, a picture representing a company logo for XYZ Corp has been split into two pieces, the first containing the letters "XYZ" and the second with the word "Corp". The alternative text ("XYZ Corp") is all in the first image.

<h1><img src="logo1.png" alt="XYZ Corp"><img src="logo2.png" alt=""></h1>

다음의 예제는 등급을 보여주는데, 3개의 별표는 채워져 있고 2개는 비어있습니다. ★★★☆☆ 라는 대체텍스트를 사용할수도 있겠지만, 저자는 5 중 3 이라는 텍스트가 좀 더 도움이 될 것으로 판단했습니다. 그것이 첫번째 이미지의 대체텍스트로 사용되었고, 나머지의 대체텍스트는 비어 있습니다.

In the following example, a rating is shown as three filled stars and two empty stars. While the alternative text could have been "★★★☆☆", the author has instead decided to more helpfully give the rating in the form "3 out of 5". That is the alternative text of the first image, and the rest have blank alternative text.

<p>Rating: <meter max=5 value=3>
  <img src="1" alt="3 out of 5">
  <img src="1" alt="">
  <img src="1" alt="">
  <img src="0" alt="">
  <img src="0" alt="">
</meter></p>

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

일반적으로, 링크를 위해 이미지를 조각내는 것 보다는 이미지 맵을 사용하기를 권고합니다.

Generally, image maps should be used instead of slicing an image for links.

그럼에도 불구하고 이미지가 조각나 있고 그중 무언가가 링크의 유일한 내용인 경우, 링크 하나당 하나의 이미지는 링크의 목적을 대체텍스트로서 alt 속성 내에 포함해야 합니다.

However, if an image is indeed sliced and any of the components of the sliced picture are the sole contents of links, then one image per link must have alternative text in its alt attribute representing the purpose of the link.

다음의 예제에서 사용된 그림은 날아다니는 스파게티 몬스터를 나타낸 엠블렘입니다. 좌우측의 면발 첨가물이 서로 다른 이미지로 표현되므로, 사용자는 왼쪽이나 오른쪽을 골라 볼 수 있습니다.

In the following example, a picture representing the flying spaghetti monster emblem, with each of the left noodly appendages and the right noodly appendages in different images, so that the user can pick the left side or the right side in an adventure.

<h1>The Church</h1>
<p>You come across a flying spaghetti monster. Which side of His
Noodliness do you wish to reach out for?</p>
<p><a href="?go=left" ><img src="fsm-left.png"  alt="Left side. "></a
  ><img src="fsm-middle.png" alt=""
  ><a href="?go=right"><img src="fsm-right.png" alt="Right side."></a></p>
4.8.1.1.10 내용의 핵심 파트

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

이미지가 컨텐츠의 핵심적인 부분인 경우가 있습니다. 예를 들어 사진 갤러리의 일부분인 페이지가 그러한 경우입니다. 이미지는 그것을 포함하는 페이지의 핵심 그 자체입니다.

In some cases, the image is a critical part of the content. This could be the case, for instance, on a page that is part of a photo gallery. The image is the whole point of the page containing it.

이미지가 컨텐츠의 핵심적인 파트인 경우에는 이미지의 유래에 따라 대체 텍스트를 제공하는 방법이 달라집니다.

How to provide alternative text for an image that is a key part of the content depends on the image's provenance.

일반적인 경우 The general case

자세한 대체 텍스트를 제공할 수 있는 경우에는, 이미지의 대용품으로 쓸 수 있는 텍스트를 alt 속성의 내용으로 사용하여야 합니다. 그러한 경우는 예를 들어 이미지가 잡지 리뷰에서 사용된 스크린샷 시리즈의 일부분인 경우, 사진에 관한 블로그 항목에 포함된 바로 그 사진인 경우 등입니다.

When it is possible for detailed alternative text to be provided, for example if the image is part of a series of screenshots in a magazine review, or part of a comic strip, or is a photograph in a blog entry about that photograph, text that can serve as a substitute for the image must be given as the contents of the alt attribute.

새로운 운영체제의 스크린샷 갤러리 이미지 중 하나입니다.

A screenshot in a gallery of screenshots for a new OS, with some alternative text:

<figure>
 <img src="KDE%20Light%20desktop.png"
      alt="The desktop is blue, with icons along the left hand side in
           two columns, reading System, Home, K-Mail, etc. A window is
           open showing that menus wrap to a second line if they
           cannot fit in the window. The window has a list of icons
           along the top, with an address bar below it, a list of
           icons for tabs along the left edge, a status bar on the
           bottom, and two panes in the middle. The desktop has a bar
           at the bottom of the screen with a few buttons, a pager, a
           list of open applications, and a clock.">
 <figcaption>Screenshot of a KDE desktop.</figcaption>
</figure>

재무 리포트에 포함된 그래프입니다.

A graph in a financial report:

<img src="sales.gif"
     title="Sales graph"
     alt="From 1998 to 2005, sales increased by the following percentages
     with each year: 624%, 75%, 138%, 40%, 35%, 9%, 21%">

"매출 그래프" 라는 텍스트는 매출 그래프의 대체 텍스트로 적합하지 않다는 것을 염두에 두어야 합니다. 캡션에 적합한 텍스트는 일반적으로 대체텍스트에는 적합하지 않습니다.

Note that "sales graph" would be inadequate alternative text for a sales graph. Text that would be a good caption is not generally suitable as replacement text.

완전한 대체 텍스트가 불가능한 경우 Images that defy a complete description

완전한 대체 텍스트를 제공하는 것이 현실적이지 못한 경우가 있을 수 있습니다. 예를 들어 이미지가 뚜렷하지 못하다거나, 복잡한 프랙탈 그래픽이거나, 복잡한 지형학적 지도인 경우 등입니다.

In certain cases, the nature of the image might be such that providing thorough alternative text is impractical. For example, the image could be indistinct, or could be a complex fractal, or could be a detailed topographical map.

그러한 경우, alt 속성에 적합한 대체 텍스트는 간결화된 것일 수 있습니다.

In these cases, the alt attribute must contain some suitable alternative text, but it may be somewhat brief.

이미지를 정확하게 표현하는 텍스트가 없을 수도 있습니다. 예를 들어, Rorschach inkblot test 를 텍스트로 유용하게 설명하기는 어려울 것입니다. 그러나, 간단한 설명이라도 없는것보다는 낫습니다.

Sometimes there simply is no text that can do justice to an image. For example, there is little that can be said to usefully describe a Rorschach inkblot test. However, a description, even if brief, is still better than nothing:

<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A shape with left-right
 symmetry with indistinct edges, with a small gap in the center, two
 larger gaps offset slightly from the center, with two similar gaps
 under them. The outline is wider in the top half than the bottom
 half, with the sides extending upwards higher than the center, and
 the center extending below the sides.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

"좌우 대칭이고, 경계선이 흐릿하며, 중간에 작은 갭이 있고, 중앙에서 약간 떨어진 더 큰 갭이 있으며, 그 아래에 비슷한 갭이 있는 형태입니다. 외곽선은 위 절반 부분에서 더 넓고, 아래쪽 절반에서는 조금 좁습니다. 가장자리는 중심에서 위쪽으로 넓어지면서 확장되고, 중앙은 가장자리 아래에서 확장됩니다."

대체텍스트 자체의 번역으로는 정확하지 않을 것입니다만, 요구하는 "간단한 설명"의 수준을 짐작하시라는 의미로 옮겼습니다.

다음의 예는 대체텍스트를 아주 잘못 사용한 것임을 유념하십시오.

Note that the following would be a very bad use of alternative text:

<!-- This example is wrong. Do not copy it. -->
<figure>
 <img src="/commons/a/a7/Rorschach1.jpg" alt="A black outline
 of the first of the ten cards in the Rorschach inkblot test.">
 <figcaption>A black outline of the first of the ten cards
 in the Rorschach inkblot test.</figcaption>
</figure>

alt: Rorschach inkblot test 에 들어 있는 10장의 카드 중 첫번째 것에 나타난 검은색 윤곽선
바로 아래에 있는 figcaption과 완전히 동일한 내용인것도 눈여겨 보십시오.

캡션을 대체텍스트에 포함시키는 것은 별로 유용하지 않은데, 이미지를 볼 수 없는 사용자에게 있어서는 그것이 사실상 캡션의 사본과 같기 때문입니다. 캡션을 이미 한번 보거나 읽었을 사용자에게 도움이 된다기 보다는 그를 도발하는 것과 같습니다.

Including the caption in the alternative text like this isn't useful because it effectively duplicates the caption for users who don't have images, taunting them twice yet not helping them any more than if they had only read or heard the caption once.

완전한 설명이 불가능한 다른 예제는 프랙탈 그래픽입니다. 이러한 이미지는 그 복잡함의 한계가 없습니다.

Another example of an image that defies full description is a fractal, which, by definition, is infinite in detail.

다음의 이미지는 만델브로트 셋 이미지에 대한 대체텍스트를 제공하는 한가지 방법을 보여줍니다.

The following example shows one possible way of providing alternative text for the full view of an image of the Mandelbrot set.

<img src="ms1.jpeg" alt="The Mandelbrot set appears as a cardioid with
its cusp on the real axis in the positive direction, with a smaller
bulb aligned along the same center line, touching it in the negative
direction, and with these two shapes being surrounded by smaller bulbs
of various sizes.">

"만델브로트 셋은 심장 모양이며, 곡선이 만나는 부분이 양(+) 방향이고, 작은 구슬들이 동일한 중심선에 정렬되어, 음(-)의 방향에서 접촉하고 있고, 이러한 두개의 형태가 다양한 크기의 작은 구슬들로 둘러싸여 있습니다."

대체텍스트 자체의 번역으로는 정확하지 않을 것입니다만, 요구하는 "간단한 설명"의 수준을 짐작하실 수는 있을 것입니다.

이미지의 내용을 알 수 없는 경우 Images whose contents are not known

불행히도, 대체텍스트를 전혀 제공할 수 없는 경우도 있습니다. 이미지가 어떤 자동화된 방법으로 얻어졌는데 연관된 대체텍스트가 없는 경우(웹캠 등)라든가, 사용자가 제공한 이미지를 바탕으로 스크립트를 통해 생성된 페이지인데 이미지 제공자가 대체텍스트를 제공하지 않은 경우(사진 공유 사이트 등) 라든가, 페이지의 제작자 자신이 이미지가 무엇을 나타내는지 모르는 경우(시각장애를 가진 사진작가가 자신의 블로그에서 이미지를 공유하는 경우 등)가 있을 수 있습니다.

In some unfortunate cases, there might be no alternative text available at all, either because the image is obtained in some automated fashion without any associated alternative text (e.g. a Webcam), or because the page is being generated by a script using user-provided images where the user did not provide suitable or usable alternative text (e.g. photograph sharing sites), or because the author does not himself know what the images represent (e.g. a blind photographer sharing an image on his blog).

그러한 경우, alt 속성의 값을 생략할 수 있지만, 다음의 조건 중 하나는 지켜야 합니다.

In such cases, the alt attribute may be omitted, but one of the following conditions must be met as well:

이러한 경우는 최소한으로 줄여야 합니다. 제대로 된 대체텍스트를 제공할 수 있는 희박한 가능성이라도 있다면, alt 속성을 생략해서는 안됩니다.

Such cases are to be kept to an absolute minimum. If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.

사진 공유 사이트에 있는 사진입니다. 사진과 함께 제공된 메타데이터가 캡션 이외에는 없다면 이렇게 마크업할수도 있습니다 :

A photo on a photo-sharing site, if the site received the image with no metadata other than the caption, could be marked up as follows:

<figure>
 <img src="1100670787_6a7c664aef.jpg">
 <figcaption>Bubbles traveled everywhere with us.</figcaption>
</figure>

그러나, 사진의 제공자가 이미지의 핵심적인 부분에 대해 자세한 설명을 제공하여 그것이 페이지에 함께 포함되었다면 더 좋았을 것입니다.

It would be better, however, if a detailed description of the important parts of the image obtained from the user and included on the page.

시각 장애인의 블로그에 올려진 직접 찍은 사진입니다. 그는 이 사진이 무엇을 보여주고 있는지 전혀 모를 수 있습니다.

A blind user's blog in which a photo taken by the user is shown. Initially, the user might not have any idea what the photo he took shows:

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

그렇긴 하지만, 그는 자신의 친구에게 이미지에 대한 설명을 듣고 그것을 대체텍스트로 포함시킬 수 있을 것입니다 :

Eventually though, the user might obtain a description of the image from his friends and could then include alternative text:

<article>
 <h1>I took a photo</h1>
 <p>I went out today and took a photo!</p>
 <figure>
  <img src="photo2.jpeg" alt="The photograph shows my hummingbird
  feeder hanging from the edge of my roof. It is half full, but there
  are no birds around. In the background, out-of-focus trees fill the
  shot. The feeder is made of wood with a metal grate, and it contains
  peanuts. The edge of the roof is wooden too, and is painted white
  with light blue streaks.">
  <figcaption>A photograph taken blindly from my front porch.</figcaption>
 </figure>
</article>

이미지의 포인트를 텍스트 형태로 전부 설명하는 것이 불가능하고, 사용자가 그에 대한 설명을 제공해야 하는 경우가 있을 수 있습니다. 예를 들어, 자동가입방지CAPTCHA 이미지의 목적은 사용자가 그 그래픽을, 문자 그대로, 읽을 수 있는지 알아보기 위한 것입니다. 그러한 이미지를 마크업하는 방법의 예제를 보십시오(title 속성을 눈여겨보시기 바랍니다.)

Sometimes the entire point of the image is that a textual description is not available, and the user is to provide the description. For instance, the point of a CAPTCHA image is to see if the user can literally read the graphic. Here is one way to mark up a CAPTCHA (note the title attribute):

<p><label>What does this image say?
<img src="captcha.cgi?id=8934" title="CAPTCHA">
<input type=text name=captcha></label>
(If you cannot see the image, you can use an <a
href="?audio">audio</a> test instead.)</p>

다른 예를 든다면, 소프트웨어에서 사용자에게 이미지를 보여주고, 정확한 대체텍스트로 구성된 응답을 받아서는 그것을 사용해서 페이지를 생성하고자 하는 경우가 있을 수 있습니다. 그러한 페이지는 이미지로 구성된 테이블을 포함할 수 있을 것입니다.

Another example would be software that displays images and asks for alternative text precisely for the purpose of then writing a page with correct alternative text. Such a page could have a table of images, like this:

<table>
 <thead>
  <tr> <th> Image <th> Description
 <tbody>
  <tr>
   <td> <img src="2421.png" title="Image 640 by 100, filename 'banner.gif'">
   <td> <input name="alt2421">
  <tr>
   <td> <img src="2422.png" title="Image 200 by 480, filename 'ad3.gif'">
   <td> <input name="alt2422">
</table>

그렇긴 하지만, 이 예제에서도 title 속성을 통해서 가능한 한 많은 정보를 포함하고 있음을 눈여겨보기 바랍니다.

Notice that even in this example, as much useful information as possible is still included in the title attribute.

몇몇 사용자는 이미지를 전혀 이용할 수 없으므로, alt 속성을 생략할 수 있는 경우는 위에서 예로 든 것과 같이 대체텍스트가 전혀 불가능한 경우에 한정됩니다. 저자의 노력이 부족하다는 것은 납득할만한 이유가 될 수 없습니다.

Since some users cannot use images at all (e.g. because they have a very slow connection, or because they are using a text-only browser, or because they are listening to the page being read out by a hands-free automobile voice Web browser, or simply because they are blind), the alt attribute is only allowed to be omitted rather than being provided with replacement text when no alternative text is available and none can be made available, as in the above examples. Lack of effort from the part of the author is not an acceptable reason for omitting the alt attribute.

4.8.1.1.11 사용자에게 보일 의도가 없는 이미지

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

일반적으로, 이미지를 보여주려는 것 이외의 목적으로는 img 요소를 사용하지 말아야 합니다.

Generally authors should avoid using img elements for purposes other than showing images.

이미지를 보여주려는 것 이외의 목적, 예를 들어 일종의 카운터 서비스로서 사용한다면, alt 속성의 값은 반드시 빈 문자열이어야 합니다.

If an img element is being used for purposes other than showing an image, e.g. as part of a service to count page views, then the alt attribute must be the empty string.

그러한 경우, width, height 속성의 값은 0 이어야 합니다.

In such cases, the width and height attributes should both be set to zero.

4.8.1.1.12 이미지를 볼 수 있음을 알고 있는 특정한 사람이 볼 것으로 의도된 이메일, 또는 사적인 문서에 포함된 이미지

ISSUE-31 (alt-conformance-requirements) blocks progress to Last Call

이 섹션의 내용은 공개된 문서, 또는 대상 독자를 저자가 알 필요가 없는 경우에는 적용되지 않습니다. 그러한 경우의 예를 들면 웹 사이트 상의 문서, 공적인 메일링 리스트로 보내지는 이메일, 혹은 소프트웨어 문서 등입니다.

This section does not apply to documents that are publicly accessible, or whose target audience is not necessarily personally known to the author, such as documents on a Web site, e-mails sent to public mailing lists, or software documentation.

이미지가 사적인 통신(예를 들어 이메일)에 포함되어 있고, 대상자가 이미지를 볼 수 있을 것임을 알고 있는 경우에는 alt 속성을 생략할 수 있습니다. 그렇지만, 설령 그러한 경우에도, 위에서 설명한 것과 같이 대체텍스트를 포함시켜서 메일을 받는 이가 이미지를 지원하지 못하는 메일 클라이언트를 사용하는 경우라든가, 혹은 그 메일이 이미지를 볼 수 없는 사용자에게 전달된 경우에도 사용할 수 있게끔 하기를 강력히 권합니다.

When an image is included in a private communication (such as an HTML e-mail) aimed at a specific person who is known to be able to view images, the alt attribute may be omitted. However, even in such cases it is strongly recommended that alternative text be included (as appropriate according to the kind of image involved, as described in the above entries), so that the e-mail is still usable should the user use a mail client that does not support images, or should the document be forwarded on to other users whose abilities might not include easily seeing images.

4.8.1.1.13 마크업 생성기를 위한 가이드

Markup generators (such as WYSIWYG authoring tools) should, wherever possible, obtain alternative text from their users. However, it is recognized that in many cases, this will not be possible.

For images that are the sole contents of links, markup generators should examine the link target to determine the title of the target, or the URL of the target, and use information obtained in this manner as the alternative text.

As a last resort, implementors should either set the alt attribute to the empty string, under the assumption that the image is a purely decorative image that doesn't add any information but is still specific to the surrounding content, or omit the alt attribute altogether, under the assumption that the image is a key part of the content.

Markup generators should generally avoid using the image's own file name as the alternative text. Similarly, markup generators should avoid generating alternative text from any content that will be equally available to presentation user agents (e.g. Web browsers).

This is because once a page is generated, it will typically not be updated, whereas the browsers that later read the page can be updated by the user, therefore the browser is likely to have more up-to-date and finely-tuned heuristics than the markup generator did when generating the page.

4.8.1.1.14 유효성 검사기를 위한 가이드

A conformance checker must report the lack of an alt attribute as an error unless one of the conditions listed below applies:

이미지를 "볼" 수 없는 사용자의 예를 자주 들고 있습니다. 그러한 사용자는 예를 들어 시각적 장애를 가진 사용자, 네트워크 대역폭이 아주 제한된 사용자, 인터넷 종량제를 쓰는 사용자, 텍스트만 표시되는 터미널 등의 브라우저를 쓰는 사용자 등이 있습니다. 그러한 것이 반드시 명시적으로 포함되어야 한다고 판단되지 않는 경우에는 그러한 예를 모두 번역하지는 않고, "이미지를 볼 수 없는 사용자"라고만 옮기겠습니다. 물론 영문 원본에서 삭제하지는 않습니다. 돌아가기