Images called through CSS not extracted

laudrain commented 4 years ago

Please provide the following details if possible or relevant:

[1.2.0-beta] the version of Ace impacted by the issue (as returned by the ace -v command).
[v10.16.3] the version of Node used to run Ace (as returned by the node -v command).
[MacOS 10.14.6] your operating system and version.
[] if the issue is a bug when running Ace: the error message as produced in the log file (you can enable debug logging with the --verbose option).
[x] if the issue is about the HTML report: the browser(s) and version(s) you used.
[] if possible, let us know if you can share a sample input file to help us reproduce the issue.

Testing a Fixed Layout EPUB with full image descriptions and accessibility techniques, the HTML report has no violation but does not show the images in the images tab. The images are not exported in the data folder.

The HTML construction is also a bit unusual :

I copy hear the one body eleement:

<body>
        <div id="page014">
            <figure class="fig004">
                <img class="hidden" src="../images/blank.png" width="1970" height="1390"
                    alt="Start of image description. An illustration of three children standing in front of some houses. Frieda stands opposite the road. Her dress reads, “one, no poverty”."
                    aria-describedby="alt-page014" />
                <figcaption>
                    <aside id="alt-page014" class="hidden">
                        <p>An illustration of three children standing in front of some houses.
                            Frieda stands across the street in the foreground. Her dress has the
                            icon of SDG 1 with the words “No Poverty”. End of image description.
                            … … …</p>
                    </aside>
                </figcaption>
            </figure>

            <div class="page014_div_par1">
                <p class="cls_014">“Starting off with achieving no poverty,<br /> we must work to
                    meet our basic need.</p>
            </div>

            <div class="page014_div_par2">
                <p class="cls_014"><span epub:type="pagebreak" role="doc-pagebreak" id="page_11"
                        aria-label="page 11. "></span>Everyone deserves a safe home;<br /> this is
                    something we need, indeed!”</p>
            </div>
        </div>
    </body>

And the CSS for the id page014: #page014 {background-image: url("../images/page014.jpg");background-size: auto 100%;background-repeat: no-repeat;background-position: center;position: absolute;left:0px;top:0px;width: 2000px;height: 1413px;}

Only the blank.png is extracted and used in the HTML report. Could this be fixed in finding the proper image in the CSS?

rdeltour commented 4 years ago

Right, Ace does not currently extract images from CSS. The issue with CSS images is that it's rather difficult to identify how and why a CSS image is used. Usually it's for background, or bullets, or other decorative purposes, but should not be used for semantically meaningful content…

Do you know the reason why it's coded like this? Or does it come from a specific production tool?

laudrain commented 4 years ago

These EPUB files are produced by AMNET for UN. I'll investigate with them. Would be fine if I could refer to a11y best practices or other reference rules... Do you know any about your "should not be used for semantically meaningful content…" ?

rdeltour commented 4 years ago

Would be fine if I could refer to a11y best practices or other reference rules... Do you know any about your "should not be used for semantically meaningful content…" ?

I'm not entirely sure that the technique above is strictly problematic for accessibility, so the "should" in my previous comment is to be interpreted as a best practice more than an accessibility principle.

In general, separating style and content is a widely acknowledged best practice. It's one of the very reasons why we have CSS as a styling technology for HTML. Putting semantically meaningful images in the CSS breaks this separation of concerns.

The above markup might work OK for users, both visual and with non-visual ATs, but it's very brittle. Should the user decide to disable CSS, or have their own CSS overrides, then this pattern is likely to break and the image will not be rendered.

There's also a theoretical violation of HTML, which says that the alt attribute provides the equivalent for the image referenced in the img element. In the markup above, the alt text is describing the CSS image, not the HTML image.

Additionally, it can create UX issues. For instance, the user would not be able to access the image with a contextual menu (to open it separately, or download it); which might btw be the reason of this kind of markup? (some publishers may want to hide the possibility to download the images from a browser?)

Finally, there are other issues with the markup above:

the alt text should not be a duplicate of the caption
the alt text should not start with "Start of image description" and end with "End of image description". These boundary announcements are the responsibility of screen reader and user settings, they should not be forced on the user by the authors.

For best practices on how to use the figure element with good accessibility, I recommend reading Scott O'Hara's article “How do you figure?” (Jan 2019).

rdeltour commented 4 years ago

You can also refer to WCAG failure technique F3 (Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information).

Again in the specific case above I'm not 100% sure it applies since the alt text will effectively convey the important information; but step 3 in the testing procedure definitely fails (the information is not conveyed to visual users when the CSS image is not displayed).

clapierre commented 4 years ago

I will talk to AMNET about this practice as they are a Benetech approved Vendor.

Thanks EOM Charles LaPierre Technical Lead, DIAGRAM and Born Accessible Twitter: @CLaPierreA11Y Skype: charles_lapierre

On Nov 20, 2019, at 2:20 AM, Luc Audrain notifications@github.com<mailto:notifications@github.com> wrote:

These EPUB files are produced by AMNET for UN. I'll investigate with them. Would be fine if I could refer to a11y best practices or other reference rules... Do you know any about your "should not be used for semantically meaningful content…" ?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/daisy/ace/issues/298?email_source=notifications&email_token=AB3A3LIE2ZMNLAMKI4ZAXXDQUT6ORA5CNFSM4JPGOEVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEERJQSI#issuecomment-555915337, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AB3A3LOLVIKQ2E2DTHC4NHTQUT6ORANCNFSM4JPGOEVA.

danielweck commented 4 years ago

If I read the comment thread correctly, the conclusion is that this problem is not fixable at the Ace level, and that the issue is related to incorrect authoring practices which do not convey enough structural/semantics for Ace to effectively report image data. I am closing the issue, but please feel free if I have misinterpreted the analysis.

daisy / ace

Images called through CSS not extracted #298