Accessibility for table of content widget
Enter / Space keyboard keys on header to open/close content
ArrowDown / ArrowUp keyboard keys to move between links
Enter / Space keyboard keys on links to trigger the jump to the section
Escape keyboard key to close the content and give the focus on header
aria-label with an Open/Close text
aria-expanded to indicate whether the TOC is expanded or not
aria-controls to identify the HTML tag whose content are controlled by the element
Introducing widget Table of Contents
Adding a table of contents, also called summary, at the start of your blog posts can be a “vrai plus”, both in terms of optimizing your blog’s SEO and improving the user experience. (UX) of your readers.
If your articles are less and less succinct and more and more developed, a summary helps to make the content more digestible and understandable by your readers.
The widget can display all levels of headings based on the h1 to h6 tags.
Heading levels are shown by indent to the right.
How to activate the Table of Contents
The ‘Elementor‘ plugin is installed and active.
The ‘EAC components‘ plugin is installed and active.
From the panel settings you have to drag & drop the ‘Table of Contents‘ icon on the panel preview.
Choose the level of analysis and the title tags
You must enter the title to display and determine the target of the scan.
For each entry, the analysis will be deeper.
For example select ‘Entry- content’ to exclude sidebars and page title or ‘Article’ to uniquely display the headers of a posts grid.
Select anchor names and content characteristics
The ‘Auto generated anchor‘ toggle will generate an anchor name of the form “toc-heading-anchor-X” where X is a rank number
If you deselect the toggle ‘Auto generated anchor’ the title name wil be used to generate the anchor name.
And with the ‘Rank number’ toggle you can add a number at its end if the title is not unique in the page.
- Select the layout of the content when loading by toggle ‘Collapse content on load’
- Choose the pictogram to display for each entry
- Select the container width and alignment
Stylize the header and content
You will be able to customize the Header and Content of the Tabl. The Background, Border, Width, Alignment and color.
TOC Header
Change title color and typography as well as the backgroubd color.
TOC Content
Set the color, the typography of the entries as well as the background color.
You can set the border style and apply shadow to the widget.
