1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00

A11y and perf improvements

- Even less halation for dark theme
- More contrast for borders
- Slightly larger font, fixes APCA contrast issue for <small>
- Make responsive navbar work in NetSurf
- Make aria-current page bold
- Use content-visibility to unload footers and endnotes
- Add aria-labels to unclear webring link text
- Replace <hr> elements with css borders; the semantic meaning of <hr>
  was unnecessary with section breaks.
This commit is contained in:
Rohan Kumar 2022-04-02 23:54:39 -07:00
parent 85523c90e5
commit 60bf9110b9
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
5 changed files with 41 additions and 52 deletions

View file

@ -3,8 +3,8 @@
/* "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need
* I've been told that pure white on black is a bit harsh */
background-color: #0c0c0c;
color: #ececec;
background-color: #0e0e0e;
color: #eee;
}
a {
@ -21,10 +21,9 @@
blockquote,
:not(pre) > code,
hr,
img,
pre {
border-color: #333;
border-color: #444;
}
/* stylelint-disable -- hasn't heard of "prefers-contrast" yet */

View file

@ -1,37 +1,20 @@
/* CSS that adds the bare minimum for a simple layout.
* Nothing here exists purely for aesthetics except the unstyled-list;
* everything else addresses a specific a11y, compatibility, or critical
* usability need. */
* usability need.
* I also don't define any non-semantic classes besides unstyled-list.
* The the other classnames referenced here are from microformats2. */
/* This site's CSS does 10 major things:
* 1. sans-serif instead of serif for low-res screens.
* 2. Consistent font size; <pre> and <code> shouldn't be smaller than
* regular text.
* 3. max content width for readability
* 4. single-row nav links widescreen, multiline nav on narrow screens
* 5. Soft border around code and images to disginguish from the
* surrounding page. Images with white/black or transparent
* backgrounds should have clear dimensions, and multiple consecutive
* inline <code> spans should look separate. A <code> span that
* continues across multiple lines should not look like multiple different
* spans.
* 6. Increase the line-spacing a bit so users on mobile devices can
* tap links more easily.
* 7. Horizontally center non-inline images; left-aligned stick out.
* 8. dark.css changes a few colors if the browser wants dark mode.
* 9. Support unstyled lists: for webmentions, post lists, nav links.
* 10. Narrow screen optimization: less-indented blockquotes, overflow
* behavior for <pre>, no figure margins.
* Everything else is browser defaults:
* default fonts, non-dark-mode colors, etc.
*/
/* Start with browser defaults: default fonts, non-dark-mode colors, etc
* Only change things to solve a specific a11y or significant usability
* need. One exception: cosmetic improvement for unstyled-list */
html {
/* Mobile screens benefit from greater line-spacing so links are
* further apart. Dyslexic users prefer the spacing too.
* <100dpi screens: sans-serif is better. Why did browsers settle
* on serif being the default?? */
font: 100%/1.5 sans-serif;
font: 105%/1.5 sans-serif;
/* Aligning to the center with space on both sides prevents accidental
* link activation on mobile devices. */
@ -55,23 +38,32 @@ html {
@supports (border-inline-start: 6px) {
/* narrow screens: reduce margin for blockquotes a lot, using
* a thick left-side border instead. */
* a thick left-side border instead, or a right-side border in
* RTL locales. Some browsers like NetSurf or IE don't support this,
* but they're pretty much only used on the desktop where a huge indent
* is less of a problem.*/
blockquote {
border-inline-start: 6px solid #bbb;
border-inline-start: 5px solid #aaa;
margin: 0;
padding: 0 0.8em;
}
}
/* single-line nav on widescreen and print.
* Single-line nav on print saves almost half a page. */
@media print, (min-width: 32em) {
header nav li {
display: inline;
padding-inline-end: 0.5em;
}
/* single-line nav on widescreen and print.
* Single-line nav on print saves almost half a page. */
@media (min-width: 32em) {
header nav li {
display: inline;
/* inline-end doesn't work in netsurf. -right should stil make sense
* in RTL machine translation, it'll just look a bit indented. */
padding-right: 0.5em;
}
}
a[aria-current="page"] {
font-weight: bold;
}
/* narrow screens: remove unused figure margin. */
figure {
margin: 0;
@ -133,7 +125,7 @@ pre {
img,
pre,
:not(pre) > code {
border: 1px solid #bbb;
border: 1px solid #aaa;
}
/* center images that aren't my indieweb icon; same justification as
@ -146,15 +138,21 @@ img:not(.u-photo) {
max-width: 100%;
}
/* WCAG Technique C25: use borders to separate sections.
* Also use "content-visibility: auto" to improve performance by
* reducing the number of DOM nodes rendered at once. */
footer,
section[role="doc-endnotes"] {
border-top: 1px solid #aaa;
content-visibility: auto;
}
/* Todo:
* - Some browsers don't scale SVGs properly; the img container
* dimensions crop the image rather than scale it. Investigate
* if this only applies to Internet Explorer or if it applies to
* other uncommon browsers too. If any non-IE browsers do this and/or
* if the spec allows this behavior, try to correct it here.
* - Investigate reduced-contrast for dark mode
* - Wait till Webkit fixes its broken-ass default dark stylesheet
* then consider trimming the dark stylesheet I provide.
* - Investigate CSS-based hints to screenreaders.
* - See if any "-left" properties should switch to "-right" for users
* who machine-translate the page to a RTL language. */
* - Investigate CSS-based hints to screenreaders. */

View file

@ -1,4 +1,3 @@
<hr>
<footer id="site-footer">
<p>
Copyright © <span itemprop="copyrightYear">{{now.Year}}</span> <span itemprop="copyrightHolder">{{- partial "indieweb-author.html" -}}</span> ·

View file

@ -14,9 +14,9 @@
{{ range $i, $r := after 1 (getCSV "," "/csv/webrings.csv") }}
<li>
<p>
<a href="{{- index $r 1 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}"></a> ·
<a href="{{- index $r 1 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}" aria-label="previous site"></a> ·
<a href="{{- index $r 2 -}}">{{- index $r 0 -}}</a> ·
<a href="{{- index $r 3 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}"></a>
<a href="{{- index $r 3 -}}" rel="nofollow ugc" referrerpolicy="{{ $refPol }}" aria-label="next site"></a>
</p>
</li>
{{ end }}

View file

@ -25,13 +25,6 @@
{{ partial "processed-content" . -}}
</div>
</article>
<hr>
<p>
{{- if .PrevInSection -}}<a href="{{ .PrevInSection.Permalink }}">Previous</a>{{- end -}}
{{- if and (.PrevInSection) (.NextInSection) }} · {{ end -}}
{{- if .NextInSection -}}<a href="{{ .NextInSection.Permalink }}">Next</a>{{- end -}}
</p>
<hr>
<footer class="comment">
<p><a href="mailto:~seirdy/seirdy.one-comments@lists.sr.ht">Send an email</a> to leave a comment in the <a href="https://lists.sr.ht/~seirdy/seirdy.one-comments">mailing list</a> for seirdy.one. You'll have to send in plain text; please <a href="https://useplaintext.email/">learn how</a>. Alternatively, send your email <a href="mailto:seirdy@seirdy.one">directly to me</a>; it wont show up on the mailing list, but Ill see it.</p>
<p>This site also supports <a href="https://indieweb.org/webmention">Webmentions</a>. Webmentions received for this post will appear below after I approve them. I sometimes send Webmentions to myself on behalf of linking sites that don't support them. Check the <a href="https://web.archive.org/">Wayback Machine</a> if any links are broken.</p>