Good morning #fediverse !
I'm feeling #KISS today...
« Keep
IT
Simple
Stupid »
(Amazing, how many things you can do with just simple,
#html
+
#css
+
#javascript
cc @cferdinandi ... who amongst others, inspired me , thX
Search
Items tagged with: html
🤐disabled and obscured
"My personal take on this is it sucks, as while the control is disabled for all, only for a subset of users (low vision) the text label for the disabled control is illegible."
#a11y #HTML #WCAG #accessibility
Remember in August when I gave a talk about HTML tables for the WebAIM online conference?
That video is online!
I have embedded it on my site:
adrianroselli.com/2024/08/talk…
Or you can go to YouTube directly (where you can find the other swell talks from that day).
Talkin’ Tables — WebAIM Conference 2024
I spoke at the 2024 Web Accessibility in Mind Conference (in partnership with PopeTech). As soon as the video is available I will embed it.Adrian Roselli
The unreasonable effectiveness of simple HTML [an anecdote] shkspr.mobi/blog/2021/01/the-u… #html #webdev
The unreasonable effectiveness of simple HTML
I've told this story at conferences - but due to the general situation I thought I'd retell it here. A few years ago I was doing policy research in a housing benefits office in London. They are singularly unlovely places.Terence Eden’s Blog
Semantic websites are awesome! Among other things, they let you write reusable CSS. Please send me your semantic websites, so I can analyze them for common patterns and write a composable CSS framework.
jak2k.schwanenberg.name/post/c…
#indieweb #smolweb #semanticHTML #html #semantic #css #semanticcss
I'm surprised it's that high. "2024: 0.5% of the Global Top 200 Websites Use Valid HTML" meiert.com/en/blog/html-confor… #html #webdev #webdevelopment
2024: 0.5% of the Global Top 200 Websites Use Valid HTML · Jens Oliver Meiert
The annual HTML conformance analysis, validating 200 home pages of the most popular websites. Despite improvements, there is no signal of commitment to valid output as a quality baseline to benefit end users as well as web development as a profession…meiert.com
Not so short note on aria-label usage – Big Table Edition
“aria-label is one of a number of secondary methods to label native HTML UI elements. It works particularly well on interactive elements, it also works well on most block level elements old skoolterm that have explicitly or implicitly defined structural roles. It works less well or not at all on text level semantics.”
#aria #HTML #accessibility #WebDev
Steve Faulkner's presentation slides for the State of the Browser 2024 conference, "No Industry for Old Men":
docs.google.com/presentation/d… #webdev #html #a11y
docs.google.com/presentation/d… #webdev #html #a11y
Even though I know #HTML inside out and use it virtually every day, I'm still reading #HTMLForPeople by @bw because it's a prime example of how a good guide should be written.
1. The book is simple and easy to follow, with relevant points explained well enough even for non-coders to understand.
2. Images are clearly described for #blind readers through the use of #AltText.
3. The website is easy to navigate with a #ScreenReader.
4. There are no annoying pop-ups or ads on the website.
5. The book is entirely free of charge.
HTML for People
HTML isn't only for people working in the tech field. It's for everyone. Learn how to make a website from scratch in this beginner friendly web book.htmlforpeople.com
🦈 JAWS (only) NO MORE
"In 2017 I embarked on a journey to improve and open the reporting of issues with JAWS support for Web Standards.
I continued to work on this after leaving TPGi, until now…"
✍🏽 drugs button popover - updated October 1 2024
"Several people have questioned my reasoning for writing about the use case of popover as a tooltip, no I was not on drugs, at the time of writing I noticed that GitHub was using popover as a tooltip"
People on StackOverflow telling people to screw up #accessibility with the HTML dialog element defeats the purpose of using that element in the first place IMO. Please upvote my answer that corrects the numerous wrong answers, including the accepted answer, to this question if you have an SO account.
stackoverflow.com/a/79028606/2…
#webDev #a11y #html #css #javaScript
2024: 0.5% of the Global Top 200 Websites Use Valid HTML ☹️ meiert.com/en/blog/html-confor… #html #webdev #webdevelopment #fail
Semantic Code in HTML: What is it and does it still matter? (of course it does; read why) boagworld.com/dev/semantic-cod… #webdev #webdevelopment #html
Semantic Code In HTML: What Is It And Does It Still Matter?
Semantic code in HTML is still important in modern web development. It can improve accessibility, SEO, maintainability, cross-device compatibility, future-proofing, collaboration, and page load times.Paul Boag - User Experience Advice
Top `<table>` tips:
• Don’t span cells:
adrianroselli.com/2023/02/avoi…
• Don’t redefine column headers: adrianroselli.com/2022/02/colu…
• With one exception, you don’t need a `scope` attribute (the exception is sometimes the top corner):
tpgi.com/short-note-on-scoping…
• `column` is not a valid `scope` value:
html.spec.whatwg.org/multipage…
• Be wary of articles that don’t cite sources or testing when they make assertions about `<table>`.
#HTML #table #accessibility #a11y
Short note on scoping mechanisms - TPGi
In 2 recent articles I have illustrated why the scope attribute is not needed on data tables with one row or column of th elements, or data tables with 1...Steve Faulkner (TPGi)
In 2014, Steve Faulkner wrote an article What ARIA does not do. 10 years later, the message is unchanged.
#WebDev #WebDevelopment #ARIA #HTML #DigitalAccessibility #Accessibility #A11y
😑🆕 What ARIA still does not do
"Use of ARIA is a promise you as a developer make to screen reader users."
Why are my live regions not working? by @patrick_h_lauke
'Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work.'
#accessibility #HTML #ARIA #WebDev
New post, another in my series of using the right lingo while also carrying the IKEA vibe:
“Be Careful Using ‘Grid’”
adrianroselli.com/2024/07/be-c…
I try to disambiguate between 8 different meanings of the word ‘grid’ in a web dev context.
#HTML #ARIA #CSS #accessibility #a11y
Be Careful Using ‘Grid’
TL;DR: Be careful when using the word grid on its own. Be certain you have chosen the term that accurately describes the pattern you want.Adrian Roselli
aria-label is one of a number of secondary methods to label native HTML UI elements. It works in some scenarios, less well or not at all on others. Get the details on it's proper and effective usage.
#HTML #ARIA #WebDev #WebDevelopment #DigitalAccessibility #Accessibility #A11y
🗒️Not so short note on aria-label usage – Big Table Edition
Updated: 22 May 2024
#HTML #ARIA #WebDev #accessibility
I have been reading through the State of HTML 2023 results site (2023.stateofhtml.com/) and I am so disappointed in the overall #accessibility efforts — both in the questions and in the code.
This may become a blog post.
I filed 3 issues today, have filed 15 since late 2022, and only 2 have been addressed:
github.com/Devographics/Monore…
But these surveys keep pushing problematic info in problematic UIs, giving the wrong impression of… everything.
State of HTML 2023
The 2023 edition of the annual survey about the latest trends in the HTML ecosystem.2023.stateofhtml.com
All titles of the “Upgrade Your #HTML” ebook series are now available at a lower price! 🔻
(The previous price had essentially been dictated by one of the books’ platforms, which is now being worked around by donating the difference.)
If you purchased the latest title and find the new price fairer, reach out so that I can offer you another book, free of charge!
Informative article on HTML responsive images: danburzo.ro/responsive-images-… #webdev #webdesign #images #html
How to think about HTML responsive images · Dan Cătălin Burzo
srcset, sizes, picture, source, and how they all fit.danburzo.ro
“The reasons why use of the placeholder attribute as the only means of providing a user readable prompt for a form control is deficient UX, are voluminous. It is frustrating having to rehash this discussion endlessly.”
Why are my live regions not working? by @patrick_h_lauke
"Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by developers misunderstanding how live regions are intended to work."
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:
📽️ youtube.com/clip/UgkxpA_MMNjLt…
✂️ Should you use React?
60 seconds · Clipped by Hasan Ali · Original video "On the merits & limitations of React & single-page apps" by Real World ReactYouTube
In “Techniques to Break Words” I quickly review:
`word-break`
`overflow-wrap`
`hyphens`
`<wbr>`
``
adrianroselli.com/2024/02/tech…
You can play around with the demo directly:
cdpn.io/aardrian/debug/eYoOdrX
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
tpgi.com/screen-readers-suppor…
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!
stevefrenzel.dev/posts/easy-we…
#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
5 HTML attributes for improved accessibility and user experience htmhell.dev/adventcalendar/202… #html #ux #webdev #webdesign #usability
Back to Basics: 5 HTML attributes for improved accessibility and user experience - HTMHell
A collection of bad practices in HTML, copied from real websites.Back to Basics: 5 HTML attributes for improved accessibility and user experience - HTMHell
You Don't Need ARIA For That [HTMHell 2022] htmhell.dev/adventcalendar/202… #a11y #aria #webdev #html #tips
You Don't Need ARIA For That - HTMHell
A collection of bad practices in HTML, copied from real websites.You Don't Need ARIA For That - HTMHell
This is an interesting #HTML proposal from @Seirdy
Should there be a `<spoiler>` element?
seirdy.one/posts/2023/11/12/sp…
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.
darins.page/articles/dynamic-a…
#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
ArXiv now offers papers in HTML format
Link: blog.arxiv.org/2023/12/21/acce…
Discussion: news.ycombinator.com/item?id=3…
#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
Design pattern for custom tooltips - HTMHell
A collection of bad practices in HTML, copied from real websites.Design pattern for custom tooltips - HTMHell