openhtmltopdf
openhtmltopdf copied to clipboard
Published
20 hours ago •
danfickle
danfickle
Ordering of elements for PDF accessibility and screenreaders
Hi,
I've been trying to create an accessible PDF, that has a left and right column and some text below. Everything works as expected and the accessibility-checker that I use finds no errors, but the order of the elements is not the same as in the document. The div-elements change order, when I access them in a screenreader, so the order of the text gets lost.
HTML und CSS:
<style>
.container {
width: 100%;
}
.left {
float:left;
width: 13cm;
height: 23cm;
}
.right {
float:right;
height: 23cm;
}
.left_complete{
float:left;
width: 17cm;
height: 23cm;
}
</style>
</head>
<body>
<div class="container">
<div>
<div class="left">
Left text.
</div>
<div class="right">
Right text.
</div>
</div>
<div class="left_complete">
Text below.
</div>
</div>
The HTML correctly shown in a browser:
The wrong order in a screenreader, text below shows first:
I'd appreciate any help or direction what to do, to get the correct order in a screenreader.
Thanks alot!
