Improve acessibility (#15)

* Increase text contrast in syntax highlighting. * aria-label our footer <navs> to inform screen readers what the section of links contains * Add lang="en" to our <html> element, reasoning below (copy-pasted from Google Lighthouse): If a page doesn't specify a lang attribute, a screen reader assumes that the page is in the default language that the user chose when setting up the screen reader. If the page isn't actually in the default language, then the screen reader might not announce the page's text correctly.
Widen · Jun 11, 2021 · 2b9874c · 2b9874c
1 parent 675dfd3
commit 2b9874c
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 19 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,4 @@ _site
 .sass-cache
 .jekyll-metadata
 .DS_Store
+.idea/**
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -12,7 +12,7 @@
           </ul>
           <br/>
         </nav >
-        <nav>
+        <nav aria-label="Social media links">
           <ul class="site-social-links inline">
               <li><a target="_blank" title="RSS Feed" href="{{ "/feed.xml" | relative_url }}"><ion-icon name="logo-rss"></ion-icon></a></li>
               <li><a target="_blank" title="GitHub" href="https://github.com/{{ site.guardian.social_links.github_org }}"><ion-icon name="logo-github"></ion-icon></a></li>

diff --git a/_includes/git-info.html b/_includes/git-info.html
@@ -1,7 +1,7 @@
 {% if site.guardian.social_links.github_repo %}
 <p><strong>Something wrong with this page?</strong> Please <a title="Create new issue on bugtracker" target="_blank" href="https://github.com/{{ site.guardian.social_links.github_org }}/{{ site.guardian.social_links.github_repo }}/issues/new">file a bug</a>.</p>
 <div class="git-info">
-<nav>
+<nav aria-label="Site source and page information">
   <ul class="inline">
     <li>
         <a target="_blank" title="View site source on GitHub" href="https://github.com/{{ site.guardian.social_links.github_org }}/{{ site.guardian.social_links.github_repo }}">source</a>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 
   {% include head.html %}
 

diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss
@@ -12,13 +12,13 @@
     margin-bottom: 13px;
 }
 
-.highlight .c { color: #999988; font-style: italic; }
+.highlight .c { color: #65655d; font-style: italic; }
 .highlight .err { color: #a61717; background-color: #e3d2d2; }
 .highlight .k { font-weight: bold; }
 .highlight .o { font-weight: bold; }
-.highlight .cm { color: #999988; font-style: italic; }
+.highlight .cm { color: #65655d; font-style: italic; }
 .highlight .cp { color: #999999; font-weight: bold; }
-.highlight .c1 { color: #999988; font-style: italic; }
+.highlight .c1 { color: #65655d; font-style: italic; }
 .highlight .cs { color: #999999; font-weight: bold; font-style: italic; }
 .highlight .gd { color: #000000; background-color: #ffdddd; }
 .highlight .gd .x { color: #000000; background-color: #ffaaaa; }
@@ -38,25 +38,25 @@
 .highlight .kp { font-weight: bold; }
 .highlight .kr { font-weight: bold; }
 .highlight .kt { color: #445588; font-weight: bold; }
-.highlight .m { color: #009999; }
+.highlight .m { color: #007777; }
 .highlight .s { color: #dd1144; }
 .highlight .n { color: #333333; }
-.highlight .na { color: teal; }
-.highlight .nb { color: #0086b3; }
+.highlight .na { color: #017979; }
+.highlight .nb { color: #007298; }
 .highlight .nc { color: #445588; font-weight: bold; }
-.highlight .no { color: teal; }
+.highlight .no { color: #017979; }
 .highlight .ni { color: purple; }
 .highlight .ne { color: #990000; font-weight: bold; }
 .highlight .nf { color: #990000; font-weight: bold; }
 .highlight .nn { color: #555555; }
 .highlight .nt { color: navy; }
-.highlight .nv { color: teal; }
+.highlight .nv { color: #017979; }
 .highlight .ow { font-weight: bold; }
 .highlight .w { color: #bbbbbb; }
-.highlight .mf { color: #009999; }
-.highlight .mh { color: #009999; }
-.highlight .mi { color: #009999; }
-.highlight .mo { color: #009999; }
+.highlight .mf { color: #007777; }
+.highlight .mh { color: #007777; }
+.highlight .mi { color: #007777; }
+.highlight .mo { color: #007777; }
 .highlight .sb { color: #dd1144; }
 .highlight .sc { color: #dd1144; }
 .highlight .sd { color: #dd1144; }
@@ -69,8 +69,8 @@
 .highlight .s1 { color: #dd1144; }
 .highlight .ss { color: #990073; }
 .highlight .bp { color: #999999; }
-.highlight .vc { color: teal; }
-.highlight .vg { color: teal; }
-.highlight .vi { color: teal; }
-.highlight .il { color: #009999; }
+.highlight .vc { color: #017979; }
+.highlight .vg { color: #017979; }
+.highlight .vi { color: #017979; }
+.highlight .il { color: #007777; }
 .highlight .gc { color: #999; background-color: #EAF2F5; }