1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-30 15:22:09 +00:00
Commit graph

156 commits

Author SHA1 Message Date
Rohan Kumar
3200333424
Shorter alts, formatting, redundant links, cleanup
- Shrink some excessive alt text
- Remove some redundant links
- Screenreaders that split elements up aren't just on touchscreens
- Mention ChromeVox in list of screen readers
- Move TOC higher in page
- Spelling
- Drop more unused classes
2022-04-09 08:59:12 -07:00
Rohan Kumar
072ab1dfff
Add + comply with notes on screen reader support
- Replace hashes in code snippets with variables for screen-readability
- Use hyphens where valid instead of combined words for screen reader
  pronunciation
- Typo
- Add WIP section on screen reader support tips not already covered.
2022-04-10 17:24:59 -07:00
Rohan Kumar
e63e856c9a
Typo, mention problematic Immersive Reader css 2022-04-09 12:22:51 -07:00
Rohan Kumar
a3b8eb87b7
Add image of hidden search matches, wrapping fixes
- Add ugly screenshot of reddit redesign
- Fix wrapping on narrow viewports
2022-04-08 21:01:08 -07:00
Rohan Kumar
91eef19a8e
Add "in-page search" sec, other additions
- New section on in-page search
- Mention most alt search indexes don't support JS
- Background images bad
- More sample tests: word processors that support HTML
2022-04-08 17:18:45 -07:00
Rohan Kumar
9ba563d868
Rephrasings, inc. more clear link names
Minor rephrasings of some stuff, partially to improve link names (a11y)
2022-04-07 15:42:09 -07:00
Rohan Kumar
069dca0a06
New subsection on cache, semantic code snippets
Add "Don't count on the cache" under the "Optimal loading" section.

Some semantics for code snippets, including switching some from <code>
to <samp>.
2022-04-06 23:42:10 -07:00
Rohan Kumar
aab9356cf2
New section on spacing, other additions
- Mention checking privacy policies for 3p content
- Elaborate on more mainstream examples of color overrides
- Link to CSS WG docs instead of MDN for prefers-contrast since they're
  more detailed.
- Specify that I'm just removing margins in <figure> elements for
  quotations.
2022-04-06 17:49:19 -07:00
Rohan Kumar
27ccfaca7b
Add info on non-breaing spaces. 2022-04-04 19:17:52 -07:00
Rohan Kumar
2f960ca7ec
Better linking, mention DPUB-ARIA, more infscroll
- Annotate links to PDFs and JS-mandatory content
- Add note on dpub-aria to the reading-mode section
- Fix a bad link
2022-04-04 18:11:50 -07:00
Rohan Kumar
8e2e1f9cc5
More information on image transcripts
- Add quote describing how blind readers struggle to find non-semantic context
- Mention that longdesc is deprecated by simple hyperlinks. Describe an alternative.
- Transcripts are necessary for machine translation
- Improve alt-text used alongside an image transcript
2022-04-04 15:46:04 -07:00
Rohan Kumar
f3b2c3ffa6
Rephrasing: better + inclusive use of prepositions
Follow
https://www.gov.uk/government/publications/inclusive-communication/inclusive-language-words-to-use-and-avoid-when-writing-about-disability
to mention disabilities directly with adjectives rather than
prepositions.

Fix my over-use of "with" by using more appropriate prepositions.
2022-04-03 21:10:16 -07:00
Rohan Kumar
b1e7b65e02
Re-organize and clarify some things
- Re-phrase a line referring to a previous section; after some
  re-arrangements, that section is no longer a "previous" section.
- Replace spatial terminology ("bottom") with sequential terminology
  ("end")
- Add note on font enumeration without the Font Access API
- Acknowledge testing in grayscale but emphasize that it isn't enough.
- Move defense of link underlines to just after the section on custom
  colors, since it's more relevant to it.
- Add xkcd image into the page instead of just linking, since the linked
  page content is an image that doesn't include a transcript or
  descriptive alt-text.
- Trivial rephrasings
2022-04-03 19:34:45 -07:00
Rohan Kumar
e5b0963d4f
Typos 2022-04-03 19:18:33 -07:00
Rohan Kumar
05a71fec3d
More accessible article layout
- Make sure that headings don't have the same name as any links, to
  avoid creating links with similar names but different purposes
- Remove useless <aside> elements that wrap landmarks.
- Move TOC down a bit, after the intro.
2022-04-03 16:03:22 -07:00
Rohan Kumar
cef17cef0f
Expand image optimization section
- Elaborate on each image optimization tool
- Mention using GNU Parallel or squoosh.app
- Describe libavif with libaom+butteraugli and the YUV400 color space
- Why you should avoid srcsets based on viewport or display properties
- Fix code snippet for <picture> sample

Threw in some formatting and very minor phrasing fixes.
2022-04-03 13:48:34 -07:00
Rohan Kumar
ec80c3b000
Reflect this site's CSS improvements
See parent commit 60bf9110b9
Link: 60bf9110b9
2022-04-03 23:55:04 -07:00
Rohan Kumar
85523c90e5
Add info to color contrast and img optim
- Elaborate on how contrast needs to be maintained under different
  conditions like different screens, gamma adjustments, and color
  blindnesses
- Add my skepticism about progressive decoding.
2022-04-02 17:46:35 -07:00
Rohan Kumar
1ecf099145
Elaborate on motivation in intro 2022-04-01 18:59:21 -07:00
Rohan Kumar
cd009197a9
Elaborate on speculative preloading with note on analytics 2022-03-31 18:42:50 -07:00
Rohan Kumar
9fbf3f5138
Mention BBR congestion, streamline quotation citations. 2022-03-31 18:42:13 -07:00
Rohan Kumar
6bb659b2cf
Add TCP-aware opim, reorg
Describe round-trip aware optimization

Move some sections around to flow better.
2022-03-31 18:34:53 -07:00
Rohan Kumar
eb8bb710fc
Layout-shift-avoidance, mention zoom and size-adjustment.
- Describe how to calculate intrinsic side to avoid layout-shifts caused
  by CSS Containment
- Mention use of relative font sizes.
- Replace incorrect use of the word "inline" when describing images.
2022-03-31 18:09:40 -07:00
Rohan Kumar
a5b8b5acc9
Introduce css containment for deferring rendering
As alternative to lazy loading.
2022-03-31 17:48:58 -07:00
Rohan Kumar
c21a21ea99
Add acknowledgements, note on justified text
- Say justified alignment is bad
- Add acknowledgements to the further-reading section
- Formatting in intro
2022-03-30 22:12:16 -07:00
Rohan Kumar
5a4510765c
Elaborate on dark themes, cite WAI, cleanup
- Cite WAI more
- Mention merit of dark image variants
- Fix shitty ARIA
- use a <dl> list in one place.
- Describe use of `prefers-contrast: less`
- Narrow screen fixes.
2022-03-30 17:47:13 -07:00
Rohan Kumar
cd622cc85c
Clean up introduction and some phrasing.
- Give the intro a heading
- Make the preface an <aside> with a "doc-preface" DPUB-ARIA role
- Move the TOC before the intro
- Give the TOC a "doc-toc" DPUB-ARIA role
- Provide a TLDR
2022-03-29 19:43:07 -07:00
Rohan Kumar
43a4a6bb1a
Clarify some details about figures, other deets
- Mention that captions can be repositioned relative to figure content
- Edit my captions in light of that fact
- Add unformatted/plain-text agents to "future work"
- Lowercase a heading
2022-03-29 18:29:07 -07:00
Rohan Kumar
689b6bcc3a
New "Beyond alt-text" section, short viewports
Describe how to best include images and figures in a way that flows well
and is accessible to both sighted and non-sighted users.

Describe how sticky elements can be a usability hazard on short
viewports

- Add changefreq
- Clean up structured data for quotations
- Add more sample unorthodox tests

TODO: dark image variant of image in new "Beyond alt-text" section
2022-03-29 18:26:22 -07:00
Rohan Kumar
3a639537b3
Info about csp, halation
- Mention pitfalls of a <meta>-based CSP
- Describe halation a bit more, with an image.
2022-03-28 18:11:55 -07:00
Rohan Kumar
741dc6ed81
Add some info from Fedi and elsewhere
Fediverse users gave good feedback, and I found other info elsewhere.

- Avoid the system-ui font
- Re-clarify article scope (textual websites)
- Mention dynamic content injection
- Describe saving pages offline
- Mention pictures of text versus narrow viewports
- Remove unnecessary info on why i removed margins from figures
- Mention indentation in preformatted code
- Describe appropriate size ranges for inlining images.
- Mention possibility of reporting issues in reading mode section
- Add info on screen readers changing kb nav to "future updates"
- Add info on special keyboard-driven browsers to "future updates"
- Describe best-practices for alt-text, figcaptions, and briefly
  mention transcripts.
- Add a conclusion

Also fix anchors for headings containing HTML entities and some minor
fixes throughout.
2022-03-28 14:56:42 -07:00
Rohan Kumar
cd730698c8
s/most/half/ 2022-03-27 21:04:53 -07:00
Rohan Kumar
312ff228db
Mention and accomodate dyscalculia 2022-03-27 17:32:52 -07:00
Rohan Kumar
d2757f99c5
Details for anti-pagination and Tor a11y
- Pagination hurts searchability
- Tor users can't change media queries, so make the site accessible by
  default.
2022-03-27 17:30:21 -07:00
Rohan Kumar
ccce5c94a9
Inline nav links in print media 2022-03-27 17:24:07 -07:00
Rohan Kumar
6b67668291
Mention inclusive design, tap targets 2022-03-27 17:24:05 -07:00
Rohan Kumar
b0d3189c84
Improve printer-friendliness
Make max line widths only apply to the "screen" media type.
2022-03-27 17:21:13 -07:00
Rohan Kumar
cb0e8a4be9
Mention some suggestions from Fedi
Future updates: add braille displays & clear lang.
Testing: mention zoom levels and caret navigation.
2022-03-27 17:19:13 -07:00
Rohan Kumar
6048e66d1b
Add info on line length
Introduce a bit more nuance into the WCAG's requirements.
2022-03-27 11:18:25 -07:00
Rohan Kumar
3df423336c
Balance indentation's problems against benefits
Describe how they help users with hand tremors avoid selecting
interactive elements.
2022-03-27 11:16:48 -07:00
Rohan Kumar
5e93b9d11a
More additions
- Mention calculation of font metrics
- Add related issues to lazy loading
- Justify importance of dark themes
- Trivial formatting tweak in a <pre> block
- Mention OCSP stapling, 0-RTT
- Spelling/grammar help machine translation
- Add more details to "future work" section
- Acknowledge Axess Lab
2022-03-26 16:44:57 -07:00
Rohan Kumar
6a42905002
Typos and fixes
- Hyperlink "h-card" on the Web version of the page
- Forgot to pluralize a word
- s/phrasing/non-phrasing/
2022-03-26 16:39:24 -07:00
Rohan Kumar
ceb19c9308
Re-org web best practices article
- Add a TOC
- Remove the flamebait bulleted list at the top
- Move link underlines section up by one
- Some formatting
2022-03-26 16:35:19 -07:00
Rohan Kumar
422369ea4f
Fix escaped tags in <pre>, remove redundancy 2022-03-26 12:31:51 -07:00
Rohan Kumar
53f4aedf45
info for sec-tests, switch-access, keybot. 2022-03-26 12:31:48 -07:00
Rohan Kumar
a1a33e14ea
Add machine translation notes, proofread 2022-03-25 17:44:10 -07:00
Rohan Kumar
6b402b6ec1
Another typo, formatting 2022-03-20 16:25:46 -07:00
Rohan Kumar
4607ec2d95
Better example of bad custom colors
Add a better screenshot showcasing bad custom colors. Also give it a
figcaption.

The figcaption meant that I had to revise a statement later down when I
said I don't use figcaptions for images.
2022-03-20 16:09:01 -07:00
Rohan Kumar
013d382f27
Mention "skip links" 2022-03-19 13:40:08 -07:00
Rohan Kumar
1524b40c4a
Mention compatible SVG implementations 2022-03-17 23:37:22 -07:00
Rohan Kumar
648771480e
Describe SVG optimization, rephrasings 2022-03-17 23:34:59 -07:00
Rohan Kumar
9098dd5d9a
Describe dark image variants and optimized loading 2022-03-17 23:31:31 -07:00
Rohan Kumar
208b0fe43e
Add info on non-browsers and TLS terminators 2022-03-16 17:09:21 -07:00
Rohan Kumar
cd124986ab
Add recommendations for narrow viewports
These recommendations also included stuff for <figure> elements; in the
spirit of dogfooding, I used some <figure> elements where appropriate
elsewhere in the page.
2022-03-16 17:08:43 -07:00
Rohan Kumar
66833dc93e
Improve narrow screen compat
- Replace long <code> snippets
- Add some soft hyphens.
- Make one image of text look better on a narrow viewport.
2022-03-16 16:52:03 -07:00
Rohan Kumar
988d278b14
Formatting, info on contrast+halation, Tor notes
- Describe how contrast overkill in dark mode can cause halation
- Add more info on compatibility with the Tor browser
- Mention the rationale for a custom image border color
- More accurately note how in addition to fontconfig mappings, I also
  set my browser preferred font to "sans-serif".
- Clarify that underlines help identify both the beginnings and ends of
  hyperlinks.
- Formatting/phrasing fixes, esp in Gemtext.
2022-03-16 16:49:03 -07:00
Rohan Kumar
5575e2149d
Clarify use of WCAG, update sample CSP 2022-03-16 16:42:31 -07:00
Rohan Kumar
12a6c098f7
Add a11y justifications with citations
Cite the WCAG's supplementary techniques as justification for some
recommendations.
2022-03-16 16:40:04 -07:00
Rohan Kumar
857fc53679
Add info on TLS and a11y
- Recommend reading the WCAG and supplementary information on WCAG
  techniques
- Recommend against broken TLS ciphers.
2022-03-15 17:23:57 -07:00
Rohan Kumar
0aefb5d083
Add info on lazy-loading, rephrasings. 2022-03-14 13:50:01 -07:00
Rohan Kumar
86b4012ec0
Mention Brutalist Web Design 2022-03-04 13:55:35 -08:00
Rohan Kumar
03e45ae848
Mention visited link color 2022-02-28 02:30:48 -08:00
Rohan Kumar
892c27516a
Link to WCAG 2.2 instead of 2.0 2022-02-26 01:54:26 -08:00
Rohan Kumar
29ae0f3115
Web practices: link underlines are good. 2022-02-24 23:00:49 -08:00
Rohan Kumar
c03af0eacc
Use new "indieweb-person" shortcode
This should reduce a lot of repetition. Supports first/last names,
nicknames, generic names that don't conform to first/last norms, and
has basic support for affiliated organizations.

Also snuck in more info on website colors to the web best practices
article, inc. a link to Chris' Wiki.
2022-02-19 12:48:53 -08:00
Rohan Kumar
65ad38d559
Fix broken links/anchors 2022-02-07 21:26:03 -08:00
Rohan Kumar
0d2d25b124
Fix: use HTTPS links where possible 2021-08-16 17:48:36 -07:00
Rohan Kumar
f6413346af
Web best practices: add "security" section
Add information on restricting site functionality.

Add some details on accomodating Tor users.
2021-07-31 17:36:18 -07:00
Rohan Kumar
02dc7822ec
Web best practices: dark themes: Mention OLEDs
OLED displays use less energy when displaying darker colors.
2021-07-06 09:21:47 -07:00
Rohan Kumar
7ccf84f031
Web best practices: async decode + fingerprinting
- Mention image async decoding
- Describe how width-selector use can enable JS-free viewport
  fingerprinting
2021-07-02 20:37:24 -07:00
Rohan Kumar
da87f981a2
Web best practices: link to two other places
Link to the XHTML Club and an article by Bill Dietrich.
2021-06-27 17:37:29 -07:00
Rohan Kumar
aae653056d
Web best practices: link to ECT 2021-06-27 17:02:45 -07:00
Rohan Kumar
5511b354c4
Web best practices: mention Tor users
Simple sites should work well with the Tor Browser.
2021-06-27 15:26:01 -07:00
Rohan Kumar
8607612e0a
Add recommendations for dark themes 2021-06-13 18:28:15 -07:00
Rohan Kumar
58b64c9a95
Mention ELinks, Netrik
They're not very actively maintained, but they're still good for
testing.
2021-03-15 11:19:50 -07:00
Rohan Kumar
2030e221d7
Add more details about image compression
- Include a sample command
- Describe my approach to deciding on the level of compression/cropping
2021-02-28 13:33:24 -08:00
Rohan Kumar
7efe60a6bc
Stylistic fixes (minor)
Nothing new, just re-phrasing and capitalization.
2021-02-28 12:52:48 -08:00
Rohan Kumar
fe12f0dc32
Add link to avifenc 2021-02-28 12:40:26 -08:00
Rohan Kumar
13db509ea3
Add idea for website testing: site translation 2021-02-28 12:34:59 -08:00
Rohan Kumar
36a95f894a
Update preferred approach to image processing
- Include AVIF
- Include dark/light variants if applicable
2021-01-28 13:10:40 -08:00
Rohan Kumar
790f7f70ef
Article update: mention brotli
Brotli support is more prevalent than zstd
2021-01-28 12:20:23 -08:00
Rohan Kumar
2083f1aed5
Article update: include advice on avatar image
Include info on using an avatar image/profile photo without
significantly increasing the footprint of a website, by re-using the
favicon image.
2020-12-29 22:34:35 -08:00
Rohan Kumar
8c63605d1a
Add 10 KB Club to web best practices article 2020-12-28 15:33:18 -08:00
Rohan Kumar
8fdee5d244
Include layout in web best practices
Article update: decribe good layout in the website best practices
article.
2020-12-21 16:41:46 -08:00
Rohan Kumar
6331840d95
Fix bad link
Sourcehut updated its per-object log URLs
2020-12-20 12:57:59 -08:00
rohan kumar
3368f8fea9
Update web best practices article: add testing
- Add information about testing edge cases
- Re-word some long sentences
2020-12-16 18:53:24 -08:00
rohan kumar
bab75dcebc
Clarify HTTP Observatory scores 2020-11-30 12:09:22 -08:00
rohan kumar
4907336d96
Add bit about alt-text, clarify page size 2020-11-30 12:04:21 -08:00
rohan kumar
46512c9046
Update with feedback on page size
Added the Web Bloat Size Calculator and a snippet on how people on
trains experience a connection speed drops.

Thanks, u/Snapstromegon from Reddit!
2020-11-27 10:25:03 -08:00
rohan kumar
8e38c66243
Add pngquant to image compression section
Thanks, arnt and vbernat!
2020-11-25 21:58:37 -08:00
rohan kumar
1ba46835be
Clarification on HTTP/2
Thanks, reezer!
2020-11-25 16:36:40 -08:00
rohan kumar
b9207d17ea
Add max line length to web best practices article
Thanks, u/_listless
2020-11-24 15:32:38 -08:00
rohan kumar
103a860528
Link to article changelog 2020-11-24 14:24:12 -08:00
rohan kumar
d24cdfb423
Link to MDN docs on CSS @media queries 2020-11-24 14:19:20 -08:00
rohan kumar
a1f517c61a
Clarify that branding isn't evil 2020-11-24 10:58:05 -08:00
rohan kumar
2d43a0ddc4
Clarify a snippet on overriding stylesheets
We shouldn't require users to override stylesheets, but we should expect
it.
2020-11-24 10:53:22 -08:00
rohan kumar
8f47970379
More info about fingerprinting via fonts 2020-11-24 04:54:13 -08:00
rohan kumar
f1a56e9ec4
Explain why global stylesheet overrides are bad 2020-11-24 03:50:06 -08:00
rohan kumar
79b91972e7
Add more info on image optimization 2020-11-24 03:18:03 -08:00
rohan kumar
7ec5eab8eb
Clarify the controversial statement on font choice
The lobste.rs discussion at
https://lobste.rs/s/akcw1m/opinionated_list_best_practices_for
generated a lot of feedback about fonts, so I thought I'd explain a bit
more.
2020-11-24 02:43:59 -08:00