Document Picture in Picture で任意の要素を Picture in Picture する

Document Picture-in-Picture は、`<video>` 要素に限らず任意の要素を PiP できるようにする提案です。これにより、動画以外の要素を PiP できるようになります。主なユースケースとして、カスタムのメディア・コントロールを使用したり、プレイリストとともに動画を PiP することが挙げられます。

aria-label を使いすぎない

aria-label 属性はコンテンツに対してアクセシブルな名前を与えるために使用します。aria-label 属性を使用する代表例として、中身がアイコンのボタンがあげられます。aria-label 属性は手軽に使えますが、できる限り一般的な形式でテキストを提供することが望ましいです。

スクリーンリーダーに配慮したテキスト表記

文字を機械的に判断するスクリーンリーダーでは、人間の目によって判断できる文字について異なる解釈をするおそれがあります。そのような場合、利用者に正しい文章の意図を伝えられません。スクリーンリーダーに配慮したテキストの表記法を紹介します。

Vue.js でジェネリックコンポーネントを使う

Vue.js 3.3 から `<script setup>` 構文を使用してコンポーネントを記述する際に、型引数を指定することができるようになりました。TypeScript で関数に型引数を指定するのと同じように、コンポーネントの props の型を指定することができます。

GIF アニメーションの使用を控える

技術記事を書く際に、GIF アニメーションを使用することがあるかと思います。しかし、GIF アニメーションを使用することはアクセシビリティ上問題となります。この記事では、GIF アニメーションを使用することを避けるべき理由を説明します。

Vitest のブラウザテスト

Vitest は実験的な機能として、ブラウザモードをサポートしています。ブラウザテストは Node.js 上で jsdom を用いてテストを実効するよりも信頼性の高い方法ですが、テストのセットアップに時間がかかるといったデメリットも存在します。