Skip to main content

Search

Items tagged with: HTML


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).

#accessibility #a11y #HTML


The unreasonable effectiveness of simple HTML [an anecdote] shkspr.mobi/blog/2021/01/the-u… #html #webdev


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


A person tries to build the most inaccessible website possible but still get a 100 on lighthouse. Loved this experiment! matuzo.at/blog/building-the-mo… #Accessibility #WebDev #HTML #StaticSite


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


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

html5accessibility.com/stuff/2…


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


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.

htmlforpeople.com/


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…"

#WebStandards, #Screenreader #accessibility #HTML

html5accessibility.com/stuff/2…


✍🏽 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"

#accessibility #HTML #ARIA

html5accessibility.com/stuff/2…


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


I try to stay up-to-date on web #frameworks and content management systems and the pros and cons they have regarding #accessibility support, but honestly I just enjoy the process of hand-coding pure #HTML when building a new site. Direct control over all the a11y features, no dependencies, just direct content creation with an immediate ability to test and adjust how everything functions with my screen reader. And I just enjoy having the syntax under my hands rather than futzing with interfaces!


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


😑🆕 What ARIA still does not do

"Use of ARIA is a promise you as a developer make to screen reader users."

#a11y #ARIA #HTML #WebDev

html5accessibility.com/stuff/2…


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

tetralogical.com/blog/2024/05/…


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


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.

buff.ly/3R7yZLv

#HTML #ARIA #WebDev #WebDevelopment #DigitalAccessibility #Accessibility #A11y


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.

#a11y #HTML


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!

amazon.com/dp/B0B4SD84B2/

#html


“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.”

#HTML #a11y #webDev

html5accessibility.com/stuff/2…


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

#a11y #webDev #HTML #ARIA

tetralogical.com/blog/2024/05/…


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…

#react #html


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


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

#HTML #CSS

#html #css


👁‍🗨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…


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


You Don't Need ARIA For That [HTMHell 2022] htmhell.dev/adventcalendar/202… #a11y #aria #webdev #html #tips


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.


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