[웹접근성]웹접근성을 고려한 마크업(WAI-ARIA)-2

1. 마우스로 접근할 수 있는 요소는 키보드로도 접근할 수 있어야 한다.

2. button 태그의 경우 figure 태그를 자식 요소로 둘 수 없기 때문에 이 부분을 a 태그로 바꿔 준 뒤, aria 속성을 추가하여 버튼 역할을 할 수 있는 태그로 만들어준다.

<a href="#" role="button" aria-haspopup="dialog" aria-pressed="false">
        <figure>
            <img src="./1.jpg" alt="">
            <figcaption>서울 경복궁</figcaption>
            <!-- figcaption이 있다면 alt에 이미지 설명을 넣지 않아도 좋다. -->
        </figure>
</a>

aria-haspopup='dialog' 눌렀을 때 대화창이 뜨는 경우

aria-pressed = 'false' 해당 버튼이 눌렸는지 안눌렸는지 확인

 

 

Aria-role: Dialog

상세정보를 기입하는 div 태그는 아무런 의미가 없는 태그이다. 따라서 role 속성을 부여해 주어야 하며, 레이블링이 필요하다.

HTML 기반의 애플리케이션의 다이얼로그 또는 콘텐츠를 분리하는 창 또는 다른 웹 애플리케이션의 UI 혹은 페이지를 마크업하는데 사용됩니다. 다이얼로그는 일반적으로 오버레이를 사용하여 페이지 위에 표시됩니다. 다이얼로그는 비모달(non-modal) (열린 이후에도 다이얼로그 바깥의 콘텐츠와 상호작용할 수 있습니다) 또는 모달(오로지 다이얼로그 콘텐츠와 상호작용할 수 있습니다) 형태일 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA/Roles/dialog_role

<div role="dialog" aria-modal="false" aria-labelledby="title1">
        <h3 id="title1">서울 경복궁</h3>
</div>

모달창인 경우: aria-modal = 'true' /비모달창인 경우 :aria-modal='false'

label : 해당 태그를 직접 설명하는 레이블

aria-labeledby: id를 통해 해당 요소의 제목을 붙임.

aria-describedby: id를 통해 부연설명을 붙임.

<div id="backdrop" class="no-scroll">
  <div
    role="alertdialog"
    aria-modal="true"
    aria-labelledby="dialog_label"
    aria-describedby="dialog_desc">
    <h2 id="dialog_label">Confirmation</h2>
    <div id="dialog_desc">
      <p>Are you sure you want to delete this file?</p>
    </div>
    <button type="button" onclick="closeDialog(this)">
      No. Close this popup.
    </button>
    <button type="button" onclick="deleteFile(this)">
      Yes. Delete the file.
    </button>
  </div>
</div>

---

참고

https://whales.tistory.com/84

WEI-AREA 실무 예제 코드로 적용하기

https://bcp0109.tistory.com/348

웹 접근성과 WAI-ARIA