에 대한

웹사이트에 햄버거 메뉴가 있습니까? 당신은 아마 할 것입니다. 그리고 왜 그러지 않겠습니까? 모바일에서 바쁜 웹사이트를 정리하는 데 도움이 됩니다.

그러나 문제가 있습니다. 실제로 시간과 노력을 기울이지 않으면 액세스할 수 없습니다.

좋은 소식은 이 문제를 해결할 수 있다는 것입니다. 방법을 알아보겠습니다.

그 상황

첫째, 햄버거 메뉴가 다음과 같이 보이고 작동한다고 가정하는 것이 안전합니다.



HTML에서 메뉴 버튼은 다음과 같습니다.

<button onclick="toggleMenuVisibility()">Menu</button>

구현 방법toggleMenuVisibility()은 사용자에게 달려 있지만 언젠가는 업데이트할 예정입니다.

문제

이제 문제는 이렇게 지정하지 않으면 스크린 리더가 이것이 메뉴를 확장하는 버튼인지 알 수 있는 방법이 없다는 것입니다.

스크린 리더는 다음과 같이 버튼을 읽습니다.

Menu, button

즉, 맹인 사용자는 이 버튼이 Menu라는 버튼이라는 것만 알며 이 버튼이 수행하는 작업(예: 메뉴 확장)이 무엇인지 명확하지 않습니다.

이것이 ARIA 속성이 들어오는 곳입니다.

해결책

메뉴 버튼에는 두 가지 속성이 필요합니다.

aria-haspopup 또는 버튼이 메뉴

를 표시한다고 스크린 리더에 알립니다.

aria-expanded 메뉴 상태, 확장 또는 축소 표시

먼저 버튼에 aria-haspopup를 추가해 보겠습니다.

<button onclick="toggleMenuVisibility()" aria-haspopup="true">Menu</button>

다음으로 aria-expanded를 추가합니다. 처음에는 메뉴가 숨겨져 있으므로 기본값은 false입니다.

<button onclick="toggleMenuVisibility()" aria-haspopup="true" aria-expanded="false">Menu</button>

이 두 속성을 추가하면 화면 판독기가 다음과 같이 메뉴 버튼을 읽습니다.

Menu, menu pop-up, collapsed, button

이제 스크린 리더 사용자에게 이 버튼을 클릭하면 무언가가 확장된다는 명확한 표시를 제공합니다. 훨씬 더 유익합니다!

마지막으로 사용자가 햄버거 메뉴 버튼을 탭할 때마다 aria-expanded의 상태를 업데이트하여 메뉴가 열려 있을 때는 true로, 메뉴가 닫혀 있을 때는 false로 설정되도록 해야 합니다. 이를 위해 toggleMenuVisibility() 함수를 업데이트하여 속성을 설정해야 합니다.

var menuElement = document.querySelector("#menu")
+ var menuButtonElement = document.querySelector("#menu-button")

function toggleMenuVisibility(){
  var currentStatus = menuElement.getAttribute("status")

  if(currentStatus === "visible"){
    menuElement.setAttribute("status", "hidden")
+    menuButtonElement.setAttribute("aria-expanded", "false")
  }
  else{
    menuElement.setAttribute("status", "visible")
+    menuButtonElement.setAttribute("aria-expanded", "true")
  }
}

이제 스크린 리더로 페이지를 열고 메뉴 버튼을 탭하여 메뉴를 열면 스크린 리더가 다음과 같이 말합니다.

Menu, menu pop-up, expanded, button

메뉴 버튼을 다시 누르면 다음과 같이 표시됩니다.

Menu, menu pop-up, collapsed, button

완벽한! 모든 사용자에게 계속 정보를 제공하기 위해 스크린 리더가 말해야 하는 내용입니다.

그리고 당신은 설정해야합니다! 이제 햄버거 메뉴에 액세스할 수 있습니다!

추가 고려 사항

1. 햄버거 아이콘에 대한 대체 라벨 제공

FontAwesome, Bootstrap 또는 이미지의 햄버거 아이콘을 사용하는 경우 aria-label 및 aria-hidden 속성을 사용하여 화면 판독기에 대한 대체 레이블을 제공해야 합니다.

<a href="#" aria-label="Collapse or expand the menu">
  <i class="fas fa-bars" aria-hidden="true"></i>
</a>

2. 메뉴를 확장한 후 메뉴에 포커스가 있는지 확인합니다.

키보드 및 스크린 리더 사용자는 메뉴 버튼을 탭/클릭한 후 즉시 메뉴에 액세스하기를 원합니다. 메뉴를 확장한 직후 메뉴에 포커스가 있는지 확인하십시오.

그건 너무 많은 일이야! 점은 무엇인가?

이전 글을 끝낸 것과 같은 방식으로 이 글을 마치겠습니다. 인간으로서 먼저, 개발자로서 그 다음으로 작업, 심지어 개인 포트폴리오에도 포함되어야 할 의무가 있습니다. 포괄적이어야 합니다. 인간이 되십시오.

당신은 어떤가요?

메뉴를 더 쉽게 이용할 수 있도록 조치를 취했습니까? 그들은 무엇이며 어떤 어려움에 직면 했습니까? 댓글로 알려주세요!