Skip to content

Utilising semantic tags to provide better structure for screen readers #1464

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
smallsaucepan merged 9 commits into from
May 24, 2026
Merged

Utilising semantic tags to provide better structure for screen readers #1464

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5ae6195
Utilising semantic tags (main, header, article, etc) and reordering c…
smallsaucepan Mar 8, 2026
3684d57
Reverting changes that only re-order large HTML chunks (mainly moving…
smallsaucepan Mar 11, 2026
e7c19c2
Removing redundant <hr> tags as linear nav has its own border anyway.
smallsaucepan Mar 17, 2026
a2065cf
Updating images to minimise surrounding padding on themselves, and in…
smallsaucepan Mar 24, 2026
2b385aa
Next round of changes to page and component structure using semantic …
smallsaucepan Apr 1, 2026
7377350
Converting a couple of comments to preferred footnote style.
smallsaucepan Apr 1, 2026
cd65c9e
Added Unreleased section to changelog, describing corresponding chang…
smallsaucepan Apr 2, 2026
858038a
Trimmed site header and footer from api example - only need to consid…
smallsaucepan Apr 4, 2026
202d391
Merge branch 'main' into macro-semantic-tags
smallsaucepan Apr 12, 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
16 changes: 7 additions & 9 deletions src/_includes/page.webc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,21 +70,19 @@ scripts:
</nav>
</header>

<main class="site-main">
<div class="content content-with-sidebar">
<div class="header page-header">
<main class="site-main content content-with-sidebar">
<header class="header page-header">
<h2 @text="title"></h2>
</header>
<div class="body styleguide-body">
<template webc:nokeep @raw="content"></template>
</div>
<div class="sidebar">
<aside class="sidebar">
<styleguide-nav-group
:items="eleventyNavigation($data.collections.all)"
:page-url="page.url"
></styleguide-nav-group>
</div>
<div class="body styleguide-body">
<template webc:nokeep @raw="content"></template>
</div>
</div>
</aside>
</main>

<footer class="site-footer"></footer>
Expand Down
115 changes: 56 additions & 59 deletions src/areas/faq/examples/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,66 +5,63 @@

<div class="page">
<div class="wrapper">
<div class="content content-narrow">
<div class="faq-page">
<h1>Frequently Asked Questions</h1>
<main class="content content-narrow faq-page">
<h1>Frequently Asked Questions</h1>

<h2>What is going on here?</h2>
<p>
MLTSHP is an approximate clone of the much-loved site MLKSHK created
by Andre and Amber which <a href="#">closed in April of 2017</a>. We
are 100% community funded and member-run. The site is
subscription-based and is a registered corporation.
<a href="#">The code is on Github</a> along with
<a href="#">a welcome module there</a> which talks about what is going
on. There is also a Slack (email <a href="#">hello@mltshp.com</a> for
an invite!) and <a href="#">a Facebook group</a>.
</p>
<h2>What is going on here?</h2>
<p>
MLTSHP is an approximate clone of the much-loved site MLKSHK created by
Andre and Amber which <a href="#">closed in April of 2017</a>. We are
100% community funded and member-run. The site is subscription-based and
is a registered corporation. <a href="#">The code is on Github</a> along
with <a href="#">a welcome module there</a> which talks about what is
going on. There is also a Slack (email
<a href="#">hello@mltshp.com</a> for an invite!) and
<a href="#">a Facebook group</a>.
</p>

<h2>What do the membership levels mean?</h2>
<p>
Membership is required to participate on MLTSHP, but it‘s a low bar!
We‘d love to have you aboard! These are the options:
</p>
<ul>
<li>Non-members can see the Popular page and individual posts.</li>
<li>
The Single Scoop level ($3 per year) is a great way to check out the
site. Members can:
<ul>
<li>
Post images and videos to their own shakes and to group shakes,
up to a monthly upload limit of 300MB for images and animated
GIFs.
</li>
<li>
Follow their friends‘ shakes, and follow and join group shakes.
</li>
<li>Save, like, and comment on any posts.</li>
</ul>
</li>
<li>
The Double Scoop level ($24 per year) can do all of the above, plus:
<ul>
<li><strong>There are no fixed upload limits.</strong></li>
<li>Make up to 100 of their own group shakes.</li>
<li>Get a little plus sign next to their name.</li>
<li>Have RSS feeds for their shakes.</li>
</ul>
Even at just $2 per month, Double Scoop members cover the primary
expenses of running MLTSHP and help make the Single Scoop level
possible.
</li>
</ul>
<p>
We ran some numbers and determined that with our current membership,
we could run the site if most users contributed $2/month. This
includes things like paying for storage, hosting, bandwidth, a
business license, someone to do our taxes and answer the odd legal
question we may have to ask. We added a “bare bones” membership
because we don‘t want anyone to be excluded.
</p>
</div>
</div>
<h2>What do the membership levels mean?</h2>
<p>
Membership is required to participate on MLTSHP, but it‘s a low bar!
We‘d love to have you aboard! These are the options:
</p>
<ul>
<li>Non-members can see the Popular page and individual posts.</li>
<li>
The Single Scoop level ($3 per year) is a great way to check out the
site. Members can:
<ul>
<li>
Post images and videos to their own shakes and to group shakes, up
to a monthly upload limit of 300MB for images and animated GIFs.
</li>
<li>
Follow their friends‘ shakes, and follow and join group shakes.
</li>
<li>Save, like, and comment on any posts.</li>
</ul>
</li>
<li>
The Double Scoop level ($24 per year) can do all of the above, plus:
<ul>
<li><strong>There are no fixed upload limits.</strong></li>
<li>Make up to 100 of their own group shakes.</li>
<li>Get a little plus sign next to their name.</li>
<li>Have RSS feeds for their shakes.</li>
</ul>
Even at just $2 per month, Double Scoop members cover the primary
expenses of running MLTSHP and help make the Single Scoop level
possible.
</li>
</ul>
<p>
We ran some numbers and determined that with our current membership, we
could run the site if most users contributed $2/month. This includes
things like paying for storage, hosting, bandwidth, a business license,
someone to do our taxes and answer the odd legal question we may have to
ask. We added a “bare bones” membership because we don‘t want anyone to
be excluded.
</p>
</main>
</div>
</div>
188 changes: 94 additions & 94 deletions src/areas/find-shakes/examples/find-people.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,102 +5,12 @@

<div class="page">
<div class="wrapper">
<div
<main
class="content content-with-sidebar content-with-sidebar-reversed content-find-shakes"
>
<div class="header">
<header class="page-header">
<h1>Find Shakes to Follow</h1>
</div>
<div class="sidebar">
<div class="good-folk-block">
<h3>Some Good Folks</h3>
<div class="good-folk-block-content">
<p>People who posted files you’ve liked.</p>
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/6222/profile.jpg"
width="50"
height="50"
/>
</a>
<div class="follow">
<h4><a href="#">Jay Fallon</a></h4>
<form>
<a
href="#"
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/1141/profile.jpg"
width="50"
height="50"
/>
</a>
<div class="follow">
<h4>
<a href="#">Dr. Butts Manly</a>
<a href="#"
><img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
width="12"
height="12"
border="0"
valign="center"
/></a>
</h4>
<form>
<a
href="#"
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/123/profile.jpg"
width="50"
height="50"
/>
</a>
<div class="follow">
<h4>
<a href="#">Mazen Kerbaj</a>
<a href="#"
><img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
width="12"
height="12"
border="0"
valign="center"
/></a>
</h4>
<form>
<a
href="#"
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="body">
<ul class="find-shakes-navigation">
<li><a href="#">Group Shakes</a></li>
Expand Down Expand Up @@ -217,6 +127,96 @@ <h4>
</div>
</div>
</div>
</div>
<aside class="sidebar">
<div class="good-folk-block">
<h3>Some Good Folks</h3>
<div class="good-folk-block-content">
<p>People who posted files you’ve liked.</p>
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/6222/profile.jpg"
width="50"
height="50"
/>
</a>
<div class="follow">
<h4><a href="#">Jay Fallon</a></h4>
<form>
<a
href="#"
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/1141/profile.jpg"
width="50"
height="50"
/>
</a>
<div class="follow">
<h4>
<a href="#">Dr. Butts Manly</a>
<a href="#"
><img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
width="12"
height="12"
border="0"
valign="center"
/></a>
</h4>
<form>
<a
href="#"
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/123/profile.jpg"
width="50"
height="50"
/>
</a>
<div class="follow">
<h4>
<a href="#">Mazen Kerbaj</a>
<a href="#"
><img
alt="pro"
src="https://mltshp-cdn.com/static/images/icon_plus.svg?v=dabd5508e1560e2bdcc7356c85ea8f10"
width="12"
height="12"
border="0"
valign="center"
/></a>
</h4>
<form>
<a
href="#"
class="submit-form btn btn-secondary btn-pastel btn-small"
>+ Follow</a
>
</form>
</div>
</div>
</div>
</div>
</aside>
</main>
</div>
</div>
Loading