의미가 올바르다는 것이 사실입니까? & 사진/아이콘을 표시하는 방법이 올바르지 않습니까?
물론 신문 기사의 모든 그림을 배경 이미지로 포함시키는 것은 그리 친절하지 않습니다. 그 이유는 화면 판독기가 alt 텍스트를 읽을 수 없기 때문입니다. 그러나 아이콘이나 사용자 인터페이스 요소는 어떻게됩니까? 의미 중심의 관점에서 이것을 배경 이미지로 포함하는 것이 정당한가?HTML - 이미지/아이콘/사용자 인터페이스 요소를 표시하는 시맨틱 방식?
의미 론적으로 올 바르고 잘못된 방법으로 여러 종류의 이미지를 표시 할 수 있습니다.
<img> 태그를 사용하는 것이 좋습니다. 여기에는 콘텐츠의 중요한 부분을 사용자에게 알리기 위해 alt 태그가 있어야합니다.<img> 태그를 사용하여 표시해야합니다.DOM에서 불필요한 노드를 사용하지 않기 때문입니다.빙고! 나는 또한 소위 "중요하지 않은"요소가 종종 페이지에서 페이지로 그리고 아마도 같은 페이지의 문맥 내에서도 반복된다는 것을 덧붙이고 싶다. 따라서 CSS를 통해 백그라운드로 로딩하면 렌더링도 균등하게됩니다. – JakeGould
아이콘을 나타내는 요소로 아이콘을 포함시켜야한다고 생각하지 않습니다. 예 : img 또는 i.
대신 각 아이콘은 특정 기능을 나타냅니다. 따라서 해당 기능에 사용할 수있는 요소를 사용해야합니다. 앵커는 a 또는 button입니다. 이러한 각 요소에는 화면 판독기 및 웹 스파이더로 파싱 할 수있는 비 그래픽 콘텐츠가 있어야합니다. 그런 다음 그래픽 아이콘으로 배경 이미지를 사용하여 해당 요소를 아름답게 만들 수 있습니다.
아이콘에 별도의 마크 업을 사용하면 의미 오류/실수가 발생합니다. 아이콘 자체는 아무 것도하지 않습니다. 기본 요소의 기능을 암기하기 만하면됩니다. 그러나 실제로 아이콘을 제거하면 해당 요소가 그대로 남아 있습니다.
예, 저는 항상 요소에 배경 이미지 또는 생성 된 의사 요소에 아이콘을 포함시킵니다.
아이콘에 CSS 클래스와 함께 'i' 요소를 사용하는 경향이 있습니다. 좋은 추세라면, 나는 모른다. 일반적으로 IMO에서는 UI (아이콘 포함)와 관련된 모든 것이 CSS에 있어야합니다. –
@FelixKling 나는 대다수의 아이콘이 여전히 만족 스럽다고 주장 할 것이다. 그들은 의미를 가지며 그것에 가치를 더합니다. 그들은 내용에 영향을 미치지 않고 제거 될 수있는 배경 장식이 아닙니다. – tomasz86