스크린리더 사용자를 위한 PDF 접근성 적용하기 스크린리더가 문서를 처리하는 방식 웹, 모바일 앱, 윈도 운영 프로그램 등에서는 각각의 접근성 API에서 제공해 주는 정보를 스크린리더가 출력함으로써 스크린리더 사용자에게 문서의 구조를 음성 출력함. 따라서 접근성 API에서 스크린리더를 포함한 보조기술에 각 요소에 대한 정확한 정보를 전달할 수 있도록 해야 함. 예를 들어 안드로이드에서 영역에 대한 제목을 시각적으로 봤을 때는 충분히 확인 가능하도록 만들었다 하더라도 접근성을 위한 마크업(예: AccessibilityHeading)을 적용하지 않을 경우 스크린리더 사용자는 제목임을 알 수 없음. PDF, 태그가 중요하다 PDF 문서 역시 HTML 등과 마찬가지로 문서의 각 요소에 맞는 태그를 삽입함으로써 접근성 적용이 가능함. 문서의 각 라인, 단어, 글자 등에 스크린리더 사용자를 위한 정확한 태그가 삽입되어 있으면 마치 웹페이지를 읽는 것과 같이 문서의 각 의미를 정확하게 파악할 수 있음. 스크린리더가 문서 구조를 해석할 수 있는 접근성 태그가 지정되지 않으면 문서를 읽을 수는 있으나 문서의 각 문단, 제목 등을 정확하게 파악할 수 없음. PDF 태그의 특징 태그의 종류: 문단, 제목(1-6), 이미지, 목록 리스트, 링크, 테이블, 테이블 행 제목, 테이블 캡션 등. 접근성 태그는 HTML의 태그 이름과 유사함. 예: HTML의 h1 태그 = h1, HTML의 ul 태그 = l. 태그는 Adobe Acrobat Pro에서 확인 및 수정 가능. 태그를 수정하거나 속성을 변경한다고 해서 화면 상 디자인이 변경되지 않으며 태그를 잘못 수정할 경우 스크린리더 사용자가 문서를 제대로 읽을 수 없음. 태그를 추가하는 방법 Adobe Acrobat Pro의 태그 패널 및 TouchUp reading order 패널에서 수동으로 추가. Adobe Acrobat Pro에서 제공하는 자동 태그 삽입 기능을 이용. 마이크로소프트 워드, 파워포인트, 오픈오피스, 인디자인 등에서 접근성에 맞게 문서 제작 후 태그를 포함한 PDF 추출. 마이크로소프트 워드에서 문서 작성 시 워드는 스타일을 어떻게 지정하느냐에 따라 PDF로 저장 시 접근성 태그가 자동으로 삽입됨. 예: 큰 제목은 제목 1 스타일, 두 번째 제목은 제목 2, 목록 문단은 list paragraph 등. 표를 삽입할 경우 표 속성의 ‘행’ 탭에서 각 페이지에 행 제목 삽입을 체크하면 첫 행이 제목 셀로 지정됨. 2행을 헤더로 지정하고 싶은 경우 2행을 블록으로 씌운 후에 행 제목으로 지정. 이미지를 삽입할 경우 이미지 속성의 대체 텍스트 탭에서 대체 텍스트 삽입 가능. 이미지에 대체 텍스트를 삽입하지 않으면 PDF에서는 태그의 대체 텍스트 정보가 없어 스크린리더에서 무시됨. 마이크로소프트 파워포인트 각 슬라이드의 제목을 Title placeholder로 제공해야 PDF 변환 시 각 제목이 헤딩으로 태그가 지정됨. 기본 템플릿을 사용하지 않은 경우 상태표시줄에서 접근성 검사를 체크한 다음 접근성 결과 화면에서 슬라이드 제목 지정 가능. 홈 탭 하위의 도형 그룹에서 선택창 윈도를 활성화 하여 각 슬라이드의 객체가 스크린리더에서 논리적으로 접근되는지 확인하고 필요시 수정 가능. 가장 아래에 있는 객체가 스크린리더에서는 첫 객체로 접근됨. 설명이 필요한 이미지는 이미지에서 팝업 메뉴 호출하여 대체 텍스트 편집 화면에서 대체 텍스트 삽입 가능. 파워포인트에 표를 삽입하면 가장 첫 행이 자동으로 표 제목(th)으로 태그가 삽입됨.

1. Make it More Accessible!
모두가함께누리는!
2019. 7th
NULI
SEMINAR
AI &
ACCESSIBILITY
WITH
EDUCATION

2. 스크린 리더 사용자를 위한, PDF 문서에 접근성 적용하기
엔비전스
Session 5
2019. 7th
NULI
SEMINAR
AI &
ACCESSIBILITY
WITH
EDUCATION

3. 스크린리더가 문서를 처리하는 방식
웹, 모바일 앱, 윈도 운영 프로그램 등에서는 각각의 접근성
API에서 제공해 주는 정보를 스크린리더가 출력함으로써
스크린리더 사용자에게 문서의 구조를 음성 출력함.
따라서 접근성 API에서 스크린리더를 포함한 보조기술에
각 요소에 대한 정확한 정보를 전달할 수 있도록 해야 함.

4. Android: text=“세션 1”
accessibilityHeading=“true”
iOS: static var header: UIAccessibilityTraits
예: 플랫폼별, 제목 요소
<h2>제7회 널리 접근성 세미나</h2>
<span role=“heading” aria-level=“3”>세미나 소개
</span>

5. PDF 접근성, 태그가 중요하다
PDF 문서 역시 HTML 등과 마찬가지로 문서의 각 요소에
맞는 태그를 삽입함으로써 접근성 적용이 가능함.
문서의 각 라인, 단어, 글자 등에 스크린리더 사용자를 위한
정확한 태그가 삽입되어 있으면 마치 웹페이지를 읽는 것과
같이 문서의 각 의미를 정확하게 파악할 수 있음.

6. PDF 문서에 접근성 태그가 삽입되면

7. 태그가 없으면
스크린리더가 문서 구조를 해석할 수 있는 접근성 태그가
지정되지 않으면 문서를 읽을 수는 있으나 문서의 각 문단,
제목 등을 정확하게 파악할 수 없음.

8. PDF 접근성 태그의 특징(1)
1. 태그의 종류: 문단, 제목(1-6), 이미지, 목록 리스트, 링크,
테이블, 테이블 행 제목, 테이블 캡션 등.
2. 접근성 태그는 HTML의 태그 이름과 유사함. 예:
HTML의 h1 태그 = h1, HTML의 ul 태그 = l.

9. PDF 접근성 태그의 특징(2)
1. 태그는 Adobe Acrobat Pro에서 확인 및 수정 가능.
2. 태그를 수정하거나 속성을 변경한다고 해서 화면상
디자인이 변경되지 않으며 태그를 잘못 수정할 경우
스크린리더 사용자가 문서를 제대로 읽을 수 없음.

10. PDF 접근성 태그를 삽입하는 방법
1. Adobe Acrobat Pro의 태그 패널 및
TouchUp reading order 패널에서 수동으로 추가.
2. Adobe Acrobat Pro에서 제공하는 자동 태그 삽입
기능을 이용.
3. 마이크로소프트 워드, 파워포인트, 오픈오피스, 인디자인
등에서 접근성에 맞게 문서 제작 후 태그를 포함한 PDF
추출.

11. 마이크로소프트 워드(1)
1. 워드는 스타일을 어떻게 지정하느냐에 따라 PDF로 저장
시 접근성 태그가 자동으로 삽입됨. 예: 큰 제목은 제목 1
스타일, 두 번째 제목은 제목 2, 목록 문단은 list
paragraph 등.
2. 표를 삽입할 경우 표 속성의 ‘행’ 탭에서 각 페이지에
행 제목 삽입을 체크하면 첫 행이 제목 셀로 지정됨.

12. 마이크로소프트 워드(2)
1. 이미지를 삽입할 경우 이미지 속성의 대체 텍스트 탭에서
대체 텍스트 삽입 가능.
2. 장식용 이미지인 경우 대체 텍스트 편집 화면에서 장식용
이미지로 체크하면 이미지 태그가 삽입되지 않음.

13. 마이크로소프트 파워포인트(1)
1. 각 슬라이드의 제목을 Title placeholder로 제공해야
PDF 변환 시 각 제목이 헤딩으로 태그가 지정됨.
2. 기본 템플릿을 사용하지 않은 경우 상태표시줄에서
접근성 검사를 체크한 다음 접근성 결과 화면에서
슬라이드 제목 지정 가능.

14. 마이크로소프트 파워포인트(2)
1. 홈 탭 하위의 drawing 그룹에서 선택창 윈도를
활성화 하여 각 슬라이드의 객체가 스크린리더에서
논리적으로 접근되는지 확인하고 필요시 수정 가능. 가장
아래에 있는 객체가 스크린리더에서는 첫 객체로 접근됨.
2. 설명이 필요한 이미지는 이미지에서 팝업 메뉴 호출하여
대체 텍스트 편집 화면에서 대체 텍스트 삽입 가능.

15. 마이크로소프트 파워포인트(3)
1. 파워포인트에 표를 삽입하면 가장 첫 행이 자동으로
표 제목(th)으로 태그가 삽입됨.

16. 한글 2018(hwp) 1
1. 기본적으로 한컴은 태그를 삽입한 PDF 저장을 지원하지
않음.
2. 한글 문서를 워드(docx)로 저장 후 워드에서 PDF 변환
가능. 레이아웃이 달라질 수 있으므로 스크린리더
사용자를 위한 PDF를 따로 배포해야 할 수 있음.

17. 한글 2018(hwp) 2
1. 스타일 마당에서 heading 1-6까지, ListParagraph
스타일을 추가하고 제목이나 리스트 등을 해당 스타일로
적용, 워드로 변환하면 워드에서 PDF 저장 시 접근성이
적용된 문서로 변환 가능.
2. 테이블은 워드에서 행 제목 삽입을 위한 추가 작업 필요.

18. 문서 플랫폼 작업의 한계점
1. 어도비에서 기본적으로 제공하는 태그를 100% 문서의
의미에 맞게 지정할 수 없음(예: 테이블 caption).
2. 영어 문서에 비해 한글 문서의 경우 태그 지정 시
스페이스가 문서 원본과 맞지 않는 문제가 발생함(PPT는
PDF 변환 시 한글의 띄어쓰기가 다 무시되는 오류가 있어
대안이 필요함).

19. 수동으로 직접 태그 삽입하기(1)
태그가 지정되지 않은 문서의 경우 태그 패널에서
팝업메뉴 클릭하여 문서에 태그 삽입을 누르면 문서의
레이아웃을 자동 분석하여 태그를 삽입함. 그러나 이 경우
수동 편집이 필수임.

20. 수동으로 직접 태그 삽입하기(2)
1. PDF 문서 창에서 태그를 삽입할 영역을 블록으로
선택하고 태그 패널에서 새 태그 만들기를 눌러 임의의
태그를 만든 다음 선택한 텍스트 태그로 삽입을 눌러
태그 삽입 가능.
2. 읽기 순서 지정 패널에서 태그로 지정할 영역을 마우스로
트래그 하여 의미에 맞는 태그 선택.

21. Role map 변경하기
태그 패널의 여러 태그는 스크린리더에서 해석하지 않는 태
그들도 다수 존재함.
특정 태그가 실제 의미와 다르게 지정된 경우(예: paragraph
= span) role map을 변경하여 이를 수정할 수 있음.

22. PDF에 비밀번호 지정 시
PDF에 비밀번호를 지정하여 문서 복사 등을 방지할 수 있음.
이때 스크린리더는 예외로 접근할 수 있도록 보조기술의
접근 허용 항목을 체크해 주어야 함.

23. Thank you!