Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
<br> and <wbr> are not the same thing. <br> forces a break whereas <wbr> says "you can break here if you need to" to be used with a particularly long word or if a phrase will make more sense if it breaks at a certain point.
Oh and there is a typo as </br> should be <br/> or just <br> in your example. You don't open and close it as it is a self closing element.
Extra: Perhaps change the item numbers to headings with ## so ## 1 Hide an element as that makes the page easier to navigate for screen readers and it will look better too!
<wbr> says "you can break here if you need to" to be used with a particularly long word or if a phrase will make more sense if it breaks at a certain point.
Also handy if you are displaying a URL or similar type of string and you want to make sure it breaks at a meaningful/convenient place like a '/'.
| CODING: a bit of lua, html/css, fragments of js, php, twig | CMS: a bit of wordpress, gravcms | 2D: layout, vector graphics, design in general | 3D: low-poly stuff, animation |
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
URLs and German (with the beautiful mega long words that break your UI when you try to implement i18n!)...I am sure that is what <wbr> was designed for, just those two use cases! 😋
Or Dutch. But in the Netherlands many people have the English disease where they write spaces when they should not. Sometimes this unintentionally totally changes the meaning of a sentence. F.e. "zoete witte wijnprofessor".
Online since 1990 Yes! I started with Gopher. I do modern Web Component Development with technologies supported by **all** WHATWG partners (Apple, Google, Microsoft & Mozilla)
Don't forget del/ins. Using elements because of how they are displayed on the browser instead of because of their meaning (semantics) is not a good use of HTML, and can be bad for usability/accessibility too.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Few issues:
alignis deprecated so don't use that as support may be patchy.<br>and<wbr>are not the same thing.<br>forces a break whereas<wbr>says "you can break here if you need to" to be used with a particularly long word or if a phrase will make more sense if it breaks at a certain point.Oh and there is a typo as
</br>should be<br/>or just<br>in your example. You don't open and close it as it is a self closing element.And finally the
type="color"is not very good accessibility wise so you will probably want to roll your own or enhance it a lot with WAI-ARIA.Other than that, great tips!
Extra: Perhaps change the item numbers to headings with
##so## 1 Hide an elementas that makes the page easier to navigate for screen readers and it will look better too!Also handy if you are displaying a URL or similar type of string and you want to make sure it breaks at a meaningful/convenient place like a '/'.
You don't get a hyphen though, which you want when you break up a long word. I'd rather use
­here.<wbr>looks more useful for URLS, imo.+1 to that!
URLs and German (with the beautiful mega long words that break your UI when you try to implement i18n!)...I am sure that is what
<wbr>was designed for, just those two use cases! 😋Nah, pretty sure URLs were an afterthought.
<wbr>was added just for German i18n.Or Dutch. But in the Netherlands many people have the English disease where they write spaces when they should not. Sometimes this unintentionally totally changes the meaning of a sentence. F.e. "zoete witte wijnprofessor".
Niets mis mee.
Is een blanke vinoloog die universiteitsstudentjes wat zijig lesgeeft
Don't forget
del/ins. Using elements because of how they are displayed on the browser instead of because of their meaning (semantics) is not a good use of HTML, and can be bad for usability/accessibility too.hi ! Thanks for the advice and the feedback.
No problem, could you fix the article to include / adjust things based on the advice?
People who are new may read the article and learn bad practices and never read the comments!
Agree on that ! I will make the adjustments.
Now I know why align is not working in my divs ( it is working in the
statements though)