아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (198)
    • Web (145)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (5)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라
Web/Markup | WEB

[웹접근성] 꾸밈 요소의 이미지 처리

[웹접근성] 꾸밈 요소의 이미지 처리
Web/Markup | WEB

[웹접근성] 꾸밈 요소의 이미지 처리

2022. 6. 27. 18:01

 

이미지에는 alt값이 필수이다.

하지만 내용이 없는 꾸밈 요소의 이미지는 어떻게 처리하면 좋을까?

 

 

 

 

스크린리더가 이미지를 무시하는 좋은 방법

 

  • css의 background 속성 사용

 

  • <img> 태그에 alt 속성을 빈 값으로 사용
<img src="bg.jpg" alt="">

 

  • <img> 태그에 aria-hidden 사용
<img src="bg.jpg" aria-hidden="true">

 

  • <img> 태그에 role="presentation" 사용
<img src="bg.jpg" role="presentation">

 

 

 

스크린리더가 아이프레임을 무시하는 좋은 방법

<iframe role="presentation" tabindex="-1" title="hidden"></iframe>

 

 

 

이미지 폰트 사용시 주의

 

css의 가상 선택자의 content는 스크린리더가 읽는다.

이미지 폰트를 스크린리더가 읽지 못하도록 aria-hudden="true" 속성을 삽입하고 숨김 텍스트로 그 의미를 삽입한다.

<a href="/icon/address">
	<i class="icon-address" aria-hidden="true"></i>
    <span class="hide">address</span>
</a>

 

 

 


출처: https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore

728x90
저작자표시 비영리 (새창열림)

'Web > Markup | WEB' 카테고리의 다른 글

[eDM] 이메일 정보성 메일 html 만들때 참고  (0) 2021.10.29
[HTML] 태그  (0) 2021.06.28
[SEO] 메타태그 최적화  (0) 2021.06.07
[퍼블리싱] 퍼블리셔  (0) 2021.02.10
파비콘  (0) 2018.05.30

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.