dereklseitz/dlseitz.dev-frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(a11y): Improve accessibility of demo cards

Browse Source 
- change outer <div> wrapper to <article> for improved semantic HTML
- add "aria-labelledby" attribute to explicitly link each demo card to its title
This commit is contained in:
Derek L. Seitz
2025-09-07 17:39:42 -05:00
parent 3c22c88396
commit 57e1bb8d9d
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/demos.njk
View File

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