사람들이 대체 텍스트를 작성할 때 하는 4가지 실수

웹사이트에 이미지를 추가했다면 UI 프레임워크나 멘토가 alt 텍스트를 추가하는 데 방해를 받았을 것입니다. 그리고 그것은 의미가 있습니다. alt 텍스트는 컴퓨터만으로는 할 수 없는 일, 즉 그림을 단어로 바꾸는 것입니다. 사이트의 SEO를 계산하는 데 사용할 수 있고 필요한 사람들을 위해 스크린 리더에서 이미지를 설명하는 데 사용할 수 있는 단어입니다.
alt 텍스트를 선택하는 것이 쉬워보이죠? 그림을 보고 보이는 대로 쓰세요. 그러나 텍스트가 정확하지 않은 경우가 있습니다. 다음은 이미지 설명을 작성할 때 사람들이 저지르는 네 가지 실수입니다.

1. 이미지에 있는 내용을 더 자세히 설명

다른 문화권의 상징주의에 대해 글을 쓰고 있으며 힌두교의 상징인 "옴"이미지를 추가한다고 가정해 보겠습니다.



이제 대체 텍스트의 경우 이미지에 표시되는 것 이상으로 세부 정보를 추가하고 싶을 수 있습니다.

The symbol for "Om". "Om" is the sound of a sacred spiritual symbol in Indic religions. The meaning and connotations of Om vary between the diverse schools within and across the various traditions.

이것은 훌륭하지만 사용자, 특히 페이지를 이해하기 위해 대체 텍스트에 의존하는 사용자의 기대치를 생각하십시오. 그들은 당신의 이미지에 대한 정확한 설명을 기대합니다. 그 이상도 그 이하도 아닙니다. 게시물의 일부로 추가 세부 정보를 포함하여 방문자를 혼란스럽게 하지 마십시오.

2. 행동 촉구

이제 "옴"이미지로 돌아가 보겠습니다. 기호를 다루는 Wikipedia 기사에 대한 링크가 있다고 가정합니다. 물론 더 많은 것을 배울 수 있는 링크가 있다는 것을 사람들에게 알리고 싶습니다. 가는 방법에 대한 지침을 포함하는 것이 좋습니다.

The symbol for "Om". To learn more check out the link for the Wikipedia article at the bottom of the article

그러나 위에서 논의한 것과 유사하게 방문자가 클릭 유도문안을 갖고 싶어하는 마지막 위치는 이미지의 대체 텍스트입니다.

예외

그러나 이 규칙에는 예외가 있습니다. <a> 링크 내에 있는 이미지가 있다고 가정합니다.

<a href="https://en.wikipedia.org/wiki/Om">
    <img src="./om.png" alt="Om symbol"/>
</a>

alt 텍스트는 이 경우 링크의 텍스트로 작동합니다. 링크가 수행하는 작업을 텍스트로 원할 것입니다.

<a href="https://en.wikipedia.org/wiki/Om">
    <img src="./om.png" alt="Go to the Wikipedia article for Om"/>
</a>

3. 대체 텍스트에 코드 붙여넣기

이것은 일반적으로 Twitter 게시물이나 스레드에 Carbon의 코드 스니펫 이미지가 포함되어 있을 때 발생합니다. .



이미지의 HTML 코드를 검사하면 전체 코드 블록이 대체 텍스트로 지속되는 것을 볼 수 있습니다.

<img alt="// works but a lot of code const array = [1, 2, 3, 4, 5];

const firstValue = array[0];
const secondValue = array[1|;
const thirdValue = array[2];

// destructuring saves you a lot of code
const array = [1, 2, 3, 4, 5];

const [firstValue, , thirdValue, ...rest] = array;" draggable="true" src="https://pbs.twimg.com/media/FMtSnpvX0AUKRN1?format=jpg&amp;name=large" class="css-9pa8cd" />

이것은 좋은 생각인 것 같지만 - 결국 이미지의 내용을 완벽하게 설명하지만 - 그렇지 않습니다. 누군가가 기사를 읽고 코드의 모든 작은 문자를 읽는다고 상상해보십시오. 조금 지나면 짜증이 납니다.

더 나은 팁은 액세스 가능한 대안으로 게시물에 Gist에 대한 링크를 포함하는 것입니다.

4. 요점 URL

사람들이 코드 조각을 이미지로 게시할 때 하는 또 다른 일은 Gist를 만들고 대체 텍스트에 링크를 추가하는 것입니다.



이미지를 검사하면 다음을 확인할 수 있습니다.

<img alt="Accessible gist here: https://gist.github.com/emmabostian/a1387fc7da212ee99075169be9f13870" draggable="true" src="https://pbs.twimg.com/media/EouSbjPU0AMBTHv?format=png&amp;name=small" class="css-9pa8cd">

alt 텍스트를 확인하십시오.

alt="Accessible gist here: https://gist.github.com/emmabostian/a1387fc7da212ee99075169be9f13870"

액세스 가능한 Gist를 사용할 수 있다는 것은 좋지만 대체 텍스트에 넣는 것은 많은 목적을 달성하지 못합니다. 링크가 있더라도 스크린 리더 사용자가 링크를 클릭하여 Gist로 이동할 수 있는 방법은 없습니다.

대신 게시물 자체에 Gist 링크를 추가하십시오.

결론

이미지에 alt 텍스트를 추가하는 것은 충분히 간단합니다. 눈앞의 이미지를 설명하면 됩니다. 많은 경우 이미지 설명에 의존하여 콘텐츠를 이해하는 사용자를 혼동시킬 수 있는 실수로 이어질 수 있습니다. 설명에 주의하고 주의하십시오.