Post AHsvRqaBRpjpaHTUEy by Seirdy@pleroma.envs.net
(DIR) More posts by Seirdy@pleroma.envs.net
(DIR) Post #AHpWxOa017tNfmSHpY by Seirdy@pleroma.envs.net
2022-03-27T06:48:01.062834Z
2 likes, 0 repeats
I made my web best practices article about twice as big as before: https://seirdy.one/2020/11/23/website-best-practices.htmlExcerpt:> My primary focus is supporting *underrepresented ways to read a page*. Not all users load a page in a common web-browser and navigate effortlessly with their eyes and hands. Authors often neglect people who read through accessibility tools, tiny viewports, machine translators, “reading mode” implementations, the Tor network, printouts, hostile networks, and uncommon browsers.Cross-browser compatibility is easy. Supporting these niches while sticking to open standards is as hard as you can make it. WCAG compliance is necessary but insufficient.Feedback welcome, especially from anyone with an accessibility background or with special needs! I hope to expand the article with technical approaches to accommodating neuro-atypical people soon, including recent WCAG discussions on clarifying sarcasm, idioms, and jokes.I'd also like to hear about other underrepresented ways to read, or if anything I wrote impacted how you design pages.
(DIR) Post #AHpdg13WvLFRTIvaxk by easrng@cybre.space
2022-03-27T07:19:08Z
0 likes, 0 repeats
@Seirdy Checking your site in Opera Mini (run it in microemulator) is a good idea, it's pretty common on feature phones, and while it's a privacy shitshow it does do what it's supposed to (load pages without using much data).
(DIR) Post #AHpdg1WFCaDUuMMWie by Seirdy@pleroma.envs.net
2022-03-27T08:03:18.722399Z
0 likes, 0 repeats
@easrng Ooh yeah, especially since Mini can render server-side using the Presto engine. I might not specifically recommend installing it, but maybe using it via a service like WebPageTest or equivalent.
(DIR) Post #AHqdk9QtumNdlin79U by Seirdy@pleroma.envs.net
2022-03-27T19:38:47.844999Z
0 likes, 0 repeats
Update: just added a subsection on "line length" at the end of the *Layout* section, and on "when indentation helps" at the end of the *Narrow Viewports* section (indentation = negative space = safe area to accidentally click while scrolling for people with hand tremors. useful for lists of links).
(DIR) Post #AHqp3jOPXY8gIIAKJ6 by Seirdy@pleroma.envs.net
2022-03-27T21:45:34.009575Z
1 likes, 2 repeats
What are some underrepresented ways to read webpages that webdevs/authors frequently ignore? Some I covered, in no particular order:- Screen readers- Switch access- Content extraction (e.g. "Reader Mode")- Low-bandwidth connections- Unreliable/lossy connections- Very narrow viewports (much narrower than a phablet)- Printouts- Textual browsers- Uncommon graphical browsers- through the Tor Browser (separate from "uncommon browsers" bc of how "safest" mode is often incompatible with progressive enhancement and graceful degradation)- Non-default color palettes- Hostile networks- Aggressive content blocking (e.g. blocking all 3p content, frames, images, and cookies)- Non-default fonts, esp. for a11y needs- Stylesheet removal, alteration, or replacement- Frequent window-resizers (e.g. users of tiled-window setups)- machine translatorsPlease share any I missed. Boosts welcome for visibility: the more people who share, the better.
(DIR) Post #AHqsDuGqFc7sn1AWem by montagsoup@aleph.land
2022-03-27T22:15:50Z
1 likes, 0 repeats
@Seirdy Here are two I've run into at work:Zoomed in with the browser's builtin zoom feature.Old versions of browsers. Sometimes people can't update due to weird company policies or because they need to use old websites that no longer work in newer versions but also can't be updated.
(DIR) Post #AHqseH0OLXSKpT2yVk by Seirdy@pleroma.envs.net
2022-03-27T22:25:48.548623Z
0 likes, 0 repeats
@montagsoup Zoom! How'd I miss that?The article mentioned it in passing, but I should elaborate more. Some pages have some properties "fixed" regardless of zoom level; this should be avoided.Yes, I should mention old browser versions. That was part of my rationale for choosing "em" instead of "rem" units in my CSS.
(DIR) Post #AHqtDQZqkZXieROYng by binarycat@fedi.9til.de
2022-03-27T22:21:31Z
0 likes, 0 repeats
@Seirdy i mean, reading the page source is one.often i `curl` a page and am met with huge blobs of unreadable metadata and/or scripts.slapping rel="noopener noreferer nofollow" on every link certainly doesn't help.
(DIR) Post #AHqtDR52saUqDBzTQO by Seirdy@pleroma.envs.net
2022-03-27T22:32:07.170893Z
0 likes, 0 repeats
@binarycat On one hand, I get you; I do this quite frequently myself.On the other hand, some of this metadata actually provides tangible benefits to other users. For instance, metadata standards like microformats and microdata improve content extraction (reader modes), machine translation, etc. ARIA, used selectively and appropriately, helps users of screenreaders and braille-displays. Soft hyphens and word break hints help users of very narrow viewports. The list goes on.Yet all of this will “clutter” the raw HTML.I recommend using w3m or lynx with the -dump flag, perhaps in conjunction with rdrview, for viewing a page textually.
(DIR) Post #AHqtvk6RW0pjx0lsTw by alcinnz@floss.social
2022-03-27T22:31:30Z
0 likes, 0 repeats
@Seirdy It's not *that* underrepresented but still not considered enough by webdevs: keyboard-exclusive interaction.
(DIR) Post #AHqtvkWfwTojGN2pN2 by Seirdy@pleroma.envs.net
2022-03-27T22:40:09.557770Z
0 likes, 0 repeats
@alcinnz I kinda hoped that would be implied by “switch access” and “screenreaders”; making a page work well with both of those should automatically make it keyboard navigable too.I might be wrong though. Tab-navigation was mentioned in the article, as was the utility (or lack thereof) of “skip links”.I should explicitly mention caret-based navigation, though. I’ll tack it onto the “Future Developments” section later today.This also brings up another point: some pages use JS to add their own keyboard shortcuts. One WCAG requirement is making it simple to turn these off, since they may conflict with the user’s own keybinds.I wonder if I should mention keyboard-driven browsers (Luakit, Tridactyl, Qutebrowser, visurf, etc). Catering specifically to these might cross the line from standards-compliance to adopting non-standard quirks for compatibility; maybe authors should first evaluate if problems are bugs in the browser or in the page. Hmm….
(DIR) Post #AHqtwIRBrNdERCjvXc by meena@cathode.church
2022-03-27T22:34:20Z
1 likes, 0 repeats
@Seirdy good grief i do like at least a quarter of those on a regular basis
(DIR) Post #AHquSTE3HlW5AAw6XQ by alcinnz@floss.social
2022-03-27T22:44:48Z
1 likes, 0 repeats
@Seirdy And Haphaestus will be a caret browser...
(DIR) Post #AHqxDZ2TgnLWiB6eG0 by binarycat@fedi.9til.de
2022-03-27T23:09:01Z
0 likes, 0 repeats
@Seirdyyeah, obviously other stuff should come first.but maybe don't embed your icon as a data: url...
(DIR) Post #AHqxDZarcwqsQpC6r2 by Seirdy@pleroma.envs.net
2022-03-27T23:17:00.418469Z
0 likes, 0 repeats
@binarycat The PNG file is under 150 bytes. Shouldn't be over a line or two in your terminal as a data URI. Shaves off a request.The headers for checking if the cached icon is fresh or stale are bigger than the icon itself.If the filesize was bigger I wouldn't have inlined it.
(DIR) Post #AHqxlAOpnvua8iaPnU by binarycat@fedi.9til.de
2022-03-27T23:22:52Z
1 likes, 0 repeats
@Seirdy oh sorry, i didn't mean you specifically, i just meant like, in general, don't overuse data: URLs
(DIR) Post #AHqxwaDIAZMNNwdC6K by Seirdy@pleroma.envs.net
2022-03-27T23:25:08.639406Z
0 likes, 0 repeats
@binarycat Oh sure. maybe I should make that more explicit.inline blocking resources under 1kb; inline data URLs under...500 bytes? the size of your HTTP headers during cache validation? The smaller of the two? IDK what a good threshold is...
(DIR) Post #AHqzKhYUcjev3mc0sy by raphael@post.lurk.org
2022-03-27T23:33:01Z
0 likes, 0 repeats
@Seirdy - web to print / PDF export (Ctrl+p)- Webrecorder (aka Conifer) record- screenshot- saved HTML (Ctrl+s)
(DIR) Post #AHqzKi4kgnSmfphmAS by Seirdy@pleroma.envs.net
2022-03-27T23:40:40.533787Z
0 likes, 0 repeats
@raphael I briefly covered printouts (make sure dark image variants are only used for "screen"), but perhaps I should mention PDF exports. I should also mention that max line lengths should be more generous when printing, to save paper.Ooh, screenshots are an area I didn't think to include, but I do it often on mobile for my own future reference. I should talk about how there's a balance between using whitespace/avoiding clutter, and overdoing it to the point at which complete ideas can't fit on a phone screen. That situation prevents the taking of small, effective screenshots.Yes, saved HTML is important. I should definitely bring that up when describing when to inline and the importance of having loading "finish" predictably.
(DIR) Post #AHrFq4KpZu13xBCW1I by torresjrjr@qoto.org
2022-03-28T02:45:39Z
0 likes, 0 repeats
@binarycat @SeirdyTip (for anyone curious), you can have a kind of global noreferer like so:<meta name="referrer" content="no-referrer" />And you can also make use of <base>:<base target="_blank" />https://developer.mozilla.org/en-US/docs/Web/HTML/Element/basehttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
(DIR) Post #AHrUjbY5BrucFWm6iW by wago@zap.dog
2022-03-28T05:12:32Z
1 likes, 0 repeats
I still use !DOCTYPE instead of !doctype because of some stupid MS IE bug that used to make the page crazy if it wasn't UPPERCASE. Not sure that matters anymore but I'm still doing it anyways.
(DIR) Post #AHrUkF6q6Zt4wcKuo4 by Seirdy@pleroma.envs.net
2022-03-28T05:32:41.651447Z
0 likes, 0 repeats
@wago Thanks, I should look into this
(DIR) Post #AHrV40Zvq823faMwj2 by Seirdy@pleroma.envs.net
2022-03-28T05:36:15.089351Z
0 likes, 0 repeats
@torresjrjr @binarycat Good tip for authors who can't set HTTP headers. I currently use an HTTP header to set the refpol and only override it when necessary (e.g., certain webring implementations expect a referrer).I'd recommend against over-using the "_blank" target, though. It might make sense when a page contains unsaved changes or playing media, but it's otherwise unnecessary. Users who want to open a link in a new tab will do so on their own.
(DIR) Post #AHrVR1DFeEmwITjTzU by Seirdy@pleroma.envs.net
2022-03-28T05:40:24.606656Z
0 likes, 0 repeats
@wago In SGML and derivatives (including XHTML and Polygot Markup), it must be uppercase. In HTML5, lowercase is fine.Internet Explorer 11 seems to be able to handle my site's lowercase doctype.
(DIR) Post #AHrVpygqAGeniETSO8 by Seirdy@pleroma.envs.net
2022-03-28T05:44:55.285251Z
0 likes, 0 repeats
@wago I think I found what you're talking about: IE7 has a bug in which webfonts fail to render with a lowercase doctype. https://stackoverflow.com/questions/9265532/ie-and-html5-doctype-issues/21166601#21166601Honestly I already disable webfonts and recommend against their use, and pages should work well without them, so I'm not too concerned.
(DIR) Post #AHsKtTspjw6OzKVmRE by draco@wandering.shop
2022-03-28T09:43:37Z
1 likes, 0 repeats
@Seirdy reading via RSS feed?I guess a lot of feed readers extract the text and replace the style sheet; that's why I want to use them again: reading without optical distraction.
(DIR) Post #AHsLB9fbdCkHVgkgz2 by mallaidh@cybre.space
2022-03-28T12:31:34Z
1 likes, 0 repeats
@Seirdy One particular feature is Firefox's ability to enforce a minimum font size, which tends to occasionally mangle small navigation text. Kinda falls under non-default fonts and stylesheet alteration, but it's a built-in browser feature. And a great one at that!
(DIR) Post #AHsLBOzIgGPb1758GO by glitchyxalpaca@todon.eu
2022-03-28T09:59:35Z
1 likes, 0 repeats
@draco @Seirdy the style sheet, ads, popups... they're great, I prefer RSS readers to social media news feeds or checking websites directlyI don't know if reader view in firefox should be considered in that case too, but tools like Pocket/Instapaper/Wallabag are in use for many people. For me especially combined with RSS readers or just with some carefully curated social media feeds.
(DIR) Post #AHsLuVjOSIcGxk9QI4 by IceWolf@meow.social
2022-03-28T15:27:49Z
1 likes, 0 repeats
@binarycat @Seirdy And obfuscation!We try to make sure all our HTML is pretty (also, what you see is what we write, comments and everything). And heck, my headmate @Ylfingr took care to make his CWs even work for reading the page source.
(DIR) Post #AHsYe6syMTU0g08pNY by patterfloof@meow.social
2022-03-28T16:53:06Z
1 likes, 0 repeats
@Seirdy IDK but can I add: don't mess with my browser's keybindings please
(DIR) Post #AHsj8b0tuVCmLU1cwa by m2m@indieweb.social
2022-03-28T19:34:22Z
1 likes, 0 repeats
@Seirdy such a brilliant article, thank you. Besides being in the process of removing all my blanks (as in target), I've never thought about lazy loading being an issue. Which now looks like my fault, since I have a website which uses images only when strictly necessary.I was thinking about leaving lazy loading for photogalleries though. I have an 'About' page with a small slideshow at the bottom, I'd avoid having all visitors to download the photos if it's only 'decorative'.
(DIR) Post #AHsj8bZdpKzi5EHN5s by Seirdy@pleroma.envs.net
2022-03-28T19:48:34.239524Z
0 likes, 0 repeats
@m2m The article was tailored towards text content with the occasional necessary image. Photo galleries should probably use lazy loading for most images.Maybe I should cite that as a counter-example.
(DIR) Post #AHsjAQ0nmjGintqdyi by Seirdy@pleroma.envs.net
2022-03-28T19:49:00.344608Z
0 likes, 0 repeats
@patterfloof Thanks, I'll add that later today.
(DIR) Post #AHsqfZsppf7S4lvVYW by haloedrain@toot.cafe
2022-03-28T20:25:28Z
1 likes, 1 repeats
@Seirdy @alcinnz fun fact I learned recently, screen readers add in extra keyboard behavior and break others, so if you want to be sure you have to test keyboard interactions both with and without the screen reader
(DIR) Post #AHsqjHHCxDgPWg5hq4 by Seirdy@pleroma.envs.net
2022-03-28T21:13:44.575351Z
0 likes, 0 repeats
@haloedrain @alcinnz I should mention this; will add it to the "future updates" section until I've researched it more.
(DIR) Post #AHsvMhkmqXfwkmywym by Seirdy@pleroma.envs.net
2022-03-28T22:05:40.075410Z
0 likes, 0 repeats
Just updated the page during my lunch break, much of which incorporates tons of awesome feedback from Fedi. Commit message excerpt:- Avoid the system-ui font- Re-clarify article scope (textual websites) in the lazy-loading section- 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 keyboard 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 conclusionAlso fix anchors for headings containing HTML entities and some minor fixes throughout.(no, commits on my website are not atomic. I bundle tons of changes at once all the time :P)
(DIR) Post #AHsvNwforOSDJgFZQW by haloedrain@toot.cafe
2022-03-28T21:26:57Z
1 likes, 0 repeats
@Seirdy would you like examples?
(DIR) Post #AHsvNxGKfdf38vKjL6 by Seirdy@pleroma.envs.net
2022-03-28T22:05:54.074805Z
0 likes, 0 repeats
@haloedrain Yes please!
(DIR) Post #AHsvRq5LIV4I2d2rAW by haloedrain@toot.cafe
2022-03-28T21:31:56Z
0 likes, 0 repeats
@Seirdy it’s Windows-specific, but high contrast mode is a type of non-default palette that has its own specific quirks that could be worth pointing out
(DIR) Post #AHsvRqaBRpjpaHTUEy by Seirdy@pleroma.envs.net
2022-03-28T22:06:36.428519Z
0 likes, 0 repeats
@haloedrain Yeah I should mention forced colors
(DIR) Post #AHsvjdfeC0UYkdVvOK by Seirdy@pleroma.envs.net
2022-03-28T22:09:49.022035Z
0 likes, 0 repeats
@draco Do you have examples of feedreaders that extract text but replace stylesheets?
(DIR) Post #AHsvwJxYmzqdNnwKR6 by haloedrain@toot.cafe
2022-03-28T22:11:32Z
1 likes, 1 repeats
@Seirdy by default, checkboxes and radio buttons work differently: you tab through each option of a set of checkboxes, but you tab to the set of radio buttons and then use arrow keys. However, because of the way arrow keys work in screen readers, checkboxes in screen readers also work with arrows. You could theoretically end up with a checkbox group that works in a screen reader with arrows but one of the options is missing from the tab order.
(DIR) Post #AHswDYIkihO2mo4KkC by haloedrain@toot.cafe
2022-03-28T22:14:53Z
1 likes, 0 repeats
@Seirdy conversely, I had a date picker calendar that worked great with arrow keys, but because arrows have a particular meaning to the screen reader it didn’t work there. We had to add some aria grid roles to make it work.
(DIR) Post #AHtDi8yybUN0SUzYMi by draco@wandering.shop
2022-03-28T23:00:28Z
0 likes, 0 repeats
@Seirdy are there readers that don't do that? I'm used to that behavior being the default. I haven't found a reader that I like and that works on the old tablet I would like to use for that. I used some desktop RSS readers - can't remember which ones, and they might no longer be maintained - back in the early 2010s and they all replaced the css.
(DIR) Post #AHtDi9bGJ8zkNEu82a by Seirdy@pleroma.envs.net
2022-03-29T01:31:13.187803Z
0 likes, 0 repeats
@draco I thought you were referring to readers that extract the text of the linked page, not the feed text.I should mention that not all user agents display formatting.
(DIR) Post #AHtDknPZGF5QQSh6a8 by m2m@indieweb.social
2022-03-28T23:44:24Z
1 likes, 0 repeats
@Seirdy totally got your article. In fact, I built the photo gallery carousel with pure HTML and CSS for my wife's website and ultimately decided to implement it on mine as well for occasional press galleries. (I wanted also to get rid of a horrid Flickr embed). My site is prominently text-based with images when needed.
(DIR) Post #AHuvOjl4kjQZrm0RMW by daebb@maly.io
2022-03-29T18:46:50Z
1 likes, 0 repeats
@Seirdy small phones. The iPhone SE 2016 is still officially supported by Apple, yet not even native apps care about it or similar devices with 4-5" screen space, much less webpages. Things are often on top of each other, not visible, menus are way too large...And also, surprisingly, landscape mode on most modern phones, especially narrower ones. Menu bars literally covering up 40% of the screen space in that mode, making it very hard to navigate, is not rare.
(DIR) Post #AHvIVz8yFLC0YXbl6e by Seirdy@pleroma.envs.net
2022-03-30T01:34:28.475699Z
0 likes, 0 repeats
@daebb Landscape mode was an excellent suggestion. I updated the article with some information about that, among other things. Check the bottom of the “Narrow Screens” section to see it. Commit message:New “Beyond alt-text” section, short viewportsDescribe how to best include images and figures in a way that flows welland is accessible to both sighted and non-sighted users. Describe how sticky elements can be a usability hazard on shortviewportsAdd changefreqClean up structured data for quotationsAdd more sample unorthodox testsTODO: dark image variant of image in new “Beyond alt-text” section
(DIR) Post #AIWvaxxRg6ojmuJdY0 by Seirdy@pleroma.envs.net
2022-04-17T05:16:41.921742Z
0 likes, 0 repeats
@mallaidh I updated the post to include this; check the "zoom and font size" section. Thanks!
(DIR) Post #AIWvm7GTPpcNq1X5do by Seirdy@pleroma.envs.net
2022-04-17T05:18:42.947155Z
0 likes, 0 repeats
@daebb I expanded the coverage of narrow viewports even more; now it covers smart watches.I think I managed to get every page on my site to work on a viewport that is 150 CSS pixels wide, without triggering two-dimensional scrolling.
(DIR) Post #AIWvvye0JyUBzwF0e8 by Seirdy@pleroma.envs.net
2022-04-17T05:20:30.252156Z
0 likes, 0 repeats
@raphael I updated the post with recommendations on saving paper and ink when printing webpages, and downloading pages using browser-builtin "save as" features. I haven't yet gotten to screenshots yet.
(DIR) Post #AIWw3GAtXdluOY691k by Seirdy@pleroma.envs.net
2022-04-17T05:21:48.889711Z
0 likes, 0 repeats
@montagsoup I updated the article to explicitly mention both zoom and minimum font size adjustments. Will be adding a section on supporting old and non-mainstream browser engines.