inherentlee/leecat.art-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drone build Sat Sep 12 10:51:15 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-12 17:51:15 +00:00
parent 0eaaf8ef62
commit ef0db8e0be
312 changed files with 5378 additions and 3649 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend-accessibility/index.html
+23 -13
View File
@@ -1214,6 +1214,12 @@ pagefind-searchbox input:not(:focus-visible) {
box-shadow: var(--pf-shadow-md) !important;
}
@media (max-width: 650px) {
.pf-trigger-shortcut {
display: none !important;
}
}
.pf-searchbox-dropdown,
.pf-searchbox-footer {
border-width: .125rem !important;
@@ -1846,11 +1852,11 @@ switch (currentThemeValue) {
<p>For example, screen readers can summarize the headers on a page. To leverage this, break up content with headers and avoid using other formatting to achieve similar effects visually. Stick to one h1 per page, and don't skip levels (e.g. go from an h1 to an h3).</p>
<p>Screen readers can also summarize a page's links. In order for this to be effective, links need descriptive text attached to them (and always avoid bare links!). Compare these examples:</p>
<blockquote>
<p>Read <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">more</a> about accessibility patterns on the web</p>
<p>Read <a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" rel="external">more</a> about accessibility patterns on the web</p>
</blockquote>
<p>vs</p>
<blockquote>
<p>Read more about <a href="https://www.w3.org/WAI/ARIA/apg/patterns/">accessibility patterns on the web</a></p>
<p>Read more about <a href="https://www.w3.org/WAI/ARIA/apg/patterns/" target="_blank" rel="external">accessibility patterns on the web</a></p>
</blockquote>
<p>The second example has text directly attached to the link that describes its content. This is a vast improvement over the first example, where the link would just be read out as &quot;more&quot;. Since links are visually highlighted, good link text also improves readability for everyone.</p>
<p>A table of contents can be helpful for a broad set of users, from the power user who knows exactly what she needs from the page to the newbie who just wants to see what the major topics are.</p>
@@ -1880,7 +1886,7 @@ switch (currentThemeValue) {
<li><a href="https://mannequinrentals.help/2024/03/21/an-attempted-guide-to-writing-effective-alt-and-descriptive-text-for-art/" target="_blank" rel="external">An attempted guide to writing effective alt and descriptive text for art</a></li>
<li><a href="https://alt-text-as-poetry.net/" target="_blank" rel="external">Alt text as poetry</a></li>
<li><a href="http://dataabinitio.com/?p=1161" target="_blank" rel="external">Writing alt text for a scientific figure - Kristin Briney</a></li>
<li><a href="https://adrianroselli.com/2024/05/my-approach-to-alt-text.html">My approach to alt text - Adrian Roselli</a></li>
<li><a href="https://adrianroselli.com/2024/05/my-approach-to-alt-text.html" target="_blank" rel="external">My approach to alt text - Adrian Roselli</a></li>
</ul>
<h3 id="other-specific-topics">Other specific topics</h3>
<ul>
@@ -1930,43 +1936,47 @@ switch (currentThemeValue) {
<ol id="postlist">
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </h2>
<a class="postlink" href="/designing-a-bag/">
<h2 data-ha-exclude="" id="designing-a-bag">designing a bag </h2>
<ul class="postlist-tags">
<li>leather</li>
<li>software</li>
</ul>
<img src="/img/hellebore.jpg" alt="Image unrelated to post. Close up on a pale green hellebore flower." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/shoelace-bag.jpg" alt="a 3-image collage showcasing a leather crossbody bag. the leather body is brown and fairly simple. up the narrow sides, rope is laced through grommets in a style resembling a shoe lacing. the rope forms the handle and loops seamlessly through the other side of the bag, joining in one point in a figure-8 follow-through knot. At the bottom corners, there are small diagonal lines of stitching to give the bag a small lip around the base and ensure small objects don&#39;t slide out." loading="lazy" decoding="async" width="1000" height="1777">
</a>
</li>
<li class="post">
<a class="postlink" href="/moving-images/">
<h2 data-ha-exclude="" id="moving-images">moving images </h2>
<a class="postlink" href="/core-css/">
<h2 data-ha-exclude="" id="core-css">core CSS </h2>
<ul class="postlist-tags">
<li>software</li>
<li>highlight</li>
</ul>
<img src="/img/cormorant.jpg" alt="Image unrelated to post. A cormorant, a type of black waterfowl, poses with wings spread on a buoy in Puget Sound. Off to the left, another bird floats." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/core-css.png" alt="A website mockup in dark mode with light pink accents. Everything is filler text such as the title &#39;This is my cool website&#39;, headers reading things like &#39;This is an h1&#39;, nav items &#39;Nav item 1&#39;, etc. There is a paragraph block - the opening of the Bee Movie - and part of an image visible - a screencap of the music video for Never Gonna Give You Up by Rick Astley." loading="lazy" decoding="async" width="1000" height="447">
</a>
</li>
<li class="post">
<a class="postlink" href="/redirections/">
<h2 data-ha-exclude="" id="redirections">redirections </h2>
<a class="postlink" href="/accessible-image-modals/">
<h2 data-ha-exclude="" id="accessible-image-modals">accessible image modals </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/angle-brackets-uwu.jpg" alt="Ascii art of an emoticon with pinched eyes and a small mouth made with two angle brackets." loading="lazy" decoding="async" width="1000" height="316">
<img src="/img/snacking-seagull.jpg" alt="Image unrelated to post. A seagull floating in the water with a starfish hanging out of eir mouth." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
@@ -2023,6 +2033,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/backend-accessibility/` was built on 2026-09-12T17:14:02.778Z -->
<!-- This page `/backend-accessibility/` was built on 2026-09-12T17:51:00.618Z -->
</body>
</html>