What is alt text?Alternative text (or alt text, in short) is the text you can use to describe an image when you publish it on your website or social media. Why is alt text important?Imagine, for a moment, that your browser stopped showing you images. You would still see them referenced in articles, you’d read conversations about them, people making jokes. What would this experience be like for you
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
Let's talk about />: <input type="text" /> <br /> <img src="…" />You'll see this syntax on my blog because it's what Prettier does, and I really like Prettier. However, I don't think /> is a good thing. First up: The facts Enter XHTML Back in the late 90s and early 2000s, the W3C had a real thing for XML, and thought that it should replace HTML syntax. There were good reasons for this. At the time
Popovers are everywhere on the web. You can see them in menus, toggletips, and dialogs, which could manifest as account settings, disclosure widgets, and product card previews. Despite how prevalent these components are, building them in browsers is still surprisingly cumbersome. You need to add scripting to manage focus, open and close states, accessible hooks into the components, keyboard bindin
htmx 1.9.0 Release I’m happy to announce the 1.9.0 release of htmx. New Features Support for view transitions, based on the experimental View Transitions API currently available in Chrome 111+ and coming to other browsers soon. Support for “naked” hx-trigger attributes, where an hx-trigger is present on an element that does not have an hx-get, etc. defined on it. Instead, it will trigger the new h
無限に広がる青い空!セキュアスカイ!CTOはせがわです! 最近ようやくオンサイトでの登壇も増えてきたのですが、この数年すっかりオンライン慣れしすぎてしまって、いざオンサイトで登壇となると色々勘所が鈍ってしまったと感じることも少なくありません。特に、Zoom等を使う場合には常に目の前に投影する画面があるのが当たり前すぎて、オンサイトの講演でデモを実演しようという段階になって演台からスクリーンが見えにくい配置なのでうまく操作ができないということに気づき、焦ってしどろもどろになってしまうという失態もありました*1。 そこで、オンサイトでの登壇で少しでもそのような状況を改善するためのツールを作ってみました! 任意のアプリケーションのウィンドウを複製表示、拡大表示するツール 作ったツールは、「任意のアプリケーションウィンドウ(またはデスクトップ全体)を複製表示し、その表示サイズを自由に変えられる」と
Framework-independent standalone HTML serializer for generating markup for Web Components. Expand any HTML element (including custom elements and web components) to HTML with defined conventions from web standards. This means that Web Components created with WebC are compatible with server-side rendering (without duplicating author-written markup). Compilation tools to aggregate component-level as
What is Visual Testing?Visual testing ensures that a UI's appearance matches its intended design, capturing and highlighting any visual deviations from expected elements like layout, colors, and text. While E2E testing confirms functionality, visual testing with Argos ensures the UI looks right to the user, acting as a specialized tool to maintain visual quality alongside E2E tests.
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a <textarea> more like a <div> so it expands in height as much as it needs to in order to contain the current value. It’s almost weird there isn’t a simple native solution for this, isn’t it? Looking back at that article, none of my ideas were particularly good. But Stephen Shaw’s idea that I linked to tow
textlintでHTMLファイルを扱うtextlint-plugin-html v1をリリースしました! Release v1.0.0 · textlint/textlint-plugin-html 自分が使うプロジェクトを持ってないのでずっと放置していましたが、textlint v13.0.0のリリースに合わせて全部書き直しました。 textlint v13.0.0 - ESMで書かれたルールを扱えるように 🔥 Breaking Changes textlint v13.0.0以降が必要になりました Pure ESMで書かれたプラグインなので、ESMで書かれたプラグインを扱えるtextlint v13.0.0以降が必要になります Node.js 16.6.0以降が必要になりました TypeScriptに書き直しました 🆕 Features HTMLのパーサにrehypeを使うように
Web Developers use Socket runtime to create apps for any OS, desktop, and mobile. You can use plain old HTML, CSS, and JavaScript, as well as your favorite front-end libraries like Next.js, React, Svelte, or Vue. The Socket runtime CLI outputs hybrid native-web apps that combine your code with the runtime. Your code is rendered using the OS's native "WebView" component. Platform features are imple
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く