I started writing an article about how you can sneak in #accessibility fixes (as a developer or designer) without telling your boss.
Do you have any stories you would like to share that I could use for the article?
I did it by silently adding landmark elements and a skip link, updating global focus styles so that they're consistent and accessible and other evil shenanigans. š
I was using pdflatex to generate receipts for product purchases on my website, and I found it didn't have very good international multilingual unicode support. I found wkhtmltopdf, which works great for me. On a digitalocean debian server, I'm producing receipts that closely mimic my on-line HTML receipts in 16 languages. I highly recommend wkhtmltopdf.
Iām _not_ saying to never put a live region in / on a button, but I _am_ saying it may not (will not) perform as you want. cdpn.io/aardrian/debug/WbxvPOdā¦
Table of Contents Example The HTML Live Region Button Decoration Accessible Name The Styles Hide the Live Region Color and Contrast Active Animations Text Resize and Reflow Windows High Contrast Mode The Script The Click Event Manipulate Outcomes Scrā¦
How does the Shadow DOM appear in the accessibility tree?
Browsers flatten the shadow tree when building the accessibility tree. Flattening removes the accessibility boundary of the shadow root and exposes the internal nodes as if they were normal children in the accessibility tree, not the DOM tree.
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
