Merge pull request #4206 from raspberrypi/accessibility-tweaks

Accessibility tweaks

Author: katshann-raspberry

jekyll-assets/_layouts/boxes.html

@@ -9,12 +9,12 @@
     <div class="toptitle">
       <h1><a href="/documentation/"><b>Raspberry Pi</b> Documentation</a></h1>
       <div id="search-container">
-        <div id="docsearch"></div>
+        <div id="docsearch" role="search"></div>
       </div>
       {% include tabs.html %}
     </div>
 
-    <div id="container">
+    <div id="container" role="main">
       <section id="box-content">
         {% for item in site.data.index.tabs %}
           {% if page.dir == item.path or page.dir == "/" and item.default_tab and item.default_tab == "yes" %}

jekyll-assets/_layouts/docs.html

@@ -11,19 +11,19 @@
         <div id="toc-container">
           <div id="toc-inner">
             <div id="docs-header">
-              <h1 id="docs-header-title">
+              <h2 id="docs-header-title">
                 <a href="/documentation">
                   Documentation
                 </a>
-              </h1>
+              </h2>
               <label class="mobile-menu-toggle" for="mobile-toggle">
                 <div class="mobile-menu-toggle-inner"></div>
               </label>
             </div>
-            <div id="docsearch">
+            <div id="docsearch" role="search">
             </div>
           </div>
-          <div class="toc">
+          <div class="toc" role="navigation">
           {% for subdir in site.data.nav %}
             <ul class="sectlevel1">
               <input class="toc-toggle-box" type="checkbox" id="{{ subdir.path }}" {% if page.url contains subdir.path %}checked{% endif %} />
@@ -154,14 +154,14 @@ <h1 id="docs-header-title">
       </div>
       <div id="docs-container">
         <div id="main-window">
-          <section id="content">
+          <section id="content" role="main">
             <h1>{{ page.sub_title | markdownify | remove: '<p>' | remove: '</p>'}}</h1>
             {{ content }}
           </section>
 
           <div id="on-this-page">
             <div id="on-this-page-inner">
-              <h5>On this page</h5>
+              <h4>On this page</h4>
               <div id="tocbot" class="js-toc"></div>
             </div>
           </div>

jekyll-assets/css/style.css

@@ -15,6 +15,7 @@
   --accent: #cd2355;
   --docsearch-primary-color: var(--accent);
   --docsearch-logo-color: var(--red-tint);
+  --docsearch-muted-color: #333;
   --copy-button-bg: #f6f6f6;
   --copy-button-text: #444;
   --textcolor: black;
@@ -56,6 +57,7 @@
     --accent: #d75a64;
     --docsearch-primary-color: var(--accent);
     --docsearch-logo-color: var(--red-tint);
+    --docsearch-muted-color: #333;
     --copy-button-bg: #707070;
     --copy-button-text: #CCC;
     --textcolor: white;
@@ -182,6 +184,10 @@ div.subtitle p {
   background-color: var(--toc-hover-colour);
 }
 
+#docs-header h2 {
+  font-size: initial;
+}
+
 #docs-header a {
   font-size: 1.9em;
   font-weight: 400;
@@ -754,7 +760,7 @@ h6 .anchor::before {
 
 #content p {
   font-size: 0.95em;
-  font-weight: 300;
+  font-weight: 400;
   line-height: 1.5em;
   margin-bottom: 15px;
 }
@@ -926,7 +932,7 @@ span.mlabel {
 }
 
 #content td.content {
-  font-weight: 300;
+  font-weight: 400;
 }
 
 #content p > code,
@@ -954,7 +960,7 @@ td div.listingblock div.content code {
 div.imageblock div.title {
   color: var(--subtle-text);
   font-style: italic;
-  font-weight: 300;
+  font-weight: 400;
   font-size: 0.8em;
   margin-top: -15px;
   margin-bottom: 30px;
@@ -1212,7 +1218,7 @@ div.memitem {
 
 table.params,
 p.returns {
-  font-weight: 300;
+  font-weight: 400;
 }
 
 table.params td {