4.4. 접근성 높은 콘텐츠 제작하기

K-MOOC는 장애가 있는 학습자를 포함한 모든 학습자의 접근성을 촉진하는 혁신적인 온라인 학습 플랫폼을 만들고자 한다. 본 안내는 강좌 운영팀이 강좌를 만들 때 접근성(Accessibility)을 고려하는 것의 중요성을 이해하고, 가능한 많은 학습자들이 이용할 수 있도록 하기 위함이다. 온라인 강좌의 접근성은 모든 학생들이 정보 및 활동을 어떤 장애에도 동등하게 할 수 있는 정도를 말한다.

본 도움말은 국제 표준과 웹 접근성(W3C WCAG 2.0) 및 보편적인 설계 원칙을 기반으로 한다. (즉, 가능한 가장 많은 학습자가 편리하게 이용할 수 있도록 돕고자 한다.)

이 원칙에 따라 강좌를 만드는 교수자 및 운영팀이 다양한 학습 스타일과 모든 학습자의 요구 등을 고려하는 포괄적인 경험을 만들어줄 것을 권장한다. 즉, 장애를 가진 학습자, 인터넷 속도가 느리거나, 오디오 접근이 안 되는 등의 기술적인 문제를 가진 학습자, 수행 능력에 문제를 가진 학습자를 고려하는 것이다.

가끔, 예기치 못한 접근성 문제가 발생하기도 한다. K-MOOC 플랫폼 접근성을 보완하려면, 기관의 장애인 지원 자료를 참고하도록 한다. 대부분의 기관이 장애인 지원 서비스 및 접근성 자문 및 지원을 제공하는 정보기술 자료를 제공한다. 관련 전문가들은 장애 학습자 지원을 내리는 것에 훈련되어 있으며, 어떤 것이 강좌의 목표 및 교수법에 비추어 적절한지 조언해줄 수 있다.

더 자세한 내용은 다음 주제를 참고하길 바란다.

4.4.1. 다양한 학습자 지원하기

세계 인구의 약 1/5이 장애를 가지고 있다. 온라인 강좌는 언제, 어디서든지 강좌에 접근할 수 있도록 함으로써 장애를 가진 학습자 교육에 존재하였던 많은 장벽을 줄여 주었다.

K-MOOC는 스스로 접근할 수 있을 뿐만 아니라, 강좌 개설자가 장애자가 접근 가능한 콘텐츠를 만들 수 있는 플랫폼을 만드는데 최선을 다하고 있다. 콘텐츠 제작에 관련 문제가 발생할 경우, “K-MOOC를 만드는 사람들 카페”에 문의할 수 있다.

아래의 영역에서,학습자가 기본적으로 제공되는 접근성 기능(예: 확대 및 축소기능), 보조기술 및 대체 형식을 이용하도록 강좌 콘텐츠를 만드는 방법에 대해 간단히 소개한다. 이 연습은 다음과 같은 학습자를 대상으로 한다.

  • 페이지의 텍스트(내용, text)를 큰 소리로 읽는 화면 판독기나 점자 페이지 텍스트를 만드는 점자 디스플레이 장치를 사용하는 시각 장애인
  • 텍스트와 기타 화면 콘텐츠를 확대하기 위해 화면 확대 소프트웨어를 사용하는 시력이 약한 학습자
  • 낮은 조명 조건에서 보는 것이 어려워, 배경 색상 및 텍스트 설정을 보다 쉽게 읽을 수 있도록 브라우저 및 운영체제를 수정해야 하는 시력이 손상된 학습자
  • 난독증이 있어 페이지 콘텐츠를 큰소리로 읽어주는 텍스트 음성 변환 기술을 사용하는 학습 장애를 가진 학습자
  • 컴퓨터를 제어하기 위해 표준 마우스 또는 키보드 대신 전환 장치, 음성 인식 소프트웨어, 또는 눈 응시에 따라 활성화되는 기술을 사용하는 신체 장애 학습자
  • 마우스 또는 키보드를 보다 사용하기 쉽도록 만들기 위해 운영체제 설정을 수정하는 학습자
  • 오디오 콘텐츠에 접근할 수 없으며 캡션 또는 녹취록 등의 다른 형태의 동일한 정보가 필요한 청각 장애가 있는 학습자

K-MOOC는 강좌 운영팀이 본 도움말에서 제안하는 접근성 향상 방법을 시행해보기를 권장한다.

4.4.2. 다양한 학습자를 위해 접근성 높이기

4.4.2.1. Universal Design

Universal Design은 가능한 많은 학습자가 제약 없이 학습 자료 및 활동들과 상호작용할 수 있도록 하나의 형식으로 강좌를 제공하려고 초점을 맞춘다.

Universal Design의 원칙은 다음과 같이 요약될 수 있다.

  1. 다른 방법으로 정보 및 콘텐츠 제시하기
  2. 학습자가 무엇을 아는지를 표현할 수 있는 방법을 차별화하기
  3. 학습을 위한 관심과 동기 자극하기

교수자는 강의 설계에 위의 원칙을 다음과 같이 적용할 수 있다.

  • 다른 방법(예를 들어,학습자가 확대하거나 색상을 변경하도록 하는 텍스트, 텍스트를 설명하는 다이어그램, 또는 오디오와 텍스트 자막이 있는 비디오를 제공하는 등)으로 학습자가 접근할 수 있는 자료 및 활동을 설계하기.

  • 학습자가 정보에 참여하며 그들의 지식을 표출할 수 있는 여러가지 방법을 제공하기. 이것은 연습과 평가를 개발할 때 특히 중요하다.

  • 색상을 식별해야 하는 활동처럼 특정한 감각 또는 물리적 기능을 필요로하는 활동에 대해 식별하기. 이에 대해, 학습자의 특정한 접근성 필요를 수용하는 것이 어렵거나 불가능할 수 있다.

    이러한 경우에 그러한 요구사항이 교육학적인 타당성이 있는지 고려하는 것이 좋다. 타당한 이유가 있는 경우, 강좌 설명서에 장래 학습자들과 이러한 요구사항에 대해 의사소통하는 것을 고려하고, 근본적인 변경없이 언급될 수 있는 장벽에 부딪힌 학습자에게 응답하기 위한 계획을 수립한다. 요구사항에 대한 타당성이 없는 경우, 학습활동들이 더 유연하고 광범위하게 접근될 수 있도록 수정할 것을 권장한다.

자료

4.4.2.2. 가독성 높이기

edX강좌는 전세계적으로 다양한 학습자를 대상으로 한다. 강좌가 명확하고 간단한 언어로 작성되고 강좌콘텐츠가 잘 구조화되어 있다면, 학습자는 강좌 콘텐츠의 개념에 접근하기가 더 쉬울 것이다. 주제 영역에 적절한 용어를 사용하되, 다음과 같은 학습자를 돕기 위해 가능한 명확하고 분명하게 용어들을 유지하도록 한다.

  • 영어가 모국어가 아닌 학습자 또는
  • 난독증 또는 시각장애로 읽는 것에 장애가 있는 학습자

모든 학습자에게 가독성이 높은 콘텐츠를 만들기 위해서는

  • 강좌 주제, 소주제, 학습활동, 구성요소 및 토의 주제 등의 이름에 중요한 정보를 먼저 넣어, 학습자가 훑어 지나가며 읽을 때 이해하기 쉽게 만든다. 또한 이러한 이름은 탐색 메뉴, 페이지 머리글 및 주제 제목에 사용되며, 학습자가 강좌를 검색하고 강좌 콘텐츠를 읽는 것을 돕는다. “앞면-로딩(Front-loading)” 메뉴와 머리글은 특히 링크 또는 머리글의 관련성을 더 빨리 평가할 수 있는 스크린 리더 이용자를 돕기 위함이다.
  • 서면으로 학습자료를 만들 때, 머리글, 단락, 목록과 같은 HTML 요소들을 사용하여 텍스트를 주제별로 나눈다. 나누지 않은 긴 텍스트는 가독성이 좋지 않기 때문이다. 세분화된 콘텐츠가 훨씬 이해하기 수월하다. 접근할 수 있는 HTML을 만드는 방법에 대한 지침으로 Best Practices for HTML Markup(HTML Markup에 대한 모범사례)를 참조한다. See HTML Markup 활용하기 for guidance on creating accessible HTML.
  • 전문용어를 피한다. 생소한 단어나 문구가 주제와 관련된 경우는, 처음 사용될 때 그것에 대해 설명하고, 학습 자료의 용어집에 포함시킨다. 약어 또는 두문자어를 사용할 때는 처음 문구가 나타났을 때는 정식 명칭을 적는다. 예를 들어 “국립항공및우주국(NASA)”과 같이 할 수 있다.
  • 링크 목적지를 명확하게 설명하는 링크 텍스트를 사용한다(예를 들어 “강좌 계획서 검토”). “여기에서 강좌계획서를 검토할 수 있다.” 와 같은 구문 사용을 피한다. 웹페이지 보다 오히려 문서를 가리키는 링크에 대해서는, 링크에 문서의 파일 형식을 포함시킨다. (예, “강좌계획서 (PDF)”).

자료

일반 언어센터(The Center for Plain Language)는 강좌 콘텐츠와 대상 청중에게 적절한 언어로 명확하고 간결하게 쓰는 것에 관하여 상세한 자료를 제공한다.
http://centerforplainlanguage.org/about-plain-language/checklist/

4.4.2.3. PDF 활용하기

PDF는 출판사가 제공하는 교과서를 포함하여 학습 자료에 대한 일반적인 형식이다. 그러나, 자료를 PDF로 변환하는 것은 특히 시각장애가 있는 학습자에게 접근성 장벽(accessibility barriers)을 만들 수 있다. PDF 파일의 접근성을 높이기 위해서, 문서 변환과 Adobe Acrobat Professional 사용에 관한 아래의 설명을 참고하는 것이 좋다.

4.4.2.3.1. 마이크로소프트 오피스 문서를 PDF로 변환하기

PDF 파일로 변환할 학습 자료는 다른 파일 형식을 사용할 수 있다. 예를 들어 강의계획서는 Word파일로,프레젠테이션슬라이드는 PowerPoint 파일로, 교과서는 출판사가 제공하는 PDF파일 형식 등과 같이 각각 다를 수 있다. 체계적으로 구성된 소스문서(source documents)를 만들려면 해당 소프트웨어에서 이용할 수 있는 도구를 사용하도록 한다. 이 초기 단계는 문서 변환과정에서 나중에 언급하기 어렵거나 불가능할 수 있는 문제를 최소화하는데 도움이 된다.

워드 문서 준비하기

  • 간단한 서식을 유지하도록 한다. 제목, 단락, 목록, 이미지 및 캡션, 표 형식의 데이터에 대한 표를 사용하도록 한다. 불필요한 들여쓰기, 규칙, 열, 인쇄상의 변화를 추가하지 않도록 한다. 서식이 간단할수록, PDF 문서의 접근성이 높아진다.
  • 굵게하기및 들여쓰기와 같이 직접 텍스트 서식을 지정하기 보다 표준, 제목 1, 제목 2 등 텍스트 서식 지정에 대한 스타일을 사용하도록 한다. 이미지에 대해서는 Word의 그림 서식 옵션을 사용하여 대체 텍스트를 추가하도록 한다. (Best Practices for Describing Images)를참조하라.

파워포인트 문서 준비하기

  • 화면 읽기 소프트웨어를 사용하는 학습자에게 접근가능하고 이해할 수 있는 강좌콘텐츠를 만들기 위해 개요보기(Outline view)를 시작하고 모든 콘텐츠를 텍스트로 포함시킨다. 개요를 마친 후에 디자인요소와 이미지를 추가하고 PowerPoint의 그림 서식 옵션을 사용하여 정보를 전달하는 이미지에 대한 자세한 설명을 포함시키도록 한다. PDF 형식으로 저장되지 않는 애니메이션이나 영상 효과를 추가하지 않도록 한다.
  • 각 슬라이드에서 개체의 읽기 순서를 볼 수 있도록 홈>드로잉>정렬>선택창 (Home > Drawing > Arrange > Selection Pane)옵션을 사용한다. 읽기 순서가 논리적이지 않으면, 개체를 다시 정렬하도록 한다.
  • 각 슬라이드에 독특하며 정보를 제공하는 제목을 붙이기 위해 홈>슬라이드>재설정 (Home > Slides > Reset)옵션을 사용하도록 한다. 원하는 경우 제목을 숨길 수 있다.
  • PowerPoint의 표 서식(PowerPoint’s table formatting)옵션을 사용하여 데이터 표에 대한 열머리 글을 식별하도록 하고 (테이블>테이블옵션>머리글행), 각 머리글에 해당 열의 데이터를 설명하는 정보 제공용 텍스트가 포함되어 있는지 확인하도록 한다.

엑셀 스프레드시트 준비하기

  • 각 워크시트마다 정보를 명료하게 전달하는 제목을 사용한다.
  • Excel의 그림 서식(Excel’s picture formatting)옵션을 사용하여 이미지에 대한 텍스트 설명을 포함시킨다. 이미지 설명 Best Practices for Describing Images)를 참조한다.
  • Excel의 표 서식(Excel’s table formatting)옵션을 사용하여 열머리 글을 식별하도록 하며 (테이블>테이블옵션>머리글행(Table > Table Options > Header Row)), 각 헤더셀에 해당 열의 데이터를 설명하는 정보를 제공하는 텍스트를 포함시키도록 한다.
  • 서식지정에 대해 빈 셀을 사용하지 않도록 한다.
  • 데이터 셀에 URL대신, 설명을 포함하는 링크 텍스트(descriptive link text)를 사용하도록 한다.

Word, PowerPoint, and Excel문서를 PDF로변환하기

Microsoft Office 문서에서 PDF 문서를 생성하려면, PDF로 저장하기(Save as PDF)옵션을 사용하도록 한다. 접근성을 위한 문서구조태그 (Document Structure Tags for Accessibility)옵션이 선택되어 있는지 확인한다. (더 자세한 내용은 소프트웨어설명서를 참조하도록 한다). Windows 버전의 Office에서 생성된 PDF문서는 Mac OS에서 생성된 문서보다 더 쉽게 접근할 수 있을 것이다.

4.4.2.3.2. 외부 제공 PDF 접근성 높이기

PDF 형식의 콘텐츠를 직접 만들 때는 접근성을 높이기 수월하지만, 외부에서 제작된 PDF 파일을 수정하기는 어려운 것이 사실이다. 이럴 경우, 접근성을 높인 버전의 문서를 제공할 수 있는지 물어보도록 한다. 물어볼 질문들은 다음과 같다.

  • 스크린 리더는 제공된 문서 텍스트를 읽을 수 있는가?
  • 제공된 문서에 있는 이미지들은 텍스트 설명을 포함 하는가?
  • 모든 표, 차트, 및 수학 문제가 접근 가능한 형태로 제공되고 있는가? ?
  • 모든 미디어는 텍스트 설명을 포함 하는가?
  • 제공된 문서는 목차, 색인, 제목, 및 책갈피와 같은 탐색 보조 기능을 가지고 있는가?

4.4.2.3.3. PDF 파일 접근성 업데이트하기

접근성을 개선하기 위해 기존의 PDF 형식의 자료를 업데이트 해야 할 수 있다.

  • 하드 카피 문서를 스캔 하여 만들어진 PDF 문서
  • 접근성에 대한 고려 없이 만들어진 문서에서 생성된 PDF 문서
  • 소스 접근성 정보를 보존하지 않은 프로세서에 의해 생성된 PDF 문서

이러한 경우에, 강좌 운영팀은 PDF 접근성을 향상시키기 위해 Adobe Acrobat Professional과 같은 특별한 소프트웨어가 필요하다. 스캔한 문서로 만든 PDF 문서는 문서의 텍스트 버전을 생성하기 위해 예비 광학 문자 인식 (Optical Character Recognition (OCR)) 단계가 필요하다. 이러한 절차는 문서의 접근성 장벽에 대해 확인하고, 문서 구조에 대해 속성 및 태그를 추가하고, 문서의 언어를 설정하며, 이미지에 대한 대체 텍스트를 추가한다.

자료

4.4.2.4. Best Practices for Custom Content Types

서로 다른 콘텐츠 형식을 사용하는 것은 더 많은 학습 경험을 제공할 수 있다. 장애를 가진 학습자가 접근할 수 있는 여러 가지 사용자 맞춤형 콘텐츠 형식을 설계하는 방법을 아래에서 살펴본다.

4.4.2.4.1. 정보 전달 그래픽 (차트, 다이어그램, 일러스트레이션)

이미지는 개념 및 정보를 전달하는데 도움이 될 수 있지만, 시각 장애가 있는 사용자는 이용할 수 없다는 단점이 있다. 예를 들어 색상 인식 또는 작은 레이블 및 주석이 있는 다이어그램이 들어간 차트는 색맹 또는 시력이 약한 학습자가 이해하기 어려울 가능성이 있다.

시각적으로 장애가 있는 학습자가 접근할 수 있는 정보 그래픽을 만들기 위한 방법은 다음과 같다.

  • 이미지의 중요한 특징을 구별하기 위해 한가지 색상만 사용하지 않는다. 예를 들어, 선 그래프 상에서, 데이터 요소를 구분 하기 위해 색상뿐만 아니라 다른 기호를 사용하도록 한다.
  • 가능하다면, SVG와 같이 확장을 지원하는 이미지 형식을 사용한다. 작지만 필수적인 세부 사항을 담고 있는 복잡한 그래픽의 고해상도 버전을 제공하는 것이 좋다.
  • 그래픽의 정보를 기술한 텍스트를 제공한다. 차트와 그래프에 대한 기술 텍스트로는 동일한 데이터를 나타내는 표가 될 수 있다. 이미지의 텍스트 제공과 관련된 제사한 정보는 이미지 기술 방법 을 본다.

4.4.2.4.2. 수학 콘텐츠

온라인 강좌에서 수학은 시각 장애가 있는 학습자에게는 참여하기 어려운 과목이었다. 교수자가 텍스트로 방정식을 입력하기 보다는 이미지를 사용하기 때문이다. 수학 이미지는 높은 대비(High-Contrast) 디스플레이가 필요한 이용자들에 의해 수정될 수 없고, 또한 화면 판독 소프트웨어로 읽을 수 없다. K-MOOC는 화면 판독기를 사용하는 이용자가 명확하게 읽을 수 있고 접근할 수 있는 형식으로 수학 콘텐츠를 만드는데 MathJax를 사용하고 있다. MathJax는 이미지 대신 텍스트로 수학 방정식을 만들기 위해 Latex와 MathML과 같은 수학 표기법으로 작동한다. 이에 MathJax을 사용하여 수학 콘텐츠를 표시하도록 권장한다. 접근성과 관련해 MathJax 설명서에서 MathJax를 사용법을 더 배울 수 있다. 아래의 “자료”에 있는 링크를 참조하면 된다.

4.4.2.4.3. 시뮬레이션 및 인터랙티브 모듈

애니메이션 또는 게임화된 콘텐츠를 포함하는 시뮬레이션은 학습 경험을 향상시킬 수 있다. 특히, 혼자 텍스트 콘텐츠를 읽고 처리하며 지식을 습득 하는데 어려움이 있는 학습자를 도울 수 있다. 그러나, 시뮬레이션은 또한 일부 그룹의 학습자에게 어려울 수 있다. 장벽을 최소화하기 위해, 시뮬레이션의 의도된 학습 결과를 고려하도록 한다. 뿐만 아니라 대체 자료를 제공한다면 모든 장애물의 부정적인 영향을 완화 하는데 도움이 될 것이다.

외부에서 제공하는 시뮬레이션의 경우, 접근성을 높일 대안을 만드는 것이 저작권 문제가 있을 수 있으니 제공 업체의 동의가 필수 적이다.

시뮬레이션을 만들 때는 다음 질문들을 고려하도록 한다. 교수 설계에서 시뮬레이션의 시각적 구성 요소가 핵심적이라면, 대안 텍스트 설명 및 다른 보충자료를 제공하는 것이 실용적이거나 실현 가능하지 않을 수 있다.

  • 시뮬레이션을 이해하기 위해 시력이 요구되는가? 그렇다면, 시뮬레이션이 전달하는 개념을 설명하는 텍스트를 제공하도록 한다
  • 시뮬레이션을 작동 하는데 마우스가 필요한가? 그렇다면, 시뮬레이션이 전달하는 개념을 설명하는 텍스트를 제공하도록 한다.
  • 시뮬레이션은 점멸하거나 깜박거리는 콘텐츠를 포함하고 있는가? 그렇다면 이러한 콘텐츠가 시뮬레이션의 특성상 매우 중요하지만,
    • 학습자가 평가에 반영되는 활동을 하기 위해 이러한 시뮬레이션을 사용하도록 요구하지 않도록 한다.
    • 시뮬레이션이 점멸성의 깜빡임 또는 깜박이 콘텐츠를 포함하고 있다는 경고를 제공하도록 한다.

4.4.2.4.4. 온라인 연습문제 및 평가

학습 활동과 평가에 참여가 어려운 학습자가 있을 수 있다. 학습자가 경험할 어려움을 고려하고, 일부 학습자가 장애가 있을 수 있음을 염두에 두고 여러가지 평가 옵션을 사용할 것을 고려한다. 예를 들어, 연습 문제에 시간 제한이 있는 경우, 학습자가 응답하는데 충분한 시간인지를 고려한다.

시각 또는 신체 장애가 있는 학습자 및 정보를 이해하는데 시간이 필요한 학습자와 같이 일부 학습자는 정보를 읽고 응답을 입력하는데 더 오래 걸릴 수 있다. 예를 들어,

  • 이미지와 매핑된 입력 또는 드래그 앤 드롭 연습 문제와 같이 정교한 손과 눈의 조화를 요구하는 것은 운동성 제한을 가진 학습자에게 어려울 수 있다. 세밀한 기술이 강좌 참여하는데 필수적이지 않다면, 정교한 운동 능력이 요구되지 않는 방법을 고려하도록 한다. 예를 들어, 원자를 화합물로 매핑하는 것은 체크박스 또는 객관식 연습문제로 제공 하도록 한다.
  • 시각 장애를 가진 학습자는 단어구름(word cloud)과 같은 시각적 자극에 접근하지 못할 수도 있다. 단어구름 단어들의 순차적인 목록처럼 동일한 정보를 제공하는 텍스트 대안을 제공하도록 한다.

4.4.2.4.5. 외부 콘텐츠

강좌에 외부 콘텐츠 링크를 포함할 때는, 장애를 가진 학습자가 쉽게 접근할 수 없을 수 있으므로 외부 자료에 대한 접근성을 고려해야 한다. 학습자에게 공유하기 전에 모든 링크를 테스트할 것을 권장한다.

강좌에 외부 교재 및 기타 출판물을 PDF 형태로 통합하기 위해 eReader 도구 또는 강좌에 파일 추가하기 를 사용할 수 있다. 또한 강좌에 HTML 형식으로 그러한 자료를 통합시킬 수 있다. 외부업체에서 제공된 PDF 파일들을 작업하는 것에 대한 지침으로 PDF 활용하기 를 참조하고, 접근할 수 있는 HTML 만들기에 관한 지침으로 HTML Markup 활용하기 을 참조하도록 한다.

자료

4.4.2.5. 이미지 기술 방법

그림, 다이어그램, 지도, 차트, 및 아이콘은 정보를 매우 효과적으로 제시할 수 있다. 그러나, 화면 판독기 소프트웨어를 사용하는 학습자를 포함하여 일부 시각적으로 장애를 가진 학습자는 이러한 이미지에 의해 전달되는 정보를 이해하기 위해서는 텍스트 대안이 필요하다. 이미지에 대한 텍스트 대안은 이미지의 문맥과 목적에 따라 달라지며, 이미지의 시각적 특성에 관한 정확한 설명이 되지 않을 수 있다.

강좌에 이미지를 포함하는 경우 다음 지침을 따르도록 한다.

  • 이미지가 개념을 전달하거나 또는 이미지가 제공하는 정보에 대한 유일한 자료인 경우에는 긴 텍스트 설명이 적절하다. 그렇지 않은 경우에는, 이미지의 목적을 전달하는 짧은 텍스트 설명을 제공하도록 한다. 페이지의 다른 곳에 그 정보가 나온다면 긴 자세한 설명을 제공 필요가 없다. 예를 들어 같은 동일한 데이터가 데이터 표에서 텍스트로 나오는 경우, 차트를 설명할 필요가 없다

    • Ponte Vecchio의 사진처럼 대표적인 이미지에 대해서는 “Photo of Ponte Vecchio.”가 그것에 대한 간단한 설명이 될 수 있다. 사진의 목적이 위치에 대한 자세한 정보를 제공하는 경우, “세개의 돌 아치 및 Arno 강 사진을 보여주는 Ponte Vecchio의 사진(Photo of Ponte Vecchio showing its three stone arches and the Arno River).” 처럼 길게 더 구체적으로 설명되어야 한다.
    • 차트, 다이어그램 또는 그림에 대해서는, 간단한 설명으로는 “Diagram of Ponte Vecchio.”이 될 수 있다. 긴 설명에서는 치수 및 사용된 재료 등과 같이 시각적으로 전달되는 세부 사항들을 포함 해야 한다.
    • 지도에 대해서는, 간단한 설명은 “Ponte Vecchio의 위치를 보여주는 지도(Map showing location of Ponte Vecchio)”와 같다. 만일 지도가 다리에 관한 방향 정보를 제공 하려는 경우에는, 자세한 설명은 텍스트 방향 정보를 제공 해야 한다.
    • 아이콘에 대해서는, 간단한 설명은 아이콘이 제공하는 정보와 동일해야 한다. 예를 들어, PDF 아이콘을 포함하는 강좌 계획서(Course Syllabus) 링크에 대해서, 아이콘에 해당하는 텍스트는 “강좌 계획서 PDF.(Course Syllabus PDF.)”으로 읽혀질 수 있는 “PDF”가 될 것이다.
    • 주로 다른 웹 페이지에 대한 링크로 사용되는 이미지에 대해서는, 간단한 설명은 이미지가 아니라 링크의 대상에 대해 설명한다. 예를 들어, 도움말 페이지에 대한 링크로써 제공되는 물음표 이미지는 “물음표.( question mark.)”가 아닌, “도움말.( help,)”로 설명되어야 한다.
    • 정보를 제공하지 않는 이미지는 텍스트 설명이 필요 없다. 예를 들어, “강좌 계획서 PDF (Course Syllabus (PDF))”라고 읽는 링크 텍스트가 뒤에 따라오는 PDF 아이콘은 설명이 필요 하지 않다. 또 다른 예는 순전히 심미적인 기능을 가진 배너 그래픽들이다.
  • HTML 이미지 요소의 alt 특성에서는 다음과 같은 간단한 설명을 포함하도록 한다. (이미지를 추가하는 것에 대한 자세한 내용은 Add an Image to an HTML Component를 참조하도록 한다.)

    <img src="image.jpg" alt="Photo of Ponte Vecchio">

  • 비정보적인 이미지에 대하여는 빈 alt 특성을 포함하도록 한다. 이미지 요소가 alt 특성을 포함하지 않을 때, 화면 판독기 소프트웨어는 이미지를 건너뛰거나, 이미지 파일 이름을 발표하거나, 또는 링크 이미지의 경우 링크URL을 발표할 수도 있다. 빈 alt 특성은 화면 판독기 소프트웨어에게 이미지를 건너뛰라고 말한다.

    <img src="image.jpg" alt="">

  • 긴 설명을 나타내기 위해 자막을 사용 함으로써 모든 학습자가 필요한 정보를 이용할 수 있도록 한다. 다음 예제에서 이미지 요소는 alt 특성(alt attribute)으로써 짧은 설명을 포함하며, 단락 요소는 긴 설명을 포함하고 있다.

    <img src="image.jpg" alt="Photo of Ponte Vecchio"><p>Photo of Ponte Vecchio showing its three stone arches and the Arno river</p>

  • 또는, 추가적인 학습활동(additional unit) 또는 설명하는 텍스트를 포함하는 다운로드 가능한 파일을 만들고 해당 이미지 아래쪽에 그 학습활동(unit)이나 파일에 관한 링크를 제공함으로써 자세한 설명을 제공하도록 한다.

    <img src="image.jpg" alt="Diagram of Ponte Vecchio"> <p><a href="description.html">Description of Ponte Vecchio Diagram</a></p>

자료

4.4.2.6. 미디어 접근성 높이기

미디어 기반 강좌교제는 개념을 전달하고 생활에 강좌 정보를 적용하는데 도움이 된다. 모든 edX 강좌는 화면 판독기 (screen-reader)로 접근할 수 있는 자막이 제공되는 비디오를 사용해야 한다. 이렇게 내재된 universal design 메커니즘은 강좌에 대한 접근성을 향상 시킬 수 있다. 강좌를 만들 때, 자막을 만들기 위해 드는 시간과 자원에 대한 요인들을 고려해야 한다.

4.4.2.6.1. 오디오 자막

오디오 자막은 들을 수 없는 학습자에게 청취 내용을 제시하는데 필수적이며 영어가 모국어가 아닌 학습자에게 도움이 된다. 동기화된 자막은 들을 수 없는 학습자가 비디오를 따라가거나 자막 텍스트를 클릭하여 비디오의 특정 주제로 탐색할 수 있도록 한다. 또한, 모든 학습자는 연구 및 검토용으로 미디어에 기반한 학습 자료의 자막을 이용할 수 있다.

자막은 비디오의 음성 콘텐츠의 텍스트 버전으로 시작한다. 스크립트를 사용하여 비디오를 만든 경우에는 자막을 만들기가 훨씬 쉽다. 간단히 녹화된 비디오를 검토하고 필요에 따라 자막을 업데이트 하면 된다. 그렇지 않다면, 직접 비디오를 기록하거나, 이런 작업을 할 사람을 구해야 한다. 수수료를 받고 실시간 비디오 자막을 만들어 줄 회사들은 많이 있다 (즉, 시간 코드를 사용하여 비디오와 텍스트가 동기화되는 자막).

K-MOOC 플랫폼은 .srt 형식으로 자막의 사용을 지원한다. 플랫폼에 비디오 파일을 통합할 때는, 그 비디오에 관한 실시간 자막을 가진 .srt 파일을 또한 업로드 해야 한다. 시간별로 나타나는 자막을 추가하는 방법에 대한 자세한 사항은 동영상 구성요소 를 참조하도록 한다.

4.4.2.6.2. 영상 설명

영상을 만들려고 할 때는, 볼 수 없는 학습자에게 어떻게 정보를 전달할 것인지를 고려하도록 한다. 많은 주제에 대해, 음성을 함께 제공해 개념을 완벽하게 소화할 수 있도록 한다. 예를 들어 태블릿에 쓸 때 동시에 말함으로써 시각적인 정보를 또한 설명할 수 있을 것이다.

4.4.2.6.3. 다운로드 가능한 자막

자막을 학습자가 다운로드하거나, 워드 프로세싱, 화면 판독기, 또는 문맹 퇴치 소프트웨어와 같은 도구를 이용하여 복습할 수 있도록 텍스트 파일을 포함하는 것이 좋다. 다운로드 가능한 자막은 시간 코드 없이 텍스트로만 되어 있어야 한다.

자료

4.4.2.7. HTML Markup 활용하기

HTML은 브라우저 및 장치에 골고루 잘 지원된다. HTML Markup에 있는 정보는 시각 장애가 있는 사람들에게 화면 판독기 소프트웨어와 같은 보조 기술을 통해 정보와 기능성을 제공하도록 도와준다.

HTML 콘텐츠를 만들 때 다음 지침에 유의하도록 한다.

  • 콘텐츠의 외관 보다는 콘텐츠의 의미를 설명 하기 위해 HTML을 사용하도록 한다. Level 1 제목 (<h1>) 으로 표시된 문구는 페이지의 주제를 명확하게 나타내지만, 굵은 텍스트(<bold> 또는 <strong>)로 표시된 문구는 제목이거나 단지 교수자가 강조하고 싶은 텍스트일 수 있다. 목록으로 표시된 항목의 그룹은 글머리 기호 및 들여쓰기 같은 시각적 단서에 의존하지 않고 코드와 관련되어 있다. 콘텐츠를 의미하는 코딩은 머리글을 통해 읽을 수 있거나 혹은 목록에 있는 항목의 수를 밝혀 줄 수 있는 화면 판독기를 사용하는 학습자에게 특히 유용하다.
  • 문서 구조를 나타내기 위해 순차적으로 HTML 제목 수준을 사용하도록 한다. 체계화된 제목들은 학습자가 페이지를 탐색하고 또 학습자가 무엇을 찾고 있는지를 알 수 있도록 돕는다.
  • 관련 항목들을 그룹화 하고 콘텐츠를 보다 쉽게 건너 뛰고 읽을 수 있도록 하기 위해 HTML 목록 요소를 사용하도록 한다. HTML은 다음 세 가지 종류의 목록을 제공한다.
    1. 각 항목이 글머리 기호로 표시되어 있는 순서 없는 목록
    2. 각 항목이 번호와 함께 나열되어 있는 순서 목록
    3. (사전 처럼) 용어와 설명의 짝을 이루여 표기된 정의 목록
  • 격자 서식에 가장 적합한 정보인 데이터 세트를 표시하기 위해서는, 설명하는 행과 열을 가진 테이블 요소를 사용하도록 한다. 화면 판독기가 효과적으로 표에 있는 내용을 설명할 수 있도록 <th> 요소를 사용하여 행과 열의 제목을 표시하도록 한다.

자료

  • Creating Semantic Structure는 기본 태그 (WebAIM)에서 웹 페이지의 의미 구조를 반영하는 지침을 제공한다. http://webaim.org/techniques/semanticstructure/
  • Creating Accessible Table는 화면 판독기가 올바르게 정보(WebAIM)를 표시할 수 있도록 적절한 의미 구조를 가지는 데이터 표를 만드는 방법에 관한 구체적인 지침을 제공한다. http://webaim.org/techniques/tables/data

4.4.3. 결론

K-MOOC 사명의 핵심은 컴퓨터와 인터넷만으로 보다 높은 수준의 학습에 대한 접근을 제공하는 것이다. 강좌 운영팀이 소속 기관의 장애 지원 서비스와 함께 정보 기술 자원을 활용할 때 본 안내서가 유용하게 쓰여지기를 바란다. 새로운 아이디어가 있다면 “K-MOOC를 만드는 사람들 카페”에서 함께 의견을 공유하기를 바란다.