Search
Items tagged with: html
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
In Safari’s “reader mode” so many websites are confusing, esp newspapers, magazines & journals
Disable reader mode & see the problem: headings, blockquotes & image captions styled visually only, without basic semantic markup
wtf webdevs?
Essential #accessibility STARTS w #SemanticMarkup that designates what’s a heading, what’s a block quote, what’s an image caption…
Semantic #HTML is not new. Even #HTML5 is 16 YEARS old! Use the tools handed to you
/me stops shaking fist, gets off soapbox
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
I have a question for #accessibility and #internationalization peeps out there. Suppose that I made a post on Mastodon that includes a photo. But the language I use for the post is Tagalog, my native language. Should I write my alt text in Tagalog or English?
The post can be translated by whatever translation service Mastodon uses. But I'm not entirely sure that the alt text would also be translated, especially since I remember that #HTML attributes are not translated, unless that's old news.
“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
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
webaxe.org/strikethrough-html-…
#webdev #a11y #html #screenreaders #accessibility
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.
: The Abbreviation element - HTML: HyperText Markup Language | MDN
The HTML element represents an abbreviation or acronym.developer.mozilla.org