텍스트로 그래픽에 대체 속성을 사용하고 있습니까?

이것이 스크린 리더와 로봇을위한 대안입니다.

If HTML에 img을 통해 이미지를 포함시키고, alwaysalt 속성을 사용하십시오 (때때로 빈 값).

If 이미지에 텍스트가 포함되어 있으며이 텍스트가 전달하려는 관련 컨텐츠 (일부) 인 경우이 텍스트를 alt 값에 포함하십시오.

그러나 접근성을 위해 텍스트를 포함하는 이미지를 괜찮은 것으로 간주되는 대체 속성으로 사용하고 있습니까?

아니요. 시각 장애인이나 텍스트 브라우저 사용자에게는 장애가되지 않지만, 난독증이 있거나 시각 장애가있는 사용자 (이미지가 활성화 된 사용자)는 텍스트 이미지에 문제가있을 수 있습니다.

• 사용자는 글꼴 크기, 줄 높이, 글자 간격을 조정할 수 없습니다.
• 사용자는 글꼴 모음을 변경할 수 없습니다.
• 사용자는 색상/대비를 변경할 수 없습니다.
• 사용자는 텍스트를 선택할 수 없습니다 (예 : 복사하여 붙여 넣기). _{(- noted by Kit Grose)}

아마도 짧은 텍스트 (단일 Word, 매우 짧은 제목, 클릭 유도 문안 버튼 등)에는 큰 문제가되지 않지만 긴 텍스트에 사용하면 접근성 장애가 될 수 있습니다.

텍스트로 그래픽의 가장 큰 단점 중 하나는 텍스트 크기를 조정할 수 없다는 것입니다 (참고 : 확대/축소가 아닌 텍스트 크기). ems에서 이미지 크기를 조정하면이를 완화하는 데 도움이 될 수 있습니다.

또한 이미지가 동적으로 생성되지 않으면 이미지를 사용할 때 유지 관리 성이 크게 저하됩니다.

또한 원하는 모든 글꼴이 사용자 정의 글꼴이면 이미지를 제공하는 것이 비효율적입니다. 이미지의 파일 크기는 해당 텍스트보다 훨씬 많습니다.

나는 아무런 문제가 없다. 나는 그것이 나쁜 생각이라고 말하는 사람을 결코 들어 본 적이 없습니다. 그러나 다음을 피하거나 수행하십시오.

• 페이지의 전체 내용을 이미지로 만들기 (자신이하는 일을 모르는 사람들이 흔히 저지르는 실수) 검색 엔진을 포함하여 거의 모든 것을 파싱하기가 어렵습니다.
• 가능한 많이 피하려고 노력하십시오. 이미지에 대한 텍스트를 작성하는 것이 좋습니다. 모든 것을 쉽게 할 수 있습니다 (텍스트, SEO 등의 복사)
• alt 및 title 속성을 모두 추가합니다. 이렇게하면 사람들이 이미지를 롤오버 할 때 툴팁이 표시됩니다 (다른 브라우저는 다른 브라우저를 표시하기 때문에). 나는 대부분 링크 된 이미지 에서이 작업을 수행합니다.

다른 사람들이 말했듯 이이 접근법을 사용하는 경우 대체 텍스트를 제공해야하지만 사용하지 않는 것이 좋습니다.

• 확대/축소가 깨집니다. 래스터 이미지는 더 큰 크기로 확장 할 수 없습니다.

• 이미지는 텍스트보다 더 많은 공간을 차지하므로 페이지로드 시간이 크게 증가합니다.

• 브라우저 색상을 변경하는 뷰어 (예 : 가독성을 높이기 위해 어두운 곳에서 고 대비로 변경하면 이미지가 제대로 표시되지 않고 대체 기능이 표시되지 않습니다.

• 붙여 넣기 복사 기능이 작동하지 않습니다 (사용자는 텍스트를 복사하여 문서에 텍스트로 붙여 넣을 수 없습니다).

• 레이아웃 및 응답 성-휴대 기기의 가독성이 손상 될 수 있습니다.-텍스트가 텍스트가 아닌 경우 더 작은 디스플레이에 맞추기 위해 브라우저에서 텍스트를 다르게 구분하지 못할 수 있습니다.

• 각 단어 나 문장을 자체 이미지에 배치하면 레이아웃이 향상 될 수 있지만 텍스트 분석 (SEO)이 중단 될 수 있습니다.

• CSS 및 글꼴 파일을 사용하여 표시 글꼴을 적용하는 데 일반적으로 지원되는 방법이 있습니다. 일부 고대 브라우저에서이 기능을 지원하지 않으면 최신 브라우저 사용자 모두가 고통을 겪지 않아야합니다.

대체 텍스트의 가치는 SEO 관점에서 감소하고 있기 때문에 우리 모두가 접근성에 초점을 맞추고 화면 판독기를 위해 대체 텍스트를 최적화 할 수있는 것 같습니다.

내가 아는 한, 그것은 귀하의 SERP 순위에 약간의 영향을 미칩니다