Accessible Images in PDF

jan_blaha

This is how you can install chromium 99

FROM jsreport/jsreport:3.4.1-full

RUN apt-get update && \
    # chrome
    apt-get install -y libgconf-2-4 libappindicator3-1 && \
    wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - && \
    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' && \
    apt-get update && \
    # install latest chrome just to get package deps installed
    apt-get install -y lsb-release google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst --no-install-recommends && \
    # then replace that chrome with specific chrome version, see https://github.com/webnicer/chrome-downloads for available versions
    wget https://github.com/webnicer/chrome-downloads/raw/master/x64.deb/google-chrome-stable_99.0.4844.51-1_amd64.deb && \
    dpkg -i ./google-chrome*.deb && \
    rm google-chrome*.deb

ENV chrome_launchOptions_executablePath google-chrome-stable

Your playground example doesn't include any text and for some reason, Chrome doesn't include tags there.
However, if I add the "Hello world" text to the beginning, it adds to the output pdf tags. So it seems chromium 99 should work with tagging without further configurations

Hello world
<div aria-label="Cover Page Image Aria Label" 
    alt="Cover Page Image Alternate Text" 
    title="Cover Page Image Title Text"
    role="img" style="width: 100%;
        height: 100%;">
    {{!-- Try to label img --}}
    <img style="width: 100%; height: 100%;" src="https://via.placeholder.com/1024" aria-label="Cover Page Image Aria Label" alt="Cover Page Image Alternate Text" title="Cover Page Image Title Text"/>
</div>

<div style='page-break-after: always;'></div>

kyledgreen

Oh this is fantastic, if not a bit weird...
Having text before the image does appear to make the alt and aria-label tags work!
I also appear to need to actually download the pdf instead of try and use a screenreader on the preview in jsreports studio.
Though it doesn't detect the text which is strange.

I will look into this further, thank you so much Jan!

kyledgreen

Do you know if there is a limitation in pdfUtils around this functionality? I'm using pdfUtils to prepend a cover page that is an image. If I run the template for just the cover page it gets the accessibility tags, but when I run my main template and prepend the cover page template it doesn't seem to have tags.

Something like this: https://playground.jsreport.net/w/anon/lhK7cf6Z

Note: I cant seem to get the online playground to generate the tags in any scenario. It only works for me locally. Maybe due to the --export-tagged-pdf arg im still passing, or my version being 3.4.1 and the playground is version: 3.2.1 with jsreport version: 3.2.0.

jan_blaha

The pdf utils unfortunately don't keep the pdf tags. I've put it in the backlog
https://github.com/jsreport/jsreport/issues/894

I didn't read the spec for the pdf tags yet, so not sure how difficult it can be to implement.

kyledgreen

Does that mean any usage of pdfUtils will strip the tags? Its seems even if I embed my cover page template logic into my main template I still dont get the tags, is this because im using the pdfUtils to merge a header/footer template and/or a table of contents?

Do you have an eta of when the team will be getting around to this functionality, is it high on the roadmap?

jan_blaha

Does that mean any usage of pdfUtils will strip the tags? Its seems even if I embed my cover page template logic into my main template I still dont get the tags, is this because im using the pdfUtils to merge a header/footer template and/or a table of contents?

Yes

Do you have an eta of when the team will be getting around to this functionality, is it high on the roadmap?

Not yet, unfortunately, we need to analyze how complex it will be to merge the tags from multiple pdfs the first.

kyledgreen

I've been looking into working around this problem using css but it appears what I'm using is not recognized by jsreports or maybe chromium yet.
Can you confirm that I cannot use css like below to create header/footer and page numbers?

        @page {
            size: A4;
            margin: 2cm;
            
            @bottom-right-corner { 
                content: "Page " counter(page); 
                border: solid green; 
            }

            @top-center {
                font-size: 16px;
                content: "Page title that could be dynamically created";
            }
        }

reference: https://www.w3.org/TR/css-page-3/#populating-margin-boxes

kyledgreen

I dug a bit more and can confirm chromium does not support these yet.

jan_blaha

Yes, this isn't supported in chromium as far as I know.

Not sure how is your header complicated, won't the chrome-pdf native header work for you?
https://jsreport.net/learn/chrome-pdf#native-headers-and-footers

kyledgreen

We are creating a directory, and the section title is placed in the header along with the first and last subsection header something like:
"First subsection on page" <------> "Section title" <-----> "Last subsection on page"
There is also disclaimer content and page number in the footer.

We need some of the newer experimental features of css like "position: running(key)", "content: element(key)", "content: counter(page)", and "@page" media. I'm looking into Paged.js which appears to support these.