search

SSAgov / ANDI

A tool to test web content for accessibility and 508 compliance.
https://www.ssa.gov/accessibility/andi/help/howtouse.html
Other
293 stars 75 forks source link

ANDI "Linearize Page" problem with transform:translate() #191

Open Kelvyn-Meyers opened 1 year ago

Kelvyn-Meyers commented 1 year ago

Hi,

It looks like the ANDI "Linearize Page" tool does not reposition elements affected by the transform: translate() CSS property. Below is a situation where a button is highlighted as repositioned even though it's not in the actual DOM order.

Here is a screenshot of the ANDI-linearized page:

Image depicting the ANDI problem

Here is the HTML for that page:

<html>
    <head>
        <title>ANDI Linearize Problem?</title>
    </head>
    <body>
        <h1>Header (1)</h1>
        <button>Button (2)</button>
        <h2>SubHeader (3)</h2>
        <button style="position: relative; transform:translate(250%);">Button (4)</button>
        <button>Button (5)</button>
        <h2>SubHeader (6)</h2>
        <button>Button (7)</button>
    </body>
</html>

Here is a screenshot of the CSS classes affecting this Button(4) element when ANDI has linearized the page:

CSS classes applied to the problem button

If this is not a problem, then I apologize for the inconvenience. Thank you!