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.
Currently writing an article about landmark elements and I didn't expect it to escalate so quickly. What takes the biggest amount of time is not the writing itself, but preparing the code, making screenshots, adapting again...
Hopefully it'll be a good resource for someone out there!
As someone who takes great care to make sure my stuffs work on all the platforms, this really breaks my heart. Also, totally unnecessary - HTML has a default control that just works so much better than this crap.
I'm currently polishing the design of https://forgoodeyesonly.eu/blog, and it's really, really fun taking the time for good* design, at least as long as ideas for improvement keep popping up.
Trying my best to respect #SemanticHTML, which sound quite a bit harder than it actually is. Spoiler: The table of contents can be collapsed without any JavaScript and without any terrible CSS hacks! 😉
To me, design is “good” when I like it, which might not be the best measure of quality. 😄
– Emphasizing text (which affects how you’d read it out loud): Now <em>that</em> is a good idea.
– Definition: A <dfn>bicycle</dfn> is a vehicle with two wheels.
– Citing names, book titles, etc.: I enjoyed <cite>His dark materials</cite>.
– Mentioning foreign-language text: He said <i lang="fr">au revoir</i>.
~100 HTML elements, including 57 unique CSS class names across 83 attributes, 30 hidden DIVs, 3 iframes, 2 external script tags, 2 inline script tags, and 1 actual <img> tag.
the <img> is inside an iframe, nested 3 (!) levels of iframes deep.
I'm building a site here and it's all default colours, meaning black text on white background. Links are the default blue (purple if clicked), and I've not prescribed any colours via CSS anywhere.
In the footer, I've got an anchor element (a link) with an abbreviation element nested inside it.
Now Firefox's automated accessibility checks throw an error here, and this is a weird one: it claims the text is blue on a purple background, and that it doesn't have enough contrast.
The way I see it, it somehow (how?) thinks there is an unclicked link on the background of a clicked link, which isn't what's happening at all... any help?
Pictured below is the piece in question. The CC link is what's being flagged. Reversing the order of the elements (nesting the anchor inside the abbreviation element) doesn't fix anything, but throws a different error (now it says blue on gray isn't enough, even though there is no gray anywhere).
Aside from this little problem, I love writing semantic #HTML so much.
Elements I've used for the first time today: abbr, q, time, aside, code
Elements I've used for the second/third/fourth time today: section, nav, footer, header, article
This stuff is awesome. I have one (1) single div in this entire page, and that's a container to contain the #CSS Grid.
This stuff is incredibly readable. I've used i elements for media names and em elements for emphasis, they're rendered identically (in italics) but the meaning is different.
And aside from that one weird glitch above, the whole thing passes Firefox #accessibility checks with flying colours (with contrasting flying colours!), there's no excess nonsense in it, and I'm reasonably confident (I'd love to get a chance to test it!) that it's gonna work well with screenreaders because of the self-explanatory, standard-conforming code.
Semantic HTML makes me as the developer happy and it makes screenreaders' jobs easier and all that without stopgaps like #ARIA.
Next pain: how to make a table that has two columns.
Instead of:
th td
th td
th td
th td
I would like:
th td th td
th td th td
And without adding sub-tables or the likes. It should, to screenreaders etc., still read the same as the above, as one table with a key column (th) and a value column (td), but visually spread out as two side-by-side columns of key-value pairs.
“If you’re thinking about using an accessibility overlay instead of fixing your HTML, don’t. It doesn’t work and makes you look bad.” — Rachele DiTullio