접근 가능한 컨텐츠 작성
접근 가능한 글은 좋은 글입니다. 모든 사용자가 컨텐츠를 보다 쉽게 사용할 수 있게 해줍니다. 다음은 접근 가능한 방식으로 글을 작성하는 방법에 대한 몇 가지 팁입니다.
- Ally의 다음 항목 인쇄 .
분명하게 쓰기
설명서는 사람들이 취할 수 있는 정보만큼만 유익합니다. 글이 너무 복잡하면 사용할 수 없습니다. 분명한 언어는 접근성을 높여줍니다.
다음 팁을 참조하여 되도록 간단하게 쓰고 간결하게 유지하십시오.
- 문장을 짧게 유지합니다. 20~25자 이내로 유지하는 것이 좋습니다.
- 간단한 단어를 사용합니다. 사용할 간단한 단어를 찾으려면 다음과 같은 사이트를 활용하십시오.
- Hemmingway Editor와 같은 도구를 사용하면 텍스트의 판독성을 측정할 수 있습니다. WCAG 표준을 충족하려면 8등급 이하의 판독성 수준을 유지하십시오.
머리글 구조
머리글은 접근 가능한 컨텐츠를 만들 때 중요합니다. 머리글은 화면 리더 사용자들이 특정 컨텐츠로 직접 이동하도록 하여 시간을 절약할 수 있게 합니다.
작성 작업을 진행하는 시스템에서 잘 작동합니다. Microsoft Word, PowerPoint 및 Open Office와 같은 인기 높은 도구는 모두 문서를 적절한 구조로 작성하는 데 도움이 되는 스타일 및 서식 옵션을 제공합니다. 선택한 컨텐츠 편집기 도구에 제공되는 스타일 및 서식 옵션을 사용하십시오.
예: 머리글 1(
)
머리글 스타일의 숫자는 화면 리더에 대한 구조적인 맥락을 생성하고, 시각 장애가 있는 사용자들이 문서의 시각적 구분을 보지 못하더라도 컨텐츠를 이해하는 데 도움을 줍니다.
예:
Education의 접근성
Blackboard의 접근성
컨텐츠 강조
화면 리더는 다음을 포함하는 글꼴 스타일을 식별하지 못 합니다.
- 색상
- 굵게
- 기울임꼴
- 밑줄
- 취소선
이러한 스타일을 사용하여 시각적 구분을 제공하십시오. 이러한 항목을 중요성을 나타내거나 정보를 전달하는 유일한 방법으로 사용하지 마십시오.
예: 빨간색 텍스트는 경고처럼 보입니다. 화면 리더 사용자는 텍스트가 빨간색인지 인지하지 못 합니다. 따라서 단서를 놓치고 경고인지 식별하지 못하게 됩니다.
강한 시각 신호를 제공해야 할 경우 접근 가능한 대안을 사용해야 합니다. 중요한 경우에는 문장 끝에 느낌표를 사용합니다. 화면 리더의 오디오가 재생될 때 느낌표와 물음표 부분에는 억양이 들어갑니다. 즉, '물음표'라고 읽는 대신 질문을 크게 읽으면서 의문문의 어조를 드러냅니다.
예: 다시 말하지만 중요성을 나타내기 위해 글꼴 스타일만 사용하지 마십시오.
이미지
이미지의 목적이 무엇인지 자문해 봅니다. 이미지가 페이지에 이목을 끄는 효과를 가져옵니까? 혹은 정상 시력을 가진 사용자에게 예상되는 시각적 참조를 제공하기 위한 것입니까? 이 이미지가 컨텐츠를 이해하기 위해 모든 사용자에게 필요한 것입니까?
이미지의 의미 또는 목적을 모른다면 사용하지 마십시오. 이미지는 혼란을 주고 학습 장애가 있는 이들이 당황하게 됩니다.
대체 텍스트
LMS 또는 웹 사이트를 사용하여 정보를 전달하는 경우 이미지를 업로드할 때 대체 텍스트를 입력하기 위한 필드가 표시됩니다. 장식용 이미지의 경우 대체 텍스트 필드를 비워 두십시오. 이 경우 화면 리더가 이미지를 무시합니다. 이미지가 페이지에 정보를 추가로 제공하지 않는다면 장식용에 해당합니다.
웹 접근성 이니셔티브 웹 사이트의 장식용 이미지에 대한 자세한 정보
예: UI(사용자 인터페이스)에 도구를 보여 주는 이미지가 있는 경우 해당 위치로 이동하는 방법과 해당 페이지에서 어떤 이미지인지 설명하십시오. 페이지에서 이미지를 설명하는 예를 참조하십시오.
화면 리더가 이미지를 건너뛰지 않게 하려면 이미지에 대체 텍스트를 포함합니다. 보조 도구는 이미지인지 여부를 이미 알고 있으므로 "~의 이미지"라고 말할 필요가 없습니다. 간결하고 명확하며 설명이 포함된 텍스트를 사용하십시오.
모든 이미지에 대해 "관련 텍스트를 보여주는 이미지"와 같은 동일한 대체 텍스트를 사용하지 마십시오. 의미가 없으며 혼란만 줍니다.
복잡한 이미지의 경우 대체 텍스트를 6~7자로 짧게 유지하고 모든 사람이 볼 수 있으며 명확한 설명을 제공하는 캡션을 이미지 아래에 포함합니다.
인포그래픽
인포그래픽에는 텍스트 대안이 필요합니다. 이는 사용자가 시각적 개체에서 얻는 동일한 스토리를 말해주는 내레이션입니다. 텍스트 대안은 인포그래픽 바로 다음에 나오는 페이지에 표시되어야 합니다. 페이지 상단에 텍스트 대안을 보기 위한 앵커 링크를 포함합니다.
텍스트 대안이 있는 인포그래픽 예를 참조하십시오.
이미지의 텍스트
WCAG 지침에 따르면 텍스트를 이미지의 일부로 포함해서는 안 됩니다. 대신 페이지에 이미지를 설명하는 텍스트를 포함하십시오.
링크
링크에 설명을 포함하는 것은 매우 중요합니다. 모든 링크는 사용자가 링크를 클릭할 경우 찾을 수 있다고 기대하는 대상을 설명해야 합니다. 이것이 바로 화면 리더가 제공하는 링크 목록 도구의 중요한 특징입니다. 이 도구는 다른 항목이 아닌 페이지의 링크만 나열합니다. 링크에 대한 추가 컨텍스트는 없습니다.
예: 이 페이지에서 링크 목록 도구는 다음을 표시합니다. "페이지에서 이미지를 설명하는 예를 참조하십시오." "텍스트 대안이 있는 인포그래픽 예" 등 각각은 항목을 선택할 때 표시될 것으로 예상되는 사항을 설명합니다.
- "여기를 클릭" 또는 "항목 더 보기" 등의 일반 어구를 사용하지 않도록 합니다. 링크 목록 도구는 링크 텍스트를 입력된 그대로 표시합니다. 동일한 링크가 반복되면("여기를 클릭, 여기를 클릭, 여기를 클릭"이 여러 번 반복해서 들린다고 가정) 사용자에게 혼란을 줄 수 있습니다. 사용자는 링크가 이동할 위치와 여기를 클릭한 이유를 이해하면 됩니다. 설명이 포함된 링크는 이러한 컨텍스트를 제공합니다.
- 웹 주소 또는 URL은 정보를 제공하는 것으로 간주되지 않으며 사용해서는 안 됩니다. 화면 리더는 각 글자를 따로 읽습니다. 그러므로 내용을 설명하는 텍스트를 사용하십시오.
- 새 창에서 링크를 열면 방향이 잘못될 수 있습니다. 최소로 유지하십시오. 사용자가 새 창을 사용할 때 이 사실을 알려 주십시오.
목록 및 표
컨텐츠를 생성하는 도구가 작업을 진행하도록 두십시오. 컨텐츠 편집기에서 글머리 기호, 번호 매기기 목록 및 표 도구를 사용하십시오. 또는 소스를 보고 올바른 HTML 태그를 사용하십시오.
목록
적절히 생성된 글머리 기호 목록(
- )은 글머리 기호 목록에 포함된 항목의 수를 화면 리더 사용자에게 알려 줍니다.
적절히 생성된 번호 매기기 목록(
- )은 번호 매기기 목록에 포함된 항목 수를 화면 리더 사용자에게 알려 주고 각 항목의 번호를 표시합니다.
표
가능하면 표보다 목록을 사용합니다. 표를 접근 가능하게 만들 수 있지만, 표를 탐색하고 이해하려면 화면 리더 사용자가 고급 키 입력 명령을 알아야 합니다.
열 머리글(
컨텐츠의 시각적 레이아웃을 생성하는 데는 표를 사용하지 마십시오.
키 입력 명령
웹 컨텐츠에는 키 입력 명령에 대한 전역 표준이 있습니다. 예를 들어 Tab 키를 눌러 컴퓨터 포커스를 다음 버튼에 둘 수 있습니다. 해당 내용을 설명할 필요는 없습니다. 전역 명령 목록을 보려면 다음 JAWS 키보드 명령 빠른 참조 설명서를 참조하십시오.
경우에 따라 개발자는 제품의 원본 키 입력 명령을 생성해야 합니다. 예를 들어 Blackboard Collaborate에서는 마이크를 켜고 끄기 위해 원본 키 입력 명령을 생성했습니다. 해당 원본 키 입력 명령을 주제에 포함하십시오.
클릭 및 키 입력 명령 지침은 별도의 내용이므로 같은 단락에 포함하지 않아야 합니다. Mac 명령이 PC 명령과 다른 경우 키 입력 주제 단락에 2개의 문장을 사용하십시오.
예 1
기본적으로 설정을 완료하고 나면 자신의 모습이 숨겨지고 음소거됩니다. 전체 강의에 참가하려면 마이크와 카메라 아이콘을 클릭합니다.
키보드에서 Alt + M을 눌러 마이크를 켜거나 끕니다. Alt + C를 눌러 카메라를 켜거나 끕니다.
예 2
프레젠테이션을 공유하면 슬라이드 간에 탐색할 수 있도록 찾아보기 버튼이 나타납니다.
키보드에서 Alt + Page Up을 눌러 다음 슬라이드로 이동합니다. Alt + Page Down을 눌러 뒤로 이동합니다. Mac에서는 Alt + Fn + 위쪽 화살표 또는 Alt + Fn + 아래쪽 화살표를 누릅니다.
비디오
비디오에 캡션이 있어야 합니다. 자세한 내용을 알아보려면 비디오 캡션 정보를 참조하십시오.
