아리아의 베일을 벗기 시작합니다.

최초 출시 a11ywithlindsey.com
만약 네가 아직 모른다면, 나는 보통 이것들을 교차해서 위에 붙일 것이다.내가 왜 접근성이 가장자리가 아닌 사례를 교차 발표했을 때, 나는 접근성의 실현이 더욱 간단하길 바란다는 평론을 받았다.일단 제가 HTML과 CSS 모범 사례에 대한 최신 정보를 파악하면 접근 가능한 해결 방안을 어떻게 제공하는지 배우는 것이 그렇게 어렵지 않다는 것을 알게 되었습니다. 그래서 저는 그들이 어디에서 어려움을 발견했는지 정말 궁금합니다.당시 주요 통증은 영탄조인 것 같았다.
나는 영탄조에 대한 곤혹스러움과 언제 그것을 사용해야 하는지, 사용하지 말아야 하는지를 많이 보았다.이 영탄조 속성들은 도대체 무엇을 의미하는가?모든 속성의 목록이 있습니까?나는 그것을 하나의 시리즈로 만드는 것을 고려하고 있다. 아마도 매주 아리아 속성을 복습할 것이다. 그리고 어떻게 사용하든지, 내가 그것을 좋아하든지, 등등. 내가 모든 아리아 속성을 토론하기 전에, 나는 정말 아리아의 용도와 네가 그것을 사용해서는 안 된다고 생각한다.

아리아는 도대체 뭐야?

ARIA는 요소에 추가할 수 있는 속성으로 요소에 상하문과 의미를 추가할 수 있습니다.이것은 많은 일에 매우 유용하다.다음은 ARIA가 도움이 되는 점을 발견한 것입니다.

동적 컨텐츠를 로드할 시기를 알려줍니다

중요 이벤트 발생 시 알림

상태 변경 시 화면 판독기 알려줌

필요한 경우 추가 컨텍스트 추가

ARIA에 관한 문서는 매우 무섭다.접근하기 쉬운 사람이라도 나는 좀 무섭다.내가 아리아를 배우는 방식은 트위터와 같은 유용한 응용 프로그램을 여는 것이다.그리고 나는 요소를 검사하고 HTML에서 aria 를 검색하며 모든 속성을 보았다.그리고 나서 나는 내 화면 리더를 켜서 내가 그 특정 요소에 도달했을 때 실제로 발표한 내용을 진정으로 들었다.예를 들어 Mac에서 VoiceOver를 사용하고 트위터 홈페이지를 열었을 때 이것은 내 개인 정보 사진의 오른쪽 상단에 표시된 것이다.

<a href="/settings" id="user-dropdown-toggle" role="button" aria-haspopup="true">
<!-- Children Elements --> 
</a>

주의: 읽을 수 있도록 표시에서 속성과 클래스를 삭제했습니다.
나는 첫 눈에 두 개의 ARIA 속성을 보았다. role="button"과aria-haspopup="true".그렇다면 내가 스크린 리더를 사용할 때, 이것은 무엇을 의미하는가.
외음을 그리며 말한 첫 번째 일.
외음을 그리며 말한 두 번째 일.
읽은 내용을 보면 "팝업 버튼"을 볼 수 있습니다태그는 링크이기 때문에 이러한 속성이 없으면 링크로 읽힙니다.솔직히 말하면 이 표시는 <button> 로 변경할 수 있다고 생각합니다. 왜냐하면 이 책을 읽을 때 링크를 사용하여 href 속성 값(/설정) 으로 이동할 수 없고 단추와 같기 때문입니다.하지만 팝업 창의 상하문이라는 것을 알면 화면 판독기에 도움이 될 수 있습니다.
내가 처음 물건을 구축하기 시작했을 때, 나는 보통 영탄조를 사용할지 말지 망설인다고 말할 것이다.당신들은 내가 이 표지를 비판하고 내가 무엇을 바꿀 것인지를 말했을 것이다. 바로 이 때문에 나는 상하문을 추가할 필요가 없으면 아리아를 사용하지 않으려고 시도했기 때문이다.이것이 바로 나의 기술 게시물에서 내가 처음부터 코드를 작성하는 이유이다. 너는 아마 처음에 아리아 속성을 보지 못할 것이다.나는 많은 원인이 나를 야기한다...

영탄조는 뭐 아니에요?

내가 처음 모임에서 아리아를 소개했을 때, 맹인 개발자가 회의에 참석했는데, 그가 나에게 물었다.이거 하나도 재미없어.이것은 ARIA가 영원히 접근 가능한 초점이 되어서는 안 될 때가 많기 때문이다. 특히 우리가 HTML5를 가지고 있는 오늘날에.HTML5는 화면 판독기가 과거에 직면했던 많은 의미 문제를 해결했다.
다음은 ARIA의 차이점입니다.

의미 HTML 대체품

응, 이것이 바로 내가 생각할 수 있는 것이다.우리 하나의 예로 나의 뜻을 설명하자.기본 스타일 <button> 을 좋아하지 않지만 내장 버튼 기능을 모두 좋아한다면 이 HTML은 모든 버튼 기본값을 신기하게 사용하지 않습니다.

<div role="button">
  Open Menu
</div>

이 단추의 클릭 이벤트가 있다고 가정하십시오.만약 네가 나의 3 Simple Tips to Improve Keyboard Accessibility에 관한 글을 읽었다면, 너는 단추에 내장된 기본 기능이 있다는 것을 알게 될 것이다.다른 일은 하지 않는 상황에서 이 모든 것은 스크린 리더가 있는 단추로 발표된다.그러나 키보드가 없으면 집중할 수 없다.그래서 다음 단계는 우리가 하나를 확보하는 것이다tabindex.한번 해볼게요.

<div tabindex="0" role="button">
  Open Menu
</div>

저희가 지금 클릭 이벤트를 사용할 수 있을까요?한번 해볼게요.HTML을 업데이트하여 JavaScript를 사용하여 위치를 쉽게 지정할 수 있도록 ID를 포함합니다.

<div tabindex="0" id="button" role="button">
  Open Menu
</div>

이제, 나는 여기에서 기본적인 자바스크립트를 작성하여 그것이 유효한지 아닌지를 볼 것이다.

const button = document.getElementById('button');
button.addEventListener('click', () => alert('clicked!'));

gif에서 알 수 있듯이 ARIA 캐릭터나 tabindex는 그것을 복구하지 않았습니다.버튼의 키 이벤트를 감청해야 합니다.나는 너희들과 함께 디버깅을 할 것이다. 이렇게 하면 우리는 이것이 얼마나 많은 추가 업무인지 이해할 수 있다.

button.addEventListener('keypress', (e) => {
  console.log(e)
})

콘솔 로그 결과:

우리가 여기서 무엇을 하는지 생각해 봅시다.버튼에 키 이벤트를 추가하고 이벤트 대상의 속성을 검사했습니다.이 점은 매우 중요하다. 만약 우리가 단추를 복사하고 싶다면, 우리가 단추 이벤트가 있을 때, 우리가 어떤 단추를 누르고 있는지 주의해야 하기 때문이다.내장된 HTML 버튼 비헤이비어는 Enter 키 및 스페이스 바에 적용됩니다.콘솔 로그를 볼 때 e.code 를 사용하고 싶습니다.다음은 제가 조건으로 업데이트할 내용입니다.

button.addEventListener('keypress', (e) => {
  if (e.code === 'Enter' || e.code === 'Space') {
    alert('pressed!')
  }
})

따라서 가장 도전적인 일은 아니지만 <div> 을 <button> 로 바꾸는 것이 더 쉽다.당신은 CSS를 사용하여 기본적인 스타일에서 벗어날 수 있습니다. 전반적으로 말하면 당신의 생활을 더욱 쉽게 할 수 있습니다!

결론

나는 영탄조를 생각하는 방식이 언어 환경이라고 생각한다.때때로 너는 별도의 배경이 필요 없다. HTML이면 틀림없이 충분할 것이다.그러나 때로는 더 좋을 수도 있다. 특히 사용자 정의 작은 위젯이라면.앞으로 저는 ARIA의 구체적인 속성과 작용을 더 많이 소개할 것입니다. 주로 문서가 좀 무섭기 때문입니다.건배!
만약 당신이 이 박문에 대해 어떤 의문이 있으면 언제든지 저에게 연락 주세요!