WordPress 사이트의 HTML에서 ARIA를 사용하는 방법
게시 됨: 2019-06-29웹 개발의 주요 목표 중 하나는 매력적인 사용자 경험을 만드는 것입니다. 웹사이트에 대화형 기능과 멋진 시각적 요소를 포함하여 이를 수행하는 경우가 많습니다. 그러나 이러한 측면은 모든 잠재 방문자, 특히 스크린 리더에 의존하는 방문자가 반드시 액세스할 수 있는 것은 아닙니다.
다행히도 모든 사용자가 열심히 일한 결과를 경험할 수 있도록 지원하는 시스템이 있습니다. 사이트의 HTML에 ARIA(액세스 가능한 리치 인터넷 응용 프로그램)를 통합하는 데 약간의 추가 노력만 필요하고 엄청난 결과를 얻을 수 있습니다. 이 게시물에서는 ARIA와 사용 방법을 소개합니다. 가자!
ARIA 소개: ARIA의 정의와 사용 이유
간단히 말해서 ARIA는 HTML의 속성을 지정하여 스크린 리더가 정확하게 식별하여 방문자에게 전달할 수 있도록 하는 방법입니다. 이는 액세스 가능한 웹 개발의 핵심 요소이며 스크린 리더 사용자에게 보다 정확한 경험을 제공하는 데 도움이 됩니다.
HTML에 ARIA를 통합하면 브라우저가 화면 판독기용 웹 페이지를 수정하는 방식에 영향을 미치기 때문입니다. 이 수정된 콘텐츠는 접근성 트리에 표시되며 ARIA는 HTML 요소를 해당 트리로 변환하는 작업을 수행합니다.
예를 들어 체크박스가 있는 페이지가 있고 HTML에서 ARIA를 사용했다고 가정해 보겠습니다. ARIA는 화면 판독기에 사용자에게 페이지에 확인란이 있음을 알리고 확인란이 선택되었는지 여부를 나타냅니다. 기본 HTML은 이 작업을 자체적으로 수행할 수 없습니다.
직장에서 뿐만 아니라 일상 생활에서 웹을 얼마나 자주 사용하는지 생각해 보십시오. 이제 웹의 많은 부분을 사용할 수 없다고 상상해 보십시오. 교육, 고용, 건강 관리, 정보, 의사 소통 및 엔터테인먼트를 위한 리소스에 액세스할 수 있는 기회가 줄어들 것입니다.
액세스 가능한 웹 개발을 위한 모범 사례를 사용하는 것은 인터넷을 연령이나 능력에 관계없이 모두에게 평등한 기회의 장소로 만들기 위해 귀하의 역할을 수행하는 한 가지 방법입니다. 이는 유엔이 정한 기본적 인권으로, 그 자체로 가치 있는 목표입니다.
하지만 ARIA 사용에 투자하기에 충분하지 않다면 접근 가능한 개발이 비즈니스 관점에서도 유용하다는 점에 유의해야 할 수도 있습니다. 검색 엔진 최적화 모범 사례와 겹치며 웹 사이트의 도달 범위를 늘립니다. 또한 경우에 따라 법적으로 요구되는 경우도 있습니다. 다시 말해서, 귀하의 사이트를 보다 쉽게 액세스할 수 있도록 하기 위해 몇 가지 간단한 조치를 취해야 하는 많은 이유가 있습니다.
WordPress 사이트의 HTML에서 ARIA를 사용하는 방법(3가지 핵심 사례)
이 게시물의 범위를 넘어 ARIA 및 웹 접근성에 대해 계속 교육하는 것이 좋습니다. 특히 사이트의 현재 접근성을 테스트하는 것이 좋습니다.
즉, WordPress 사이트의 HTML에서 ARIA를 사용하기 시작하려면 세 가지만 알아야 합니다. 아래의 방법을 배우면 탄탄한 기초를 다질 것입니다.
1. 시맨틱 HTML과 함께 ARIA 사용하기
ARIA를 HTML에 적용하는 방법을 논의하기 전에 ARIA를 사용하는 것이 적절한 시기 를 알아두는 것이 중요합니다. 기본 HTML만으로는 액세스 가능한 웹 콘텐츠를 만들 수 없지만 ARIA를 불필요하게 만들거나 올바르게 사용되지 않으면 ARIA와 충돌하는 몇 가지 의미론적 요소가 있습니다.
<header> , <Figure> 및 <nav> 와 같은 의미 요소는 HTML의 목적을 설명합니다. 시맨틱 HTML은 이미 요소의 역할을 의미하기 때문에 이러한 요소에 ARIA를 통합하는 것은 중복됩니다.
또한 개발자가 시맨틱 HTML과 충돌하는 방식으로 ARIA를 사용하는 것을 방지하기 위해 ARIA 사용에 적용되는 특정 규칙이 있습니다. W3C(World Wide Web Consortium)에는 ARIA 역할을 암시하는 시맨틱 HTML 요소를 분류하는 유용한 표가 있습니다.
첫 번째 열은 HTML 요소를 지정하고 두 번째 열은 암시된 역할을 나열합니다. 요소에 묵시적 역할이 나열되어 있으면 해당 요소에 대한 추가 ARIA 역할을 포함할 필요가 없습니다. 세 번째 열은 모범 사례에 따라 각 HTML 요소가 가질 수 있는 역할을 나열합니다.
2. HTML 태그에 역할 추가
작업 중인 HTML 요소가 ARIA를 사용해야 한다고 확신하면 '역할' 및 '속성'을 사용할 수 있습니다. 이전 섹션에서 ARIA 역할이 무엇을 하는지 이미 알고 있을 수 있습니다. 태그 내에 포함된 요소의 유형을 지정하고 요소의 목적을 나타냅니다.
따라서 예를 들어 사용자에게 업데이트를 설치해야 함을 알리는 경고를 만들려면 다음과 같이 '경고' 역할을 사용합니다.
<div 역할="경고"> <p>최신 업데이트를 설치하세요!</p> </div>
앞에서 설명했듯이 요소가 의미 체계적이고 역할을 암시하는 경우 역할을 할당할 필요가 없으며 암시된 역할과 충돌하는 요소에 새 역할을 할당해서는 안 됩니다. 그러나 각 요소에 하나의 역할만 적용할 수 있다는 점도 유의해야 합니다.
이런 식으로 생각하십시오. 역할은 요소 가 무엇인지 정의합니다. 요소는 동시에 두 가지가 될 수 없으므로 가장 잘 설명하는 역할을 선택해야 합니다. 즉, 필요할 때 다른 역할을 가진 요소 내부에 하나의 요소를 중첩하도록 선택할 수 있습니다.
예를 들어 위의 경고를 헤더에 추가하려는 경우 다음과 같이 보일 수 있습니다.
<헤더><div 역할="경고"> <p>최신 업데이트를 설치하세요!</p> </div></헤더>
단일 요소가 헤더이자 경고라고 명시하는 대신 헤더 내에 경고가 포함되어 있음을 분명히 합니다.
3. 상태 및 속성을 기록하기 위한 속성 포함
속성은 ARIA를 구성하는 두 번째 요소입니다. 그것들은 스크린 리더에게 그 요소가 무엇인지 정의하는 것이 아니라 특정 요소에 대해 중요한 것을 알려준다는 점에서 역할과 다릅니다. ARIA 속성에는 두 가지 유형이 있습니다.
- 변화 가능성이 그들과 함께 할 때 사용자 상호 작용 기능에 대한 상태 정보를 공유. 예를 들어 여기에는 확인란이나 라디오 버튼이 포함될 수 있습니다.
- 속성 은 사용 중에 변경되지 않을 기능을 가리킵니다. 다른 요소에 레이블을 지정하는 요소 또는 요소가 있는 계층적 수준은 모두 속성입니다.
둘 다 항상 aria-로 시작하고 그 뒤에 사용되는 특정 상태 또는 속성이 오기 때문에 쉽게 찾을 수 있습니다. 예를 들어, 체크박스가 기본적으로 채워져 있음을 스크린 리더에 알리는 데 사용되는 상태는 다음 예 와 같이 aria-checked입니다 .
<span 역할="체크박스" aria-checked="참" 탭 인덱스="0"> </span>
마찬가지로, 한 요소가 다른 요소에 레이블을 지정할 때 표시하는 데 사용되는 속성은 aria-labelledby입니다. 예를 들어 이 속성을 이미지에 적용하여 관련 캡션을 나타낼 수 있습니다.
<Figure aria-labelledby="operahouse_1" role="group"> <img src="operahousesteps.jpg" alt="시드니 오페라 하우스"> <figcaption>여기서 오페라 <cite>세비야의 이발사</cite>를 봤어요!</figcaption> </그림>
사용할 수 있는 속성의 더 많은 예를 보려면 W3C의 허용된 역할, 상태 및 속성 목록을 참조하는 것이 좋습니다.
결론
웹 개발과 관련하여 접근 가능한 콘텐츠를 만드는 것이 가장 먼저 떠오르는 것은 아닐 수 있습니다. 그러나 웹 접근성 모범 사례를 따르고 사이트에 ARIA HTML을 통합하면 모든 사람이 웹을 사용할 수 있도록 하는 역할을 할 수 있습니다.
WordPress 사이트에서 ARIA를 사용하기 위한 세 가지 주요 사례는 다음과 같습니다.
- 시맨틱 HTML과 함께 ARIA 사용.
- HTML 태그에 역할 추가.
- 상태 및 속성을 기록하는 속성을 포함합니다.
WordPress 사이트에서 ARIA를 사용하는 것에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!
기사 썸네일 이미지 EgudinKa / shutterstock.com