I've been having too much fun clipping things on YouTube to share with my colleagues. Here's a clip with @slightlyoff on questions you should ask yourself when considering React:

📽️ https://www.youtube.com/clip/UgkxpA_MMNjLtPCvuG1BJO3ShotN5AWiIlw4

#react #html

✂️ Should you use React?

60 seconds · Clipped by Hasan Ali · Original video "On the merits & limitations of React & single-page apps" by Real World React

^YouTube

This is so f***** up!! O_O

Be aware when you receive HTML emails (who doesn't?)!

https://gruene.social/@weddige/112190338668045392

#HTML #HTMLmail #CSS
#Phishing #SCAM
#SocialEngineering
#Thunderbird #Outlook
#KoboldLetters

Konstantin Weddige (@weddige@gruene.social)

Attached: 1 image Welcome to another edition of "Is this phishing?" Assume the email is in principle plausible and the transaction ID exists. What is the worst that can happen if you press send? #phishing

^{gruene.social}

In “Techniques to Break Words” I quickly review:
`word-break`
`overflow-wrap`
`hyphens`
`<wbr>`
`­`
https://adrianroselli.com/2024/02/techniques-to-break-words.html

You can play around with the demo directly:
https://cdpn.io/aardrian/debug/eYoOdrX

#HTML #CSS

Techniques to Break Words

Photo by studio tdes. Used under CC BY 2.0 Deed. Image cropped and contrast enhanced. A few days ago Benjy Stanton asked about breaking long words in tables. I offered a suggestion, which may or may not have worked. I never asked.

^{Adrian Roselli}

👁‍🗨Screen Readers support for text level HTML semantics

"A long time ago (2008) I wrote an article: Screen Readers lack emphasis. At the time, 15 years ago..."

#a11y #webDev #HTML #screenReaders

https://www.tpgi.com/screen-readers-support-for-text-level-html-semantics/

Screen Readers support for text level HTML semantics - TPGi

A long time ago (2008) I wrote an article: Screen Readers lack emphasis. At the time, 15 years ago, the screen readers tested did not signify the semantics of text...

^{Steve Faulkner (TPGi)}

I wrote an article about how to make hastags accessible. Did some #ScreenReader testing with #JAWS, #NVDA, #VoiceOver and #Narrator, which was fun!

Pretty long one though, contains a bunch of tables for comparison. Enjoy the ride!

https://stevefrenzel.dev/posts/easy-web-accessibility-wins-hashtags/

#accessibility #a11y #html #JavaScript #WebDev #frontend

Easy web accessibility wins: Hashtags

Is there a way to create hashtags that work for everyone? I did some screen reader testing and was surprised by the outcome!

^{Steve Frenzel}

This is an interesting #HTML proposal from @Seirdy

Should there be a `<spoiler>` element?

https://seirdy.one/posts/2023/11/12/spoiler-element/

My heart says yes. HTML should reflect what people are actually doing on the web. How they write. The features they invent.

But my head says it is a duplicate of `<details>` albeit non-block level.

Proposal: an HTML element for spoilers

An informal proposal for dedicated elements for spoiler tags in HTML: use-cases, syntax, semantics, recommended UA behavior, and comparisons with “details”

^{Seirdy’s Home}

I needed to test support for dynamic accessible descriptions recently, so I made a blog post reference in case it's helpful for others.

https://www.darins.page/articles/dynamic-accessible-descriptions-reference

#accessibility #a11y #html #webdev #ux #screenreader

Dynamic accessible descriptions reference - Darin Senneff

I recently needed to test the support of a dynamic accessible description – a element’s description that is initially one (or no) value, then changes to…

^{Darin Senneff}

Yes! "HTML First" 👏
https://html-first.com/

#html #webdev #webdevelopment

HTML First

Build more maintainable software, faster

^{html-first.com}

ArXiv now offers papers in HTML format

Link: https://blog.arxiv.org/2023/12/21/accessibility-update-arxiv-now-offers-papers-in-html-format/
Discussion: https://news.ycombinator.com/item?id=38724665

#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."

https://www.htmhell.dev/adventcalendar/2023/20/

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

Design pattern for custom tooltips - HTMHell

A collection of bad practices in HTML, copied from real websites.

^{Design pattern for custom tooltips - HTMHell}

Content warning: Seven questions on semantic & accessible HTML navigation lists Click to open/close

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 (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#examples) and WHATWG (https://html.spec.whatwg.org/multipage/sections.html#the-nav-element) 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

: The Navigation Section element - HTML: HyperText Markup Language | MDN

The

^{MDN Web Docs}

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

https://docs.google.com/presentation/d/166SRyG4KEHAY1d1BiSqdyQhGBL5zjiW09JYSkc4IVI8/edit?usp=sharing

No industry for old men

^{Google Docs}

Content warning: Subtoot, a11y and conflicting needs. Click to open/close

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

: The Abbreviation element - HTML: HyperText Markup Language | MDN

The HTML element represents an abbreviation or acronym.

^{developer.mozilla.org}

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"

https://www.deque.com/blog/ensuring-negative-numbers-are-available-for-everyone/

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 !

https://accessibility.blog.gov.uk/2023/06/12/making-a-positive-change-pdf-to-html/

#PDF #HTML #A11Y #UX

Making a positive change: PDF to HTML

This is for everyone: documenting how we rebuild inclusive digital services across government

^{accessibility.blog.gov.uk}

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

https://www.tpgi.com/short-note-the-abbreviation-appreciation-society/

/cc @micmath

Short note: The abbreviation appreciation society - TPGi

The HTML element is an incredibly common, but do you know how you can make it accessible? Find out how in this article.

^{Steve Faulkner (TPGi)}

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

https://github.com/mdn/content/pull/26904

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

#HTML

Remove docs for the element by Elchi3 · Pull Request #26904 · mdn/content

For mdn/browser-compat-data#19658

^GitHub

I think that this #ableist #eMail bs should be #illegal and does not satisfy the notification requirements.

Also even for #abled people this is just bad, since a lot of them - like myself - will be sometimes if permanently on #WWAN like #2G, #3G or #4G and thus not download attachments at all, but only the text.

And yes, I do also automatically mark all #HTML - #eMails as #Spam so they won't even show up in my #Inbox.