🖖🏼Know your Standards

#a11y #HTML #ARIA

html5accessibility.com/stuff/2…

ARIA in HTML Conformance Checker Bookmarklet

#ARIA #HTML #checker

github.com/gezlemon/WAI-ARIA-U…

GitHub - gezlemon/WAI-ARIA-Usage: Bookmarklet to evaluate WAI-ARIA usage

Bookmarklet to evaluate WAI-ARIA usage. Contribute to gezlemon/WAI-ARIA-Usage development by creating an account on GitHub.

^GitHub

The four most popular ways to use RDF-based metadata on websites are RDFa-Core, RDFa-Lite, Microdata, and inline JSON-LD.

I can’t use RDFa-Lite because I need rel HTML attributes. rel silently upgrades RDFa-Lite to RDFa-Core, which parses differently. I doubt all parsers upgrade correctly; some will try to parse RDFa-Core as RDFa-Lite. Conformant RDFa parsers upgrade RDFa-Lite pages to RDFa-Core despite many authors only being familiar with RDFa-Lite. I suppose resources like Schema.org and Google’s documentation only documenting RDFa-Lite markup worsens the confusion. Update 2024-12-16: Sarven Capadisli has clarified on the Fediverse that this is the behavior of one faulty parser; rel only triggers an upgrade when used with an RDFa namespace. I may re-evaluate RDFa.

With RDFa split between two incompatible alternatives with a confusing upgrade mechanism, the alternatives are Microdata and JSON-LD. I use structured data extensively; JSON-LD would duplicate most of the page. Let’s use this relatively short article as an example. Exruct can convert the embedded Microdata into a massive JSON document featuring JSON-LD. Take a look at the JSON-LD and HTML side by side. Microdata attributes take a fraction of the footprint, encode the same information, and don’t require duplicating nearly the entire page.

Originally posted on seirdy.one: See Original (POSSE). #Microdata #SemanticWeb #RDFa #HTML

GitHub - scrapinghub/extruct: Extract embedded metadata from HTML markup

Extract embedded metadata from HTML markup. Contribute to scrapinghub/extruct development by creating an account on GitHub.

^GitHub

I don't know how many times we have to say this. Last I counted it was 1.2 million times and almost 20 years.

"Developers should always prefer using the correct semantic HTML element over using ARIA."

developer.mozilla.org/en-US/do…

#webdev #javascript #html #webdevelopment #a11y #aria

An overview of accessible web applications and widgets - Accessibility | MDN

Most JavaScript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces. Sliders, menu bars, file list views, and more can be built with a combination of JavaScript, CSS, and HTML.

^{MDN Web Docs}

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

🤐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

html5accessibility.com/stuff/2…

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

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}

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

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…

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/

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

#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

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.

buff.ly/4cJlV7S

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

#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/…

Why are my live regions not working? - TetraLogical

^TetraLogical

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.

buff.ly/3R7yZLv

#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

html5accessibility.com/stuff/2…

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

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!

amazon.com/dp/B0B4SD84B2/

“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/…

Why are my live regions not working? - TetraLogical

^TetraLogical

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

✂️ Should you use React?

60 seconds · Clipped by Hasan Ali · Original video "On the merits & limitations of React & single-page apps" by Real World React

^YouTube

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

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}