Even UIs have to be semantic, otherwise you have to implement every interaction that will be ever used. Tab key tends to work even when you haven't specifically handled it because you have used elements that are intended to interact with users and enable `tabindex` by default. This is also why game UIs have been traditionally horrible, because game developers often prefer to make everything from scratch...
It's also why many of the UI toolkits on JS "spa"s suck. They often lack interaction that people do use, but the developer wasn't aware of. DoubleClick on buttons, enter in text fields, home-end in selectlists, typing in selectlists and so on.
The the better UI toolkits slowly start to accumulate all these, grow wieldy, sluggish and get replaced by a "fresh" and "snappy" alternative and the circle continues.
... And yet the UI in the original Deus Ex (2000) supports not only tabbing and arrow keys, but Alt accelerator keys on every button as well, indicated with Windows-standard underlines. This includes the UI for interacting with in-game objects such as news kiosks. (I’ve just checked, and the table view supports sorting by clicking on a table header.)
I don’t expect it’s accessible to screen readers, but, well, it’s a 3D game.
I'm not arguing the immediate-mode vs. retained-mode point -- having OS-based GUI components exposed by the browser (etc.) is consistent with my point.
Semantic here doesnt mean buttons arent buttons, etc. it means the components are named for their role as components -- rather than their role in structuring text markup.
> Can anyone explain how HTML/CSS/etc. can be "semantic" at the syntax layer when it is largely a means of specifying a UI?
"Semantic" HTML means that you have to use a purpose-made element when it's available. A link should preferably be done with <a>, not <div> or <span>. (<button> is more debatable.) HTML doesn't provide a calendar so you should roll your own with `<div class="my-calendar">`, or more recently, custom elements like <my-calendar>. You would have many internal parts within that element, unless hidden under a shadow tree, but at least that particular element can be said "semantic".
"Semantic" CSS means that you have to pick a sensible name. This is different from HTML because CSS itself has no semantics attached---you attach a tree and name subtrees with class or id. So the sensible name is not means to do anything other than managing complexity, and became out of fashion once other approaches like Tailwind were found and became feasible. In any case you would name something semantically, which may or may not translate to actual CSS class names.
