Interesting, when a modal dialog (nested within a `<main>` element or some sectioning content) opens in Chrome it seems to disregard its context, so elements like `<header>` and `<footer>` will have `banner` and `contentinfo` roles as if they were scoped to `<body>`. When opened non-modally, they have `sectionheader` and `sectionfooter` (new ARIA roles + mapping) which means that it is computing the roles based on the dialogās context.
Safari and Firefox keep the context is both scenarios (i.e. modal and non-modal). I have no idea what is correct. Need to read more.
As a developer, I love solving problems. But when I leaned into accessibility, I discovered a new appreciation for the elegance of HTML. All the layers of backend and frontend engineering are...
"Regularly people link to or quote from some outdated version of a specification. This can be confusing and detrimental to understanding, if the information is no longer correct or relevant."
Is your website missing out on one of #HTMLās easiest yet most powerful tools? The lang attribute takes just seconds to add, but it makes a massive difference for #accessibility, SEO, and how your content displays. @webi18n
In this video, @xfq, who leads @w3c's #Internationalization activity, breaks down exactly what the language attribute does and demonstrate why skipping it can have real consequences. @webi18n
by Fuqiao Xue, Senior Principal Internationalization SpecialistIs your website missing one of the simplest and most powerful HTML attributes? The lang attrib...
Will browsers and screen readers respect the #html lang attribute #WordPress allows us to set on paragraphs?
TL;DR; most browsers "read aloud" feature ignores element specific lang attribute, but dedicated screen readers like #NVDA and Apple #VoiceOver do fairly well!
I've installed the 20 most spoken languages in #europe on my PC and virtual Mac.
Blog post is in the making, so feel free to ask questions and send me on even more side quests š
š blog! āWhat about using rel="share-url" to expose sharing intents?ā
Let's say that you've visited a website and want to share it with your friends. At the bottom of the article is a list of popular sharing destinations - Facebook, BlueSky, LinkedIn, Telegram, Reddit, HackerNews etc.
You click the relevant icon and get taken to the site with theā¦
I am not going to dive into the details of and . Go read Scottās 2019 post How do you figure? for an overview. That said, since Scottās post there has been movement on the AAPI mapping (partly by Scott).
"I made the mistake in a recent article of using the placeholder attribute content to illustrate when a label is not correctly associated the text label does not provide an accessible name."
Sometimes you run into a main landmark where you donāt expect one. Like Main Street USA in Hong Kong Disney. So you grab a snack in a diner that serves no hot dogs.
š¤HTML semantics: <abbr> theory versus abbreviation reality
"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."
I disagree with use cases that rely on CSS, generally at risk from network interruptions and caching, to trigger programmatic state changes in the HTML that references it (see pic). Cart / horse and all.
The CSS3 logo as a head atop a torso with its arms folded across its chest. I am a big proponent of the First Rule of ARIA (donāt use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information thatā¦
Wanna learn how to SCREAM or SING for free?Sign Up for our free four-part screaming or singing crash courses!Screaming āŗāŗāŗhttp://bit.ly/Screaming101ā Singin...
In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you wonāt hear everything announced at once: No screen reader combo treats the caption as the accessible name nor accessible deā¦
Web developers don't know HTML; or at least they don't implement proper HTML (which is ridiculous; it's like a lawyer not knowing or applying the law). Just look at 4 of the top 5 web accessibility issues from the WebAIM Million. So frustrating, and for decades now...
Our core team is looking for a senior Front-end Developer to elevate the web UI/UX experience for our users.
Ideally:
1. You are highly skilled in accessible and semantic #HTML 2. Proficient in modern #CSS 3. Experienced with #Javascript, #Typescript and complex React/Redux applications
This remote full-time position requires a 4-hour overlap with the CET timezone.
I love to see coding tutorials like this make the coder code for accessibility by giving them examples and stating up front they do not treat accessibility as an afterthought write-on.org/html/ #CSS #WebDev #HTML #Accessibility #A11y
Even popular sites fail to implement the 11 best practices mentioned in this article, and thus have at least one mistake. Use this checklist on your next pull request review that deals with any form.
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.
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.
