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

drone build Sun Sep 20 15:08:31 PDT 2026

Browse Source
This commit is contained in:
inherentlee
2026-09-20 22:08:31 +00:00
parent 1d51eaebec
commit 207d8c1cd5
731 changed files with 8308 additions and 5281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend-accessibility/index.html
+137 -16
View File
@@ -40,7 +40,80 @@
<style>.post-metadata {
<style>#toc {
float: right;
margin: 1rem 0 1.5rem 1.5rem;
width: min(calc(100% - 1.5rem), 23rem);
/* 23rem is the width of the words 'table of contents' in my header font */
/* yes, it's a bit hacky */
}
@media (max-width: 850px) {
#toc {
float: unset;
margin-top: 2rem;
margin-left: .5rem;
width: calc(100% - .5rem);
}
}
#toc details {
border: thick solid var(--color-pink);
border-radius: 1rem;
margin-top: 1rem;
}
#toc summary {
position: relative;
top: -1.5rem;
left: -.75rem;
width: fit-content;
background: var(--color-bg);
border-radius: .5rem;
}
#toc summary:focus-visible {
outline: .15rem solid var(--color-teal);
}
#toc summary::marker {
font-size: 2.35rem;
}
#toc h2 {
margin-top: 0;
display: inline;
line-height: normal;
}
#toc nav {
position: relative;
top: -1.25rem;
}
#toc li {
margin-block: .45rem 0;
}
@media (max-width: 650px) {
#toc nav > ol {
margin-left: .5rem;
}
}
/* basically we want to style this `ol` as a `ul` */
#toc ol > li {
list-style: disc;
}
#toc ol > li > ol > li {
list-style: circle;
}
#toc ol > li > ol > li > ol > li {
list-style: square;
}
.post-metadata {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
@@ -438,6 +511,8 @@ body:has(dialog[open]) {
color-scheme: light dark;
--font-family: 'Atkinson Hyperlegible Next', sans-serif;
/* if you change the header font, go to post-toc.css and fuck about with the width
of the table of contents */
--font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif;
--font-family-code: 'Atkinson Hyperlegible Mono', monospace;
@@ -496,7 +571,6 @@ body:has(dialog[open]) {
}
/* Base */
* {
box-sizing: border-box;
margin: 0;
@@ -1814,7 +1888,7 @@ switch (currentThemeValue) {
<heading-anchors content="<i class='fa-solid fa-anchor'></i>">
<article data-pagefind-body="">
<h1 id="backend-accessibility">backend accessibility</h1>
<h1>backend accessibility</h1>
<div class="post-metadata">
<p>
@@ -1843,16 +1917,62 @@ switch (currentThemeValue) {
<img class="hero" src="/img/camelCase-print.jpg" alt="A carved stamp next to its print. The print reads &#39;#camelCase&#39; in a slightly formal-looking italic font." loading="lazy" decoding="async" width="1000" height="750">
<blockquote>
<aside id="toc">
<details>
<summary><h2>table of contents</h2></summary>
<nav class="toc">
<ol>
<li><a href="#documentation">Documentation</a>
</li>
<li><a href="#rely-on-standards">Rely on standards</a>
</li>
<li><a href="#user-stories">User stories</a>
<ol>
<li><a href="#i-want-to-understand-new-terms-as-they're-introduced">I want to understand new terms as they're introduced</a>
</li>
<li><a href="#i-want-to-quickly-scan-a-page-for-the-information-i-need">I want to quickly scan a page for the information I need</a>
</li>
<li><a href="#i-want-to-be-aware-of-and-able-to-understand-all-content-on-the-page">I want to be aware of and able to understand all content on the page</a>
</li>
</ol>
</li>
<li><a href="#todo-notes">todo notes</a>
</li>
<li><a href="#references">References</a>
<ol>
<li><a href="#alt-text%2Fimage-descriptions">Alt text/image descriptions</a>
</li>
<li><a href="#other-specific-topics">Other specific topics</a>
</li>
</ol>
</li>
</ol>
</nav>
</details>
</aside>
<p>These notes are from a talk I gave at work. If you think something is missing or incorrect, please let me know!</p>
</blockquote>
<p>Backend developers still have users: other developers. We're all human, with human limitations and differences. Design for those limitations and you'll find you improve the end result for everyone.</p>
<h2 id="documentation">Documentation</h2>
<p>The first thing you can do: document. By this I don't just mean standalone text documentation; I also include code comments, clear variable and file naming, and pipeline or script outputs that report success or failure <em>and give details</em>.</p>
<h2 id="rely-on-standards">Rely on standards</h2>
<p>Rely on existing standards where possible. Style guides, spell checkers, linters, and formatters are all great. Make standards easy to follow with linter, editor, etc. config files in your repo, or add a devcontainer so others can easily get started with the project. When there's no standard, create one; for example, set up github issue and PR templates. And whenever you can, automate tests <em>and fixes</em>.</p>
<h2 id="user-stories">User stories</h2>
<h3 id="i-want-to-understand-new-terms-as-they-re-introduced">I want to understand new terms as they're introduced</h3>
<h3 id="i-want-to-understand-new-terms-as-they're-introduced">I want to understand new terms as they're introduced</h3>
<ul>
<li>Abbreviations/initialisms: can stall anyone unfamiliar with them. Spell them out when they're first introduced, and add the abbreviation in parentheses.</li>
<li>Jargon: avoid it as much as possible. Keep a friendly tone.</li>
@@ -1890,7 +2010,7 @@ switch (currentThemeValue) {
<li><a href="https://marconius.com/a11yLinks/" target="_blank" rel="external">Collected accessibility resources — Marco Salsiccia</a></li>
<li><a href="https://a11y.coffee/start-testing/" target="_blank" rel="external">A11y coffee</a> [note: spell out 'accessibility' rather than shortening to 'a11y'!]</li>
</ul>
<h3 id="alt-text-image-descriptions">Alt text/image descriptions</h3>
<h3 id="alt-text%2Fimage-descriptions">Alt text/image descriptions</h3>
<ul>
<li><a href="https://uxdesign.cc/how-to-write-an-image-description-2f30d3bf5546" target="_blank" rel="external">How to write an image description</a></li>
<li><a href="https://www.perkins.org/resource/how-write-alt-text-and-image-descriptions-visually-impaired/" target="_blank" rel="external">How to write alt text and image descriptions for the visually impaired — Perkins School for the Blind</a></li>
@@ -1906,6 +2026,7 @@ switch (currentThemeValue) {
<li><a href="https://chartability.fizz.studio" target="_blank" rel="external">Chartability</a> (data visualization)</li>
</ul>
</article>
@@ -1943,26 +2064,26 @@ switch (currentThemeValue) {
<section class="related-posts">
<h2 data-ha-exclude="" id="related-posts">related posts</h2>
<h2 data-ha-exclude="">related posts</h2>
<ol id="postlist">
<li class="post">
<a class="postlink" href="/comparing-text-editors/">
<h2 data-ha-exclude="" id="comparing-text-editors">comparing text editors </h2>
<a class="postlink" href="/an-intro-to-git/">
<h2 data-ha-exclude="">an intro to git </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/horsetail.jpg" alt="Image unrelated to post. Close up on a horsetail plant&#39;s stem, with many small needle-like leaves emerging from all sides of the circular stem at each segmented joint." loading="lazy" decoding="async" width="1000" height="666">
<img src="/img/goldeneye-tail.jpg" alt="Image unrelated to post. The tail of a diving duck pokes out from the water with a small splash." loading="lazy" decoding="async" width="1000" height="666">
</a>
</li>
<li class="post">
<a class="postlink" href="/eleventy-lessons/">
<h2 data-ha-exclude="" id="eleventy-lessons">eleventy lessons </h2>
<h2 data-ha-exclude="">eleventy lessons </h2>
<ul class="postlist-tags">
@@ -1975,15 +2096,15 @@ switch (currentThemeValue) {
</li>
<li class="post">
<a class="postlink" href="/intro-to-wireframing/">
<h2 data-ha-exclude="" id="intro-to-wireframing">intro to wireframing </h2>
<a class="postlink" href="/domain-and-site-setup/">
<h2 data-ha-exclude="">domain and site setup </h2>
<ul class="postlist-tags">
<li>software</li>
</ul>
<img src="/img/aggregator-wireframes.jpg" alt="a figma page with 4 major sections titled aggregator, aggregator mobile, aggregator color, and aggregator mobile color. each section has 7 pages in it - all sections pretty clearly have the same 7 pages, with the mobile sections shown on mobile screens and the color sections in a rainbow of pastels rather than grayscale." loading="lazy" decoding="async" width="1000" height="1042">
<img src="/img/crinkly-mushrooms.jpg" alt="Picture unrelated to post. Some crinkly brown-orange mushrooms in vibrant green grass." loading="lazy" decoding="async" width="1000" height="750">
</a>
</li>
@@ -2040,6 +2161,6 @@ switch (currentThemeValue) {
</footer>
<!-- This page `/backend-accessibility/` was built on 2026-09-20T00:40:39.715Z -->
<!-- This page `/backend-accessibility/` was built on 2026-09-20T22:08:14.587Z -->
</body>
</html>