Skip to content

Commit

Permalink
Improve accessibility by adding label to Anchor links.
Browse files Browse the repository at this point in the history
I ran Lighthouse on just-the-docs and noticed the anchor links
were missing a "discernible name".

This adds aria-labelledby to the header element to improve these for
screenreaders.
  • Loading branch information
mscoutermarsh committed Jul 4, 2020
1 parent 50d7278 commit bf31b8b
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions _includes/vendor/anchor_headings.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
{% capture anchor %}{% endcapture %}

{% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
{% capture anchor %}href="#{{ html_id}}"{% endcapture %}
{% capture anchor %}href="#{{ html_id}}" aria-labelledby="{{ html_id}}"{% endcapture %}

{% if include.anchorClass %}
{% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
Expand Down Expand Up @@ -97,4 +97,4 @@
{% endcapture %}
{% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
{% endfor %}
{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}
{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

0 comments on commit bf31b8b

Please sign in to comment.