Forum How do I...?

Table of Contents / Accessibility Tree

CrazyTux
Hello,

How would I go about creating a table of contents in which some elements I do not wish to visually be seen however I do want them to show up under PDF "table of contents" and link to specific pages. When I display: none the elements are removed from the accessibility tree.

<h1>Parent Tree Item 1</h1>
<h2>Child Item 1</h2>
<h2>Child Item 2</h2> <!-- link target -->
<h1>Parent Tree Item 2</h1>
<h2>Child Item 1</h2>
<h2 style="display: none">Child Item 2</h2> <!-- lets say I want to link to above page -->


Your help is very much appreciated, thank you!

Edited by CrazyTux

CrazyTux
CSS:

visibility: hidden;


Seems to "sort of work" it leaves it in the accessibility tree however it takes up space in the layout.

Any ideas and help are greatly appreciated, thank you!
CrazyTux
Just to be clear -- I need to be able to structurally declare the left side ToC while appropriately linking to the correct pages all in a single go, into the accessibility tree, without visually displaying these elements.

<h1>Parent 1</h1>
<h2>Child 1</h2>
<h2>Child 2</h2>
<h1>Parent 2</h1>
<h2>Child 1</h2>
<h2>Child 2</h2>


All linking to relative places in the document. I'm realizing even that hiding elements still presents the out of section, out of order issue.

For example, lets say I've [Front Cover] and I want to link to this in the ToC from multiple languages at various points.

By ToC I'm referring to the accessible left side "table of contents" you would see when viewing a document, not the inline Table of Contents inside the document.

I hope I'm making sense here!! Sorry for the multiple posts but this is driving me crazy.
mikeday
Is this the PDF outline / PDF bookmarks? We do have some CSS properties for that.
CrazyTux
I believe it would be considered outlines.

Example attached.

(left side) is what I'm referencing.
  1. Screenshot 2024-03-13 at 3.48.12 PM.png107.9 kB
CrazyTux
So I tested the linking and it seems to work, is it sensible to create hidden div that contains all of these bookmarks or what is the recommended approach here? How will this be with a screen reader? Thanks!
CrazyTux
So my current issue is that I need to visually hide <h' tag> group yet maintain accessibility tree... any help is appreciated. When I attempt to hide h tags the left side bookmarks/labels get weird. Thanks!
CrazyTux