diff options
| author | fncnt <github@vncnt.eu> | 2019-03-28 18:52:14 +0300 |
|---|---|---|
| committer | fncnt <github@vncnt.eu> | 2019-03-28 18:52:14 +0300 |
| commit | 4b872d7e8ebebdf78483542059119fb3e5e242d2 (patch) | |
| tree | 2b55ffcdb81594745370c8e292e51addbcdfa0de | |
| parent | d77304c6d4692b3df2abf455e6a4c0e295da3825 (diff) | |
Initial support for screen readers (i.e. only english regardless of languageCode).
| -rw-r--r-- | layouts/404.html | 8 | ||||
| -rw-r--r-- | layouts/partials/body.html | 24 | ||||
| -rw-r--r-- | static/css/vncnt.css | 12 |
3 files changed, 28 insertions, 16 deletions
diff --git a/layouts/404.html b/layouts/404.html index 80a4424..87e3f27 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,13 +1,15 @@ <!DOCTYPE HTML> +{{if .Site.Language}}<html lang="{{.Site.Language}}">{{else}}<html lang="en">{{end}} {{ partial "includes" . }} + <title>This page was not found.</title> <div class="error404"> - <div class="grid-container full"> + <div class="grid-container full" role="main"> <div> <h1>{{ "**404**" | markdownify }}</h1> {{ with .Site.Params.error404 }} - <h2>{{ "---" | markdownify }}{{ . | markdownify }}</h2> + <h2 aria-label="{{ . | markdownify }}">{{ "---" | markdownify }}{{ . | markdownify }}</h2> {{ else }} - <h2>{{ "---" | markdownify }}{{ "There is no such page." | markdownify}}</h2> + <h2 aria-label="{{ "There is no such page." | markdownify }}">{{ "---" | markdownify }}{{ "There is no such page." | markdownify}}</h2> {{ end }} </div> </div> diff --git a/layouts/partials/body.html b/layouts/partials/body.html index c23a253..6db5347 100644 --- a/layouts/partials/body.html +++ b/layouts/partials/body.html @@ -1,25 +1,25 @@ <div class="landingpage"> - <div class="grid-container fivetoseven"> - <div class="item"> + <div class="grid-container fivetoseven" role="main"> + <div class="item" aria-label="Avatar"> <section id="avatar"> - <img class="avatar" src="{{.Site.Params.avatar}}"> + <img class="avatar" src="{{ .Site.Params.avatar }}" alt="{{ path.Base .Site.Params.avatar }}"> </section> </div> <div class="grid-container full autocenter"> - <section id="bio"> - <h3>{{ .Site.Params.author }}</h3> - <p class="reset-margin">{{ .Site.Params.bio | markdownify }}</p> + <section id="bio" aria-label="Biography"> + <h1 class="h3-like" aria-level="1" aria-label="Name">{{ .Site.Params.author }}</h1> + <p class="reset-margin" title="About" aria-label="About">{{ .Site.Params.bio | markdownify }}</p> </section> - <section id="contact"> - <div class="icons"> - <h3> + <section id="contact" aria-label="Contact"> + <div class="icons" aria-label="Links"> + <h2 class="h3-like" aria-label="Link Icons"> {{ with .Site.Params.email }}<a class="icon" href="mailto:{{ . }}"> - <i class="fas fa-envelope" aria-hidden="true"></i> + <i class="fas fa-envelope" title="email" aria-label="Send email."></i> </a>{{ end }} {{ range $contact_key, $contact_link := .Site.Params.contact }}<a class="icon" href="{{ $contact_link }}" target="_blank"> - <i class="fab fa-{{ $contact_key }}" aria-hidden="true"></i> + <i class="fab fa-{{ $contact_key }}" title="{{ $contact_key }}" aria-label="Go to {{ $contact_key }}."></i> </a>{{ end }} - </h3> + </h2> </div> </section> </div> diff --git a/static/css/vncnt.css b/static/css/vncnt.css index 3643fce..f7f2f1c 100644 --- a/static/css/vncnt.css +++ b/static/css/vncnt.css @@ -18,6 +18,12 @@ there. */ @import url('barebones.css'); +h1.h3-like, h2.h3-like { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; +} + .landingpage, .error404 { position: absolute; top: 50%; @@ -56,7 +62,7 @@ p.reset-margin { bottom: 0; } -.icons h3 { +.icons h2, h3 { margin-bottom: 0; } @@ -71,6 +77,10 @@ p.reset-margin { /* Larger than mobile (default point when grid becomes active) */ @media (min-width: 600px) { + h1.h3-like, h2.h3-like { + font-size: 3.6rem; + } + .grid-container.fivetoseven { grid-template-columns: 5fr 7fr; } |