fix a11y issues

assets/style.css

@@ -383,6 +383,7 @@ main {
 }
 
 footer {
+	margin-top: 2rem;
 	text-align: center;
 	font-size: .75rem;
 	color: var(--color-text-gray);

components/EventMap.vue

@@ -42,7 +42,7 @@ onMounted(() => {
         let title = marker.title
           ? `<div class="map-single-event--label"><div class="map-single-event--title">${marker.title}</div>${marker.subtitle ? `<div class="map-single-event--info">${marker.subtitlePrefix ? `<strong>${marker.subtitlePrefix}</strong> ` : ""}${marker.subtitle}</div></div>` : ""}`
           : "";
-        const html = `<img src="/images/marker/${marker.type}.svg" class="map-event--image">${title}`;
+        const html = `<img src="/images/marker/${marker.type}.svg" class="map-event--image" alt="">${title}`;
         return L.marker([marker.lat, marker.lng], {
           icon: L.divIcon({
             iconAnchor: [37, 118],

components/HeaderComponents/SocialMedia.vue

@@ -1,15 +1,17 @@
 <template>
   <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/owddm">
-    <svg id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg version="1.1" viewBox="0 0 56.693 56.693" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <path
         d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454  c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303  c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412  c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91  c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019  c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541  c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z" />
     </svg>
+    <span class="sr-only">Twitter</span>
   </a>
   <a target="_blank" rel="noopener noreferrer" href="https://www.meetup.com/ja-JP/osaka-web-designers-and-developers-meetup/">
     <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M99 414.3c1.1 5.7-2.3 11.1-8 12.3-5.4 1.1-10.9-2.3-12-8-1.1-5.4 2.3-11.1 7.7-12.3 5.4-1.2 11.1 2.3 12.3 8zm143.1 71.4c-6.3 4.6-8 13.4-3.7 20 4.6 6.6 13.4 8.3 20 3.7 6.3-4.6 8-13.4 3.4-20-4.2-6.5-13.1-8.3-19.7-3.7zm-86-462.3c6.3-1.4 10.3-7.7 8.9-14-1.1-6.6-7.4-10.6-13.7-9.1-6.3 1.4-10.3 7.7-9.1 14 1.4 6.6 7.6 10.6 13.9 9.1zM34.4 226.3c-10-6.9-23.7-4.3-30.6 6-6.9 10-4.3 24 5.7 30.9 10 7.1 23.7 4.6 30.6-5.7 6.9-10.4 4.3-24.1-5.7-31.2zm272-170.9c10.6-6.3 13.7-20 7.7-30.3-6.3-10.6-19.7-14-30-7.7s-13.7 20-7.4 30.6c6 10.3 19.4 13.7 29.7 7.4zm-191.1 58c7.7-5.4 9.4-16 4.3-23.7s-15.7-9.4-23.1-4.3c-7.7 5.4-9.4 16-4.3 23.7 5.1 7.8 15.6 9.5 23.1 4.3zm372.3 156c-7.4 1.7-12.3 9.1-10.6 16.9 1.4 7.4 8.9 12.3 16.3 10.6 7.4-1.4 12.3-8.9 10.6-16.6-1.5-7.4-8.9-12.3-16.3-10.9zm39.7-56.8c-1.1-5.7-6.6-9.1-12-8-5.7 1.1-9.1 6.9-8 12.6 1.1 5.4 6.6 9.1 12.3 8 5.4-1.5 9.1-6.9 7.7-12.6zM447 138.9c-8.6 6-10.6 17.7-4.9 26.3 5.7 8.6 17.4 10.6 26 4.9 8.3-6 10.3-17.7 4.6-26.3-5.7-8.7-17.4-10.9-25.7-4.9zm-6.3 139.4c26.3 43.1 15.1 100-26.3 129.1-17.4 12.3-37.1 17.7-56.9 17.1-12 47.1-69.4 64.6-105.1 32.6-1.1.9-2.6 1.7-3.7 2.9-39.1 27.1-92.3 17.4-119.4-22.3-9.7-14.3-14.6-30.6-15.1-46.9-65.4-10.9-90-94-41.1-139.7-28.3-46.9.6-107.4 53.4-114.9C151.6 70 234.1 38.6 290.1 82c67.4-22.3 136.3 29.4 130.9 101.1 41.1 12.6 52.8 66.9 19.7 95.2zm-70 74.3c-3.1-20.6-40.9-4.6-43.1-27.1-3.1-32 43.7-101.1 40-128-3.4-24-19.4-29.1-33.4-29.4-13.4-.3-16.9 2-21.4 4.6-2.9 1.7-6.6 4.9-11.7-.3-6.3-6-11.1-11.7-19.4-12.9-12.3-2-17.7 2-26.6 9.7-3.4 2.9-12 12.9-20 9.1-3.4-1.7-15.4-7.7-24-11.4-16.3-7.1-40 4.6-48.6 20-12.9 22.9-38 113.1-41.7 125.1-8.6 26.6 10.9 48.6 36.9 47.1 11.1-.6 18.3-4.6 25.4-17.4 4-7.4 41.7-107.7 44.6-112.6 2-3.4 8.9-8 14.6-5.1 5.7 3.1 6.9 9.4 6 15.1-1.1 9.7-28 70.9-28.9 77.7-3.4 22.9 26.9 26.6 38.6 4 3.7-7.1 45.7-92.6 49.4-98.3 4.3-6.3 7.4-8.3 11.7-8 3.1 0 8.3.9 7.1 10.9-1.4 9.4-35.1 72.3-38.9 87.7-4.6 20.6 6.6 41.4 24.9 50.6 11.4 5.7 62.5 15.7 58.5-11.1zm5.7 92.3c-10.3 7.4-12.9 22-5.7 32.6 7.1 10.6 21.4 13.1 32 6 10.6-7.4 13.1-22 6-32.6-7.4-10.6-21.7-13.5-32.3-6z" />
     </svg>
+    <span class="sr-only">meetup</span>
   </a>
   <a target="_blank" rel="noopener noreferrer" href="https://discord.com/invite/k8xj8d75f6">
     <svg fill="#7289da" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
@@ -18,15 +20,17 @@
       <ellipse cx="196" cy="279" rx="33" ry="35" />
       <ellipse cx="312" cy="279" rx="33" ry="35" />
     </svg>
+    <span class="sr-only">discord</span>
   </a>
   <a target="_blank" rel="noopener noreferrer" href="https://github.com/owddm/owddm.com">
-    <svg height="512px" id="Layer_1" style="enable-background: new 0 0 512 512" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg height="512px" style="enable-background: new 0 0 512 512" version="1.1" viewBox="0 0 512 512" width="512px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <g>
         <path
           class="st0"
           d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   C480,134.8,379.7,32,256,32z" />
       </g>
     </svg>
+    <span class="sr-only">github</span>
   </a>
 </template>
 

components/ImageContainer.vue

@@ -112,10 +112,10 @@ onMounted(() => {
     ref="imageContainer"
   >
     <div v-for="(item, key) in items" :key="key">
-      <h3 v-if="item.type === 'group'">
+      <h2 v-if="item.type === 'group'">
         <span class="date">{{ formatDate(item.group.timestamp) }}</span>
         <span class="content" v-if="item.group.content">{{ item.group.content }}</span>
-      </h3>
+      </h2>
       <a
         v-else-if="item.type === 'photo'"
         :href="item.large.file"
@@ -172,15 +172,15 @@ img:hover {
   box-shadow: 0 0 150px 5px #aab6bd;
 }
 
-div, h3 {
+div, h2 {
   border-radius: 10px;
 }
 
-h3 {
+h2 {
   display: inline-block;
   background: #f0f0f0;
   font-size: 1em;
-  line-height: 1em;
+  line-height: 1.2;
   height: 200px;
   margin: 0;
   max-width: 300px;

components/Map.vue

@@ -38,7 +38,7 @@ onMounted(() => {
         let title = marker.title
           ? `<div class="map-event--label"><div class="map-event--title">${marker.title}</div>${marker.subtitle ? `<div class="map-event--info">${marker.subtitlePrefix ? `<strong>${marker.subtitlePrefix}</strong> ` : ""}${marker.subtitle}</div></div>` : ""}`
           : "";
-        const html = `<img src="/images/marker/${marker.type}.svg" class="map-event--image">${title}`;
+        const html = `<img src="/images/marker/${marker.type}.svg" class="map-event--image" alt="">${title}`;
         return L.marker([marker.lat, marker.lng], {
           icon: L.divIcon({
             iconAnchor: [37, 118],

components/SiteHeader.vue

@@ -102,6 +102,7 @@ const updateScreenScroll = () => {
             <circle cx="129" cy="21" r="3" />
           </g>
         </svg>
+        <span class="sr-only">OWDDM KWDDM</span>
       </h1>
     </NuxtLink>
     <nav role="navigation">

nuxt.config.ts

@@ -4,8 +4,11 @@ export default defineNuxtConfig({
   css: ["assets/style.css"],
   app: {
     head: {
+      htmlAttrs: {
+        lang: 'en',
+      },
       charset: 'utf-8',
       viewport: 'width=device-width, initial-scale=1.0, viewport-fit=cover',
     }
-  }
+  },
 });

pages/events/[event_id].vue

@@ -72,18 +72,18 @@
           <EventDateDisplay :date="dayjs(event?.time)" />
         </div>
         <div>
-          <a target="_blank" rel="noopener noreferrer" v-if="event?.group.type == 'owddm'" :href="`https://www.meetup.com/ja-JP/osaka-web-designers-and-developers-meetup/events/${event?.id}`">
-            <button class="rsvp">→ RSVP</button>
+          <a class="button rsvp" target="_blank" rel="noopener noreferrer" v-if="event?.group.type == 'owddm'" :href="`https://www.meetup.com/ja-JP/osaka-web-designers-and-developers-meetup/events/${event?.id}`">
+            → RSVP
           </a>
-          <a target="_blank" rel="noopener noreferrer" v-if="event?.group.type == 'kwddm'" :href="`https://www.meetup.com/ja-JP/kyoto-web-designers-and-developers-meetup/${event?.id}`">
-            <button class="rsvp">→ RSVP</button>
+          <a  class="button rsvp" target="_blank" rel="noopener noreferrer" v-if="event?.group.type == 'kwddm'" :href="`https://www.meetup.com/ja-JP/kyoto-web-designers-and-developers-meetup/${event?.id}`">
+            → RSVP
           </a>
         </div>
         <div>
-          <a target="_blank" rel="noopener noreferrer" href="https://discord.com/invite/k8xj8d75f6">
-            <button class="join-discord">→ Join Discord</button>
-          </a>
-        </div>
+            <a class="button join-discord" target="_blank" rel="noopener noreferrer" href="https://discord.com/invite/k8xj8d75f6">
+              → Join Discord
+            </a>
+          </div>
       </div>
     </div>
   </div>
@@ -219,6 +219,15 @@ div {
   width: 25%;
   margin-left: 1rem;
 }
+.event-details-date-rsvp-discord .button {
+  --button-width: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--color-white);
+  text-decoration: none;
+}
 
 .rsvp {
   width: 100%;