[HTML] WAI-ARIA

2023. 1. 12. 21:18· Front-end/HTML & CSS

 

 

- 옮기기전에 있던 블로그에서 가져오고 싶은 글들을 조금씩 옮겨야겠다.

- 배울 때 새롭게 배우면서 웹접근성에 대해 확 이해할 수 있었던 부분!

 

 

wai-aria (Web Accessibility Initiative Accessible Rich Internet Applications)

w3c가 출판한 기술로, 인터넷을 사용하는 사람들이 쉽게 접근할 수 있게 도와주는 장치로 스크린리더를 사용하는 유저들의 접근성을 높인다.

예를들어

<div class="breadcrumb">
        <a href="https://github.com/rohjs" aria-label="Go to rohjs profile page">
                rohjs</a>
        <a href="https://github.com/rohjs/bugless-101" aria-label="Go to bugless-101
              page">bugless-101</a>
    </div>

    <div class="pagination">
        <a href="#" aria-label="Go to previous page" class="disabled">previous</a>
        <ol>
            <li class="current-page"><a href="#" aria-label="Current page. Go to 
                        page 1">1</a</li>
            <li><a href="#" aria-label="Go to page 2">2</a</li>
            <li><a href="#" aria-label="Go to page 3">3</a</li>
            <li><a href="#" aria-label="Go to page 4">4</a</li>
            <li><a href="#" aria-label="Go to page 5">5</a</li>
            <li><button type="button" disabled>...</button></li>
            <li><a href="#" aria-label="Go to page 6">6</a</li>
            <li><a href="#" aria-label="Go to page 7">7</a</li>
            <li><a href="#" aria-label="Go to page 8">8</a</li>
            <li><a href="#" aria-label="Go to page 9">9</a</li>
        </ol>
        <a href="#" aria-label="Go to next page">next</a>
    </div>
  • 무작정 이전,다음 이라는 단어와 숫자만 마크업했을때 스크린리더를 사용하는 유저들을 위해 aria-label을 사용해서 지금 어느 페이지인지 어떤페이지로 갈 수 있는지 알 수 있다.
  • aria- hidden ="true" 일 경우 스크린리더에 읽힐 만큼 중요하지 않아서 그러지 않길 원하면 span 같은 태그에 넣어주면 된다.

 

내가 수업들으면서 이렇게 aria-label을 사용해야하는거구나 하고 이해할 수 있었던것!

<dl> 

   <dt>coke-Light - 0.3<span aria-label="litter">L</span></dt> 

   <dd>&dollar;1.50</dd> 

</dl>

 

 

참고📌

김버그의 HTML은 재밌다

'Front-end > HTML & CSS' 카테고리의 다른 글

[CSS] Grid로 배치하기  (0) 2023.11.20
[CSS] Flex로 정렬하기  (0) 2023.11.16
[CSS] CSS 라이브러리 - Styled Components, CSS Module  (0) 2023.02.08
'Front-end/HTML & CSS' 카테고리의 다른 글
  • [CSS] Grid로 배치하기
  • [CSS] Flex로 정렬하기
  • [CSS] CSS 라이브러리 - Styled Components, CSS Module
개발중인제이
개발중인제이
개발중인제이
제이로그
개발중인제이
전체
오늘
어제
  • 분류 전체보기 (100)
    • 기록 (6)
      • 회고 (1)
      • TIL (4)
      • 일상 (0)
      • 리뷰 (1)
    • Web (4)
    • Front-end (81)
      • HTML & CSS (4)
      • JavaScript (9)
      • 모던자바스크립트 (14)
      • React (21)
      • Next (6)
      • TypeScript (11)
      • git & github (2)
      • etc (14)
      • 프로젝트 (0)
    • Back-end (0)
    • 알고리즘 & 자료구조 (0)
    • 패스트캠퍼스 (8)
    • 기타 (1)

블로그 메뉴

  • 홈
  • 글쓰기
  • 관리

공지사항

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
개발중인제이
[HTML] WAI-ARIA
상단으로

티스토리툴바

단축키

내 블로그

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

블로그 게시글

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

모든 영역

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

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