Pdf.js: 태그가 지정된 PDF에 대한 지원 포함

[선별 분류 필요] 레이블이 추가되었습니다. 태그가 지정된 PDF와 관련된 개발을 위해 새 레이블(4-tagged-pdf)이 필요합니까?

예제 PDF가 있습니까? 나는 개인적으로 그런 PDF를 본 적이 없습니다. 실제로 얼마나 자주 사용됩니까?

예, 그 중 몇 가지가 있습니다.

$ cd test/pdfs/
$ grep -rla '/Marked true'
i9.pdf
fips197.pdf
issue1169.pdf
smaskdim.pdf
issue3879.pdf
bug816075.pdf
pdf.pdf
issue1709.pdf
f1040.pdf
wdsg_fitc.pdf
annotation-border-styles.pdf
ecma262.pdf
bug887152.pdf
issue1133.pdf
issue2442.pdf
issue1796.pdf
type4psfunc.pdf

더 필요한 경우 https://encrypted.google.com/search?q=filetype%3Apdf+ "%2FMarkInfo"+"%2FMarked+true"

감사합니다! 그런 경우에 이것을 살펴보는 것은 확실히 흥미로울 것입니다.

HTML과 ARIA 속성의 혼합을 사용하여 이것을 구현하는 것이 상대적으로 쉬울 것이라고 생각합니다. 렌더링을 변경할 필요가 없으며 몇 가지 새로운 속성을 추가하기만 하면 됩니다.

PDF 태깅 정보는 대체 텍스트, 언어 및 의미 유형(H1, TH, LI 등)과 같은 접근성 정보가 있는 구조 요소가 포함된 StructTreeRoot 트리에 저장됩니다. 구조 요소에는 페이지 콘텐츠 스트림의 개체에 대한 참조가 포함됩니다. 여기에 이것을 보여주는 그래픽이 있습니다.
https://stackoverflow.com/a/34047585

다음과 같이 _layoutText(textDiv) 에 PDF 태그 정보를 삽입할 수 있다고 생각합니다.

1) 렌더링되는 PDF 개체에 대한 StructTreeRoot 트리에서 해당 구조 요소를 찾습니다.
2) 구조 요소에 H1, H2, LI 등과 같은 구조 유형이 있는 경우 div에 role 속성을 추가합니다.
3) 구조 요소에 /Alt 항목이 있는 경우 div에 aria-label 속성을 추가합니다.
4) 구조 유형 H1-H6의 표제 수준에 해당하는 div에 aria-level 속성 추가

이렇게 하면 스크린 리더에서 제목, 목록 및 이미지에 액세스할 수 있습니다. 테이블은 구현하기가 더 복잡할 수 있습니다.

PDF 구조 유형은 섹션 14.8.4.3에 나열되어 있습니다. NS
https://www.adobe.com/content/dam/acom/en/devnet/pdf/pdfs/PDF32000_2008.pdf

제목의 경우 렌더링이 다음과 같이 변경됩니다.

<span style="left: 173.529px; top: 237.049px; 
font-size: 5.99874px; font-family: sans-serif; 
transform: scaleX(1.05905);">
7.  Evaluation
</span>

이에:

<span style="left: 173.529px; top: 237.049px; 
font-size: 5.99874px; font-family: sans-serif; 
transform: scaleX(1.05905);" 
role="heading" aria-level="1">
7.  Evaluation
</span>

그러면 스크린 리더에서 "7. 평가, 제목 수준 1"로 읽히고 더 중요한 것은 사용자가 '다음 제목' 키를 사용하여 제목 사이를 건너뛸 수 있다는 것입니다(이로 인해 큰 문서를 훨씬 더 쉽게 탐색할 수 있음)

4-tagged-pdf 레이블이 제거된 것으로 나타났습니다. 이것은 여전히 ​​추구되는 일입니까?

열려 있는 문제는 우리가 그것을 고려하고 있음을 나타냅니다. 이것은 기능이며 레이블이 약간 재정렬되었습니다.

우와 그거 굉장 하군! 고려 중인 이 기능에 태그가 지정된 PDF 생성 지원이 포함됩니까? 기존 PDF에 대한 파서/분석기와 같은 구현을 용이하게 할 수 있지만 508c PDF 생성에 대한 지원도 제공합니다.

508c PDF 생성에 필요한 핵심 기능:

• 문서에 태그 지정(언어 및 제목 포함, 다른 태그 가능)
• PDF 내부의 구조적 객체에 태그(헤더, 테이블, th, td, 목록 등)
• 시각 매체(이미지, 비디오, 그림 등)에 대체 텍스트 추가
• 요소의 탭 순서 생성/유지

이 4가지에 대한 핵심 기능이 존재한다면 508c PDF를 생성하는 PDF 생성 프로세스에서 로직을 구현하는 것이 가능할 것입니다. 솔직히 말해서 이 기능이 지원되는 OpenSource 자바스크립트 도구를 아직 찾지 못했기 때문에 엄청난 일입니다.

이 글을 작성한 후, 이것이 별도의 기능 요청에 해당되는지 여부는 확실하지 않습니다. 그런 경우라면 기꺼이 새 문제를 만들겠습니다.

저는 @cuhaller 와

이 문제에서 수행해야 하는 작업의 하위 집합에 대해 변경 사항이 충분해야 한다고 생각합니다. 나는 기여 지침 에 따라 다음 주 정도에 PR을 올릴 것입니다. 제출할 때 이 스레드를 업데이트하겠습니다.

이 리포지토리의 headers -and-img-alt-text 분기에 있는 표제 수준과 대체 이미지 텍스트(위치 지정 없음)를 제공하기 위해 PDF.js 2.3.200에서 포크를 변경했습니다.

마스터와 병합 충돌이 있고 현재 해결할 시간이 없기 때문에 PR 열기를 주저합니다.

이 지점을 마스터와 함께 최신 상태로 만들 수 있는 사람이 있으면 연락해 주세요!

Edge는 태그가 지정된 PDF에 대한 기본 지원을 선전했습니다. Chrome도 이제 이를 지원하며 웹 페이지에서 태그가 지정된 PDF를 내보낼 수 있는 기능이 출시될 예정이라고 선전했습니다.

오늘날 Firefox는 PDF의 태깅을 접근성 트리/접근성 API에 노출하지 않습니다. 그러나 이 텍스트는 Firefox 80 의

이제 Firefox를 기본 시스템 PDF 뷰어로 설정할 수 있습니다.

AT에 의존하는 사용자가 이 작업을 수행하거나 사용자 구성을 모르는 시스템 관리자가 이 작업을 수행하는 경우 Edge, Chrome 또는 Adobe의 Reader에 의존하여 태그가 지정된 PDF를 구문 분석하는 사용자에게 문제가 될 수 있습니다. .

나는 80에 대한 릴리스 노트에서 조언을 따르고 이 버그 우선 순위를 높일 것을 강력히 제안합니다. Mozilla가 현재 리소스에 제약이 있다는 것을 이해하지만, 경쟁 브라우저에서 더 잘 제공되는 액세스할 수 없는 기능을 홍보하는 방법은 좋지 않습니다.

우리 조직은 보조 기술 사용자를 위해 액세스 가능한 PDF 솔루션을 구현하려고 합니다. 시맨틱 마크업이 없기 때문에 PDF JS로 PDF를 미리 볼 수 없다는 결론에 도달했습니다. 의미 정보의 부족은 스크린 리더 소프트웨어와 상호 작용하는 사용자에게 장벽을 만듭니다. PDF는 일반 텍스트로 표시되고 주석을 알리지만 표제, 표, 이미지 또는 링크에 대한 마크업은 제공되지 않습니다.

테이블을 둘러싼 사용 사례는 스크린 리더 사용자에게 특히 어렵습니다. 시맨틱 마크업이 없는 테이블은 사용자에게 컨텍스트를 제공하지 않으며 화면 판독기 사용자가 PDF에 제공된 정보를 완전히 이해할 수 없습니다.

링크는 링크의 목적을 이해하기 어렵게 만드는 특정 링크 텍스트가 아닌 URL로 표시됩니다. 사용자가 컨텍스트에서 링크를 이해할 수 있도록 링크는 링크 URL 대신 표시되는 링크 텍스트를 사용하는 것이 좋습니다.

이 지원이 없으면 PDF JS를 광범위하게 구현하는 데 문제가 있습니다. 시맨틱 마크업을 제공하는 기능 지원에 대한 업데이트나 일정이 있습니까? 이 문제는 사용자가 콘텐츠를 인식하고 상호작용하는 능력에 영향을 미치므로 더 높은 우선순위로 간주해 주시기 바랍니다.

내가 아는 한, 기여는 환영받는 것 이상입니다.

이 작업에 대해 @trjohnst 에게 감사드립니다.

나는 @trjohnst의 리베이스를 수동으로 시작 지점을 pdf.js 마스터에서. 이 접근 방식은 단일 수준만 필요한 태그에 적합합니다. 예: 대체 텍스트가 있는 제목 또는 이미지. 콘텐츠 스트림을 걸을 때 표시된 콘텐츠 시퀀스를 만나면 연결된 구조 요소를 찾고 pdf.js 텍스트 레이어의 HTML 출력에서 ​​텍스트 범위에 적절한 ARIA 역할을 배치합니다.

불행히도 이것은 중첩 태그가 필요한 모든 것에는 충분하지 않습니다. 예: 목록 또는 테이블. 나는 접근 방식이 최소한 까다로운 경우가 많지 않은 이상 이러한 문제를 다루기 위해 확장될 수 있다고 생각하지 않습니다. 또한 링크와 양식 필드를 적절하게 지원하기 위해(그리고 @trjohnst 의 기여 당시 양식 필드는 pdf.js에서 지원되지 않았습니다), 주석 레이어뿐만 아니라 주석 레이어도 고려할 수 있어야 합니다. 텍스트 레이어. 더 나아가 태그가 지정되지 않은 PDF에서 머리글, 링크, 테이블, 양식 필드 등을 감지(및 올바른 위치 지정)하기 위해 휴리스틱을 구현할 수 있으면 좋을 것입니다.

텍스트 레이어에서 이 작업을 수행하는 대신 구조 트리를 살펴보고 이를 기반으로 노드를 렌더링하고 출력 요소에 ARIA 속성을 설정해야 한다고 생각합니다. 구조 트리는 텍스트 및 주석 레이어 모두에서 데이터를 참조할 수 있습니다. 구조 트리를 기반으로 텍스트 및 주석 레이어 DOM 노드를 재정렬하거나(시각적 렌더링을 중단하지 않고는 까다로울 수 있습니까?) aria-owns를 사용하여 DOM을 재정렬하지 않고 a11y 트리만 재정렬할 수 있습니다.

구조적으로 이것은 텍스트와 주석 레이어가 이미 별도로 렌더링되어 있기 때문에 까다롭습니다. 이제 세 번째 레이어(또는 최소한 진실의 소스)인 구조 트리를 살펴봐야 합니다. 다른 레이어. 이를 수행하는 가장 간단한 방법은 모든 표시된 콘텐츠 시퀀스(텍스트 레이어)와 링크/양식 필드(주석 레이어)에 ID를 첨부하는 것입니다. 양식 필드에 이미 ID를 지정하는 데이터 속성이 있습니다. aria-owns를 사용하려면 어쨌든 id 속성을 설정해야 하므로 하나의 스콘으로 두 마리의 새를 먹일 수 있습니다. id는 텍스트 및 주석 레이어 외부, 새 구조 레이어 내에서 계산할 수 있는 것이어야 합니다. 구조 트리를 처리할 때 구조 요소에 대한 요소를 출력하고 ID를 기반으로 텍스트/주석 레이어에서 요소를 이동/소유합니다.

태그가 지정된 PDF를 넘어 휴리스틱으로 다음과 같은 작업을 수행할 수 있어야 합니다. 링크 또는 양식 필드 주석이 주어지면 직사각형이 텍스트 레이어의 무언가를 포함합니까? 그렇다면 주석은 해당 텍스트와 연결되어야 합니다(aria-owns 또는 DOM 이동). 다시 말하지만, 텍스트와 주석 레이어(및 해당 입력)가 분리되어 있고 사용할 수 있는 레이어에서 캐시된 상태가 없다고 생각하기 때문에 아키텍처적으로 까다롭습니다. 그러나 텍스트 및 주석 레이어에 의해 렌더링된 노드의 경계를 잠재적으로 볼 수 있지만 콘텐츠와 프레젠테이션 처리 간의 아키텍처 경계가 흐려지기 시작합니다.

태그가 지정된 PDF의 초기 구현이 반드시 휴리스틱을 지원할 필요는 없지만 이것을 아키텍처 설계의 일부로 고려하도록 강력히 권장합니다. 현실은 태그가 지정되지 않은 PDF가 불행히도 매우 널리 퍼져 있으며 이러한 PDF를 더 쉽게 액세스할 수 없도록 하는 아키텍처에 갇히게 된다면 슬픈 일입니다. (Acrobat Reader와 Chromium은 훨씬 덜하지만 태그가 지정되지 않은 PDF에 더 쉽게 액세스할 수 있도록 하기 위해 휴리스틱을 사용합니다.)