Search
Items tagged with: html
TL;DR:
1. Probably don’t add `` without guidance from a copywriter.
2. Probably don’t add `` to foreign words without expert guidance.
3. Probably don’t add `` to URLs, email addresses, code blocks, etc.
4. Probably restrict `<wbr>` to URLs, email addresses, code blocks, and similar where technical accuracy is key.
5. Probably restrict `<wbr>` to before periods and dashes and maybe slashes in URLs and emails.
#accessibility #a11y #css #html
🦈 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
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!
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
This is so f***** up!! O_O
Be aware when you receive HTML emails (who doesn't?)!
gruene.social/@weddige/1121903…
#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? #phishinggruene.social
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
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
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
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 JavaScript for that - HTMHell
A collection of bad practices in HTML, copied from real websites.You don't need JavaScript for that - HTMHell
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.
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
Foundations: HTML semantics - TetraLogical
Accessibility consultancy with a focus on inclusion. We can help you with knowledge, experience, strategy, assessments, and development.TetraLogical
Accessibility training will not save you
A follow-up to my talk at A11yTO I cannot pinpoint the source of this misconception, it could have been a vendor, or long-lost blog post, or one of the many webinars I attended in my early days as a program lead.Reidmore