If you are a web developer who is not hugely familiar with the topic of web accessibility, your first encounter with it may be confusing. I’ve been there. It sucks to be presented with a list of changes to make your finely-crafted code more accessible, it can feel like scope creep, “someone else’s job”, or a critique of your work. The goal of this article is to give you tools – not more work.
Getting closer to finishing the rewrite of the Pallets website, with a new design and up-to-date information. Got a burst of energy when I found Pico CSS, was procrastinating for ages not wanting to deal with CSS frameworks. With Pico you write basic HTML and it all Just Works. https://picocss.com/#CSS
If you've ever learned Mandarin Chinese, you'll know about "measure words". They're the sort of thing that trip up all new learners of the language. While 个 (gè) can be used as a generic measure word, using it everywhere makes you sound like an idiot (according to my old teacher). So you learn to use 个 for people, 包 for packets, and 根 for things which are long and thin.
English has a similar construct. You might say "one bunch of flowers" or "two glasses of wine" or "three bowls of soup".
You could say "one thing of flowers" or "two things of wines" or "three things of soups" but the measure words give much needed context and semantics.
If you get it wrong and said to a publican "four mugs of beer please" they'd probably know what you meant but it could be a bit confusing.
And isn't that very much like HTML?
The language of the web gives us semantic elements for our markup. When you use <button> to draw a button on screen, the browser knows exactly what to expect, how to display the content, and what it should do. A search engine can extract meaning from the page. Users of assistive technology can be told that they're on a button. Everything is lovely!
You don't have to do that, of course. You could use <div class="button" onclick="something()"> - with enough CSS and JS you'll have something which looks and acts more-or-less like a button. But you'll lose all the semantics which make life easier for browsers, search engines, assistive technologies, and anything else that a user uses to interact with your site.
HTML has dozens of semantic elements. There's <address> for contact details, <time> for dates and times, <nav> for navigation elements.
There are two main "generic" elements. <div> for blocks of stuff, and <span> for a short run of text. I find that most modern websites over-use these elements. I want to reiterate, there's nothing illegal or immoral about doing so; the web police aren't going to take you to gaol. I personally think that writing semantic HTML is easier to maintain, easier to understand, easier for accessibility, and easier for automatically extracting meaning.
So, for a while now, I've been slowly working on my blog's theme in order to remove as many <div>s and <span>s as possible. I started out with a couple of hundred of each. I'm now down to about 35 of each - depending on which page you're on.
I use Schema.org microdata in my HTML. For example, when a user has left a comment, I might indicate their name by using <span itemprop="name">Juliet Capulet</span>
Or, in the heading of a post I might use
This post has<span itemprop="https://schema.org/commentCount">3</span> comments and is<span itemprop="https://schema.org/wordCount">400</span> words long
Because there's no HTML element like <commentcount> or <wordcount>, I have to wrap those numbers in something if I want to indicate the semantic content behind them. I could "cheat" and use something like <var> or <output> but they're as semantically irrelevant as <span>.
I have a large calendar at the bottom of every page showing my archives. Each calendar is its own "thing" and so is wrapped in a <div> which controls its style and layout. That group of calendars is also its own thing - because .
They're inside a widget - which itself is inside of an <aside>.
I was using a <table> layout for them, but it wasn't flexible and it ballooned the size of the DOM. Perhaps I should treat them as lists? At least then they'd be easier to skip?
I'm going to continue hacking away out of a sense of masochism. Perhaps the only person who will notice (other than me) is someone accidentally viewing the source of this page.
But I think it's worth it. There's that story about how the original Mac circuit board was laid out so that, despite never being seen by normal people, it was part of the overall æsthetic. And I think that's what I'm going for - something that I can be satisfied with.
@feditips Is there a way to have a separate feed that's JUST the hashtags I follow, and one that's JUST the people accounts I follow? I love # bloomscrolling and such but I'm worried I'll miss toots from friends and such. Thanks in advance, got a ton of value from you already 😍
I've used the same UI since I started an account here, but apparently it's not the basic or standard one. So I don't really know what that normal standard is.
Anyway, on PC I have a pinned column (as mentioned above by Fedi Tips) that includes I think 5 #hashtags that populate the feed. The other column shares output based on your toggled selection, which could be "home", or the other options.
One of those is "followed hashtags" which opens a list of your saved #tags. You get a pure (single tag) stream for each as you click them. Basically, it's like a 'saved searches' function, except for a network that has no #semantic search. 🤔
@mastodonmigration
The lack of medicine / medical sciences as an academic specialty highlights why sometimes I find Mastodon so lonely as a platform for academia!