강의 자료의 접근성 고려사항

Ubemy에서는 동영상 콘텐츠와 강의 자료가 함께 진행되어 강의 내용을 강화하고 새로운 기술을 추가합니다. 따라서 전체 강의에 액세스할 수 있도록 하려면 강의와 함께 제공하는 모든 자료에 액세스할 수 있어야 합니다.

이 섹션에서는 다음 네 부분으로 구성된 강의 자료를 다룹니다. 

 

콘텐츠 구성

  • 콘텐츠를 구성하고 텍스트를 고유한 제목과 함께 더 짧은 단락으로 나눕니다. 이렇게 하면 모든 사용자가 더 쉽게 검색하고 읽을 수 있습니다.
  • 모든 문서의 시작 부분에 목차를 제공하거나 다룰 내용에 대한 요약(몇 문장 또는 글머리 기호로 작성한 목록)을 제공합니다.
  • 사용자가 강의를 듣는 동안 도움이 되도록 용어집과 용어 정의를 다운로드 가능한 자료로 포함합니다. 다운로드 가능한 자료나 사용 중인 슬라이드에 대한 링크도 포함합니다.
  • 항상 맞춤법, 문법, 가독성을 확인합니다. 가독성은 텍스트의 한 구절을 읽는 것이 얼마나 쉬운가를 나타냅니다. 문장 길이, 음절 밀도, 주제 복잡성, 단어 친숙도와 같은 요소가 포함될 수 있습니다. 동료 또는 친구를 찾아 강의 내용을 읽고 연습을 시도하여 강의가 접근성이 있는지 확인하세요!

 

접근성 있는 문서 만들기

시각 장애가 있는 사용자가 사용하는 화면 읽기 프로그램(예: JAWS, NVDA 또는 VoiceOver)는 페이지의 텍스트를 읽을 수 있을 뿐 아니라 제목, 부제목 및 목록 항목으로 구성된 방식을 전달할 수도 있습니다. 예를 들어, 시각 장애가 없는 사람은 섹션 제목을 나타내는 크고 굵은 텍스트가 포함된 페이지를 볼 수 있지만 시각 장애가 있는 사용자는 “의미론적 마크업”을 통해 머리글 내용을 들을 수 있습니다. 이 메타 정보는 접근성 있는 문서에 매우 중요합니다. 다행히 Microsoft Word 및 Google 문서 도구와 같은 많은 워드 프로세싱 프로그램 및 앱에 이 기능이 내장되어 있습니다.

화면 읽기 프로그램의 작동을 어렵게 만드는 상황을 아는 것도 중요합니다. 예를 들어, 표에 병합 셀이 있으면 화면 읽기 프로그램을 사용할 때 이동과 구성의 이해가 어려워질 수 있습니다. 또한 의미론적이지 않은 방식으로 서식이 지정되면 화면 읽기 프로그램이 혼란스러운 정보를 전달할 수 있습니다. 예를 들어, 별표와 탭으로 작성된 글머리 기호는 화면 읽기 프로그램이 “글머리 기호”가 아닌 “탭” 또는 “별표”로 읽을 수 있습니다.

이 섹션에서는 디지털 문서에 의미 체계를 추가하는 데 필요한 몇 가지 항목만을 다루지만 몇 가지 포괄적인 자료가 포함되어 있습니다.

 

실제 제목

제목은 강의 내용에 대한 접근성을 향상하는 가장 좋은 방법 중 하나입니다. 실제 의미의 제목과 시각적인 제목을 사용하면 시각 장애 유무에 관계없이 모든 사용자가 강의 내용을 보다 쉽게 읽을 수 있습니다.

워드 프로세싱이나 슬라이드 쇼 애플리케이션에서 “H1” 또는 “제목 1”이라는 라벨이 지정된 실제 의미 제목을 사용하여 콘텐츠를 구성하면 화면 읽기 프로그램이 콘텐츠를 정확하게 전달할 수 있습니다. 예를 들어 문서 제목은 첫 번째 수준 제목이어야 하고 섹션 제목은 두 번째 수준(예: H2), 하위 섹션 제목은 세 번째 또는 네 번째 수준일 수 있습니다. 예시:

 

페이지 제목(제목 1)

섹션 제목(제목 2)

여기에 텍스트 입력.

하위 섹션 제목(제목 3)

여기에 텍스트 입력.

 

참고: 제목 수준을 건너뛰지 마십시오. 예를 들어 첫 번째 수준 제목에서 세 번째 수준 제목으로 건너뛰면 안 됩니다. 

 

실제 글머리 기호와 숫자가 추가된 목록

탭, 별표 및 숫자를 사용하여 텍스트 스타일을 수동으로 지정하는 대신 항상 워드 프로세싱 또는 슬라이드 쇼 애플리케이션의 글머리 기호(순서 없는 목록) 및 번호 매기기 목록(순서 있는 목록) 기능을 사용하세요. 화면 읽기 프로그램은 이러한 목록 유형을 인식하고 콘텐츠를 올바르게 표시합니다. 

 

단순한 표 구조

걸친(또는 병합된) 행 또는 열을 주의하고 여러 수준의 표 제목을 사용하지 않습니다. 병합된 셀은 수강생에게 설명하거나 화면 읽기 프로그램에서 해석하기 어려울 수 있습니다. 가능하면 시각적 레이아웃에 표도 사용하지 않습니다. 

 

링크에 설명이 있는지 확인하기

다음과 같이 문맥이 부족한 독립 실행형 구문은 피합니다.

  • “여기를 클릭하세요” 
  • “여기”
  • “추가”
  • “자세한 정보”
  • “더 읽기”
  • “계속” 

 

더 많은 맥락을 제공하는 다음 대체 구문을 사용하는 것이 좋습니다:

  • “강의 요강을 다운로드할 수 있습니다”
  • “____에 대한 인용”
  • “이 링크에서 추가 ____을(를) 사용할 수 있습니다”

문서가 인쇄 목적이거나 URL이 관련 콘텐츠인 경우가 아니라면 www.abcde.com처럼 URL만 단독으로 링크로 사용하지 않습니다.

 

이미지/미디어 대체 텍스트

천 마디 말보다 그림 한 장이 더 가치가 있을 수 있지만, 저시력이나 실명이 있는 수강생은 이미지의 대체 텍스트를 사용할 수 있습니다. 항상 문서, 슬라이드 프레젠테이션 등의 이미지에 명확하고 문맥에 맞는 대체 텍스트를 제공하세요. 화면 읽기 프로그램 또는 기타 보조 기술이 사용하는 사람이 들을 수 있도록 이 텍스트를 읽습니다.

  • 많은 도구를 통해 이미지에 대체 텍스트를 제공할 수 있습니다. 이러한 박스는 “대체 텍스트”, “대체”, “이미지 설명” 등의 이름이 붙을 수 있습니다. 필드가 있는 경우 필드에 이미지에 대한 대체 텍스트를 입력합니다.
  • 대체 텍스트는 꼭 이미지의 설명일 필요는 없지만 이미지의 의미는 전달되어야 합니다. 예를 들어, “기어 아이콘”이라고 하기 보다는 “설정을 나타내는 기어 이미지”라고 하는 것이 좋습니다. 만약 이미지를 제거해야 한다면, 이곳에 어떤 텍스트를 넣으실 건가요? 아니면 전화상으로 누군가에게 이미지를 설명해야 할 경우 어떤 말을 할지 생각해보고 그에 따라 이미지 설명 정보를 제공할 수도 있습니다.
  • 이미지에 관련 내용 또는 기능이 없거나 순전히 꾸밈용인 경우 또는 대체 텍스트가 인접 텍스트로 제공되어 있는 경우는 이미지의 대체 텍스트를 가능한 비워두어야 합니다. 일부 도구에는 “공란” 또는 “비어 있음” 옵션이 있습니다. 
  • “~의 사진”, “~의 이미지” 또는 “~에 대한 링크” 등의 단어를 추가하지 마세요. 보조 기술은 자동으로 이를 처리하고 사용자에게 이미지임을 알립니다.
  • 명확성이나 문맥을 잃지 않을 수 있는 최소한의 단어만 사용하세요.
  • PDF 문서의 경우 Adobe Acrobat Pro는 문서가 접근성 표준을 준수하는지 확인할 수 있습니다. 자료 섹션에서 링크를 찾을 수 있습니다.

 

대체 텍스트가 있는 예시 이미지

소파에 앉아 어른은 노트북으로 일하고 있고 아이는 헤드폰을 끼고 태블릿을 보고 있습니다.

많은 경우 사본은 이미지 파일 이름이 기본값이며 별로 도움이 되지 않습니다.

기본 대체 텍스트(파일 이름): adult-kid-tech_revised_220811.jpg

수정된 대체 텍스트: 소파에 앉아 어른은 노트북으로 일하고 있고 아이는 헤드폰을 끼고 태블릿을 보고 있습니다.

 

강렬한 색대비 사용

색대비는 두 색상 간의 밝기 차이를 측정한 값으로, 1:1(불량)과 21:1(우수)의 비율로 표시됩니다. 특히 텍스트와 배경 사이에 높은 색대비를 사용해야 합니다. 텍스트가 포함된 이미지 역시 대비가 높아야 합니다. 저대비와 고대비의 차이를 설명하기 위해 아래에서 흰색 배경에 색상이 있는 텍스트의 몇 가지 예를 살펴보았습니다. 

 

대비 불량

접근성 있는 콘텐츠로 인정될 수 있는 최소 대비율은 4.5:1입니다. 다음은 임계값을 충족하지 못하고 피해야 하는 색상 조합의 예입니다.

  • 노란색 텍스트 – 점수: 1.07:1
  • 연녹색 텍스트 – 점수: 1.12:1
  • 주황색 텍스트 – 점수 2.14:1
  • 분홍색 텍스트 – 점수: 3.14:1
  • 빨간색 텍스트 – 점수: 4.0:1

 

대비 양호

아래의 색상 조합은 충분한 명암비(4.5:1 ~ 7:1)를 제공하므로 좋은 선택지입니다.

  • 파란색 텍스트 – 점수: 4.68:1
  • 진한 녹색 텍스트 – 점수: 5.14:1
  • 보라색 텍스트 – 점수: 6.95:1

 

대비 우수

최상의 명암비(7:1 이상의 비율)를 제공하는 아래 나열된 색상을 사용하는 것이 이상적입니다.

  • 짙은 주황색 – 점수 7.43:1
  • 진한 회색 텍스트 – 점수: 12.63:1
  • 검은색 텍스트 – 점수: 21:1

 

접근성 높은 강의 내용 모범 사례 요약

콘텐츠

  • 사본을 정리하고 내용을 더 짧은 단락으로 나누기
  • 모든 긴 문서에는 목차나 요약 제공하기
  • 용어집을 자료로 포함하기
  • 맞춤법, 문법, 가독성 확인

 

문서 의미론

  • 보조 기술이 올바르게 기능하도록 의미론적 마크업 사용하기 
  • 실제 제목으로 내용 정리하기
  • 실제 글머리 기호와 숫자가 추가된 목록 사용하기
  • 가능한 한 간단한 표 구조 사용하기
  • 링크에 설명이 있는지 확인하기

 

대체 텍스트

  • 문서, 슬라이드 프레젠테이션 등의 이미지에 적절한 대체 텍스트를 제공합니다.

 

색대비

  • 텍스트와 이미지에 강렬한 색대비 사용하기

 

기타 접근성 및 포용성 문서 링크

강의를 만들 준비가 되었다면, 지금 바로 시작해 보세요!

강좌 만들기