시맨틱 마크업으로 사용자 인터페이스 만들기

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• 접근 가능한 콘텐츠를 만들기 위해 시맨틱 마크업이 필요한 이유를 설명합니다.
• ARIA의 세 가지 특성 유형을 정의합니다.

소개

접근 가능한 사용자 인터페이스를 구축하기 위해서는 많은 요소를 고려해야 하며, 일반적으로 인터페이스가 복잡할수록 고려해야 할 요소도 그만큼 늘어납니다. 예를 들어 간단한 블로그 게시물이나 뉴스 기사는 댓글, 소셜 미디어 기능 또는 기타 대화형 기능이 포함된 뉴스 기사보다 접근성에 대한 고려 요소가 더 적습니다. 보고서 또는 대시보드 빌더, 페이지 레이아웃 편집기 또는 간판 스타일 목록 보기와 같은 복잡한 웹 애플리케이션은 접근성에 대한 요구 사항이 훨씬 더 많습니다.

웹 페이지나 애플리케이션이 복잡할수록 장애가 있는 사용자의 접근성을 보장하기 위해 더 많은 작업이 필요합니다. 하지만 웹 페이지나 애플리케이션을 접근 가능하도록 만들려면 먼저 기본 사항부터 이해해야 합니다. 

시맨틱 마크업 소개

시맨틱 마크업은 모든 접근성의 토대입니다. 웹 페이지에 나타나는 콘텐츠는 표시되는 콘텐츠 유형을 나타내는 마크업을 사용하여 표시되어야 합니다. 예를 들어 테이블 형식 데이터는 <table> 기반 마크업을 사용하여 표시되고, 목록은 <ul> 기반 마크업을 사용하여 표시되고, 시각적 헤딩은 헤딩 태그를 사용하여 표시되어야 합니다.

시맨틱 마크업은 머신과 소프트웨어, 그리고 무엇보다도 콘텐츠에 접근할 수 있도록 만드는 데 필요한 보조 과학 기술이 콘텐츠를 판독하고 이해할 수 있도록 지원합니다. 시각 장애가 있는 사용자는 화면 판독기를 사용하여 적절하게 구성된 HTML <table> 요소로 생성된 보고서 빌더를 탐색할 수 있습니다. 하지만 이 사용자는 <div> 요소를 사용하여 마크업된 보고서 빌더는 제대로 탐색하거나 이해할 수 없습니다(정상 시력을 가진 사용자에게는 동일하게 보일 수 있음).

웹 페이지와 애플리케이션의 HTML 구조는 보조 과학 기술과 이러한 기술에 의존하는 사용자가 콘텐츠를 이해할 수 있도록 돕습니다. 가능하다면 시맨틱 HTML5 요소를 사용하고, Nu HTML Checker와 같은 검사기를 사용하여 마크업을 확인하는 것이 좋습니다.

ARIA 시작하기

ARIA(Accessible Rich Internet Applications)는 웹 페이지가 마크업 또는 표시 목적 그 이상으로 사용됨 인정하는 HTML의 확장입니다. ARIA는 웹이 복잡한 애플리케이션을 빌드하기 위한 플랫폼임을 이해하며, 보조 과학 기술을 통해 장애가 있는 사용자에게 훨씬 더 발전된 상호 작용을 전달할 수 있는 옵션을 제공합니다.

ARIA는 동작을 위해 HTML DOM 노드에 특수 특성을 적용합니다. ARIA에서 사용할 수 있는 특성에는 역할, 상태, 속성의 세 가지 유형이 있습니다.

역할

역할은 <div> 또는 <span>과 같이 전통적으로 시맨틱 의미가 없는 HTML 요소에 시맨틱 의미를 부여하는 방법입니다. 예를 들어 ARIA 역할을 사용하면 비시맨틱 요소 집합을 버튼 또는 링크로 식별하거나, 메뉴, 콤보 상자, 모달 또는 대화형 그리드와 같이 더 복잡한 구성 요소를 식별할 수 있습니다. 

역할은 사용자에 대한 약속입니다. <div>에 role="button"을 추가하는 것과 같이 요소에 ARIA 역할을 추가하면 <div>에 자신을 버튼으로 식별하도록 지시할 수 있습니다. 그러면 이 <div>는 브라우저의 접근성 트리에서 <button>으로 표시됩니다. 브라우저 접근성 트리는 화면 판독기에 표시되는 정보의 스냅샷입니다. 즉 버튼이 기본적으로 가지고 있는 모든 기능을 이 <div>에 제공해야 합니다. 여기에는 포커스 상태, 키보드 상호 작용, 마우스 상호 작용 등이 포함됩니다. <div>를 버튼이라고 지칭하지만 버튼처럼 동작하지 않는다면 사용자에 대한 약속을 어기는 셈입니다.

상태

상태는 브라우저의 접근성 트리에 대한 ARIA 구성 요소의 상태를 설명하는 특성입니다. 상태는 드롭다운 메뉴가 expanded인지, 입력 유형이 disabled 또는 readonly인지, 확인란이 checked인지, 목록 상자의 항목이 selected인지 등을 알려줍니다. ARIA를 사용하여 복잡한 구성 요소를 만들 때에는 컨트롤의 작업을 통해 다양한 상태를 정확하게 업데이트하는 것이 중요합니다. 이러한 모든 사항은 역할 특성을 사용할 때 사용자에게 약속한 내용을 지키기 위한 것입니다. 

속성

W3C는 ARIA 속성을 '주어진 개체의 특성에 필수적이거나, 개체와 관련된 데이터 값을 나타내는 특성'이라고 정의합니다. 속성은 개체의 특성을 설명합니다. multiple 특성이 있는 <select> 요소와 multiple 특성이 없는 <select> 요소의 차이점을 고려해야 합니다. 전자는 여러 항목을 선택할 수 있는 콤보 상자이고, 후자는 사용자가 상자를 열어 단일 항목을 선택하기 위해 축소된 상태를 클릭해야 하는 콤보 상자입니다. 이 경우 multiple은 기본 <select> 요소의 속성입니다. 

마찬가지로 ARIA에는 개체를 설명하는 데 사용되는 많은 속성 특성이 있지만, 개체의 상태를 업데이트하기 위해 정기적으로 변경할 필요는 없습니다.

ARIA 특성이 무엇이고 언제 어떻게 사용하는지 아는 것은 매우 어려울 수 있습니다. 일반적으로 Salesforce Lightning Design System(SLDS)의 구성 요소 청사진을 따를 것을 적극 권장합니다. SLDS에는 마크업, 특성 및 키보드 상호 작용에 대한 자세한 접근성 지침과 함께 900개 이상의 HTML 청사진이 포함되어 있습니다. 이러한 청사진에는 모든 올바른 ARIA 역할, 속성 및 상태가 올바른 위치에 들어 있습니다. 또한 여러분이 구축 중인 구성 요소의 상태와 속성을 적절하게 연결하고 관리하는 방법을 상세히 알려주는 접근성 정보도 함께 제공됩니다. 

SLDS 구성 요소 청사진의 ARIA는 보조 과학 기술을 사용하여 테스트되었으며, ARIA 작성 실무 가이드를 기반으로 합니다. 이 문서는 정기적으로 업데이트되며, ARIA 및 여러 일반적인 디자인 패턴에 대한 최신 정보 소스입니다. 

SLDS 구성 요소 청사진에서 필요한 모든 상호 작용 패턴을 찾지 못할 수도 있습니다. Salesforce의 디자인 시스템에서 원하는 정보를 찾을 수 없는 경우 ARIA 작성 실무 가이드와 ARIA 사양을 참조하세요. 인터넷에 있는 다른 디자인 패턴은 신뢰하지 마세요. 수년간의 아이디어, 탐색, 그리고 완전히 잘못되고 접근 불가능한 구성 요소가 현대적이고 접근 가능한 솔루션으로 가장하고 있습니다.

접근 가능한 사용자 인터페이스를 구축하기 위한 기본 사항을 배웠으므로, 다음으로는 접근성 탐색에 대해 살펴보겠습니다. 

리소스

• 문서: ARIA 작성 실무 가이드
• 문서: WAI-ARIA(Accessible Rich Internet Applications) 
• 도구: Nu HTML Checker
• Salesforce 도움말: Salesforce Lightning Design System