#Development #Resources
The HTML ‘caption’ element · How to properly use ‘caption’ in HTML tables https://ilo.im/164135
_____
#SemanticHTML #Table #Caption #Accessibility #ScreenReader #Content #WebDev #Frontend #HTML
#Development #Resources
The HTML ‘caption’ element · How to properly use ‘caption’ in HTML tables https://ilo.im/164135
_____
#SemanticHTML #Table #Caption #Accessibility #ScreenReader #Content #WebDev #Frontend #HTML
I'm looking to describe some trick taking games in a new blog post.
I'd like my descriptions to be accessible/readable through a screen reader. Keeping this in mind, how could I encode cards and hands?
Wikipedia uses "10", but I know there exist unicode codepoints for cards such as "🂪" which are, perhaps, more appropriate.
Furthermore, would an unordered list, or an ordered list be more appropriate for a hand of cards?
I'd love to read your opinions.
#Development #Events
CSS Naked Day 2025 · April 9 is the day to showcase semantic HTML https://ilo.im/1637um
_____
#Festivities #WebStandards #SemanticHTML #Accessibility #Frontend #HTML #CSS #CssNakedDay #2025
#Development #Guidelines
Mainlining mains · “Use only one (non-hidden) ‘main’ landmark per HTML page.” https://ilo.im/1635cl
_____
#SemanticHTML #HTML #Specification #Accessibility #ScreenReader #ARIA #WebDev #Frontend
I'm looking to describe a hand of playing cards semantically for an article detailing some card game rules.
I'm planning to use some vector images of various cards to illustrate the hands, but would like for them to make sense to people going through my page with the help of a screen reader.
Does anybody have an idea on how to go about this?
Attention, blind Akkoma users! I will be writing to the developer with my concerns about a few problems with accessibility on this platform. Most should be easy to resolve. Please let me know if you find any more, and also state what browser and screen reader you are using. Note: This is in reference to the site itself, not to your client of choice. I will post about that separately. For the record, I use NVDA with Firefox.
#accessibility #Akkoma #blind #Blob.cat #Chrome #Fediverse #fediverse #Firefox #JAWS #NVDA #html #ScreenReaders #SemanticHtml #Supermium #Windows
I am unable to view or even edit my sent posts in TweeseCake with Blob.cat! I have no idea why. Maybe, it's different enough from Mastodon (the actual network that TweeseCake is meant to work with) that it won't allow me to do it. Sometimes, I honestly have half a mind to just give up all social networking accept Dreamwidth, because it's the only place that is completely accessible. I don't have to beg developers to make things screenreader-friendly, or hope it will work with this client or that website because I can't do x on the main one, or that y feature that worked on one site will be accessible on the next one. It just works. Say what you like about Facebook, but the Basic Mobile site (not app) worked. I hardly had any problem with it. Then, they closed it, and I left because their main site is a nightmare to work with. Now, I'm in the Fediverse, feeling as if I'm using the main Facebook site all over again!
I don't blame the administrators of friendica.world or blob.cat. It's not their fault. They're just working with what they have. Both are wonderful human beings who have been very kind to me. It's not even the fault of the developers of both sites. It makes sense, when you're a small business or a single developer, not to know about things such as accessibility. I just wish more people would learn and/or write things in semantic html or offer some kind of text-only or basic version of their site. I know that Deque University and Geeks4Geeks teach accessibility and teach html with accessibility included, respectively, but I guess other sites and books don't. As for TweeseCake, this is an excellent client for the blind that works well with Friendica and probably even better with Mastodon. But again, it's by a single developer. While changes are coming, people do have lives and other committments, and one person can't be expected to work as quickly as a huge company.
By the way, my Dreamwidth account is here. I must update it slightly, as I have some new entries to post for the month.
dandylover1.dreamwidth.org
#accessibility #Akkoma #blind #Dreamwidth #Facebook #Fediverse #fediverse #Friendica #html #Mastodon #NVDA #ScreenReaders #SemanticHTML #TweeseCake #WCAG #Windows
#Development #Guidelines
Accessibility essentials · What every front-end developer should know https://ilo.im/161slf
_____
#Accessibility #AltText #SemanticHTML #Form #Keyboard #ARIA #React #WebDev #Frontend #HTML
#Development #Opportunities
The underrated HTML ‘dl’ element · A natural fit for common visual design patterns https://ilo.im/161khj
_____
#DescriptionList #HTML #SemanticHTML #Accessibility #ScreenReader #DesignPattern #WebDesign #WebDev #Frontend
Is there a specific recommended way to mark up placeholders and nulls and other non-normal values when they appear in semi-structured contexts (maybe a table, maybe not)?<i>
seems maybe-kind-of appropriate (alternate voice? yeah, if i was reading this out, my tone would be different in a certain way when i got to this part) but maybe i just love <i>
too much and am trying to find any excuse to use it more.
Like, if it says “date issued”, it doesn't feel right to just slap arbitrary text like “not issued yet” in there. That's not a date of issue! That's not a date at all!
In ad-hoc syntaxes or handwriting, i'd use some kind of brackets (or maybe a different ink colour) for this.
#SemanticHTML #HTML
#Development #Guides
Page by page · How pagination makes the web accessible https://ilo.im/161eah
_____
#Pagination #WebPage #Website #Blog #Accessibility #SemanticHTML #ARIA #WebDev #Frontend #HTML
@zeldman I have lurked around #BlueBeanieDay for many years and each time given myself a hard stare for *still* not owning one. I resolve to buy one for next year. Until then I will resort to looking at the cover of my copy of Designing with Web Standards #a11y #semanticHtml #BlueBeanieDay
#Development #Guides
The HTML ‘blockquote’ element · Usage, accessibility, alternatives, and workarounds https://ilo.im/160faf
_____
#Content #SemanticHTML #Accessibility #ScreenReader #WebDev #Frontend #HTML #HTML5
New blog post
Building a new site! — https://mnt.io/articles/building-a-new-site/
It's time to rewrite my site from scratch. I'm nostalgic of the good old Web. This site is hand-written, and promotes smallness, speed, simplicity and fun. Let's discover the new lore (!), and let's talk about series a little bit.
Semantic websites are awesome! Among other things, they let you write reusable CSS. Please send me your semantic websites, so I can analyze them for common patterns and write a composable CSS framework.
https://jak2k.schwanenberg.name/post/collect-semantic-websites/
My blog https://mnt.io now has semantic data (based on RDFa + schema.org) for all pages!
For example, a series is described as a `CreativeWorkSeries`, and has parts/episodes as `Article`s. An episode is part of a series. Etc.
You can play with this series https://validator.schema.org/#url=https%3A%2F%2Fmnt.io%2Fseries%2Ffrom-rust-to-beyond%2F to see all information.
I hope it's going to be useful for search engines.
In the last week I've been asking a whole bunch of questions because a pet theory was starting to form.
I want to close the gap between the devs who know their HTML semantics and accessibility, and those who seem to be surprised by it.
This disparity always felt "off" to me, so I went asking and reading and watching to try and figure it out.
Please enjoy:
#Development #Guides
The HTML ‘b’ element · Is the element still useful in current practice? https://ilo.im/1608z3
_____
#Content #SemanticHTML #Accessibility #ScreenReader #WebDev #Frontend #HTML #HTML5 #HTML4
#Development #Approaches
How I build a button component · A set of button component instances with their variants https://ilo.im/160525
_____
#Button #Icon #Typography #Interactivity #SemanticHTML #WebDev #Frontend #HTML #CSS #CustomProperty