feat(a11y): Improve accessibility of demo cards

- change outer <div> wrapper to <article> for improved semantic HTML
- add "aria-labelledby" attribute to explicitly link each demo card to its title

src/demos.njk

@@ -8,9 +8,9 @@ isLandingPage: false
 
 <h1>A Preview of What's Comming!</h1>
 {% for demo in demos.DEMOS %}
-    <div class="{{ demo.id }}-demo-card">
+    <article id="demo-{{ demo.id }}" class="{{ demo.id }}-demo-card" aria-labelledby="demo-title-{{ demo.id }}">
         <div class="{{ demo.id }}-demo module">
-            <h2 class="demo-title">{{ demo.title }}</h2>
+            <h2 id="demo-title-{{ demo.id }}" class="demo-title">{{ demo.title }}</h2>
             <img class="demo-image" src="/images/_demo-thumbs/{{ demo.imageFile }}" alt="{{ demo.altText }}">
             <p class="demo-description">{{ demo.description}}</p>
             <h3>Business Problem</h3>
@@ -24,5 +24,5 @@ isLandingPage: false
             {% endif %}
             <a href="{{ demo.repoUrl }}" class="demo-repo" target="_blank" rel="noopener noreferrer">View Demo's Source Code</a>
         </div>
-    </div>
+    </article>
 {% endfor %}