🗒️Not so short note on aria-label usage – Big Table Edition
Updated: 22 May 2024
#HTML #ARIA #WebDev #accessibility
Search
Items tagged with: html
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
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
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
5 HTML attributes for improved accessibility and user experience htmhell.dev/adventcalendar/202… #webdev #html #a11y #ux
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
Yes! "You don't need JavaScript for that" htmhell.dev/adventcalendar/202… #webdev #javascript #html #webdevelopment
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.
Nice to see 17 years of my articles while at TPGi are now collected together:
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
#accessibility #html #webStandards #ARIA
tpgi.com/author/steve/
Web developers need to read this, and study it really well. "Foundations: HTML semantics" tetralogical.com/blog/2022/10/… #html #webdev #webdevelopment
Foundations: HTML semantics - TetraLogical
Accessibility consultancy with a focus on inclusion. We can help you with knowledge, experience, strategy, assessments, and development.TetraLogical
Yup!!! "Web developers don't know HTML anymore" reidmore.online/post/accessibi… #webdev #webdevelopment #fail #html
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
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
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
New post! Strikethrough Accessibility:
webaxe.org/strikethrough-html-…
#webdev #a11y #html #screenreaders #accessibility
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
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.
"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…
Making a positive change: PDF to HTML
This is for everyone: documenting how we rebuild inclusive digital services across governmentaccessibility.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.”
tpgi.com/short-note-the-abbrev…
/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)
Using HTML landmark roles to improve accessibility developer.mozilla.org/en-US/bl… by Schalk Neethling via MDN #a11y #webdev #html
Using HTML landmark roles to improve accessibility | MDN Blog
Learn what HTML landmark roles are, how they improve accessibility, and how you can include them on your website effectively.developer.mozilla.org
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
Remove docs for the element by Elchi3 · Pull Request #26904 · mdn/content
For mdn/browser-compat-data#19658GitHub