Skip to main content

Search

Items tagged with: HTML


"Most importantly, tooltips should only provide descriptive and non-essential text, giving slightly more detailed text for active elements such as links and form controls. Ultimately, they provide expendable text which is already on the web page."

htmhell.dev/adventcalendar/202…

Great in-depth article about #tooltips by Jan Hellbusch. He knows what he's talking about, had the pleasure to be in one of his workshops and he's an absolute pro. 🤯

#HTML #CSS #JavaScript #accessibility #a11y #HTMHell


Reprise: "On the <dl>" by @ben benmyers.dev/blog/on-the-dl/ #webdev #html


I have a question regarding a semantic HTML construct, and I'd like to know what the current consensus is (if there is one). So here goes:

Should navigation links be placed in an unordered list in a <nav>?

The spec doesn't recommend anything, but examples from MDN (developer.mozilla.org/en-US/do…) and WHATWG (html.spec.whatwg.org/multipage…) consistently use lists unless the contents are written in prose. Is this still the preference more broadly?

I have some other questions in this area. Safari removes list semantics if you remove the bullets (with exceptions, such as if the list is a child of "nav"), due to alleged "list-itis". At what point do lists become inappropriate? If I have a list of blog posts, and I format them as cards, with a heading, publish date, summary, and an image, is that too much content for each <li>?

Also, MDN and WHATWG point out not all links should be contained in navs (such as footer links), and "nav" should instead signal major blocks of navigation links. Would my prior example of a list of blog posts count as a major block? Should I enclose my list of blog posts in a nav? Does that extend to all section, category, and tag pages listing pages in that section/category/tag?

Feel free to respond if you have opinions, but keep it civil, and boosts are appreciated.

#HTML #semanticHTML #WebDev #website #accessibility #a11y


Web developers need to read this, and study it really well. "Foundations: HTML semantics" tetralogical.com/blog/2022/10/… #html #webdev #webdevelopment


Yup!!! "Web developers don't know HTML anymore" reidmore.online/post/accessibi… #webdev #webdevelopment #fail #html


Accessible Chips demo — "modified to use the HTML datalist element instead of a custom autosuggest". Nice! kindhearted-meal.glitch.me/ By @mfairchild365 (and inspired by me 😁 ). This demo is actually 4 years old! Browser support (for datalist) is better. #webdev #html #a11y


Card Pattern — nice techniques here! codepen.io/Merri/full/QWVZMeo by @MerriNet (forked a couple times, original by Erik Kroes) #webdev #a11y #html #css


With the help of ChatGPT I have added alt text to images in my slide deck "No Industry for Old Men" from #a11yTO 2023

#a11y #webStandards #HTML #ARIA #Depression #aging #ai

docs.google.com/presentation/d…


Not picking on anyone, but I just saw someone asking devs not to use "2FA" in user messages, and instead use "two factor authentication."

2FA is 3 syllables. Two factor authentication is 8.

From my #a11y use case, 2FA is an accommodation.

I would argue that there's already an HTML way to solve this problem, and that's the html abbr element with the title attribute.

#a11y #html


Ensuring negative numbers are available for everyone. "The minus character (−) yields great support in most screen readers, and suffers less situational gotchas than the hyphen-minus character"

deque.com/blog/ensuring-negati…

Great article written by 2 of my favorite comrades.

#webdev #webdesign #a11y #html #tips #screenreaders


"Making a positive change: PDF to HTML
The Government Digital Service (GDS) states “Compared with HTML content, information published in a PDF is harder to find, use and maintain”."

Consider the needs of the people you are publishing the information for. Engage with them early to explore alternative options that may better meet their needs.

YES !

accessibility.blog.gov.uk/2023…

#PDF #HTML #A11Y #UX

#a11y #html #UX #pdf


The abbreviation appreciation society
“the HTML <abbr> element is deceptively familiar and attractive, its been around forever (1999) and thus people assume that it does what it does and does it well. Nothing much changed over the iterations of the abbr element definition over the years. One notable exception is that the acronym element was obsoleted in HTML5 and abbr now is used for both acronyms and abbreviations.”

#HTML #accessibility #WebDev

tpgi.com/short-note-the-abbrev…

/cc @micmath


Reprise: On the <dl> benmyers.dev/blog/on-the-dl/ by @ben #html #webdev #tips


Using HTML landmark roles to improve accessibility developer.mozilla.org/en-US/bl… by Schalk Neethling via MDN #a11y #webdev #html


Today the <blink> element was officially removed from MDN.

github.com/mdn/content/pull/26…

It was an awful element, but, oh, so many memories.

#HTML

#html


Adding captions and subtitles to HTML video: developer.mozilla.org/en-US/do… #captions #subtitles #a11y #video #webdev #html


Related, my HTMHell article "You Don't Need ARIA For That" htmhell.dev/adventcalendar/202… #aria #webdev #a11y #html


if you're using javascript:void(0) as the value of the href attribute, the element you're actually looking for is <button> matuzo.at/blog/its-very-likely… Great series from @matuzo #webdev #html #a11y


Overlapping interactive areas [are bad in HTML] — please don't nest Anchors and Buttons! tempertemper.net/blog/overlapp… #webdev #webdesign #a11y #html


Intro to HTML-first Frontend Frameworks sitepen.com/blog/intro-to-html… #webdev #html #FTW


A Theory of Web Relativity — great article on many uses of the REL attribute htmhell.dev/adventcalendar/202… #html #rel #webdev


Modern HTML email (great tips including tables no longer required) fullystacked.net/posts/modern-… #email #html #css #amp


File Uploads for the Web (1): Upload Files with HTML austingil.com/uploading-files-… A nice, succinct tutorial plus follow-up of enhancing with Javascript. #webdev #html


I find that web developers need to implement inputmode more often (to customize virtual keyboard for phone, email, etc). Hey Safari, why don't you support it?! developer.mozilla.org/en-US/do… #safari #browsers #html #forms #usability


You Really Don't Need All that JavaScript, I Promise 👏 youtube.com/watch?v=rxlJRydqmk… GOTO Copenhagen 2019 (includes Chrome Portal demo) #webdev #webperf #javascript #html


How to use, and not use, the tabindex attribute: a11yproject.com/posts/how-to-u… #webdev #a11y #html


#Development #Outlooks
The end of front-end development · Things are going to change, but not in the scary way people are saying ilo.im/11t8v2

_____
#Job #AI #GPT4 #ChatGPT #ChatBot #WebDevelopment #WebDev #Code #Frontend #HTML #CSS #JavaScript #Skills #Productivity


"Description list support [by screen readers] is generally good (with Safari being the outlier), even if you may not like how it is supported." adrianroselli.com/2022/12/brie… #html #a11y