figure
261
작성한 질문수 8
시각장애인들을 위해서 img의 alt 속성에 img를 주는것으로 알고있습니다. figure안에 img 태그를 넣은 이유가 시각장애인을 위한 이유라고 생각해도 괜찮을까요? 만약 img 태그를 넣지 않고 figure태그만 있어도 시각장애인분들이 image인지 알 수 있나요?
답변 4
2
특별히 이유가 있는 것은 아니고요,
Flex와 Grid에 집중하는 수업이기 때문에 접근성에 크게 비중을 두지는 않았습니다.
display: none; 대신 사용할 수 있는 방법은
figure에 { positon: relative; } 를 주고
img에 { position: absolute; left: -10px; width: 1px; height: 1px; }
이런 식으로도 가능하고요, 이 외에도 clip-path로 마스킹을 한다든지 하는 다양한 방법들이 있습니다.
보통 이런 리스트에서는 이미지가 없더라도 제목과 요약글로 모든 정보를 파악할 수 있기 때문에,
display: none;도 별 문제가 되지는 않더라고요.
<img>가 있으면 좋다는 것은 꼭 시각장애인 분들만을 위한건 아니고요,
콘텐츠의 기본 구조상 이미지가 꼭 필요한지 아닌지를 판단해보시면 좋을 것 같아요.
그건 콘텐츠의 내용에 따라 달라지겠지요~
CSS를 제거하고 기본 HTML 구조를 바라보면 좀 더 생각이 쉽지 않을까 생각이 됩니다^^
0
이미지가 단순히 장식 요소라면 굳이 넣을 필요 없이 CSS 배경 이미지로만 하셔도 되고요,
의미 상 있어야 하는 이미지라면 말씀대로 <img> 를 넣어 주시는게 좋습니다^^
시각장애인 분들이 사용하는 스크린리더의 경우는 display: none; 처리 된 것은 대체 텍스트를 읽어주지 않기 때문에
아예 안보이게 하는 것 보다는 위치나 크기를 조정해서 안보이게 하는 것이 더 좋다고 알고 있습니다.
가로스크롤 과 margin: 0 -1rem 질문 있습니다
0
119
1
수업자료 다운로드
0
122
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
138
1
css grid repeat() 에서 autofit 사용시
0
183
1
menu 아이템 반응형 변경
0
102
1
질문은 아니고.. 오타 발견..
0
121
1
웹에서 위치?값
0
212
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
510
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
310
1
flex-basis auto, 0 차이
0
711
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
607
1
animation forwards 관련 질문
0
489
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
560
1
flex-grow IE 질문드립니다.
0
625
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
437
1
Grid 수직정렬 문의
0
1076
1
card__item에 display:flex를 했을 때..
0
513
1
11vmin
0
418
1
header class 안에 div와 h2
0
577
1
grid 반응형 페이지 step1 질문있습니다~
0
282
1
반응형 페이지 step4 order
0
357
1
미디어쿼리 사이즈
1
287
1
figure + div
0
301
1
CSS Grid를 통한 정렬의 장점
0
248
1