Croot Blog

Home About Tech Hobby Archive

UDL(Unified Design for Learning) 관련

카테고리기술
태그
  • 웹접근성
  • AIDT
  • Frontend
수정일Aug 3, 2024
작성일May 28, 2024

참고 : AI 디지털 교과서 개발 가이드라인

[%E1%84%92%E1%85%A1%E1%86%AB%E1%84%80%E1%85%AE%E1%86%A8%E1%84%92%E1%85%A7%E1%86%BC_%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%8F%E1%85%A9%E1%86%AB%E1%84%90%E1%85%A6%E1%86%AB%E1%84%8E%E1%85%B3%E1%84%8C%E1%85%A5%E1%86%B8%E1%84%80%E1%85%B3%E1%86%AB%E1%84%89%E1%85%A5%E1%86%BC_%E1%84%8C%E1%85%B5%E1%84%8E%E1%85%B5%E1%86%B72.2-2_2.pdf](https://prod-files-secure.s3.us-west-2.amazonaws.com/8daffe33-d95b-4c96-91e6-1b899bcdb2d7/cac6aabd-fc6d-4393-bfd2-0b6843b16f00/%E1%84%92%E1%85%A1%E1%86%AB%E1%84%80%E1%85%AE%E1%86%A8%E1%84%92%E1%85%A7%E1%86%BC%E1%84%8B%E1%85%B0%E1%86%B8%E1%84%8F%E1%85%A9%E1%86%AB%E1%84%90%E1%85%A6%E1%86%AB%E1%84%8E%E1%85%B3%E1%84%8C%E1%85%A5%E1%86%B8%E1%84%80%E1%85%B3%E1%86%AB%E1%84%89%E1%85%A5%E1%86%BC_%E1%84%8C%E1%85%B5%E1%84%8E%E1%85%B5%E1%86%B7_2.2-2_2.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240803%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240803T052046Z&X-Amz-Expires=3600&X-Amz-Signature=ea0aff9a29a296844a6f076ea575f64ba77c8caec389cf9cfad27c9d1a714c7a&X-Amz-SignedHeaders=host&x-id=GetObject)

UDL(Unified Design for Learning)이란

생소한 개념 중 하나인 UDL에 대해 좀 찾아보았는데, 최근 교육부에서는 AI 디지털교과서 개발 가이드라인을 배포하였으며 그 안에 UDL과 접근성도 포함되어 중요성이 부각되었습니다.

참고 : AI 디지털 교과서 개발 가이드라인

UDL의 정의

UDL(Unified Design for Learning)은 다양한 학습자의 요구와 선호도를 충족하기 위해 교육 콘텐츠와 활동을 설계하는 접근법입니다. 이는 학습자 개개인의 차이를 인정하고, 교육 환경을 모든 학생에게 적합하게 조정하는 것을 목표로 합니다.

UDL의 원칙

UDL은 세 가지 주요 원칙을 바탕으로 합니다.

  1. 표현의 다양성:
    • 정보를 다양한 방식으로 제공하여 모든 학생이 접근할 수 있도록 합니다. 예를 들어, 텍스트 자료와 함께 이미지, 동영상, 오디오 등의 멀티미디어 자료를 제공하여 다양한 학습 스타일을 지원합니다.
  2. 학습 방법의 다양성:
    • 학생들이 자신의 학습을 조절하고 참여할 수 있도록 다양한 방법을 제공합니다. 이는 자기 주도적 학습을 촉진하고, 학생들이 학습 목표를 달성하기 위해 다양한 전략을 사용할 수 있게 합니다.
  3. 참여의 다양성:
    • 학습 동기를 유발하고 유지하기 위해 여러 방법을 사용합니다. 예를 들어, 학생들이 흥미를 느낄 수 있는 주제를 선택하고, 협력적 학습 환경을 조성하며, 긍정적인 피드백을 제공합니다.

UDL의 중요성

  1. 포괄성 향상:
    • 다양한 배경과 능력을 가진 학생들이 동일한 학습 환경에서 자신의 능력을 최대한 발휘할 수 있도록 지원합니다.
  2. 맞춤형 학습:
    • 학생 개개인의 필요와 선호도에 맞춘 학습 경험을 제공하여 학습 효과를 극대화합니다.
  3. 교육 격차 해소:
    • 교육 접근성의 격차를 줄이고, 모든 학생에게 동등한 학습 기회를 제공합니다.

UDL 필수 준수 사항

구분 필수 준수 사항 2025년 2026년 2027년
시각장애 시각자료 접근을 위해 대체 텍스트를 제공해야 함 ✅ - -
= 가독성이 좋은 고딕 형식의 서체를 제공해야 함 ✅ - -
= 시각자료, 멀티미디어 자료에 학습 과제 또는 문제 해결을 위한 정보를 포함하고 있는 경우 대체 텍스트가 아닌 화면 해설 스크립트를 제공해야 함 ✅ - -
= 초점 이동과 기능 제어를 위한 접근 가능한 조작을 지원해야 함 ✅ - -
= 표의 행과 열의 맨 윗부분에는 해당 수치에 대한 정보를 제공하는 헤더를 삽입함 - ✅ -
= 텍스트가 포함된 이미지가 스캔되어 있는 경우 이를 스크린리더가 접근할 수 있도록 함 ✅ - -
= 정보를 조직적으로 탐색할 수 있도록 단축키 또는 메뉴를 포함함 - ✅ -
= 단락 구분을 해야 할 상황이라면 단락대로 스크린리더가 접근할 수 있도록 함 - ✅ -
청각장애 동영상이나 음성 콘텐츠에는 동등한 내용의 자막을 제공해야 함 ✅ - -
= 청각적 지시 사항에 대해 대체 수단을 제공해야 함 - ✅ -
= 단원별 핵심 용어나 중요 학습 내용 등에 대해 수어 설명을 별도로 제공해야 함 -   ✅
운동장애 사용자가 키보드 또는 대안적 입력 장치(스위치 등)를 사용하는 경우에는 AI 디지 털교과서에서 제공하는 모든 기능을 동등한 수준으로 사용할 수 있도록 해야 함 - ✅ -
= 시간적 제한이 있는 콘텐츠의 경우, 사용자가 시간제한 기능이 동작되지 않도록 조작하거나 제한된 시간을 늘릴 수 있도록 해야 함 - ✅ -
인지장애 사용자가 키보드 또는 대안적 입력 장치(스위치 등)를 사용하는 경우에는 AI 디지 털교과서에서 제공하는 모든 기능을 동등한 수준으로 사용할 수 있도록 해야 함 - ✅ -
= 핵심적인 학습 콘텐츠를 음성을 통해 학습할 수 있도록 해야 함 - ✅ -
= 콘텐츠의 레이아웃은 일관성 있게 제시하고, 메뉴에서 다양한 구성 요소가 제시되 는 경우 메뉴에 대한 설명을 별도로 제공해야 함 ✅ - -
호환성 웹 표준 문법 및 웹 호환성을 준수하여 구축해야 함 ✅ - -
= 사용자 인터페이스 컴포넌트는 보조공학 기기(기술)와 모바일 기기에서 제공하는 접근성 기능 이용하여 동등하게 사용할 수 있도록 호환성을 고려하여 개발해야 함 ✅ - -
= 첨부 파일 또는 학습 자료를 외부 앱을 통해 활용하는 경우, 외부 앱과의 콘텐츠 접근성을 보장해야 함 - ✅ -
장애인 참여 장애인 사용자가 다양한 모바일 기기에서 실제 보조공학 기기(기술)를 이용하여 콘텐츠를 이용해 보고 접근 가능 여부를 평가해야 함 ✅ - -
= AI 디지털교과서 개발 진행 과정과 개발 후 검증 과정에서 장애인 사용자의 참여 를 보장해야 함 ✅ - -

한국형 웹 콘텐츠 접근성 지침 정리

5. 인식의 용이성

5.1. 대체 텍스트

  • 텍스트가 아닌 콘텐츠의 대체텍스트를 제공하였는가?
    • 대상 : 의미있는 이미지, 복잡한 컨텐츠(차트, 타이포그라피)
    • 예외 : 대체 컨텐츠, 생방송 데이터, 특정 감각용 컨텐츠, 단순 장식 등
  • 불필요한 설명을 제공하지 않는가?
  • 동일한 정보가 반복되어서 전달하지 않는가?

5.2. 멀티미디어 대체수단

  • 자막, 대본, 수어 중 한가지 이상 제공

5.3. 적응성

  • 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공하는가?
  • 표의 셀은 제목 셀과 데이터 셀이 구분되는가?
  • 콘텐츠의 나열 순서는 맥락에 맞도록 논리적으로 구성되어 있는가?
    • 배치를 변경하여도 선형구조는 유지해야 함.
  • 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식할 수 있는가?

5.4. 명료성

  • 색상에 무관하게(흑백스크린) 콘텐츠를 인식할 수 있는가?
    • 무늬를 이용해도 됨.
  • 자동으로 소리가 재생되지 않는가?
  • 텍스트와 배경의 명도 대비는 4.5 대 1 이상인가?
    • 일반(18pt), 굵은(14pt 이상) 폰트의 경우 3 대 1 까지 허용.
    • 화면확대가 가능한 경우 3 대 1 까지 허용.
  • 이웃한 컨텐츠 간 구별이 명확한가?
    • 테두리, 구분선, 무늬, 명도대비, 줄/글자 간격,

6. 운용의 용이성

6.1. 입력장치 접근성

  • 모든 기능은 키보드 접근이 가능한가?
    • 예외: 위치 지정 도구, 움직임 측정 센서 기반
  • 초점 이동 순서는 관례적인가?
  • 초점이 사라지는 경우가 없는가?
  • 초점은 시각적으로 구별이 되는가?

6.2. 충분한 시간 제공

  • 자동으로 변경되는 컨텐츠의 움직임을 제어할 수 있는가?

6.3. 광과민성 발작 예방

  • 해당없음

6.4. 쉬운 내비게이션

  • 반복적인 컨텐츠는 건너뛸 수 있는가?
  • 페이지, 팝업창, 프레임 의 제목을 제공하는가?
  • 컨텐츠 블록의 제목을 제공하는가?
  • 링크 텍스트를 제공하는가?
  • 링크 텍스트의 내용은 직관적이고 명료한가?
  • 전자출판문서 형식의 웹 페이지는 참조 위치 정보를 제공하는가?

6.5. 입력 방식

  • 다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있는가?
  • 단일 포인터 입력으로 실행되는 기능은 취소할 수 있는가?

7. 이해의 용이성

7.1. 가독성

  • 웹 페이지의 언어를 명시하였는가?

7.2. 예측 가능성

  • 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)이 실행되지 않는가?
    • 예시: 초점, 제출(submit), 새 창 열림, 드롭다운 시 실행, 초점 사라짐
  • 레이어 팝업이 초점 이동 및 선형구조에 영향을 끼치지 않는가?

7.3. 입력 도움

  • 입력 오류를 정정할 수 있는 방법을 제공하는가?
  • 사용자 입력의 용도를 이해할 수 있도록 레이블을 제공하는가?

8. 견고성

8.1. 문법 준수

  • 마크업 오류는 없는가?

8.2. 웹 어플리케이션 접근성

  • 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있는가?

상황 별 필수 속성 예시 (Vue3 문법)

Tab

탭 컨테이너:

<div
	role="tablist"
	aria-labelledby="tablist-1"
>...</div>

탭 버튼 :

<button
	id="tab-1"
  type="button"
  role="tab"
  aria-selected="true || false"
  aria-controls="tabpanel-1"
 ></button>

탭 컨텐츠 :

<div
	id="tabpanel-1"
  role="tabpanel"
  tabindex="0"
  aria-labelledby="tab-1"
></div>

일반 Element에 Click Action 바인딩 한 경우

<div
	@mousedown.space.stop
	@mouseup.enter="handleClickEvent"
	@mouseup.space="handleClickEvent"
	@click="handleClickEvent"
></div>

Refs.

aria 속성 예제 : https://www.w3.org/WAI/ARIA/apg/patterns/

이미지 alt 생성기 : https://ahrefs.com/writing-tools/img-alt-text-generator

이미지 alt 생성기(영문) : https://alttext.ai/

Nuli 웹접근성 진단 도구 : https://nuli.navercorp.com/education/tools