Skip to content
Permalink
Browse files

Numerous web accessibility improvements

* Change the primary red colour to a darker shade for better contrast
* Change the footer text color for better contrast against footer
* Add alternative text to the RSS link for screen readers
* Remove the jump-to-top image only link as it had no alt text + is unnecessary
* Add HTML language attribute w/ configurable language via site parameters
* Fixed conflicting old markup referencing different "logo" param by renaming
  the headshot element to "avatar" instead.
* Fixed both missing titles and excessive titles
* Add accessible alternative helper text to various font-awesome based icons and
  their surrounding links.
* Change secondary text color; remove sharing options
* Fix accessibility issue by adding a primary content container surrounding the
  body of the post or page being displayed.
  • Loading branch information...
patrickod committed Jan 27, 2019
1 parent 998192f commit b851a8124a4e6fe9bb01a1f963ed12ff61111c10
@@ -1,15 +1,13 @@
</div>
</div>
</main>
</div>

<footer class="footer">
<div class="container">
<div class="site-title-wrapper">
<h1 class="site-title">
<a title="{{ .Site.Title }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
</h1>
<a class="button-square button-jump-top js-jump-top" href="#">
<i class="fa fa-angle-up"></i>
</a>
</div>

<p class="footer-copyright">
@@ -26,22 +24,22 @@ <h1 class="site-title">
{{ else }}
<span>All content released under a {{ .Site.Params.ContentLicense.Name }} license.</span>
{{ end }}
{{ end }}
{{ end }}
</p>
</div>
</footer>

<script src="{{ .Site.BaseURL }}js/jquery-1.11.3.min.js"></script>
<script src="{{ .Site.BaseURL }}js/jquery.fitvids.js"></script>

{{ if .Site.Params.highlightJsUrl }}
<script src="{{ .Site.Params.highlightJsUrl }}"></script>
{{ else if .Site.Params.highlightJsLocalUrl }}
<script src="{{ .Site.BaseURL }}{{ .Site.Params.highlightJsLocalUrl }}"></script>
{{ else }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
{{ end }}

<script src="{{ .Site.BaseURL }}js/scripts.js"></script>
</body>
</html>
@@ -1,12 +1,13 @@
<!DOCTYPE html>
<html{{ if .Site.Params.opengraph }} prefix="og: http://ogp.me/ns#"{{ end }}>
<html{{ if .Site.Params.opengraph }} prefix="og: http://ogp.me/ns#"{{ end }} lang="{{ .Site.Language.Lang }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ .Title }} &middot; {{ .Site.Author.name }}</title>
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ if .IsPage }}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="theme-color" content="#F03838">
{{ .Hugo.Generator }}
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -33,43 +34,25 @@
</a>
{{ else }}
<h1 class="site-title">
<a title="{{ .Site.Title }}" href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
</h1>
{{ end }}
<a class="button-square" href="{{ .Site.BaseURL }}index.xml"><i class="fa fa-rss"></i></a>
{{ with .Site.Params.twitter }}
<a class="button-square button-social hint--top" data-hint="Twitter" title="Twitter" href="{{ . }}">
<i class="fa fa-twitter"></i>
<a class="button-square" href="{{ .Site.BaseURL }}index.xml" aria-label="Link to RSS feed">
<i class="fa fa-rss" aria-hidden="true"></i>
</a>
{{ end }}
{{ with .Site.Params.gitlab }}
<a class="button-square button-social hint--top" data-hint="Gitlab" title="Gitlab" href="{{ . }}">
<i class="fa fa-gitlab"></i>
{{ with .Site.Params.twitter }}
<a class="button-square button-social hint--top" data-hint="Twitter" aria-label="Link to Twitter" href="{{ . }}">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
{{ end }}
{{ with .Site.Params.github }}
<a class="button-square button-social hint--top" data-hint="Github" title="Github" href="{{ . }}">
<i class="fa fa-github-alt"></i>
</a>
{{ end }}
{{ with .Site.Params.stackoverflow }}
<a class="button-square button-social hint--top" data-hint="Stack Overflow" title="Stack Overflow" href="{{ . }}">
<i class="fa fa-stack-overflow"></i>
</a>
{{ end }}
{{ with .Site.Params.linkedin }}
<a class="button-square button-social hint--top" data-hint="LinkedIn" title="LinkedIn" href="{{ . }}">
<i class="fa fa-linkedin"></i>
</a>
{{ end }}
{{ with .Site.Params.gplus }}
<a class="button-square button-social hint--top" data-hint="Google+" title="Google+" href="{{ . }}">
<i class="fa fa-google-plus"></i>
<a class="button-square button-social hint--top" data-hint="Github" aria-label="Link to Github" href="{{ . }}">
<i class="fa fa-github-alt" aria-hidden="true"></i>
</a>
{{ end }}
{{ with .Site.Params.email }}
<a class="button-square button-social hint--top" data-hint="Email" title="Email" href="mailto:{{ . }}">
<i class="fa fa-envelope"></i>
<a class="button-square button-social hint--top" data-hint="Email" aria-label="Email" href="mailto:{{ . }}">
<i class="fa fa-envelope" aria-hidden="true" ></i>
</a>
{{ end }}
</div>
@@ -80,4 +63,5 @@ <h1 class="site-title">
</div>
</header>

<div id="container">
<main role="main" >
<div id="container">
@@ -1,13 +1,13 @@
{{ if .Site.Params.intro }}
<div class="post-intro" >
{{ if .Site.Params.logo }}
{{ if .Site.Params.avatar }}
<div class="post-header-logo" >
<a href=" {{.Site.BaseURL }}">
<img class="logo" src="{{ .Site.BaseURL }}images/{{ .Site.Params.logo.url }}"
width="{{ .Site.Params.logo.width }}"
height="{{ .Site.Params.logo.height }}"
<img class="logo" src="{{ .Site.BaseURL }}images/{{ .Site.Params.avatar.url }}"
width="{{ .Site.Params.avatar.width }}"
height="{{ .Site.Params.avatar.height }}"
style="border-radius: 50%;"
alt="{{ .Site.Params.logo.alt }}"/>
alt="{{ .Site.Params.avatar.alt }}"/>
</a>
</div>
<header class="post-header with-logo">
@@ -1,5 +1,5 @@
{{ range .Site.Menus.main.ByWeight }}
<li class="site-nav-item">
<a title="{{ .Name }}" href="{{ .URL }}">{{ .Name }}</a>
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
{{ end }}
@@ -9,37 +9,4 @@
{{ end }}
</p>
{{ end}}

<div class="share">
{{ if or (not (isset .Site.Params "sharetwitter")) .Site.Params.shareTwitter }}
<a class="icon-twitter" href="https://twitter.com/share?text={{ .Title }}&url={{ .Permalink }}"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<i class="fa fa-twitter"></i>
<span class="hidden">Twitter</span>
</a>
{{ end }}

{{ if or (not (isset .Site.Params "sharefacebook")) .Site.Params.shareFacebook }}
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<i class="fa fa-facebook"></i>
<span class="hidden">Facebook</span>
</a>
{{ end }}

{{ if or (not (isset .Site.Params "sharegoogleplus")) .Site.Params.shareGooglePlus }}
<a class="icon-google-plus" href="https://plus.google.com/share?url={{ .Permalink }}"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<i class="fa fa-google-plus"></i>
<span class="hidden">Google+</span>
</a>
{{ end }}
{{ if .Site.Params.shareLinkedIn }}
<a class="icon-linkedin" href="https://www.linkedin.com/shareArticle?mini=true&title={{ .Title }}&url={{ .Permalink }}&summary={{ .Description }}"
onclick="window.open(this.href, 'linkedin-share', 'width=554,height=481');return false;">
<i class="fa fa-linkedin"></i>
<span class="hidden">LinkedIn</span>
</a>
{{ end }}
</div>
</footer>
</footer>
@@ -1,9 +1,9 @@
<li class="post-stub" itemprop="blogPost" itemscope="" itemtype="https://schema.org/BlogPosting">
<a href="{{ .Permalink }}" itemprop="url" title="Go to post detail">
<h4 class="post-stub-title" itemprop="name">{{ .Title }}</h4>
<h2 class="post-stub-title" itemprop="name">{{ .Title }}</h2>
<time class="post-stub-date" datetime="{{ .Date.Format "2006-01-02" }}">Published {{ dateFormat (default "Mon, Jan 2, 2006" .Site.Params.dateFormat) .Date }}</time>
{{ with .Params.featured }}
<span class="post-stub-tag">Featured</span>
{{ end }}
</a>
</li>
</li>
Oops, something went wrong.

0 comments on commit b851a81

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.