Google은 로고 및 버튼에 대한 대체 텍스트를 설명합니다.

Google Search Off Record 팟캐스트에서 Google의 Lizzi Sassman과 John Mueller는 로고 및 이미지 기반 버튼의 대체 텍스트를 처리하는 가장 좋은 방법에 대해 논의합니다.

로고와 버튼에 alt 속성을 추가하는 모범 사례가 있습니다.

규칙은 처음에는 약간 복잡해 보일 수 있지만 실제로는 이해하기 쉽습니다.

alt 속성을 올바르게 얻는 것은 사용자에게 좋고 장기적으로 수익에 좋습니다.

기능 이미지에 대체 텍스트 추가하기

Lizzi Sassman은 기능적 이미지, 웹페이지에서 기능적 목적이 있는 이미지를 참조하여 토론을 시작합니다.

그녀는 대체 텍스트가 버튼의 기능을 설명해야 하는지 또는 버튼이 아이콘인 상황에서 버튼의 이미지가 무엇인지를 묻습니다.

마지막으로 그녀는 버튼과 같은 기능적 이미지에 대체 텍스트를 추가하는 SEO 목적이 있는지 묻습니다.

“리지 사스만:
… 시각적 자산에 투자하는 수준과 마찬가지로 해당 자산을 설명하는 단어에도 동일한 수준의 에너지를 투입해야 합니다. 훌륭하다고 생각합니다.

이미지의 또 다른 범주는 기능적인 것과 같으며 때로는 버튼이 될 수 있습니다.

마치 무언가의 기능을 하는 그래픽인 것처럼.

그러면 대체 텍스트가 앞으로 일어날 일을 알려줘야 합니까?

클릭하면 여기로 연결되겠죠?

그것은 버튼으로 기능하는 무언가의 이미지와 같을 수 있습니다.

그리고 당신은 기능을 설명합니까?

또한 SEO가 중요합니까?

존 뮬러:
응. 제 생각에는…

리지 사스만:
로고와 같을 수 있습니다.

존 뮬러:
접근성의 경우 그 주변에서 무언가를 하는 것이 합리적일 것입니다.

그러나 SEO의 경우 사람들은 결제 버튼이나 이와 유사한 것을 검색하지 않을 것입니다.”

버튼의 대체 텍스트는 SEO가 아니라 접근성을 위한 것입니다.

John Mueller는 버튼에 대체 텍스트를 추가하는 SEO 목적이 없음을 분명히 합니다.

그러나 그는 또한 이러한 종류의 이미지에 대한 대체 텍스트가 주로 접근성을 위한 것임을 관찰했습니다.

Lizzi는 토론을 계속했습니다.

“리지 사스만:
...하지만 로고나 로고 같은 것이 필요할 수도 있습니다. 클릭하면 홈페이지로 이동합니다.

그러나 그것은 또한 "오, 로고입니다."

"이것이 Google 검색 센터의 로고입니다."라고 말할 수 있습니까?

존 뮬러:
확신하는.

리지 사스만:
또는 설명 텍스트가 될 것입니다.

로고 속 구글봇이지만 이미지에 대해 가장 중요한 것은 로고라는 사실?

아니면 로고가 어떻게 생겼나요?

그런 각도에서 사람들이 로고를 찾고 있는 것 같아요.

존 뮬러:
응.

리지 사스만:

X 회사의 로고는 무엇입니까?

존 뮬러:
응. 우리가 피하려고 하는 일종의 전략으로 돌아간다는 뜻입니다.

무엇을 위해 찾고 싶습니까?

리지 사스만:
네, 하지만 그게 가장 중요한 질문인 것 같아요.

나는 이 모든 토끼 구멍에 마음이 끌릴 수 있습니다. 그래서 우리가 생각해야 하는 것들에 우선순위를 두는 것 같습니다. 왜냐하면 이러한 것들을 위해 모든 것을 작성할 필요는 없기 때문입니다. 그런 것 같아요.”

로고 및 버튼에 대체 텍스트의 적절한 사용

로고와 같은 이미지에 대체 텍스트를 사용하는 올바른 방법은 실제로 이미지가 링크인지 아닌지에 따라 다릅니다.

로고 이미지가 홈 페이지로 돌아가는 링크 역할을 하는 경우 화면 판독기를 사용하는 사이트 방문자가 이 로고가 홈 페이지에 대한 링크임을 알 수 없도록 해당 이미지에 해당 기능으로 레이블을 지정하는 것이 옳습니다.

공식 HTML 표준 제정 기관인 W3C(World Wide Web Consortium)에서 로고 처리 방법에 대한 설명을 게시합니다.

로고 홈페이지 링크

홈 페이지 링크 역할을 하는 로고에는 스크린 리더 사용자에게 로고가 홈페이지 링크임을 알려주는 대체 텍스트가 포함되어야 합니다.

W3C는 다음 코드 예를 사용합니다.

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="W3C 홈">
</a>

위의 코드는 홈 페이지로 돌아가는 링크 역할을 하는 페이지 상단에서 만날 수 있는 로고에 대한 것입니다.

W3C에서 제공하는 예제 대체 텍스트는 단순히 "W3C 홈"이라고 표시되지만 원하는 경우 더 설명적일 수 있습니다.

로고 및 텍스트 홈페이지 링크

이미지 로고와 텍스트가 바로 옆이나 바로 아래에 있고 이미지와 텍스트가 동일한 링크 코드 내에서 코딩되는 다른 종류의 로고 링크가 있습니다.

즉, 로고 링크 하나, 텍스트 링크 하나와 같이 두 개의 링크가 있는 것이 아니라 로고와 텍스트 모두에 하나의 링크일 뿐입니다.

이 경우 링크의 기능을 텍스트로 설명하기 때문에 로고 링크의 기능을 반복하는 작업이 반복됩니다.

따라서 이 경우 가장 좋은 방법은 null 대체 텍스트를 사용하는 것입니다.

다음은 W3C가 제공하는 예입니다.

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> W3C 홈
</a>

이미지에 대해 alt 속성이 코딩되는 방식에 유의하세요.

 img src="w3c.png" alt=""

대체 텍스트에 대한 빈 따옴표를 널 대체 속성(또는 널 대체 텍스트)이라고 합니다. 스크린 리더는 그냥 건너뛸 것입니다.

null 대체 텍스트가 좋은 이유는 링크 기능이 무엇인지 설명하는 텍스트가 있기 때문입니다.

W3C 홈

아이콘 링크의 대체 텍스트

링크가 아이콘 형태인 경우도 있습니다. 예를 들어 봉투 형태의 아이콘(이메일 또는 메시지를 나타냄) 또는 프린터(링크가 프린터를 활성화함을 나타냄)와 같이 해당 기능을 설명하는 텍스트가 없습니다.

이 상황에서 이미지가 무엇인지 설명하는 것은 좋지 않습니다(예: 봉투 또는 프린터).

가장 좋은 방법은 이미지가 하는 일을 설명하는 것입니다(이메일 시작 또는 웹페이지 인쇄).

W3C는 다음 코드와 대체 텍스트가 있는 프린터 아이콘의 예를 사용합니다.

 <a href="javascript:print()">
<img src="print.png" alt="이 페이지 인쇄">
</a>

보시다시피 프린터 모양의 아이콘에는 "이 페이지 인쇄"라는 단어가 대체 텍스트로 있습니다. 아이콘이 하는 일을 알려줍니다. 도움이 됩니다.

버튼의 대체 텍스트

아이콘의 예와 유사하게 버튼 이미지의 대체 텍스트는 이미지가 하는 일을 설명해야 합니다.

W3C는 제출 버튼에 돋보기가 있는 검색 상자의 예를 사용합니다.

그렇게 하는 나쁜 방법은 이미지가 돋보기임을 설명하기 위해 대체 텍스트를 사용하는 것입니다.

가장 좋은 방법은 대체 텍스트를 사용하여 이미지의 기능을 설명하는 것입니다.

다음은 W3C가 예시로 보여주는 예제 코드입니다.

 <input type="image" src="searchbutton.png" alt="검색">

보시다시피 검색 버튼의 대체 텍스트는 버튼의 기능을 설명하는 "검색"이라는 단어입니다.

버튼 및 로고의 대체 텍스트

Lizzi와 John은 로고와 버튼에 대한 다양한 시나리오를 처리하는 방법에 대해 자세히 설명하지 않았습니다.

그러나 John은 버튼과 로고의 대체 텍스트에 대한 SEO 값이 없으며 접근성을 위한 것이라고 지적했습니다.

화면 판독기로 웹 페이지에 액세스하는 사용자에게 작동하는 웹 페이지를 적절하게 제공하는 것이 모범 사례입니다.

앞서 언급했듯이 스크린 리더를 사용하는 사람들은 귀하의 비즈니스 또는 웹사이트의 고객 또는 옹호자가 될 수 있습니다.

따라서 접근성 모범 사례를 사용하는 것이 수익에 좋습니다.

인용

W3C에서 버튼 및 로고의 접근성에 대해 자세히 알아보십시오.

기능적 이미지

동일한 리소스에 대해 인접한 이미지 및 텍스트 링크 결합

제출 버튼으로 사용되는 이미지에 alt 속성 사용

15:57분에 Search Off the Record 팟캐스트를 들어보세요.

Shutterstock/Evgeny Atamanenko의 추천 이미지