Skip to content

Commit 9eb2760

Browse files
cuteshaunsamcunliffe
cuteshaun
and
samcunliffe
authored
fix: move footer to main layout and improve contrast for WCAG compliance (#542)
This PR resolves two WCAG 2.1 AA accessibility issues observed when the page is zoomed to 400%: **Issues** - Focus order: The <footer> previously received keyboard focus before the main content, breaking logical tab order for screen readers and keyboard users. - Insufficient contrast: Footer text color failed to meet the minimum contrast ratio of 4.5:1, making it difficult to read for users with visual impairments. **Changes** - Footer moved from the sidebar to the main layout template (_layouts/default.html), ensuring focus order flows logically: Header → Main Content → Footer - Footer text color updated to improve contrast and readability at high zoom levels. New footer position: <img width="1208" alt="Screenshot 2025-06-03 at 00 20 29" src="https://github.com/user-attachments/assets/e795a854-5555-4bc0-a4a1-a040d1cce17b" /> Closes: #538 Related upstream: [just-the-docs/just-the-docs#1667](just-the-docs/just-the-docs#1667) 🔎 Note: The upstream issue has been opened in JustTheDocs. However, since the upstream review may take time (last comments in issues in February 2025), this PR applies a local fix in the meantime. 🧪 Testing Confirmed fix via keyboard navigation at 400% zoom Verified footer contrast with WCAG contrast checker tools --------- Co-authored-by: Sam Cunliffe <samcunliffe@users.noreply.github.com>
1 parent e0bff39 commit 9eb2760

File tree

6 files changed

+97
-0
lines changed

6 files changed

+97
-0
lines changed

‎.github/workflows/links.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ jobs:
3535
--exclude http://www.gnu.org
3636
--exclude http://fsf.org
3737
--exclude docs/pages
38+
--exclude docs/_includes
3839
--exclude-path '{{cookiecutter.project_slug}}/README.md'
3940
--exclude-path 'tests/data'
4041
-- ."

‎docs/_config.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ url: https://UCL-ARC.github.io/python-tooling
66

77
color_scheme: dark
88

9+
layouts_dir: _layouts
10+
911
aux_links:
1012
Source repository: https://github.com/UCL-ARC/python-tooling
1113
aux_links_new_tab: true

‎docs/_includes/components/anchor_icon.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<svg viewBox="0 0 16 16" aria-hidden="true">
2+
<use xlink:href="#svg-link"></use>
3+
</svg>

‎docs/_includes/sidebar.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{%- comment -%} Include as: {%- include components/sidebar.html -%} Depends on:
2+
page(?), site. Results in: HTML for the side bar. Includes: title.html,
3+
components/site_nav.html, nav_footer_custom.html Overwrites: nav_footer_custom.
4+
Should not be cached, because nav_footer_custom.html might depend on page. {%-
5+
endcomment -%}
6+
7+
<div class="side-bar">
8+
<div class="site-header" role="banner">
9+
<a href="{{ '/' | relative_url }}" class="site-title lh-tight"
10+
>{% include title.html %}</a
11+
>
12+
<button
13+
id="menu-button"
14+
class="site-button btn-reset"
15+
aria-label="Toggle menu"
16+
aria-pressed="false"
17+
>
18+
<svg viewBox="0 0 24 24" class="icon" aria-hidden="true">
19+
<use xlink:href="#svg-menu"></use>
20+
</svg>
21+
</button>
22+
</div>
23+
24+
{% include_cached components/site_nav.html %}
25+
</div>

‎docs/_layouts/default.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html lang="{{ site.lang | default: 'en-US' }}">
3+
{% include head.html %}
4+
<body>
5+
<a class="skip-to-main" href="#main-content">Skip to main content</a>
6+
{% include icons/icons.html %} {% if page.nav_enabled == true %} {% include
7+
sidebar.html %} {% elsif layout.nav_enabled == true and page.nav_enabled ==
8+
nil %} {% include sidebar.html %} {% elsif site.nav_enabled != false and
9+
layout.nav_enabled == nil and page.nav_enabled == nil %} {% include
10+
sidebar.html %} {% endif %}
11+
12+
<div class="main" id="top">
13+
{% include components/header.html %}
14+
15+
<div class="main-content-wrap">
16+
{% include components/breadcrumbs.html %}
17+
<div id="main-content" class="main-content">
18+
<main>
19+
{% if site.heading_anchors != false %} {% capture raw_anchor_svg %}
20+
{% include components/anchor_icon.html %} {% endcapture %} {% assign
21+
anchor_svg = raw_anchor_svg | strip_newlines %} {% include
22+
vendor/anchor_headings.html html=content beforeHeading="true"
23+
anchorBody=anchor_svg anchorClass="anchor-heading"
24+
anchorAttrs="aria-labelledby='%html_id%'" %} {% else %} {{ content
25+
}} {% endif %} {% if page.has_toc != false %} {% include
26+
components/children_nav.html %} {% endif %}
27+
</main>
28+
</div>
29+
</div>
30+
31+
<footer class="site-footer">
32+
This site uses
33+
<a href="https://github.com/just-the-docs/just-the-docs"
34+
>Just the Docs</a
35+
>, a documentation theme for Jekyll.
36+
</footer>
37+
38+
{% if site.search_enabled != false %} {% include
39+
components/search_footer.html %} {% endif %}
40+
</div>
41+
42+
{% if site.mermaid %} {% include components/mermaid.html %} {% endif %}
43+
</body>
44+
</html>

‎docs/_sass/custom/custom.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
html,
2+
body {
3+
height: 100%;
4+
margin: 0;
5+
}
6+
17
div.site-header {
28
max-height: 15em;
39
height: 15em;
@@ -6,3 +12,19 @@ div.site-header {
612
div.site-logo {
713
background-position: center center;
814
}
15+
16+
.main {
17+
display: flex;
18+
flex-direction: column;
19+
min-height: 100%;
20+
}
21+
22+
.main-content-wrap {
23+
flex: 1;
24+
}
25+
26+
.site-footer {
27+
position: static;
28+
width: 100%;
29+
color: $body-text-color;
30+
}

0 commit comments

Comments
 (0)