인프런 커뮤니티 질문&답변

특별히 이유가 있는 것은 아니고요,
Flex와 Grid에 집중하는 수업이기 때문에 접근성에 크게 비중을 두지는 않았습니다.
display: none; 대신 사용할 수 있는 방법은
figure에 { positon: relative; } 를 주고
img에 { position: absolute; left: -10px; width: 1px; height: 1px; }
이런 식으로도 가능하고요, 이 외에도 clip-path로 마스킹을 한다든지 하는 다양한 방법들이 있습니다.
보통 이런 리스트에서는 이미지가 없더라도 제목과 요약글로 모든 정보를 파악할 수 있기 때문에,
display: none;도 별 문제가 되지는 않더라고요.

<img>가 있으면 좋다는 것은 꼭 시각장애인 분들만을 위한건 아니고요,
콘텐츠의 기본 구조상 이미지가 꼭 필요한지 아닌지를 판단해보시면 좋을 것 같아요.
그건 콘텐츠의 내용에 따라 달라지겠지요~
CSS를 제거하고 기본 HTML 구조를 바라보면 좀 더 생각이 쉽지 않을까 생각이 됩니다^^

답변 감사합니다 ! 많은 도움이 되었습니다

그러면 강의에서 img를 넣으시고 display:none을 주신 이유가 있을까요? 

이미지가 단순히 장식 요소라면 굳이 넣을 필요 없이 CSS 배경 이미지로만 하셔도 되고요,
의미 상 있어야 하는 이미지라면 말씀대로 <img> 를 넣어 주시는게 좋습니다^^
시각장애인 분들이 사용하는 스크린리더의 경우는 display: none; 처리 된 것은 대체 텍스트를 읽어주지 않기 때문에
아예 안보이게 하는 것 보다는 위치나 크기를 조정해서 안보이게 하는 것이 더 좋다고 알고 있습니다.