접근성이 우수한 웹 페이지 요소에 대해 알아보기
학습 목표
이 유닛을 완료하면 다음을 수행할 수 있습니다.
- 좋은 디자인이 웹의 접근성을 높이는 방법에 대해 설명할 수 있습니다.
- 디자인에 사용할 접근성이 우수한 머리글 구조를 만들 수 있습니다.
- 맹인 사용자에게 의미를 전달하기 위해 사용하는 방법을 열거할 수 있습니다.
혁신의 장벽이 아닌 촉매가 되는 접근성
접근성이 우수한 제품이 못 생겼거나 지루하거나 복잡한 제품이라는 생각은 디자인과 접근성에 관한 가장 큰 오해 중 하나입니다. 이 모듈에서는 그 반대가 사실일 뿐만 아니라 접근성과 접근성 디자인 제약 조건에 대해 더 잘 알수록 모든 사용자를 위해 더 일관되고 더 유용한 제품을 디자인할 수 있음을 배웁니다. 접근성 디자인에 대한 지식이 있으면 혁신적인 디자인을 만들 기회가 더 많아집니다.
디자인과 접근성은 모든 사용자가 제품을 즐겁게 사용할 수 있도록 한다는 동일한 목표를 추구하는 파트너입니다. 디자이너는 연구 팀과 힘을 합쳐 특정 가상 사용자가 고려되도록 합니다. 디자이너는 접근성에 관심을 갖고 디자인의 접근성에 대해 생각하는 데 도움이 될 수 있는 가상 사용자도 고려해야 합니다.
마우스에 그치지 않는 훨씬 더 많은 책임
당연한 말 같지만, 디자이너는 마우스 클릭과 화면에 표시되는 콘텐츠의 시각적 위치보다 훨씬 더 많은 것을 책임집니다. 마우스 상호작용과 디자인의 시각적 레이아웃을 고려하는 것은 중요하지만, 다른 요인도 고려해야 합니다.
- 플로에 대한 완전한 상호작용 모델
- 기능이 키보드로만 작동하는 방법
- 터치를 지원하는 노트북 컴퓨터와 태블릿에 대한 고려 사항
- 마우스에서 키보드, 터치, 또는 음성 입력 등으로 입력 모드를 전환하는 사용자
이 모듈을 읽으면서 동료를 위해 디자인하지 않고 사용자를 위해 디자인해야 함을 기억하세요. 제품과 상호작용할 다양한 유형의 사용자를 위해 디자인해야 합니다. 사용자는 다양한 방법으로 제품과 상호작용하고 제품으로부터 정보를 수신합니다.
다양한 사용자에는 맹인이거나 색맹이거나 시력이 약한 사람, 청각 장애인이거나 난청인 사람, 일시적으로나 영구적으로 이동 능력이 제한된 사람, 또는 인지 장애가 있는 사람이 포함될 수 있습니다. 어리고 나이가 많은 사람, 파워 사용자, 캐주얼 사용자, 그리고 수준 높은 경험을 즐기는 사람을 위해 모두 디자인하세요.
접근성에 대한 제약 조건을 디자인에서 고의적으로 제외하면 특정한 사람들을 제품 사용 대상에서 일부러 제외하는 것입니다. 접근성 지침을 여느 디자인 제약 조건처럼 받아들이세요. 이런 지침은 탁월한 제품을 만드는 데 필요한 도전과 자극의 일부입니다.
사용자 인터페이스(UI) 이해
사용자는 웹 사이트 또는 웹 애플리케이션을 처음 보면 화면의 모든 정보를 이해하기 위해 시간을 어느 정도 투자합니다. 가능한 기능에 대해 알아보고, 알아본 내용을 토대로 다음 단계를 결정합니다. 시력이 있는 사용자는 페이지를 눈으로 훑어보고 일반적인 레이아웃을 파악하고 시작할 위치를 결정하고 앱의 특정 부분에 대해 깊이 알아보기 시작할 수 있습니다. 이들은 다양한 시각적 그룹, 큰 헤드라인, 목록, 그리고 카드, 탭 집합, 테이블 또는 트리 같은 기타 익숙한 사용자 경험(UX) 패턴을 볼 수 있습니다.
시각적 사용자는 Lightning Experience 홈 페이지를 아래 스크린샷과 비슷한 방법으로 나눌 수 있습니다. 여기에는 탐색 항목이 노란색, 큰 차트가 녹색, 그리고 몇몇 정보 카드가 분홍색으로 하이라이트되어 있습니다.
맹인 사용자는 머리글와 랜드마크가 포함된 좋은 페이지 구조와 기타 의미 구조를 통해 페이지를 전체적으로 이해할 수 있습니다. 아래에는 동일한 Lightning Experience 페이지의 주 페이지 탐색 및 분명한 시각적 머리글가 빨간색 윤곽선으로 표시되어 있습니다. 엔지니어는 최종적으로 이 정보를 사용자에게 표시하는 한편, 디자이너는 분명한 랜드마크와 머리글를 포함시키고 각각의 용도를 이해하고 이런 요소를 엔지니어링 팀에 전달하고 요구 사항임을 알려야 합니다.
레이아웃
시력이 있는 사용자가 다양한 방법으로 새 웹 사이트에 대해 알아보듯, 화면 리더기 사용자도 다양한 방식을 사용할 수 있습니다. 웹 사이트 또는 앱을 처음 볼 때 페이지 전체를 리더기로 읽는 방법은 느린 경우가 많지만, 일부 화면 리더기 사용자는 이 방법을 선택할 수 있습니다. 모든 머리글 또는 랜드마크를 탐색하여 페이지를 훑어보는 사용자도 있습니다.
머리글는 책의 장이나 잡지의 기사나 연구 논문의 개요 섹션을 식별하는 방법과 비슷하게 웹 페이지에 구조를 부여합니다. 하지만 웹 페이지에서는 로마 숫자, 문자 및 숫자를 사용하지 않고 머리글 태그(<h1>-<h6>)를 사용하여 이 구조를 프로그래밍 방식으로 만듭니다.
페이지를 올바르게 코딩하면 사용자가 페이지에 있는 모든 머리글의 목록을 불러오는 일반적인 화면 리더기 기능을 성공적으로 이용할 수 있습니다. 바로 가기 키를 눌러 머리글를 개별적으로 탐색할 수도 있습니다. 아래 스크린샷에서는 화면 리더기 사용자가 페이지의 모든 머리글가 나열된 목록을 요청했습니다. 1단계 머리글는 Home(홈) 하나뿐이고, 나머지 머리글는 2단계입니다. 이 Lightning Experience 페이지에 있는 각 카드의 머리글는 2단계입니다.
머리글 구조가 논리적인 경우, 사용자가 페이지 내용의 개요를 이해할 수 있습니다. 또한 분명한 시각적인 머리글가 있으면 사용자가 페이지의 계층 구조를 이해하는 데에도 도움이 됩니다. 이 경우 인지 장애가 있는 일부 사람들에게 특히 유용합니다.
논리적인 머리글 구조 외에, 엔지니어는 사람들이 페이지의 어느 위치에 있는지 확인하는 데 도움이 되는 다음과 같은 의미적 HTML 랜드마크를 사용하는 것이 좋습니다.
화면 리더기는 랜드마크를 식별하고, 리더기 사용자는 바로 가기 키를 사용하여 영역별로 탐색할 수도 있습니다. 디자이너는 분명한 랜드마크를 디자인하고 엔지니어가 식별할 수 있게 하여 랜드마크가 코드에 올바르게 포함되도록 할 수 있습니다.
아래 예에서는 페이지에 랜드마크가 한 개(Global Navigation(전역 탐색) 탐색 영역)만 있습니다.
그 외에 검색, 머리글, 메인 및 기사처럼 유용할 수 있는 몇몇 랜드마크도 없음을 확인할 수 있습니다.
아이콘과 이미지
일부 맹인은 화면 리더기나 디지털 점자 키보드를 사용하지만, 이런 보조 기술은 텍스트를 읽기만 하고 음성으로 변환하지 않고 아이콘과 이미지를 자동으로 읽지 않기 때문에 디자이너가 이런 기술을 올바르게 만들어야 합니다.
화면 리더기가 서로 다르게 처리하는 두 가지 유형의 아이콘인 장식(건너뜀) 및 정보(내용을 사용자에게 전달) 아이콘이 있습니다. 디자이너는 이 두 가지 아이콘의 차이점을 이해하고, 이용 사례에 가장 적합한 아이콘을 선택하고, 검토할 콘텐츠 경험에 대한 예비 레이블을 (필요한 경우) 작성하고, 엔지니어에게 알려 아이콘을 올바르게 코딩할 수 있도록 해야 합니다.
장식
장식 아이콘 및 이미지는 중요한 정보 또는 기능을 추가하지 않습니다. 중복 아이콘 및 이미지도 이 범주에 해당합니다. 인접 텍스트의 의미를 강조하지만 새로운 정보를 추가하지는 않기 때문입니다. 이런 아이콘과 이미지는 불필요한 세부 사항을 추가하므로 화면 리더기가 사용자에게 읽어주지 않아야 합니다. 아이콘이 장식용임을 표시하기 위해 특별히 필요한 것은 없지만, 이미지에는 화면 리더기가 이미지를 건너뛰도록 하는 비어 있는 alt 태그가 필요합니다. 화면 리더기는 비어 있는 alt 태그가 없는 이미지가 인식될 경우 종종 /images/weji2362iofweio6.png와 같이 생긴 이미지 src 태그를 읽습니다.
아래 이미지의 Contact Roles(연락처 직책), Products(제품) 및 Notes & Attachment(노트 및 첨부파일) 아이콘은 중복되므로 장식용입니다. 각 아이콘 옆에 동일한 정보를 설명하는 텍스트가 있습니다(예: 노트 및 첨부 파일(0) 옆의 파일 아이콘).
정보
정보 아이콘 및 이미지는 주위 텍스트가 전달하지 않는 중요한 정보를 전달합니다. 일반적인 예로는 아이콘 버튼과 독립형 아바타가 있습니다. 아이콘에는 보조 텍스트 또는 aria-label이 필요하고, 이미지에는 대체 설명이 필요합니다. 아이콘 또는 이미지의 외양이 아니라 기능을 설명으로 작성하세요(예: 종이 클립 대신 파일 업로드).
아래 스크린샷에서, 상단 전역 탐색에 있는 아이콘 버튼은 모두 아이콘 버튼이고 아이콘과 상호작용하려면 기능을 알아야 하므로 정보 아이콘입니다.
그 다음 아이콘은 어떤가요? 이 아이콘 옆에도 텍스트가 있지만, 아이콘이 개체가 계정임을 나타내고 텍스트는 계정 이름이기 때문에 이 역시 정보 아이콘입니다. 개체에 아이콘이 없으면 사용자는 개체가 연락처인지 기회인지 아니면 다른 종류의 개체인지 알 수 없습니다.
정리
디자인과 접근성은 모든 사용자가 제품을 즐겁게 사용할 수 있도록 한다는 동일한 목표를 추구하는 파트너입니다. 디자인의 구조와 레이아웃을 고려하고 이미지 및 기타 비텍스트 콘텐츠를 대체할 텍스트를 포함시키면 장애인 사용자에게 튼튼한 발판을 제공하게 됩니다. 다음 유닛에서는 사용자가 디자인의 콘텐츠를 더 잘 인지하고 이해하도록 할 수 있는 방법에 대해 얘기를 나눕니다.