8 ms·

HTML attributes for improved accessibility and user experience

177 points by soheilpro 3y ago

mock-possum 3y ago
> The reversed attribute is used to reverse ordered lists (<ol>) in the opposite order. Holy shit that’s been a thing for ten years and I didn’t know about it??
- chrismorgan 3y ago
  Well, IE and EdgeHTML never supported it, so in practice it’s only been safe to use for twoish years. (I’d actually completely forgotten it was a recent addition rather than from the pre-HTML-5 era.)
- ghusbands 3y ago
  > > > The reversed attribute is used to reverse ordered lists (<ol>) in the opposite order. To be clear, it only makes the numbers descending rather than ascending. The phrasing above implies it rearranges the list.
  - pseudoramble 3y ago
    Yeah the behavior was completely counter intuitive to what I was expecting. It does make sense though since it would be kinda weird if an HTML attribute could change the structure of mark up directly, at least I realized that after thinking about it.
- liftm 3y ago
  How does this help accessibility, though? (Maybe I don't know enough about HTML. Is the usual way to produce a descending enumeration to write the elements in reverse order and then re-reverse them in CSS or so, which makes them be read wrong by screen readers?)
  - CM30 3y ago
    That's a good point. There's no obvious way to mark up a HTML list as being reversed in CSS alone, at least not without a bunch of Flexbox styles and stuff. So the likelihood that someone would use an unsemantic alternative for this is basically non existent.
  - chrismorgan 3y ago
    The alternative is just specifying the value on each item. These two are equivalent: <ol reversed> <li>Three <li>Two <li>One </ol> <ol> <li value=3>Three <li value=2>Two <li value=1>One </ol> Note also that reversing content via CSS is generally unwise, because things like screen readers, text selection and tab indexing operate on DOM tree order.
lynx23 3y ago
No mentioning of semantic tags. I personally think things like <main> and <article> are way more practically usful for accessibility these days. Many screen readers have a "jump to main" shortcut these days (which is a great replacement for those notorious "skip to content" links). If only more sites would use these tags.
- bradygp 3y ago
  I don’t think jump to main can replace a skip to content link because screen readers aren’t often used by people who are sighted but aren’t able to use a mouse. Skip nav still helps them bypass the repetitive heading content.
  - hunter2_ 3y ago
    Sounds like the mistake was implementing this exclusively in the screen reader instead of as a browser hotkey.
- csswizardry 3y ago
  > No mentioning of semantic tags. Yes, because it’s an article about attributes…
madeofpalk 3y ago
How does hreflang improve accessibility and user experience? The article says "You can improve the user experience" with it, but never actually demonstrates that. It then starts talking about some SEO stuff, but it's still not super clear what it actually does?
- orwin 3y ago
  It doesn't improve my life, at all. When I have questions about a concept and I use the english word for it (because I never learned CS in French and would not understand the French page), the first Wikipedia page will still be in French, because of those shitty tags. Honestly, those are only useful if the words are the same in multiple languages. As for me, this recent changes get on my nerves, and are one reason why I'm not using Google anymore.
  - madeofpalk 3y ago
    Is it because of those tags? Or is it just because Google on its own has done a comprehensive job of indexing and incorrectly thought you wanted the French version?
    - tambourine_man 3y ago
      There's just no way to convince Google to use English-only when I'm in another country other than using a VPN. I changed the settings multiple times, disabled the auto-detect language, but it always leaks in on suggestions or results. Just like there's no way to make Youtube disable autoplay of videos. One week later or so, it reverts back to its default behavior. Or for Google to respect that the account I'm using right now is the one I want to use instead of the first one I logged in many days ago.
      - stephenr 3y ago
        I mean look I have to sympathise with Google here. They've no doubt had the entire combined wisdom of Google looking at this problem and clearly there is just no way for human beings to comprehend what the `Accept-Language` header does. /s because, you know.
sylware 3y ago
And html table layout are not harmful, actually 2D semantic HTML documents can do wonders as they can be reasonably displayed with a hardcoded css beyond good enough. The only thing missing is how to display the table rules, but from a semantic point of view. Namely, I would kind of un-obsolete the table BORDER attribute, as it gives the information that seeing the rules is somewhat important. Or maybe an attribute being more explicit than it is a semantic value, meaning rules are sufficiently important, for instance a rule level, that a css or a hardcoded css (could still be dynamically configured) would choose to display or not. For instance, like a WEIGHT attribute with NORMAL(default) and STRONG value, or directly a STRONG attribute, even though un-obsoleting BORDER changing the definition of its value being a scale of it strenght (0, rules would not be displayed, not 0 rules would displayed in hardcoded css) would fairly enough. https://webaim.org/techniques/tables/ https://webaim.org/techniques/tables/ (I am not talking about the abomination of the semantic web from a decade ago)
- pphysch 3y ago
  Why would you use <table> for layout in 2023? I've heard of no-JS users, but no-CSS users sounds like an April Fools joke. A few lines of <style> + appropriate usage of HTML content tags is almost certainly going to be less bytes than abusing <table> for layout.
  - sylware 3y ago
    I am a noscript/basic (x)html user, indeed. Not even css.
samyar 3y ago
It was not what I expected
anymouse123456 3y ago
re: the autocomplete attribute. It would have been nice to include a brief explanation of all the ways this feature is likely to break what you expect. For example, recent versions of Chrome will autocomplete against a table of values across all domains for the given field "name" attribute, regardless of what you put into the autocomplete attribute [0]. I suppose this would be a fine decision if all form fields in all forms represented a global, singular datum (i.e., My Account), but it is not fine at all when dealing with collections of things (i.e., Cars, Parts or whatever). I managed to recently work around this by generating unique-ish ids for name fields and autocomplete attributes, then fixing them before submission. I'm obviously still salty. [0] https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off https://stackoverflow.com/questions/12374442/chrome-ignores-...
- 542458 3y ago
  The way autocomplete works in browsers is absolutely infuriating. Because a bunch of misguided orgs went around disabling autocomplete on login fields, now browsers aggressively ignore attempts to disable it and there's no elegant way to turn it off when browsers are wrong i.e., when they're autofilling user login data into database credentials.
  - anymouse123456 3y ago
    IMHO, it's far less bad to have some "misguided orgs" disable a feature on software they wrote than to have misguided browser engineers force all web software to suggest obviously inappropriate nonsense to billions of users, forever.
- SpaceL10n 3y ago
  I too am incredibly salty from my past accessibility work. Knowing the HTML attributes is one thing, but applying them to your product in a predictable way is another. Folks talk about the importance of cross-browser testing, but willfully neglect cross-screenreader testing. The incentive for industry to meet the needs of these users just isn't where it should be. Too many stakeholders agree that meeting the needs of able users is good enough. Accessibility is just a checkbox for most organizations. A token gesture that "we care" when really it just means "we care enough until we are forced to care more".
tessela 3y ago
re: controls Custom controls are the enshittification of the <video> tag. IMHO there's no custom video component that allows the user to control volume, picture-in-picture, AirPlay, control speed and scrubbing better than the standard controls, especially on mobile.
kevincox 3y ago
<link href="https://example.com/de" rel="alternate" hreflang="de" /> That is a really cool idea, but does any browser actually do anything with this info? Maybe search engines do but it would be really cool if the browser could pop up something like "This page is also available in German, [Visit]" to help the user. Finding the "English" link, which may be spelt in the page language, or be a US or UK flag is not a fun task when I stumble across a page of the wrong language.
gdcbe 3y ago
> Why use hreflang? I’m not a web dev so I might be missing something obvious… but… Why the obsession with binding languages to a url (resource)? There’s an accept-language http header that will respect the user’s languages in desired order… I can understand you as a user might want to be able to overwrite it for a specific site so that they can workaround a badly translated site, but even for that purpose you can use a simple opt-in cookie… But why attach it to a resource (url)??? Now when I share the url it will not respect the language preferences of the one I share it too… And even if you wish to be able to share a specific language version of a website, why not have these as an extra layer that redirect with a cookie setting that language and then just use again the regular url… Honestly this boggles my mind… why why… can web developers and their managers please respect http standards… with the german trial case we might see some traction with DNT, so there’s that. Please also respect my language setting. Fun (read supper annoying) fact: ever worse is trying to use ip to map it to location and then deduce language like that… I live in Belgium and how many times I’ve received a French version of a site is mind boggling… sorry very sorry, but I’m not fluent in French. I can survive in it, but I don’t want to consume websites in it if I don’t have to.. if you actually would respect my browser settings (accept-language) you would know better… zzz
- deleted 3y ago
  [deleted]

177 points by soheilpro 3y ago

> The reversed attribute is used to reverse ordered lists (<ol>) in the opposite order. Holy shit that’s been a thing for ten years and I didn’t know about it??

chrismorgan 3y ago
Well, IE and EdgeHTML never supported it, so in practice it’s only been safe to use for twoish years. (I’d actually completely forgotten it was a recent addition rather than from the pre-HTML-5 era.)
ghusbands 3y ago
> > > The reversed attribute is used to reverse ordered lists (<ol>) in the opposite order. To be clear, it only makes the numbers descending rather than ascending. The phrasing above implies it rearranges the list.
- pseudoramble 3y ago
  Yeah the behavior was completely counter intuitive to what I was expecting. It does make sense though since it would be kinda weird if an HTML attribute could change the structure of mark up directly, at least I realized that after thinking about it.
liftm 3y ago
How does this help accessibility, though? (Maybe I don't know enough about HTML. Is the usual way to produce a descending enumeration to write the elements in reverse order and then re-reverse them in CSS or so, which makes them be read wrong by screen readers?)
- CM30 3y ago
  That's a good point. There's no obvious way to mark up a HTML list as being reversed in CSS alone, at least not without a bunch of Flexbox styles and stuff. So the likelihood that someone would use an unsemantic alternative for this is basically non existent.
- chrismorgan 3y ago
  The alternative is just specifying the value on each item. These two are equivalent: <ol reversed> <li>Three <li>Two <li>One </ol> <ol> <li value=3>Three <li value=2>Two <li value=1>One </ol> Note also that reversing content via CSS is generally unwise, because things like screen readers, text selection and tab indexing operate on DOM tree order.

lynx23 3y ago

No mentioning of semantic tags. I personally think things like <main> and <article> are way more practically usful for accessibility these days. Many screen readers have a "jump to main" shortcut these days (which is a great replacement for those notorious "skip to content" links). If only more sites would use these tags.

bradygp 3y ago
I don’t think jump to main can replace a skip to content link because screen readers aren’t often used by people who are sighted but aren’t able to use a mouse. Skip nav still helps them bypass the repetitive heading content.
- hunter2_ 3y ago
  Sounds like the mistake was implementing this exclusively in the screen reader instead of as a browser hotkey.
csswizardry 3y ago
> No mentioning of semantic tags. Yes, because it’s an article about attributes…

madeofpalk 3y ago

How does hreflang improve accessibility and user experience? The article says "You can improve the user experience" with it, but never actually demonstrates that. It then starts talking about some SEO stuff, but it's still not super clear what it actually does?

orwin 3y ago
It doesn't improve my life, at all. When I have questions about a concept and I use the english word for it (because I never learned CS in French and would not understand the French page), the first Wikipedia page will still be in French, because of those shitty tags. Honestly, those are only useful if the words are the same in multiple languages. As for me, this recent changes get on my nerves, and are one reason why I'm not using Google anymore.
- madeofpalk 3y ago
  Is it because of those tags? Or is it just because Google on its own has done a comprehensive job of indexing and incorrectly thought you wanted the French version?
  - tambourine_man 3y ago
    There's just no way to convince Google to use English-only when I'm in another country other than using a VPN. I changed the settings multiple times, disabled the auto-detect language, but it always leaks in on suggestions or results. Just like there's no way to make Youtube disable autoplay of videos. One week later or so, it reverts back to its default behavior. Or for Google to respect that the account I'm using right now is the one I want to use instead of the first one I logged in many days ago.
    - stephenr 3y ago
      I mean look I have to sympathise with Google here. They've no doubt had the entire combined wisdom of Google looking at this problem and clearly there is just no way for human beings to comprehend what the `Accept-Language` header does. /s because, you know.

sylware 3y ago

And html table layout are not harmful, actually 2D semantic HTML documents can do wonders as they can be reasonably displayed with a hardcoded css beyond good enough. The only thing missing is how to display the table rules, but from a semantic point of view. Namely, I would kind of un-obsolete the table BORDER attribute, as it gives the information that seeing the rules is somewhat important. Or maybe an attribute being more explicit than it is a semantic value, meaning rules are sufficiently important, for instance a rule level, that a css or a hardcoded css (could still be dynamically configured) would choose to display or not. For instance, like a WEIGHT attribute with NORMAL(default) and STRONG value, or directly a STRONG attribute, even though un-obsoleting BORDER changing the definition of its value being a scale of it strenght (0, rules would not be displayed, not 0 rules would displayed in hardcoded css) would fairly enough. https://webaim.org/techniques/tables/ https://webaim.org/techniques/tables/ (I am not talking about the abomination of the semantic web from a decade ago)

pphysch 3y ago
Why would you use <table> for layout in 2023? I've heard of no-JS users, but no-CSS users sounds like an April Fools joke. A few lines of <style> + appropriate usage of HTML content tags is almost certainly going to be less bytes than abusing <table> for layout.
- sylware 3y ago
  I am a noscript/basic (x)html user, indeed. Not even css.

samyar 3y ago

It was not what I expected

anymouse123456 3y ago

re: the autocomplete attribute. It would have been nice to include a brief explanation of all the ways this feature is likely to break what you expect. For example, recent versions of Chrome will autocomplete against a table of values across all domains for the given field "name" attribute, regardless of what you put into the autocomplete attribute [0]. I suppose this would be a fine decision if all form fields in all forms represented a global, singular datum (i.e., My Account), but it is not fine at all when dealing with collections of things (i.e., Cars, Parts or whatever). I managed to recently work around this by generating unique-ish ids for name fields and autocomplete attributes, then fixing them before submission. I'm obviously still salty. [0] https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off https://stackoverflow.com/questions/12374442/chrome-ignores-...

542458 3y ago
The way autocomplete works in browsers is absolutely infuriating. Because a bunch of misguided orgs went around disabling autocomplete on login fields, now browsers aggressively ignore attempts to disable it and there's no elegant way to turn it off when browsers are wrong i.e., when they're autofilling user login data into database credentials.
- anymouse123456 3y ago
  IMHO, it's far less bad to have some "misguided orgs" disable a feature on software they wrote than to have misguided browser engineers force all web software to suggest obviously inappropriate nonsense to billions of users, forever.
SpaceL10n 3y ago
I too am incredibly salty from my past accessibility work. Knowing the HTML attributes is one thing, but applying them to your product in a predictable way is another. Folks talk about the importance of cross-browser testing, but willfully neglect cross-screenreader testing. The incentive for industry to meet the needs of these users just isn't where it should be. Too many stakeholders agree that meeting the needs of able users is good enough. Accessibility is just a checkbox for most organizations. A token gesture that "we care" when really it just means "we care enough until we are forced to care more".

tessela 3y ago

re: controls Custom controls are the enshittification of the <video> tag. IMHO there's no custom video component that allows the user to control volume, picture-in-picture, AirPlay, control speed and scrubbing better than the standard controls, especially on mobile.

kevincox 3y ago

gdcbe 3y ago

> Why use hreflang? I’m not a web dev so I might be missing something obvious… but… Why the obsession with binding languages to a url (resource)? There’s an accept-language http header that will respect the user’s languages in desired order… I can understand you as a user might want to be able to overwrite it for a specific site so that they can workaround a badly translated site, but even for that purpose you can use a simple opt-in cookie… But why attach it to a resource (url)??? Now when I share the url it will not respect the language preferences of the one I share it too… And even if you wish to be able to share a specific language version of a website, why not have these as an extra layer that redirect with a cookie setting that language and then just use again the regular url… Honestly this boggles my mind… why why… can web developers and their managers please respect http standards… with the german trial case we might see some traction with DNT, so there’s that. Please also respect my language setting. Fun (read supper annoying) fact: ever worse is trying to use ip to map it to location and then deduce language like that… I live in Belgium and how many times I’ve received a French version of a site is mind boggling… sorry very sorry, but I’m not fluent in French. I can survive in it, but I don’t want to consume websites in it if I don’t have to.. if you actually would respect my browser settings (accept-language) you would know better… zzz

deleted 3y ago
[deleted]