의미있는 구조 사용하기

학습 목표

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

액세스 가능한 컨텐츠의 중요성을 요약할 수 있습니다.
컨텐츠에 보다 쉽게 액세스할 수 있는 몇 가지 구조적 구성 요소를 설명할 수 있습니다.

접근성을 고려하여 작성하는 것이 중요한 이유는 무엇인가요?

약 20%의 사람들이 시력 손실이 있거나, 청각 장애가 있거나, 부분적인 청각 손실이 있거나, 신체적, 언어적, 인지적 또는 신경적 장애를 갖고 있습니다. 제품 설명서나 온라인 교육 자료와 같은 컨텐츠를 작성할 경우 개별 기능에 관계없이 모든 사용자가 제공하는 의미와 가치를 이용할 수 있어야 합니다.

모든 사용자에게 동일한 수준의 의미가 제공되도록 모든 디자인 제약에 대해 컨텐츠 작성 접근성 가이드라인을 구축합니다. 이는 멋진 컨텐츠를 만들기 위한 과제이자 동력의 일부입니다.

구조의 중요성

올바른 형식의 컨텐츠는 모든 사용자가 컨텐츠를 최대한 활용할 수 있는 길을 열어줍니다. 적절한 서식 지정에는 정보를 구성하는 구조적 요소가 포함됩니다. 서식 지정을 통해 사용자가 페이지의 정보 범위를 신속하게 이해하고 키보드 탐색을 용이하게 할 수 있습니다. 다음의 구조적 요소가 어떻게 접근성을 높이는지 살펴보겠습니다.

제목
목록
표
링크 라벨

다음 정보를 통해 일반적인 권장 사항을 확인하세요. 스타일 가이드라인은 일부 지역에서 다르게 적용될 수 있습니다.

제목

논리적 제목 구조가 있는 경우 시력 손실이 없는 사용자는 컨텐츠에서 제목을 빠르게 살펴볼 수 있습니다. 시각 장애가 있는 사용자는 스크린 리더를 사용하여 페이지의 모든 제목을 나열하여 페이지에 포함된 항목을 전체적으로 이해할 수 있습니다.

또한 사용자는 제목을 통해 페이지의 계층 구조를 이해하는 데 도움이 되는 컨텐츠의 개요를 확인할 수 있습니다. 이 경우 지적 장애가 있는 일부 사람들에게 특히 유용합니다.

좋은 제목은 그 아래의 컨텐츠를 요약하지만 전체 컨텐츠는 포함하지 않습니다. 제목에 문제가 없을 경우 컨텐츠에 대한 다른 서식을 고려해 보세요.

다음은 제목을 사용할 경우 따라야 할 몇 가지 모범 사례입니다.

제목과 소제목을 사용하여 해당하는 컨텐츠를 설명합니다.
제목과 소제목을 사용하여 텍스트를 논리적 단위로 나눕니다.
가장 높은 수준의 제목 <h1>는 1개만 사용하여 페이지 제목을 설정합니다.
제목 수준 <h2> ~ <h6>을 사용하여 제목이 항상 중첩되고, 연속적이며, 서식이 지정되도록 합니다. 새로운 소제목을 만들 경우 제목 수준을 지정하는 것을 건너뛰지 마세요.
과도한 중첩은 지양합니다. 예를 들어 대부분의 마케팅 컨텐츠를 제목 수준 <h1> ~ <h3>으로 제한합니다.

제목을 지정할 때 다음의 추가 스타일 가이드라인 또한 고려해야 합니다.

로마 수사, 문자 또는 숫자를 사용하여 제목 구조를 만들지 않습니다.
다른 글꼴이나 큰 글꼴을 사용하여 제목이나 제목 구조를 만들지 않습니다.
제목 전용 컨텐츠는 지양합니다.

제목과 소제목을 사용하여 컨텐츠를 구성하는 몇 가지 예를 살펴보겠습니다.

새로운 Salesforce 관리자로서 Dreamforce에 처음 참석한다고 가정해 보세요. 정말 기대될 것입니다! 그런데 등록 이메일을 열어보니 다음의 내용을 확인할 수 있습니다.

Dreamforce에 오신 것을 환영합니다! 2022년 11월 14일 월요일, 등록 및 뱃지 수령은 오후 12시부터 오후 6시까지 Dream Forest에서 확인할 수 있습니다. 등록 및 뱃지 수령은 오후 12시부터 오후 10시까지 Garden Grove에서도 가능합니다. 11월 15일 화요일 오후 6시부터 9시까지 Campgroud에서 자격증 시험이 진행됩니다.

모든 정보를 이해하기 어려웠나요?

이제 제목과 적절한 서식을 사용하여 컨텐츠를 독자에게 더 친숙하게 만들어 보겠습니다.

2022년 Dreamforce 일정

11월 14일 월요일

등록 및 뱃지 수령

Dream Forest: 오후 12시~오후 6시
Garden Grove: 오후 12시~오후 10시

11월 15일 화요일

자격증 시험

Campground: 오후 6시~오후 9시

적절한 제목과 섹션을 사용하면 페이지의 정보 범위를 신속하게 결정하고 중요하지 않은 섹션을 건너뛰고 작업이 필요한 항목에 집중할 수 있습니다. 특정 정보를 찾고 있는 경우 제목을 살펴보고 해당 페이지에 원하는 내용이 있는지 확인할 수 있습니다.

목록을 활용하면 여러 포인트를 정리하고 독자가 일련의 단계를 따라갈 수 있도록 도와줄 수 있습니다. 적절하게 구성된 목록을 사용하면 사용자가 목록에 속한 정보를 신속하게 식별하고, 목록의 항목 수를 식별하며, 단계를 수행할 때 해당 정보의 위치를 쉽게 파악할 수 있습니다.

다음은 목록을 사용할 경우 따라야 할 몇 가지 모범 사례입니다.

목록 항목의 순서가 중요한 경우 번호가 지정된 목록을 사용합니다.
들여쓰기, 굵게 표시, 대시 또는 별표와 같은 기호 또는 기타 구두점을 사용하여 글머리 기호가 지정된 목록 항목을 만들지 않습니다.
글머리 기호와 번호가 지정된 모든 목록은 적절한 HTML 태그가 있는 목록으로 구성되어야 합니다.
긴 문장이나 복합 문장 대신 간결한 글머리 기호를 사용합니다.

굵은 텍스트를 사용하여 추가적으로 강조하여도 문제는 없지만 목록 항목을 표시하기 위한 목적으로는 사용해서는 안 됩니다.

Dreamforce 세션에 등록하는 경우 해당 내용에 대해 검토해 보겠습니다. 여러분에게 새로운 컨퍼런스이므로 등록 방법에 대한 설명을 검토해 보겠습니다.

Dreamforce Home(홈) 페이지에서 Schedule(예약)을 선택합니다. Schedule(일정) 페이지에서 Register Now(지금 등록)를 선택합니다. 이름, 우편 주소, 이메일 주소 및 전화번호를 입력한 다음 Next(다음)를 선택합니다. 참석할 세션을 선택합니다. Complete Registration(등록 완료)을 선택합니다.

지침이 단락 형식으로 구성되어 있기 때문에 이 단계를 따르는 것이 쉽지 않습니다. 이 과정에서 사용자는 본인이 어디까지 진행하였는지 파악하기가 힘들기 때문에 단계별로 작업하는 것이 어렵습니다.

대신 어떻게 할 수 있을까요? 이 단계를 번호가 지정된 목록으로 재구성해 보겠습니다.

Dreamforce Home(홈) 페이지에서 Schedule(예약)을 선택합니다.
Schedule(일정) 페이지에서 Register Now(지금 등록)를 선택합니다.
이름, 우편 주소, 이메일 주소 및 전화번호를 입력한 다음 Next(다음)를 선택합니다.
참석할 각 세션을 선택합니다.
Complete Registration(등록 완료)을 선택합니다.

목록을 통해 독자의 작업 수행 능력을 향상하는 방법을 쉽게 확인할 수 있습니다.

표

표는 데이터를 정리하고 표시할 수 있는 좋은 방법입니다. 이 표에는 액세스할 수 있는 표를 구성하도록 몇 가지 핵심 사항이 요약되어 있습니다.

액세스 가능한 표의 특징

표의 기능	기능의 목적
표 앞에 제목과 간략한 요약 또는 표 개요를 포함합니다.	스크린 리더는 시각 장애인을 위한 표를 설명하기 위해 이 정보를 사용합니다.
머리글 행 또는 열(<번째> 요소)과 모든 머리글 셀에 내용이 포함되어 있는지 확인합니다.	빈 머리글 셀은 스크린 리더를 사용하는 사용자에게 문제가 될 수 있습니다.
하나의 아이디어 또는 데이터의 조각을 특징으로 합니다.	서로 다른 데이터 유형 또는 아이디어의 조합을 포함하는 셀은 스크린 리더를 사용하는 사용자에게 문제가 될 수 있습니다.
셀이 행이나 열에 걸쳐 있지 않은지 확인합니다.	병합된 셀은 스크린 리더를 사용하는 사용자에게 문제가 될 수 있습니다.
가능한 경우 셀 너비를 픽셀의 절대 너비가 아닌 백분율(%)로 정의합니다.	이렇게 하면 표가 작은 화면에 표시될 때 발생하는 문제를 줄일 수 있습니다.
셀 높이를 정의하지 않습니다.	셀의 절대 높이를 정의하면 사용자가 확대하여 컨텐츠를 더 크게 만들 때 컨텐츠가 잘릴 수 있습니다.

링크 라벨

거의 모든 컨텐츠에는 하나 이상의 링크가 포함되어 있습니다. 스크린 리더 사용자는 종종 웹 페이지에 링크를 선택하는 경우가 있기 때문에 각 링크 대상을 명확하고 고유하게 설명합니다.

링크 라벨을 지정할 경우 다음을 수행합니다.

실제 웹 주소를 제공하는 대신 링크가 안내하는 목적지를 설명합니다. 일반적인 URL의 문자, 숫자 및 기호는 스크린 리더 사용자에게 도움이 되지 않습니다.
목록의 링크에 액세스하는 사용자에게 컨텍스트를 제공하지 않는 '자세히 알아보기' 또는 '여기로 이동'과 같은 모호한 문구를 사용하지 마세요.
동일한 목적지를 참조하는 링크 라벨을 의도적으로 소싱하지 않는 한 페이지에 중복 링크 라벨이 없는지 확인합니다.
외부 도메인으로 연결되는 링크의 경우 외부 링크 아이콘 을 사용하여 해당 링크를 사용자에게 표시하고 대체 텍스트="새 창에서 열기"를 지정합니다.
새 탭이나 창에서 열리는 링크의 경우 독자에게 해당 사실을 알립니다. 알리는 방법 중 한 가지는 다음과 같은 링크 텍스트를 사용하는 것입니다. 'XYZ 링크 이름 [링크는 새 탭에서 열립니다]".

요약

제목, 목록, 표 및 링크 라벨과 같은 구조적 요소를 사용하여 정보를 구성하고 제공하면 컨텐츠의 접근성이 크게 향상됩니다. 추후 논의할 추가 접근성 고려 사항이 있지만 이러한 기본 원칙을 준수하면 장애가 있는 사용자를 포함하여 모든 사용자를 대상으로 컨텐츠에 대한 접근성을 높일 수 있습니다.

다음 유닛에서는 언어를 사용하여 컨텐츠에 대한 접근성을 높이는 방법에 대해 설명하겠습니다.

리소스

W3C: 페이지 구조 개념
사회보장국: Microsoft Word 365 기본 작성 및 테스트 가이드라인
사회보장국: PDF 508 접근성 체크리스트
WebAIM: 리소스
미국 인구조사국: 뉴스 보도 자료