Skip to content

Improve accessibility with semantic HTML and ARIA labels #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dinooo13 merged 9 commits into from
May 9, 2026
Merged

Improve accessibility with semantic HTML and ARIA labels #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bcee044
fix: resolve accessibility issues in hero links and lab cards
claude May 9, 2026
564f66b
fix: use empty alt on hero profile image to avoid redundant text
claude May 9, 2026
3a9f688
fix: use aria-labelledby on hero image to reference adjacent name text
claude May 9, 2026
784c3c2
fix: remove conflicting alt="" from hero image, keep aria-labelledby …
claude May 9, 2026
d34f642
fix: use sr-only span for unique lab card link text instead of aria-l…
claude May 9, 2026
755d5e7
fix: revert to alt="" on hero image per WCAG H67
claude May 9, 2026
3149bac
fix: add sr-only context to all repeated link labels across lab and t…
claude May 9, 2026
7df4966
fix: wrap lab detail page action links in nav/ul/li for semantic markup
claude May 9, 2026
36959ab
fix: wrap speaking detail page action links in nav/ul/li for semantic…
claude May 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions app/components/LabCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,9 @@ defineProps<{
icon="i-lucide-arrow-right"
color="neutral"
size="sm"
label="View details"
/>
>
View details<span class="sr-only"> for {{ lab.title }}</span>
</UButton>
<UButton
v-if="lab.url"
:to="lab.url"
Expand All @@ -71,8 +72,9 @@ defineProps<{
icon="i-lucide-external-link"
color="neutral"
size="sm"
label="Demo"
/>
>
Demo<span class="sr-only"> of {{ lab.title }}</span>
</UButton>
<UButton
v-if="lab.repoUrl"
:to="lab.repoUrl"
Expand All @@ -81,8 +83,9 @@ defineProps<{
icon="i-simple-icons-github"
color="neutral"
size="sm"
label="Repository"
/>
>
Repository<span class="sr-only"> for {{ lab.title }}</span>
</UButton>
</div>
</div>
</UCard>
Expand Down
26 changes: 17 additions & 9 deletions app/components/landing/Hero.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ defineProps<{
<NuxtImg
class="size-18 rounded-full object-cover ring ring-default ring-offset-3 ring-offset-(--ui-bg)"
:src="avatarSrc"
:alt="global.picture?.alt ?? 'Profile picture'"
alt=""
width="72"
height="72"
sizes="72px"
Expand Down Expand Up @@ -67,14 +67,22 @@ defineProps<{
</template>

<template #links>
<div class="hero-enter hero-enter-4 flex flex-wrap items-center justify-center gap-3">
<UButton
v-for="link of footer?.links"
:key="link['aria-label'] || link.to"
v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
class="text-highlighted hover:text-highlighted"
/>
</div>
<nav
aria-label="Social and contact links"
class="hero-enter hero-enter-4"
>
<ul class="flex flex-wrap items-center justify-center gap-3">
<li
v-for="link of footer?.links"
:key="link['aria-label'] || link.to"
>
<UButton
v-bind="{ size: 'xs', color: 'neutral', variant: 'ghost', ...link }"
class="text-highlighted hover:text-highlighted"
/>
</li>
</ul>
</nav>
</template>
</UPageHero>
</template>
5 changes: 3 additions & 2 deletions app/components/landing/LabsTeaser.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,9 @@ defineProps<{
color="neutral"
size="sm"
icon="i-lucide-arrow-right"
label="View details"
/>
>
View details<span class="sr-only"> for {{ lab.title }}</span>
</UButton>
</div>
</div>
</UCard>
Expand Down
5 changes: 3 additions & 2 deletions app/components/talks/TalkPreviewCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,9 @@ const subtitle = computed(() => {
color="neutral"
size="sm"
icon="i-lucide-arrow-right"
:label="primaryAction.label"
/>
>
{{ primaryAction.label }}<span class="sr-only"> for {{ talk?.title }}</span>
</UButton>
</div>
</div>

Expand Down
56 changes: 31 additions & 25 deletions app/pages/labs/[slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,31 +50,37 @@ const hasImage = computed(() => Boolean(lab.value?.image))
</template>

<template #links>
<div class="flex flex-wrap items-center gap-3">
<UButton
to="/labs"
color="neutral"
variant="outline"
icon="i-lucide-arrow-left"
label="Back to Labs"
/>
<UButton
v-if="lab.url"
:to="lab.url"
target="_blank"
color="neutral"
icon="i-lucide-external-link"
label="Open demo"
/>
<UButton
v-if="lab.repoUrl"
:to="lab.repoUrl"
target="_blank"
color="neutral"
icon="i-simple-icons-github"
label="View repository"
/>
</div>
<nav aria-label="Lab actions">
<ul class="flex flex-wrap items-center gap-3 list-none p-0">
<li>
<UButton
to="/labs"
color="neutral"
variant="outline"
icon="i-lucide-arrow-left"
label="Back to Labs"
/>
</li>
<li v-if="lab.url">
<UButton
:to="lab.url"
target="_blank"
color="neutral"
icon="i-lucide-external-link"
label="Open demo"
/>
</li>
<li v-if="lab.repoUrl">
<UButton
:to="lab.repoUrl"
target="_blank"
color="neutral"
icon="i-simple-icons-github"
label="View repository"
/>
</li>
</ul>
</nav>
</template>

<template #default>
Expand Down
39 changes: 22 additions & 17 deletions app/pages/speaking/[slug].vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,23 +77,28 @@ const resourceKindLabels: Record<ResolvedTalkResource['kind'], string> = {
</template>

<template #links>
<div class="flex flex-wrap items-center gap-3">
<UButton
to="/speaking"
color="neutral"
variant="outline"
icon="i-lucide-arrow-left"
label="Back to Speaking"
/>
<UButton
v-if="talk.url"
:to="talk.url"
target="_blank"
color="neutral"
icon="i-lucide-external-link"
label="View organizer session"
/>
</div>
<nav aria-label="Talk actions">
<ul class="flex flex-wrap items-center gap-3 list-none p-0">
<li>
<UButton
to="/speaking"
color="neutral"
variant="outline"
icon="i-lucide-arrow-left"
label="Back to Speaking"
/>
</li>
<li v-if="talk.url">
<UButton
:to="talk.url"
target="_blank"
color="neutral"
icon="i-lucide-external-link"
label="View organizer session"
/>
</li>
</ul>
</nav>
</template>

<template #default>
Expand Down