figure
271
8 câu hỏi đã được viết
시각장애인들을 위해서 img의 alt 속성에 img를 주는것으로 알고있습니다. figure안에 img 태그를 넣은 이유가 시각장애인을 위한 이유라고 생각해도 괜찮을까요? 만약 img 태그를 넣지 않고 figure태그만 있어도 시각장애인분들이 image인지 알 수 있나요?
Câu trả lời 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
144
1
수업자료 다운로드
0
150
1
VS코드에 클래스 이름만 넣으셨는데 선생님이 뭘 누르면 바로 태그로 변하던데...
1
163
1
css grid repeat() 에서 autofit 사용시
0
212
1
menu 아이템 반응형 변경
0
115
1
질문은 아니고.. 오타 발견..
0
132
1
웹에서 위치?값
0
239
1
px, em ,rem을 어떻게 감각적으로 쓸 수 있을까요?
0
536
2
강의에 나오는 html 자동으로 만들어주는 편집기에 대해 알 수 있을까요?
0
325
1
flex-basis auto, 0 차이
0
741
2
padding 대신 gap을 쓰는게 더 편하지 않나요?
2
627
1
animation forwards 관련 질문
0
512
2
auto-fill, auto-fill이 적용되지 않는것 에 대해 질문드립니다.
0
577
1
flex-grow IE 질문드립니다.
0
644
2
Flex-grow가 적용되는 영역에 대해 질문드립니다.
0
449
1
Grid 수직정렬 문의
0
1093
1
card__item에 display:flex를 했을 때..
0
527
1
11vmin
0
433
1
header class 안에 div와 h2
0
590
1
grid 반응형 페이지 step1 질문있습니다~
0
295
1
반응형 페이지 step4 order
0
374
1
미디어쿼리 사이즈
1
299
1
figure + div
0
316
1
CSS Grid를 통한 정렬의 장점
0
262
1