Skip to content
This repository has been archived by the owner on Mar 12, 2024. It is now read-only.

Accessibility Additions #24

Closed
eladnarra opened this issue Mar 27, 2020 · 1 comment
Closed

Accessibility Additions #24

eladnarra opened this issue Mar 27, 2020 · 1 comment

Comments

@eladnarra
Copy link

eladnarra commented Mar 27, 2020 •
edited
Loading

Hi! Thanks for the theme - I've been adapting it for my purposes, and thought I'd share a couple of the changes I made for accessibility:

Added a skip link that is only visible to screen readers or when you tab to it

changes to baseof.html:

<body>
<a class="skip-main" href="#main">Skip to main content</a> <!-- added skip link at very top-->
    <div class="container">
        <header> 
            {{ block "header" . }}
                {{ partial "header.html" . }}
            {{ end }}
        </header>
        <main id="main" tabindex="-1"> <!-- added target for skip link and tabindex -->
            {{ block "main" . }}{{ end }}
        </main>

changes to styles.css:

a.skip-main {
    left:-999px;
    position:absolute;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    z-index:-999;
}
a.skip-main:focus, 
a.skip-main:active {
    left: auto;
    top: 0px;
    width: auto;
    height: auto;
    overflow:auto;
    z-index:999;
    padding: 4px 6px 4px 6px;
    color: #ffffff;
    text-decoration: underline;
    border: none;
    background: #871d6a;
}
main {
    outline:none;
}

(Look of focus and active varies based on theme; this is just what matches the changes I've made.)

Added lang to html for screen readers
changes to baseof.html:

<html lang="{{ .Site.LanguageCode }}">

I also made the links in the footer open in the same window, since opening links in a new window is less accessible, and made various changes to link styling (making hover/active links more visible and underlining all links so they are not just denoted by color). But those are more specific to a particular implementation of a theme.
@Mitrichius
Copy link
Owner

@eladnarra
Thanks. Added these changes with link color changes according to default theme

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Mitrichius @eladnarra