aria-label을 사용한 웹 접근성 처리

2023. 12. 1. 15:19·💻 Dev/Etc

최근 웹, 모바일 접근성 심사를 진행하면서 대체 텍스트에 대한 부분을 맡게 되었다.

여태까지는 웹 접근성만 했어서 title, alt로 처리했었는데, 모바일 접근성도 하게 되면서 WAI-ARIA를 사용했다.

그리고 Title 속성 사용을 지양해야 하는 이유라는 글을 보고 aria 태그를 적극적으로 활용해야겠다고 생각했다.

 

 

간단한 예시로 기록하려고 한다. (안하면 까먹을 것 같아서)

이미 전체적인 CSS가 너무 범용적으로 입혀져 있어서 기존 태그 변화 없이 진행해야 했음을 미리 밝힙니다...

 

사용 속성

role

role은 태그의 역할을 지정하는 속성이다. 

정해진 태그만 사용할 수 있음 ex) link, button, tab ... 

 

aria-label

aria-label 은 태그에 이름표를 붙이는 것과 같다. 사용자에게 전달해야 할 내용을 적으면 된다.

또한 내부 텍스트 컨텐츠를 읽지 않는다.

 

aria-hidden

true, false 두 가지 값을 지정할 수 있고, true일 시 스크린 리더가 읽지 않는다.

 

 

 

 

예제1 

<div onclick="openNotice();" style="cursor: pointer;">
    <h4>11월 5일 공지사항</h4>
    <p>오늘은 휴무입니다.</p>
</div>

위 코드는 div자체에 클릭 이벤트를 추가해 버튼처럼 사용하고 있다.

이 코드를 스크린 리더로 읽을 경우 "11월 5일 공지사항, 오늘은 휴무입니다."로 읽어준다.

실행 가능한 개체임을 알 수 있도록  --버튼 또는 --링크 등으로 제공해야 한다.

 

<div onclick="openNotice();" style="cursor: pointer;" role="link" aria-label="공지사항 상세 페이지">
    <h4 aria-hidden="true">11월 5일 공지사항</h4>
    <p aria-hidden="true">오늘은 휴무입니다.</p>
</div>

aria-hidden을 통해 스크린 리더가 h4, p태그를 읽지 못하게 하고,div 전체 영역을 링크로 인식하게 변경했다.

스크린 리더는 "공지사항 상세페이지 링크"라고 읽는다.

 

 

예제2

본인의 알림 개수를 보여주는 부분이 있었다.

기존 코드는 아래와 같다.

<div class="notifi">
	<a href="/myNews.do">0</a>
</div>

위 코드는 스크린 리더가 "0 링크"라고 읽는다.

의미 있는 이미지에 대해 대체 텍스트를 제공해야 한다. ex) 알림 0

 

<div class="notifi">
	<a href="/myNews.do" aria-label="알림 0">0</a>
</div>

aria-label로 내부 텍스트를 대체하면 스크린 리더는 "알림 0 링크" 라고 읽는다.

 

 

 

 

참고

WAI-ARIA: role과 aria-label 사용법
WAI-ARIA에 대한 고찰 : 1탄

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

'💻 Dev > Etc' 카테고리의 다른 글

[Web] 웹 동작 과정  (0) 2020.10.29
[JavaScript] JSP스크립틀릿 문자열과 비교 오류 Uncaught SyntaxError: Invalid or unexpected token  (0) 2020.10.14
unable to launch the java virtual machine located at path msvcr100.dll  (19) 2020.08.26
[Oracle] ORA-65096: 공통 사용자 또는 롤 이름이 부적합합니다. 오류  (0) 2020.08.26
[Oracle] ORA-01950: 테이블스페이스 'USERS'에 대한 권한이 없습니다. 오류  (1) 2020.08.26
'💻 Dev/Etc' 카테고리의 다른 글
  • [Web] 웹 동작 과정
  • [JavaScript] JSP스크립틀릿 문자열과 비교 오류 Uncaught SyntaxError: Invalid or unexpected token
  • unable to launch the java virtual machine located at path msvcr100.dll
  • [Oracle] ORA-65096: 공통 사용자 또는 롤 이름이 부적합합니다. 오류
현주먹
현주먹
대구 불주먹 출신 현주먹의 개발.log
  • 현주먹
    현주먹의 개발로그
    현주먹
  • 전체
    오늘
    어제
    • 전체글 (179)
      • 👶🏻 CS (15)
        • Operating System (7)
        • DB (5)
        • Data Structure (2)
        • Software Engineering (1)
      • 💻 Dev (54)
        • Java & OOP (24)
        • Spring (4)
        • DB&JPA (6)
        • Test Code (1)
        • JSP & Servlet (13)
        • Etc (6)
      • 💡 Algorithm (25)
        • 인프런 (9)
        • 백준 (16)
      • 🛠 DevOps & Tool (11)
        • Linux (4)
        • AWS (1)
        • Git (2)
        • Etc (4)
      • 📝 끄적끄적 (74)
        • 후기 및 회고 (11)
        • TDD, 클린 코드 with Java 17기 (3)
        • F-Lab (23)
        • 🖥️ 자바의 정석 (11)
        • 📖 Clean Code (3)
        • 항해99 코테 스터디 (11)
        • 📖 가상 면접 사례로 배우는 대규모 시스템 설계 .. (11)
  • 블로그 메뉴

    • 🐈‍⬛ GitHub
    • TIL repository
  • 인기 글

  • 최근 글

  • 최근 댓글

  • 태그

    JPA
    C
    코딩테스트준비
    2025스프링캠프
    jsp 2.3 웹 프로그래밍: 기초부터 중급까지
    NextSTEP
    객체지향
    백준
    오라클
    jsp
    개구리책
    개발자취업
    F-Lab
    에프랩
    f-lab 후기
    항해99
    til
    자바의정석
    오블완
    자바의신절판
    인프런 특정문자뒤집기
    티스토리챌린지
    코테스터디
    데브클럽
    에프랩 후기
    ==와 equals()
    TDD 클린 코드 with Java
    99클럽
    개발자멘토링
    로또 미션
  • hELLO· Designed By정상우.v4.10.2
현주먹
aria-label을 사용한 웹 접근성 처리
상단으로

티스토리툴바