all: add aria-label to the anchor when sectanchor enabled

The aria-label help user with screen reader to discern and navigate
the anchor.

Ref: https://dequeuniversity.com/rules/axe/4.11/link-name

2 files changed, 74 insertions, 72 deletions

diff --git a/html_backend.go b/html_backend.go
index 14137e5..323b60b 100644
--- a/html_backend.go
+++ b/html_backend.go
@@ -1167,7 +1167,9 @@ func htmlWriteSection(doc *Document, el *element, out io.Writer) {
 
 	_, withSectAnchors = doc.Attributes.Entry[docAttrSectAnchors]
 	if withSectAnchors {
-		fmt.Fprintf(out, `<a class="anchor" href="#%s"></a>`, el.ID)
+		fmt.Fprintf(out,
+			`<a class="anchor" href="#%s" aria-label="Anchor for %s"></a>`,
+			el.ID, el.ID)
 	}
 	_, withSectlinks = doc.Attributes.Entry[docAttrSectLinks]
 	if withSectlinks {
diff --git a/testdata/test.got.html b/testdata/test.got.html
index f236402..e0162cd 100644
--- a/testdata/test.got.html
+++ b/testdata/test.got.html
@@ -2604,7 +2604,7 @@ p.tableblock {
 </div>
 </div>
 <div class="sect1">
-<h2 id="metadata_references"><a class="anchor" href="#metadata_references"></a><a class="link" href="#metadata_references">1. Metadata references</a></h2>
+<h2 id="metadata_references"><a class="anchor" href="#metadata_references" aria-label="Anchor for metadata_references"></a><a class="link" href="#metadata_references">1. Metadata references</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>First author: Author A Author  A <a href="mailto:a@a.com">a@a.com</a>
@@ -2624,7 +2624,7 @@ AA.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="inline_formatting_on_section"><a class="anchor" href="#inline_formatting_on_section"></a><a class="link" href="#inline_formatting_on_section">2. <em>Inline <code>formatting</code> on <strong>section</strong></em></a></h2>
+<h2 id="inline_formatting_on_section"><a class="anchor" href="#inline_formatting_on_section" aria-label="Anchor for inline_formatting_on_section"></a><a class="link" href="#inline_formatting_on_section">2. <em>Inline <code>formatting</code> on <strong>section</strong></em></a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Test inline formatting on section title.</p>
@@ -2632,16 +2632,16 @@ AA.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="level_1"><a class="anchor" href="#level_1"></a><a class="link" href="#level_1">3. Level 1</a></h2>
+<h2 id="level_1"><a class="anchor" href="#level_1" aria-label="Anchor for level_1"></a><a class="link" href="#level_1">3. Level 1</a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="level_2"><a class="anchor" href="#level_2"></a><a class="link" href="#level_2">3.1. Level 2</a></h3>
+<h3 id="level_2"><a class="anchor" href="#level_2" aria-label="Anchor for level_2"></a><a class="link" href="#level_2">3.1. Level 2</a></h3>
 <div class="sect3">
-<h4 id="level_3"><a class="anchor" href="#level_3"></a><a class="link" href="#level_3">3.1.1. Level 3</a></h4>
+<h4 id="level_3"><a class="anchor" href="#level_3" aria-label="Anchor for level_3"></a><a class="link" href="#level_3">3.1.1. Level 3</a></h4>
 <div class="sect4">
-<h5 id="level_4"><a class="anchor" href="#level_4"></a><a class="link" href="#level_4">Level 4</a></h5>
+<h5 id="level_4"><a class="anchor" href="#level_4" aria-label="Anchor for level_4"></a><a class="link" href="#level_4">Level 4</a></h5>
 <div class="sect5">
-<h6 id="level_5"><a class="anchor" href="#level_5"></a><a class="link" href="#level_5">Level 5</a></h6>
+<h6 id="level_5"><a class="anchor" href="#level_5" aria-label="Anchor for level_5"></a><a class="link" href="#level_5">Level 5</a></h6>
 </div>
 </div>
 </div>
@@ -2649,17 +2649,17 @@ AA.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="section_two"><a class="anchor" href="#section_two"></a><a class="link" href="#section_two">Section Two</a></h2>
+<h2 id="section_two"><a class="anchor" href="#section_two" aria-label="Anchor for section_two"></a><a class="link" href="#section_two">Section Two</a></h2>
 <div class="sectionbody">
 </div>
 </div>
 <div class="sect1">
-<h2 id="section_three"><a class="anchor" href="#section_three"></a><a class="link" href="#section_three">4. Section Three</a></h2>
+<h2 id="section_three"><a class="anchor" href="#section_three" aria-label="Anchor for section_three"></a><a class="link" href="#section_three">4. Section Three</a></h2>
 <div class="sectionbody">
 </div>
 </div>
 <div class="sect1">
-<h2 id="comment"><a class="anchor" href="#comment"></a><a class="link" href="#comment">5. Comment</a></h2>
+<h2 id="comment"><a class="anchor" href="#comment" aria-label="Anchor for comment"></a><a class="link" href="#comment">5. Comment</a></h2>
 <div class="sectionbody">
 <div class="literalblock">
 <div class="content">
@@ -2671,7 +2671,7 @@ Indented block comment
 </div>
 </div>
 <div class="sect1">
-<h2 id="paragraph"><a class="anchor" href="#paragraph"></a><a class="link" href="#paragraph">6. Paragraph</a></h2>
+<h2 id="paragraph"><a class="anchor" href="#paragraph" aria-label="Anchor for paragraph"></a><a class="link" href="#paragraph">6. Paragraph</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <div class="title">A Title</div>
@@ -2729,7 +2729,7 @@ This is next line in paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="alignment"><a class="anchor" href="#alignment"></a><a class="link" href="#alignment">6.1. Alignment</a></h3>
+<h3 id="alignment"><a class="anchor" href="#alignment" aria-label="Anchor for alignment"></a><a class="link" href="#alignment">6.1. Alignment</a></h3>
 <div class="paragraph text-left">
 <p>This text is left aligned.</p>
 </div>
@@ -2744,7 +2744,7 @@ This is next line in paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="line_break"><a class="anchor" href="#line_break"></a><a class="link" href="#line_break">6.2. Line break</a></h3>
+<h3 id="line_break"><a class="anchor" href="#line_break" aria-label="Anchor for line_break"></a><a class="link" href="#line_break">6.2. Line break</a></h3>
 <div class="paragraph">
 <p>Rubies are red,<br>
 Topazes are blue.</p>
@@ -2767,7 +2767,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="unconstrained_text_formatting"><a class="anchor" href="#unconstrained_text_formatting"></a><a class="link" href="#unconstrained_text_formatting">7. Unconstrained text formatting</a></h2>
+<h2 id="unconstrained_text_formatting"><a class="anchor" href="#unconstrained_text_formatting" aria-label="Anchor for unconstrained_text_formatting"></a><a class="link" href="#unconstrained_text_formatting">7. Unconstrained text formatting</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><code>__A *B*__</code>: <em>A <strong>B</strong></em></p>
@@ -2802,7 +2802,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="single_quote"><a class="anchor" href="#single_quote"></a><a class="link" href="#single_quote">8. Single quote</a></h2>
+<h2 id="single_quote"><a class="anchor" href="#single_quote" aria-label="Anchor for single_quote"></a><a class="link" href="#single_quote">8. Single quote</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>'` A single quote without end.</p>
@@ -2819,7 +2819,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="subscript_and_superscript"><a class="anchor" href="#subscript_and_superscript"></a><a class="link" href="#subscript_and_superscript">9. Subscript and superscript</a></h2>
+<h2 id="subscript_and_superscript"><a class="anchor" href="#subscript_and_superscript" aria-label="Anchor for subscript_and_superscript"></a><a class="link" href="#subscript_and_superscript">9. Subscript and superscript</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>H<sub>2</sub>0 H~ 3 ~0 H~4 ~0 H ~ 5~0 H~6 7~0.</p>
@@ -2830,7 +2830,7 @@ line break</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="constrained_text_formatting"><a class="anchor" href="#constrained_text_formatting"></a><a class="link" href="#constrained_text_formatting">10. Constrained text formatting</a></h2>
+<h2 id="constrained_text_formatting"><a class="anchor" href="#constrained_text_formatting" aria-label="Anchor for constrained_text_formatting"></a><a class="link" href="#constrained_text_formatting">10. Constrained text formatting</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><code>_A_B</code>: _A_B</p>
@@ -2882,10 +2882,10 @@ paragraph</strong></em>.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="blocks"><a class="anchor" href="#blocks"></a><a class="link" href="#blocks">11. Blocks</a></h2>
+<h2 id="blocks"><a class="anchor" href="#blocks" aria-label="Anchor for blocks"></a><a class="link" href="#blocks">11. Blocks</a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="title"><a class="anchor" href="#title"></a><a class="link" href="#title">11.1. Title</a></h3>
+<h3 id="title"><a class="anchor" href="#title" aria-label="Anchor for title"></a><a class="link" href="#title">11.1. Title</a></h3>
 <div class="ulist">
 <div class="title">TODO list</div>
 <ul>
@@ -2904,7 +2904,7 @@ paragraph</strong></em>.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="block_listing"><a class="anchor" href="#block_listing"></a><a class="link" href="#block_listing">12. Block listing</a></h2>
+<h2 id="block_listing"><a class="anchor" href="#block_listing" aria-label="Anchor for block_listing"></a><a class="link" href="#block_listing">12. Block listing</a></h2>
 <div class="sectionbody">
 <div class="listingblock">
 <div class="content">
@@ -2923,7 +2923,7 @@ This is not listing.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="block_literal"><a class="anchor" href="#block_literal"></a><a class="link" href="#block_literal">13. Block literal</a></h2>
+<h2 id="block_literal"><a class="anchor" href="#block_literal" aria-label="Anchor for block_literal"></a><a class="link" href="#block_literal">13. Block literal</a></h2>
 <div class="sectionbody">
 <div class="literalblock">
 <div class="content">
@@ -2948,7 +2948,7 @@ A literal named and trailing characters will become paragraph.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="ordered_lists"><a class="anchor" href="#ordered_lists"></a><a class="link" href="#ordered_lists">14. Ordered Lists</a></h2>
+<h2 id="ordered_lists"><a class="anchor" href="#ordered_lists" aria-label="Anchor for ordered_lists"></a><a class="link" href="#ordered_lists">14. Ordered Lists</a></h2>
 <div class="sectionbody">
 <div class="olist arabic">
 <ol class="arabic">
@@ -3171,7 +3171,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="unordered_lists"><a class="anchor" href="#unordered_lists"></a><a class="link" href="#unordered_lists">15. Unordered Lists</a></h2>
+<h2 id="unordered_lists"><a class="anchor" href="#unordered_lists" aria-label="Anchor for unordered_lists"></a><a class="link" href="#unordered_lists">15. Unordered Lists</a></h2>
 <div class="sectionbody">
 <div class="ulist">
 <ul>
@@ -3392,7 +3392,7 @@ This line separated by comment.</p>
 </ul>
 </div>
 <div class="sect2">
-<h3 id="custom_markers"><a class="anchor" href="#custom_markers"></a><a class="link" href="#custom_markers">15.1. Custom markers</a></h3>
+<h3 id="custom_markers"><a class="anchor" href="#custom_markers" aria-label="Anchor for custom_markers"></a><a class="link" href="#custom_markers">15.1. Custom markers</a></h3>
 <div class="ulist square">
 <ul class="square">
 <li>
@@ -3541,7 +3541,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="checklist"><a class="anchor" href="#checklist"></a><a class="link" href="#checklist">15.2. Checklist</a></h3>
+<h3 id="checklist"><a class="anchor" href="#checklist" aria-label="Anchor for checklist"></a><a class="link" href="#checklist">15.2. Checklist</a></h3>
 <div class="ulist checklist">
 <ul class="checklist">
 <li>
@@ -3562,7 +3562,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="mixed_list"><a class="anchor" href="#mixed_list"></a><a class="link" href="#mixed_list">16. Mixed list</a></h2>
+<h2 id="mixed_list"><a class="anchor" href="#mixed_list" aria-label="Anchor for mixed_list"></a><a class="link" href="#mixed_list">16. Mixed list</a></h2>
 <div class="sectionbody">
 <div class="olist arabic">
 <ol class="arabic">
@@ -3638,7 +3638,7 @@ This line separated by comment.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="description_list"><a class="anchor" href="#description_list"></a><a class="link" href="#description_list">17. Description list</a></h2>
+<h2 id="description_list"><a class="anchor" href="#description_list" aria-label="Anchor for description_list"></a><a class="link" href="#description_list">17. Description list</a></h2>
 <div class="sectionbody">
 <div class="dlist">
 <dl>
@@ -3965,7 +3965,7 @@ Hard drive
 </div>
 </div>
 <div class="sect1">
-<h2 id="question_and_answers"><a class="anchor" href="#question_and_answers"></a><a class="link" href="#question_and_answers">18. Question and Answers</a></h2>
+<h2 id="question_and_answers"><a class="anchor" href="#question_and_answers" aria-label="Anchor for question_and_answers"></a><a class="link" href="#question_and_answers">18. Question and Answers</a></h2>
 <div class="sectionbody">
 <div class="qlist qanda">
 <ol>
@@ -3985,7 +3985,7 @@ Hard drive
 </div>
 </div>
 <div class="sect1">
-<h2 id="table"><a class="anchor" href="#table"></a><a class="link" href="#table">19. Table</a></h2>
+<h2 id="table"><a class="anchor" href="#table" aria-label="Anchor for table"></a><a class="link" href="#table">19. Table</a></h2>
 <div class="sectionbody">
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
@@ -4051,7 +4051,7 @@ D</p></td>
 </tbody>
 </table>
 <div class="sect2">
-<h3 id="column_formatting"><a class="anchor" href="#column_formatting"></a><a class="link" href="#column_formatting">19.1. Column Formatting</a></h3>
+<h3 id="column_formatting"><a class="anchor" href="#column_formatting" aria-label="Anchor for column_formatting"></a><a class="link" href="#column_formatting">19.1. Column Formatting</a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4139,7 +4139,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="cell_formatting"><a class="anchor" href="#cell_formatting"></a><a class="link" href="#cell_formatting">19.2. Cell formatting</a></h3>
+<h3 id="cell_formatting"><a class="anchor" href="#cell_formatting" aria-label="Anchor for cell_formatting"></a><a class="link" href="#cell_formatting">19.2. Cell formatting</a></h3>
 <div class="paragraph">
 <p>Cell duplicated across three columns,</p>
 </div>
@@ -4194,7 +4194,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="header_row"><a class="anchor" href="#header_row"></a><a class="link" href="#header_row">19.3. Header row</a></h3>
+<h3 id="header_row"><a class="anchor" href="#header_row" aria-label="Anchor for header_row"></a><a class="link" href="#header_row">19.3. Header row</a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4231,7 +4231,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="footer_row"><a class="anchor" href="#footer_row"></a><a class="link" href="#footer_row">19.4. Footer row</a></h3>
+<h3 id="footer_row"><a class="anchor" href="#footer_row" aria-label="Anchor for footer_row"></a><a class="link" href="#footer_row">19.4. Footer row</a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4264,7 +4264,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="table_width"><a class="anchor" href="#table_width"></a><a class="link" href="#table_width">19.5. Table width</a></h3>
+<h3 id="table_width"><a class="anchor" href="#table_width" aria-label="Anchor for table_width"></a><a class="link" href="#table_width">19.5. Table width</a></h3>
 <table class="tableblock frame-all grid-all" style="width: 75%;">
 <colgroup>
 <col style="width: 50%;">
@@ -4341,9 +4341,9 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="table_borders"><a class="anchor" href="#table_borders"></a><a class="link" href="#table_borders">19.6. Table borders</a></h3>
+<h3 id="table_borders"><a class="anchor" href="#table_borders" aria-label="Anchor for table_borders"></a><a class="link" href="#table_borders">19.6. Table borders</a></h3>
 <div class="sect3">
-<h4 id="frame"><a class="anchor" href="#frame"></a><a class="link" href="#frame">19.6.1. Frame</a></h4>
+<h4 id="frame"><a class="anchor" href="#frame" aria-label="Anchor for frame"></a><a class="link" href="#frame">19.6.1. Frame</a></h4>
 <table class="tableblock frame-ends grid-all stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4409,7 +4409,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect3">
-<h4 id="grids"><a class="anchor" href="#grids"></a><a class="link" href="#grids">19.6.2. Grids</a></h4>
+<h4 id="grids"><a class="anchor" href="#grids" aria-label="Anchor for grids"></a><a class="link" href="#grids">19.6.2. Grids</a></h4>
 <table class="tableblock frame-all grid-rows stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4476,7 +4476,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect2">
-<h3 id="striping"><a class="anchor" href="#striping"></a><a class="link" href="#striping">19.7. Striping</a></h3>
+<h3 id="striping"><a class="anchor" href="#striping" aria-label="Anchor for striping"></a><a class="link" href="#striping">19.7. Striping</a></h3>
 <table class="tableblock frame-all grid-all stripes-even stretch">
 <colgroup>
 <col style="width: 33.3333%;">
@@ -4583,7 +4583,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="orientation"><a class="anchor" href="#orientation"></a><a class="link" href="#orientation">19.8. Orientation</a></h3>
+<h3 id="orientation"><a class="anchor" href="#orientation" aria-label="Anchor for orientation"></a><a class="link" href="#orientation">19.8. Orientation</a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4618,7 +4618,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="table_caption"><a class="anchor" href="#table_caption"></a><a class="link" href="#table_caption">19.9. Table caption</a></h3>
+<h3 id="table_caption"><a class="anchor" href="#table_caption" aria-label="Anchor for table_caption"></a><a class="link" href="#table_caption">19.9. Table caption</a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <caption class="title">Table 1. A formal table</caption>
 <colgroup>
@@ -4678,7 +4678,7 @@ D</p></td>
 </table>
 </div>
 <div class="sect2">
-<h3 id="escaping_the_cell_separator"><a class="anchor" href="#escaping_the_cell_separator"></a><a class="link" href="#escaping_the_cell_separator">19.10. Escaping the Cell separator</a></h3>
+<h3 id="escaping_the_cell_separator"><a class="anchor" href="#escaping_the_cell_separator" aria-label="Anchor for escaping_the_cell_separator"></a><a class="link" href="#escaping_the_cell_separator">19.10. Escaping the Cell separator</a></h3>
 <table class="tableblock frame-all grid-all stretch">
 <colgroup>
 <col style="width: 50%;">
@@ -4707,7 +4707,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="horizontal_rules"><a class="anchor" href="#horizontal_rules"></a><a class="link" href="#horizontal_rules">20. Horizontal rules</a></h2>
+<h2 id="horizontal_rules"><a class="anchor" href="#horizontal_rules" aria-label="Anchor for horizontal_rules"></a><a class="link" href="#horizontal_rules">20. Horizontal rules</a></h2>
 <div class="sectionbody">
 <hr>
 <div class="paragraph">
@@ -4729,7 +4729,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="page_break"><a class="anchor" href="#page_break"></a><a class="link" href="#page_break">21. Page break</a></h2>
+<h2 id="page_break"><a class="anchor" href="#page_break" aria-label="Anchor for page_break"></a><a class="link" href="#page_break">21. Page break</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>Before page break.</p>
@@ -4741,7 +4741,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="urls"><a class="anchor" href="#urls"></a><a class="link" href="#urls">22. URLs</a></h2>
+<h2 id="urls"><a class="anchor" href="#urls" aria-label="Anchor for urls"></a><a class="link" href="#urls">22. URLs</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><a href="https://asciidoctor.org" class="bare">https://asciidoctor.org</a>.</p>
@@ -4770,7 +4770,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="anchors"><a class="anchor" href="#anchors"></a><a class="link" href="#anchors">23. Anchors</a></h2>
+<h2 id="anchors"><a class="anchor" href="#anchors" aria-label="Anchor for anchors"></a><a class="link" href="#anchors">23. Anchors</a></h2>
 <div class="sectionbody">
 <div id="notice" class="paragraph">
 <p>This paragraph gets a lot of attention.</p>
@@ -4798,21 +4798,21 @@ D</p></td>
 </ul>
 </div>
 <div class="sect2">
-<h3 id="version-4_9"><a class="anchor" href="#version-4_9"></a><a class="link" href="#version-4_9">23.1. Version 4.9</a></h3>
+<h3 id="version-4_9"><a class="anchor" href="#version-4_9" aria-label="Anchor for version-4_9"></a><a class="link" href="#version-4_9">23.1. Version 4.9</a></h3>
 </div>
 <div class="sect2">
-<h3 id="version-4_10"><a class="anchor" href="#version-4_10"></a><a class="link" href="#version-4_10">23.2. <a id="current"></a>Version 4.10</a></h3>
+<h3 id="version-4_10"><a class="anchor" href="#version-4_10" aria-label="Anchor for version-4_10"></a><a class="link" href="#version-4_10">23.2. <a id="current"></a>Version 4.10</a></h3>
 </div>
 <div class="sect2">
-<h3 id="which-one"><a class="anchor" href="#which-one"></a><a class="link" href="#which-one">23.3. Version 4.11<a id="version-4_11"></a></a></h3>
+<h3 id="which-one"><a class="anchor" href="#which-one" aria-label="Anchor for which-one"></a><a class="link" href="#which-one">23.3. Version 4.11<a id="version-4_11"></a></a></h3>
 </div>
 </div>
 </div>
 <div class="sect1">
-<h2 id="cross_references"><a class="anchor" href="#cross_references"></a><a class="link" href="#cross_references">24. Cross references</a></h2>
+<h2 id="cross_references"><a class="anchor" href="#cross_references" aria-label="Anchor for cross_references"></a><a class="link" href="#cross_references">24. Cross references</a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="internal"><a class="anchor" href="#internal"></a><a class="link" href="#internal">24.1. Internal</a></h3>
+<h3 id="internal"><a class="anchor" href="#internal" aria-label="Anchor for internal"></a><a class="link" href="#internal">24.1. Internal</a></h3>
 <div class="paragraph">
 <p>Cross reference with ID <a href="#_anchors">_anchors</a>.</p>
 </div>
@@ -4829,7 +4829,7 @@ D</p></td>
 </div>
 </div>
 <div class="sect1">
-<h2 id="include"><a class="anchor" href="#include"></a><a class="link" href="#include">25. Include</a></h2>
+<h2 id="include"><a class="anchor" href="#include" aria-label="Anchor for include"></a><a class="link" href="#include">25. Include</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p>This is inside the fragment1.adoc.</p>
@@ -4895,10 +4895,10 @@ type anchor struct {
 </div>
 </div>
 <div class="sect1">
-<h2 id="images"><a class="anchor" href="#images"></a><a class="link" href="#images">26. Images</a></h2>
+<h2 id="images"><a class="anchor" href="#images" aria-label="Anchor for images"></a><a class="link" href="#images">26. Images</a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="block_images"><a class="anchor" href="#block_images"></a><a class="link" href="#block_images">26.1. Block images</a></h3>
+<h3 id="block_images"><a class="anchor" href="#block_images" aria-label="Anchor for block_images"></a><a class="link" href="#block_images">26.1. Block images</a></h3>
 <div class="imageblock">
 <div class="content">
 <img src="sunset.jpg" alt="sunset">
@@ -4978,7 +4978,7 @@ This is become paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="float_group"><a class="anchor" href="#float_group"></a><a class="link" href="#float_group">26.2. Float group</a></h3>
+<h3 id="float_group"><a class="anchor" href="#float_group" aria-label="Anchor for float_group"></a><a class="link" href="#float_group">26.2. Float group</a></h3>
 <div class="openblock float-group">
 <div class="content">
 <div class="imageblock left">
@@ -5000,7 +5000,7 @@ This is become paragraph.</p>
 </div>
 </div>
 <div class="sect2">
-<h3 id="inline_image"><a class="anchor" href="#inline_image"></a><a class="link" href="#inline_image">26.3. Inline image</a></h3>
+<h3 id="inline_image"><a class="anchor" href="#inline_image" aria-label="Anchor for inline_image"></a><a class="link" href="#inline_image">26.3. Inline image</a></h3>
 <div class="paragraph">
 <p><span class="image"><img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Tux.svg" alt="Linux" width="25" height="35"></span></p>
 </div>
@@ -5018,7 +5018,7 @@ You can find Linux everywhere these days!</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="block_open"><a class="anchor" href="#block_open"></a><a class="link" href="#block_open">27. Block open</a></h2>
+<h2 id="block_open"><a class="anchor" href="#block_open" aria-label="Anchor for block_open"></a><a class="link" href="#block_open">27. Block open</a></h2>
 <div class="sectionbody">
 <div class="openblock">
 <div class="title">Section inside</div>
@@ -5031,7 +5031,7 @@ You can find Linux everywhere these days!</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="video"><a class="anchor" href="#video"></a><a class="link" href="#video">28. Video</a></h2>
+<h2 id="video"><a class="anchor" href="#video" aria-label="Anchor for video"></a><a class="link" href="#video">28. Video</a></h2>
 <div class="sectionbody">
 <div class="videoblock">
 <div class="title">Video without options</div>
@@ -5078,7 +5078,7 @@ Your browser does not support the video tag.
 </div>
 </div>
 <div class="sect1">
-<h2 id="audio"><a class="anchor" href="#audio"></a><a class="link" href="#audio">29. Audio</a></h2>
+<h2 id="audio"><a class="anchor" href="#audio" aria-label="Anchor for audio"></a><a class="link" href="#audio">29. Audio</a></h2>
 <div class="sectionbody">
 <div class="audioblock">
 <div class="content">
@@ -5090,10 +5090,10 @@ Your browser does not support the audio tag.
 </div>
 </div>
 <div class="sect1">
-<h2 id="admonition"><a class="anchor" href="#admonition"></a><a class="link" href="#admonition">30. Admonition</a></h2>
+<h2 id="admonition"><a class="anchor" href="#admonition" aria-label="Anchor for admonition"></a><a class="link" href="#admonition">30. Admonition</a></h2>
 <div class="sectionbody">
 <div class="sect2">
-<h3 id="line_admonition"><a class="anchor" href="#line_admonition"></a><a class="link" href="#line_admonition">30.1. Line admonition</a></h3>
+<h3 id="line_admonition"><a class="anchor" href="#line_admonition" aria-label="Anchor for line_admonition"></a><a class="link" href="#line_admonition">30.1. Line admonition</a></h3>
 <div class="paragraph">
 <p>Admonition between a paragraph.
 WARNING: Wolpertingers are known to nest in server racks.
@@ -5180,7 +5180,7 @@ admonition followed by list
 </div>
 </div>
 <div class="sect2">
-<h3 id="style_admonition"><a class="anchor" href="#style_admonition"></a><a class="link" href="#style_admonition">30.2. Style admonition</a></h3>
+<h3 id="style_admonition"><a class="anchor" href="#style_admonition" aria-label="Anchor for style_admonition"></a><a class="link" href="#style_admonition">30.2. Style admonition</a></h3>
 <div class="admonitionblock important">
 <table>
 <tr>
@@ -5266,7 +5266,7 @@ Literal paragraph with admonition.
 </div>
 </div>
 <div class="sect2">
-<h3 id="icons"><a class="anchor" href="#icons"></a><a class="link" href="#icons">30.3. Icons</a></h3>
+<h3 id="icons"><a class="anchor" href="#icons" aria-label="Anchor for icons"></a><a class="link" href="#icons">30.3. Icons</a></h3>
 <div class="admonitionblock warning">
 <table>
 <tr>
@@ -5284,7 +5284,7 @@ Enter at your own risk.
 </div>
 </div>
 <div class="sect1">
-<h2 id="sidebar"><a class="anchor" href="#sidebar"></a><a class="link" href="#sidebar">31. Sidebar</a></h2>
+<h2 id="sidebar"><a class="anchor" href="#sidebar" aria-label="Anchor for sidebar"></a><a class="link" href="#sidebar">31. Sidebar</a></h2>
 <div class="sectionbody">
 <div class="sidebarblock">
 <div class="content">
@@ -5314,7 +5314,7 @@ for producing professional documents like DocBook and LaTeX.</p>
 </div>
 </div>
 <div class="sect1">
-<h2 id="example"><a class="anchor" href="#example"></a><a class="link" href="#example">32. Example</a></h2>
+<h2 id="example"><a class="anchor" href="#example" aria-label="Anchor for example"></a><a class="link" href="#example">32. Example</a></h2>
 <div class="sectionbody">
 <div class="exampleblock">
 <div class="title">Example 1. Sample document</div>
@@ -5339,7 +5339,7 @@ This guide provides...</pre>
 </div>
 </div>
 <div class="sect1">
-<h2 id="quote"><a class="anchor" href="#quote"></a><a class="link" href="#quote">33. Quote</a></h2>
+<h2 id="quote"><a class="anchor" href="#quote" aria-label="Anchor for quote"></a><a class="link" href="#quote">33. Quote</a></h2>
 <div class="sectionbody">
 <div class="quoteblock">
 <blockquote>
@@ -5378,7 +5378,7 @@ Everybody remember where we parked.
 </div>
 </div>
 <div class="sect2">
-<h3 id="quoted_paragraph"><a class="anchor" href="#quoted_paragraph"></a><a class="link" href="#quoted_paragraph">33.1. Quoted paragraph</a></h3>
+<h3 id="quoted_paragraph"><a class="anchor" href="#quoted_paragraph" aria-label="Anchor for quoted_paragraph"></a><a class="link" href="#quoted_paragraph">33.1. Quoted paragraph</a></h3>
 <div class="quoteblock">
 <blockquote>
 I hold it that a little rebellion now and then is a good thing,
@@ -5439,7 +5439,7 @@ a quote
 </div>
 </div>
 <div class="sect1">
-<h2 id="verse"><a class="anchor" href="#verse"></a><a class="link" href="#verse">34. Verse</a></h2>
+<h2 id="verse"><a class="anchor" href="#verse" aria-label="Anchor for verse"></a><a class="link" href="#verse">34. Verse</a></h2>
 <div class="sectionbody">
 <div class="verseblock">
 <pre class="content">The fog comes
@@ -5465,13 +5465,13 @@ and then moves on.</pre>
 </div>
 </div>
 <div class="sect1">
-<h2 id="passthrough"><a class="anchor" href="#passthrough"></a><a class="link" href="#passthrough">35. Passthrough</a></h2>
+<h2 id="passthrough"><a class="anchor" href="#passthrough" aria-label="Anchor for passthrough"></a><a class="link" href="#passthrough">35. Passthrough</a></h2>
 <div class="sectionbody">
 <div class="paragraph">
 <p><code><em>A <strong>B</strong></em>+</code></p>
 </div>
 <div class="sect2">
-<h3 id="block_passthrough"><a class="anchor" href="#block_passthrough"></a><a class="link" href="#block_passthrough">35.1. Block passthrough</a></h3>
+<h3 id="block_passthrough"><a class="anchor" href="#block_passthrough" aria-label="Anchor for block_passthrough"></a><a class="link" href="#block_passthrough">35.1. Block passthrough</a></h3>
 <video poster="images/movie-reel.png">
   <source src="videos/writing-zen.webm" type="video/webm">
 </video>
@@ -5479,14 +5479,14 @@ and then moves on.</pre>
 </div>
 </div>
 <div class="sect1">
-<h2 id="section_discrete"><a class="anchor" href="#section_discrete"></a><a class="link" href="#section_discrete">36. Section Discrete</a></h2>
+<h2 id="section_discrete"><a class="anchor" href="#section_discrete" aria-label="Anchor for section_discrete"></a><a class="link" href="#section_discrete">36. Section Discrete</a></h2>
 <div class="sectionbody">
 <h3 id="discrete" class="discrete">Discrete</h3>
 <div class="paragraph">
 <p>This is content of discrete section.</p>
 </div>
 <div class="sect2">
-<h3 id="after_discrete"><a class="anchor" href="#after_discrete"></a><a class="link" href="#after_discrete">36.1. After discrete</a></h3>
+<h3 id="after_discrete"><a class="anchor" href="#after_discrete" aria-label="Anchor for after_discrete"></a><a class="link" href="#after_discrete">36.1. After discrete</a></h3>
 <div class="sidebarblock">
 <div class="content">
 <div class="paragraph">