improve accessibility

sass/base/_uryCard.scss

@@ -22,9 +22,7 @@ a.ury-card,
 
   .ury-card-img {
     width: 100%;
-    padding-top: 100%;
-    background-repeat: no-repeat;
-    background-size: cover !important; //propotional resize
+    aspect-ratio: 1;
     border-radius: $internal-curve-radius;
   }
 

sass/elements/_currentAndNext.scss

@@ -1,5 +1,6 @@
 .current-next {
-  background: url("/images/bg-banner-1.jpg") center center no-repeat;
+  background: -webkit-image-set(url("/images/bg-banner-1.webp") type("image/webp"), url("/images/bg-banner-1.jpg") type("image/jpeg")) center center no-repeat;
+  background: image-set(url("/images/bg-banner-1.webp") type("image/webp"), url("/images/bg-banner-1.jpg") type("image/jpeg")) center center no-repeat;
   background-size: cover;
   color: white;
   box-sizing: content-box;

sass/main.scss

@@ -57,7 +57,8 @@ footer {
 }
 
 .banner-2 {
-  background: url("/images/bg-banner-2.jpg") center center no-repeat;
+  background: -webkit-image-set(url("/images/bg-banner-2.webp") type("image/webp"), url("/images/bg-banner-2.jpg") type("image/jpeg")) center center no-repeat;
+  background: image-set(url("/images/bg-banner-2.webp") type("image/webp"), url("/images/bg-banner-2.jpg") type("image/jpeg")) center center no-repeat;
   background-size: cover;
   color: $white;
   padding: 5em 0;
@@ -69,7 +70,8 @@ footer {
 }
 
 .drone-banner {
-  background: url("/images/drone-banner.jpg") top center no-repeat;
+  background: -webkit-image-set(url("/images/drone-banner.webp") type("image/webp"), url("/images/drone-banner.jpg") type("image/jpeg")) center center no-repeat;
+  background: image-set(url("/images/drone-banner.webp") type("image/webp"), url("/images/drone-banner.jpg") type("image/jpeg")) center center no-repeat;
   background-size: cover;
   color: $white;
   padding: 10em 0 2.5em 0;
@@ -175,7 +177,8 @@ footer {
 }
 
 .on-demand {
-  background: url("/images/bg-banner-1.jpg") center center no-repeat;
+  background: -webkit-image-set(url("/images/bg-banner-1.webp") type("image/webp"), url("/images/bg-banner-1.jpg") type("image/jpeg")) center center no-repeat;
+  background: image-set(url("/images/bg-banner-1.webp") type("image/webp"), url("/images/bg-banner-1.jpg") type("image/jpeg")) center center no-repeat;
   background-size: cover;
   color: $white;
 
@@ -414,7 +417,8 @@ body {
   max-height: 15rem;
 }
 .teams-banner {
-  background: url("/images/drone-banner.jpg") center center no-repeat;
+  background: -webkit-image-set(url("/images/drone-banner.webp") type("image/webp"), url("/images/drone-banner.jpg") type("image/jpeg")) center center no-repeat;
+  background: image-set(url("/images/drone-banner.webp") type("image/webp"), url("/images/drone-banner.jpg") type("image/jpeg")) center center no-repeat;
   background-size: cover;
   color: $white;
 

views/404.tmpl

@@ -2,7 +2,7 @@
 <div class="container container-padded outer page404">
 	<div class="container container-padded">
 		<div>
-			<h1>4 <div class="spinner"></div> 4</h1>
+			<h1 aria-hidden="true">4 <div class="spinner"></div> 4</h1>
 			<h2>Looks like we couldn't find that page. Oops!</h2>
 		</div>
 	</div>

views/competitions.tmpl

@@ -1,18 +1,19 @@
 {{define "title"}}{{.PageContext.ShortName}} | Competitions{{end}}
 {{define "content"}}
+<article>
 <div class="container-fluid banner-2">
   <div class="container">
     <div class="row align-items-center text-center">
-      <div class="col">
+      <hgroup class="col">
         <h1 class="display-3">Competitions</h1>
-        <h2 class="display-4">Terms and Conditions</h2>
-      </div>
+        <p class="display-4">Terms and Conditions</p>
+      </hgroup>
     </div>
   </div>
 </div>
 <div class="container-fluid container-padded bg-off-white" >
-  <div class="container container-sm" style="max-width:1000px">
-    <h1 class="text-center">General Rules</h1>
+  <section class="container container-sm" style="max-width:1000px">
+    <h2 class="text-center">General Rules</h2>
     <p><strong>All competitions run by University Radio York (URY) are governed by the following rules:</strong></p>
     <p>Competitions on URY will be advertised either on air, on our website (ury.org.uk) or via our social media pages. Each competition will detail how to enter the competition, quantities and specifications of prizes, and any further conditions of the competition.</p>
     <ol>
@@ -25,7 +26,7 @@
       <li>Prizes must be collected within 7 days of the competition closing, unless explicitly stated otherwise. There is no cash alternative for any prizes. URY reserves the right to give away any prizes which have not be collected within this period.</li>
     </ol>
     <p>Any further information, questions, or complaints about URY’s competitions must be addressed to the Head of Marketing via email: <a href="mailto:head.of.marketing@ury.org.uk">head.of.marketing@ury.org.uk</a>. Complaints about any competition must be made within 2 weeks of the competition closing. After this time, completion specific terms will be removed from the website.</p>
-  </div>
+  </section>
 </div>
 <!--
 <div class="container-fluid container-padded">
@@ -46,7 +47,8 @@
       <dt>How to enter:</dt>
       <dd>Information on how to enter the competition.</dd>
     <dl>
-    -->
   </div>
 </div>
+-->
+</article>
 {{end}}

views/contact.tmpl

@@ -16,59 +16,74 @@
 <div class="container-fluid banner-2 text-overlay">
   <div class="container container-padded">
     <div class="row align-items-center text-center">
-      <div class="col">
-        <img class="pageTitleImage" src="/images/ContactUs.svg"/>
-        <h2 class="display-5">At URY, radio is a two-way medium.</h2>
-      </div>
+      <hgroup class="col">
+        <h1><img class="pageTitleImage" src="/images/ContactUs.svg"/></h1>
+        <p class="h2">At URY, radio is a two-way medium.</p>
+      </hgroup>
     </div>
   </div>
 </div>
 <div class="container-fluid container-padded text-center bg-white">
   <div class="row">
     <div class="col-md-2 align-self-center">
-      <a href="//instagram.com/{{.PageContext.MainInstagram}}"><i class="fab fa-instagram fa-2x"></i><h3>Our Instagram</h3></a>
+      <a href="//instagram.com/{{.PageContext.MainInstagram}}">
+        <i class="fab fa-instagram fa-2x"></i>
+        <br>
+        <b class="h3">Our Instagram</b>
+      </a>
     </div>
     <div class="col-md-2 align-self-center">
-      <a href="//twitter.com/{{.PageContext.MainTwitter}}"><i class="fab fa-twitter fa-2x"></i><h3>Our Twitter</h3></a>
+      <a href="//twitter.com/{{.PageContext.MainTwitter}}">
+        <i class="fab fa-twitter fa-2x"></i>
+        <br>
+        <b class="h3">Our Twitter</b>
+      </a>
     </div>
     <div class="col-md-4 align-self-center">
-      <h2>07851 101 313</h2>
-      <span>Text the studio<br>or send a message via the <a href="/" title="URY Homepage">homepage</a>.</span>
+      <span class="h2">Send a message via the <a href="/" title="URY Homepage">homepage</a>.</span>
     </div>
     <div class="col-md-2 align-self-center">
-      <a href="//facebook.com/{{.PageContext.MainFacebook}}"><i class="fab fa-facebook fa-2x"></i><h3>Our Facebook</h3></a>
+      <a href="//facebook.com/{{.PageContext.MainFacebook}}">
+        <i class="fab fa-facebook fa-2x"></i>
+        <br>
+        <b class="h3">Our Facebook</b>
+      </a>
     </div>
     <div class="col-md-2 align-self-center">
-      <a href="{{.PageContext.Youtube.ChannelURL}}"><i class="fab fa-youtube fa-2x"></i><h3>Our YouTube</h3></a>
+      <a href="{{.PageContext.Youtube.ChannelURL}}">
+        <i class="fab fa-youtube fa-2x"></i>
+        <br>
+        <b class="h3">Our YouTube</b>
+      </a>
     </div>
   </div>
 </div>
-<div class="container-fluid container-padded text-center bg-primary">
+<section class="container-fluid container-padded text-center bg-primary">
   <div class="row">
     <div class="col">
-      <h1>Got some news for us?</h1>
+      <h2 class="h1">Got some news for us?</h2>
       <p>Got a breaking news story? Get in touch with the URY Newsroom right away!</p>
     </div>
   </div>
   <div class="row">
     <div class="col">
-      <h2><a href="mailto:newsroom@ury.org.uk" title="Email URY Newsroom">newsroom@ury.org.uk</a> <span class="slash-divider">/</span> <a href="//twitter.com/{{.PageContext.NewsTwitter}}" title="URY News Twitter" target="_blank" rel="noopener noreferrer">@{{.PageContext.NewsTwitter}}</a></h2>
+      <b class="h2"><a href="mailto:newsroom@ury.org.uk" title="Email URY Newsroom">newsroom@ury.org.uk</a> <span class="slash-divider">/</span> <a href="//twitter.com/{{.PageContext.NewsTwitter}}" title="URY News Twitter" target="_blank" rel="noopener noreferrer">@{{.PageContext.NewsTwitter}}</a></b>
     </div>
   </div>
-</div>
-<div class="container-fluid container-padded text-center bg-secondary key-contacts">
+</section>
+<section class="container-fluid container-padded text-center bg-secondary key-contacts">
   <div class="container container-padded">
     <div class="row">
-      <div class="col">
-        <h1>Key Contacts</h1>
+      <hgroup class="col">
+        <h2 class="h1">Key Contacts</h2>
         <p>The people to contact about enquiries.</p>
-      </div>
+      </hgroup>
     </div>
     <div class="row">
       <div class="col-md-6 col-lg-3">
         <div class="card bg-white p-3">
           <div class="card-block">
-            <h2 class="card-title">Management</h2>
+            <h3 class="card-title">Management</h3>
             <p><a href="mailto:management@ury.org.uk" title="Email Management">management@ury.org.uk</a></p>
             <p class="card-text">These are people who are responsible for the day to day running of the station and ensure the key aims of the station are met in terms of output, revenue and audience.</p>
           </div>
@@ -77,7 +92,7 @@
       <div class="col-md-6 col-lg-3">
         <div class="card bg-white p-3">
           <div class="card-block">
-            <h2 class="card-title">Programme Controller</h2>
+            <h3 class="card-title">Programme Controller</h3>
             <p class="card-text"><a href="mailto:pc@ury.org.uk" title="Email the Programme Controller">pc@ury.org.uk</a></p>
             <p class="card-text">The Programme Controller manages the quality of the station’s output and adhering to our licenses, please contact them if you have any enquiries on this.</p>
           </div>
@@ -86,7 +101,7 @@
       <div class="col-md-6 col-lg-3">
         <div class="card bg-white p-3">
           <div class="card-block">
-            <h2 class="card-title">Music Team</h2>
+            <h3 class="card-title">Music Team</h3>
             <p class="card-text"><a href="mailto:music@ury.org.uk" title="Email the Music Team">music@ury.org.uk</a></p>
             <p class="card-text">Are you a keen musician, want to hear a track on URY, or know an up and coming band that would like some air time? Give Music Team a shout!</p>
           </div>
@@ -95,30 +110,32 @@
       <div class="col-md-6 col-lg-3">
         <div class="card bg-white p-3">
           <div class="card-block">
-            <h2 class="card-title">Production Team</h2>
+            <h3 class="card-title">Production Team</h3>
             <p class="card-text"><a href="mailto:production@ury.org.uk" title="Email the Production Team"> production@ury.org.uk</a></p>
             <p class="card-text">Do you want URY to host or DJ an event? Or do you wish for your event to be broadcasted live? Production Team is the one who manage all of our events.</p>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
-<div class="container-fluid container-padded text-center bg-off-white">
+</section>
+<section class="container-fluid container-padded text-center bg-off-white">
   <div class="container container-padded">
     <div class="row">
-      <div class="col">
-        <h1>Everything Else</h1>
+      <hgroup class="col">
+        <h2 class="h1">Everything Else</h2>
         <p>For all other enquiries, contact the URY office.</p>
-      </div>
+      </hgroup>
     </div>
     <div class="row">
       <div class="col-md-5">
-        <h2>Phone</h2>
-        <p><strong>Internal Phone</strong><br>1350 (Free)</p>
-        <p><strong>External Phone</strong><br>(+44)1904 32 1350 (Standard Rates)</p>
+        <h3>Phone</h3>
+          <h4>Internal Phone</h4>
+          <p>1350 (Free)</p>
+          <h4>External Phone</h4>
+          <p>(+44)1904 32 1350 (Standard Rates)</p>
         <hr>
-        <h2>Postal Address</h2>
+        <h3>Postal Address</h3>
         <p>
           URY, Vanbrugh College<br>
           University of York<br>
@@ -127,15 +144,14 @@
         </p>
       </div>
       <div class="col-md-7">
-        <h2>Where to find us</h2>
-        <a name="map"></a>
+        <h3>Where to find us</h3>
         <div class="map-container">
           <div id="map" class="res-map"></div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</section>
 {{end}}
 
 {{define "footer-scripts"}}

views/elements/navbar.tmpl

@@ -12,13 +12,23 @@
     {{end}}
     </a>
     <div class="navbar-collapse collapse" id="collapsed">
-      <div class="navbar-nav">
-        <a class="nav-item nav-link" href="{{url "/schedule/thisweek" }}">Schedule</a>
-        <a class="nav-item nav-link" href="{{url "/ontap/"}}">{{.PageContext.ODName}}</a>
-        <a class="nav-item nav-link" href="{{url "/about/"}}">About Us</a>
-        <a class="nav-item nav-link" href="{{url "/getinvolved/"}}">Get Involved</a>
-        <a class="nav-item nav-link" href="{{url "/contact/"}}">Contact Us</a>
-      </div>
+      <ul class="navbar-nav">
+        <li class="nav-item">
+          <a class="nav-link" href="{{url "/schedule/thisweek" }}">Schedule</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{url "/ontap/"}}">{{.PageContext.ODName}}</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{url "/about/"}}">About Us</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{url "/getinvolved/"}}">Get Involved</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="{{url "/contact/"}}">Contact Us</a>
+        </li>
+      </ul>
       <form action="{{url "/search/"}}" class="form-inline ml-auto search-box search-box-expand">
           <button type="submit" class="" alt="Submit"><i class="fa fa-search" aria-hidden="true"></i></button>
           <div class="col px-0">

views/index.tmpl

@@ -59,13 +59,13 @@
     {{range .Timeslots}}
     <div class="col-8 col-sm-7 col-md-4 col-lg-3 col-xl-2 p-3 thumbnail-container">
       <a class="ury-card " href="/schedule/shows/timeslots/{{.TimeslotID}}/" title="URY Podcast: {{.Title}}">
-        <div class="ury-card-img" style="background: url('
+        <img class="ury-card-img" src="
             {{- if .Season.ShowMeta.Photo -}}
               {{$.PageContext.FullURL}}{{.Season.ShowMeta.Photo}}
             {{- else -}}
               {{url "/images/default_show_profile.png"}}
-            {{- end -}}');
-          " alt="{{.Title}} Logo"></div>
+            {{- end -}}
+          " alt="{{.Title}} Logo" loading="lazy">
         <div class="ury-card-body">
           <div class="ury-card-title">{{.Title}}</div>
           <span class="ury-card-date">{{.StartTime.Format "15:04 - Mon"}} • {{formatDuration .Duration}}</span>
@@ -93,15 +93,14 @@
       {{range .Podcasts}}
       <div class="col-8 col-sm-7 col-md-4 col-lg-3 col-xl-2 p-3 thumbnail-container">
         <a class="ury-card podcast" href="{{.MicrositeLink.URL}}" title="URY Podcast: {{.Title}}">
-          <div class="ury-card-img"
-            style="background: url('
+          <img class="ury-card-img"
+            src="
             {{- if .Photo -}}
               {{$.PageContext.FullURL}}{{.Photo}}
             {{- else -}}
               {{url "/images/default_show_profile.png"}}
             {{- end -}}
-            ');" alt="{{.Title}} Logo">
-          </div>
+            " alt="{{.Title}} Logo" loading="lazy">
           <div class="ury-card-body">
             <div class="ury-card-title">{{.Title}}</div>
             <span>{{.Time.Format "Monday, _2 Jan 2006"}}</span>

views/on_demand.tmpl

@@ -29,13 +29,13 @@
     {{range .PageData.LatestTimeslots}}
     <div class="col-8 col-sm-7 col-md-4 col-lg-3 col-xl-2 p-3 thumbnail-container">
       <a class="ury-card " href="/schedule/shows/timeslots/{{.TimeslotID}}/" title="URY Podcast: {{.Title}}">
-        <div class="ury-card-img" style="background: url('
+        <img class="ury-card-img" src="
             {{- if .Season.ShowMeta.Photo -}}
               {{$.PageContext.FullURL}}{{.Season.ShowMeta.Photo}}
             {{- else -}}
               {{url "/images/default_show_profile.png"}}
-            {{- end -}}');
-          " alt="{{.Title}} Logo"></div>
+            {{- end -}}
+          " alt="{{.Title}} Logo">
         <div class="ury-card-body">
           <div class="ury-card-title">{{.Title}}</div>
           <span class="ury-card-date">{{.StartTime.Format "15:04 - Mon"}} • {{formatDuration .Duration}}</span>
@@ -59,15 +59,14 @@
     {{range .PageData.LatestPodcasts}}
       <div class="col-8 col-sm-7 col-md-4 col-lg-3 col-xl-2 p-3 thumbnail-container">
         <a class="ury-card podcast" href="{{.MicrositeLink.URL}}">
-          <div class="ury-card-img"
-            style="background: url('
+          <img class="ury-card-img"
+            src="
             {{- if .Photo -}}
               {{$.PageContext.FullURL}}{{.Photo}}
             {{- else -}}
               {{url "/images/default_show_profile.png"}}
             {{- end -}}
-            ');" title="URY Podcast: {{.Title}} Logo">
-          </div>
+            " title="URY Podcast: {{.Title}} Logo">
           <div class="ury-card-body">
             <div class="ury-card-title">{{.Title}}</div>
             <span>{{.Time.Format "Monday, _2 Jan 2006"}}</span>