Intro 10 年ほど前に同じことを調べたことがある。 なぜ html の form は PUT / DELETE をサポートしないのか? - Block Rockin' Codes https://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete 当時は全くの素人で、素人なりに調査はしたが、ほとんどが推測の域を出ない結論だった。 この問題についてあらためて記す。 仕様策定の経緯 表題の通り、 <form> の method には GET と POST しかサポートされていない。 HTTP には他にも PUT や DELETE といったメソッドもあるのに、なぜサポートされていないのかという疑問から始まった。 仕様が決定した経緯は、以下に残っている。 Status: Rejected Change Descriptio
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 | プレスリリース | フリー株式会社
freee、デザインシステム「vibes」を公開 アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ
Pull Requestのレビュー負荷を軽減し、開発生産性を向上するためにチームで取り組んだこと - ZOZO TECH BLOG
はじめに こんにちは。WEARフロントエンド部Webチームの藤井です。私たちのチームでは、WEARのWebサイトのリプレイスと新規機能の開発を並行して進めています。これらの開発を推進する中で、Pull Requestのレビュー負荷を軽減し、開発生産性を向上させるための取り組みを行なってきました。本記事では、その中で効果的だった取り組みについてご紹介します。 目次 はじめに 目次 背景と課題 レビューの体制の薄さ スコープの広さ 仕様把握の負担 対応内容についての説明不足 処理の複雑性 仕様の抜け漏れ 動作確認の手間 課題解決に向けた取り組み レビュー体制の見直し Pull Requestを小さくする Issueを小さくする Pull Requestの粒度について明文化する 機械的なチェックの拡充 ESLintルールの拡充 Visual Regression Testの拡充 Pull Req
はじめに 「Flat Config が何かはわかったからサンプルをくれ！」という方向けの記事です。 筆者が普段使用している eslint.config.js をご紹介します。 Flat Config については良記事がたくさんあるため ↓ などを参照してください。 今回ご紹介する設定は、React × TypeScript を使用し、フォーマットは Prettier に任せる前提になっています。 しかし、Vue やサーバー Node.js でも使いまわせる箇所は多いと思います。 eslint.config.js まずは結論から。 // @ts-check import { fixupConfigRules } from '@eslint/compat'; import { FlatCompat } from '@eslint/eslintrc'; import eslint from '@
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
こんにちは！アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAでは主にバックエンドにRails+graphql-rubyやKotlin+DGS、WebフロントエンドにTypeScriptとReactを採用していて、私が参加するチームでの仕事もそれらを触る事が多いのですが今回はそこでコードレビューをする際に気にしている「べからず」をティア別に見ていきましょう。 特に理由なくlintを無視してはいけない アルダグラムでは利用エディタの規定や制限はありませんが、Webフロントエンド開発で一番利用者が多いのはVSCodeでextensions.jsonにlint表示等のために必要な拡張プラグインリストが整備され半自動でインストールされるようになっています。VimなどVSCode以外のエディタを利用する場合には同等のリアルタイムlint表示ができるよう自主整備
GitHub社内におけるエンジニアリングガバナンスがどのように行われているのかを紹介した同社のブログ「GitHub’s Engineering Fundamentals program: How we deliver on availability, security, and accessibility」（GitHubのエンジニアリングにおける基本原則：我々はいかにして可用性、セキュリティ、そしてアクセシビリティをデリバリしているのか）が公開されています。 GitHubにとって、ソフトウェアの開発力が同社の競争力に直結するものであることは明白です。エンジニアリングガバナンスは同社の経営にとって最も重要な要素であり、その同社が構築したエンジニアリングガバナンスのノウハウは多くのIT企業にとって参考になるものでしょう。 同社がどのようなガバナンスを行っているのか、ブログの内容からまとめてみま
2024/08/24(土)で開催されたフロントエンドカンファレンス北海道 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 X アカウントについては、fortee や資料に記載されていたり、資料公開の投稿で分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 タイムテーブル 本イベントでは2つの会場でそれぞれ講演がありました。 便宜上、以下のように A, B と表します。 カケハシ（8F）：A LINE ヤフー WOW ルーム（6F）：B 11:00 - A - Webの潮流から考える、フロントエンドの溢れんばかりの魅力とフロントエンドエンジ
Stailerがスクリーンリーダーに対応するまでの道のり~Flutterでのスクリーンリーダー対応について、あるいはユーザビリティやユーザー獲得の話~ - 10X Product Blog
こんにちは、ソフトウェアエンジニアの@futaboooです。 先日スクリーンリーダーへ対応したプレスリリースを配信しました。今日はその裏側について紹介です。 10x.co.jp はじめに とあるパートナーのネットスーパーシステムをStailerへリプレイスして少しすると、お客様から「今まで使えていたのに使えなくなった！」という切実な声が届きました。この問い合わせを通じて、視覚障害者のお客様がスクリーンリーダーを使って買い物をしていたこと、そしてStailerがそのニーズに応えていないことに気づきました。 そこで、我々は視覚障害者のお客様へのヒアリングを開始し、どのような環境でアプリを使っているのか、使用しているデバイスやスクリーンリーダーソフトウェアの種類など、具体的な情報を収集しました。このプロセスを通じて、アプリがより多くの人々にとって使いやすいものになるための重要な改善点を発見しまし
QAが率先してアクセシビリティチェック品質をリードしたらいいことづくしだった - freee Developers Hub
こんにちは。freee人事労務でQAエンジニアをしているshihoです。 freee QA Advent Calendar2023 15日目です。 自己紹介 元カスタマーサポートで、2016年8月にfreeeに入社しました。3年前にQAエンジニアに異動してから、品質保証の重要性とユーザーのニーズに焦点を当てた仕事に取り組んでいます。お客様との関わりがあった経験を活かし、使いやすく信頼性の高いプロダクトを提供することに情熱を燃やしています。 アクセシビリティとは アクセシビリティに関しては、さまざまな定義が存在しますが、freeeとしては特定の個人を対象とするのではなく、すべての人に使いやすいものを提供することを目指しています。また、特定の条件での使いやすさではなく、あらゆる条件下でも使用できることを重視しています。 アクセシビリティチェックに取り組むきっかけ 元々freeeに入る前は、アク
Xboxがサイコロの各面を自由にカスタマイズしたりサイコロ同士をつなげたりして自分だけのコントローラーを作り出せるモジュール式コントローラー「Proteusコントローラー」を発表
Xboxが各面を自由にカスタマイズできるサイコロ状のモジュールを複数つないでコントローラーとして使うことができるという、従来のコントローラーとは一線を画する見た目とカスタマイズ性のモジュール式コントローラー「Proteusコントローラー」を発表しました。 Proteus Controller Kit VIP Price https://www.byowave.com/product/proteus-controller-kit-vip We are super excited to be featured in @XboxWire 's article on the upcoming accessibility updates for Xbox! Thanks to the Xbox team for supporting us on this journey to making game
こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善
@axe-core/playwright によるアクセシビリティテストの自動化 2024.08.18 axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。 今書いているコードがアクセシビリティ上の問題を持っていないかどうかを確認するために、Lint ツールによる機械チェックが有効です。eslint-plugin-jsx-a11y や Markuplint といったツールを導入することで、コンポーネント単位で静的にコードを解析してアクセシビリティの問題を検出できます。このような Lint ツールは、code を書いている最中に即座にフィードバックを受けるこ
freeeアクセシビリティー・ガイドライン Ver. 202408.0を公開しました & アクセシビリティー関連の問い合わせもしやすい体制作りを始めました - freee Developers Hub
こんにちは、freeeのアクセシビリティー・ガイドラインおじさんの中根です。 1年ほど前にこちらで書いた記事で触れた健康年齢、1年後の健康診断の結果によると10歳くらい下がって、実年齢とほぼ一致しました。こんなに値がぶれるものに一喜一憂するのは馬鹿馬鹿しいので、今後は気にせず暮らしていくことにしました。 さて、こちらに書くのは久しぶりですが、例によってfreeeアクセシビリティー・ガイドラインの更新情報です。 そして、今回はそれに加えて、freeeのプロダクトをご利用いただいている方や導入を検討してくださっている方などからの、アクセシビリティーに関連するお問い合わせをしていただきやすくなることを目指して始めた施策についても、簡単に紹介します。 最新版はVer. 202408.0 freeeアクセシビリティー・ガイドライン Ver. 202408.0リリース・ノート こちらで最後に更新情報を
コンポーネントをアクセシブルに保つ技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番オーソドックスなものとして、アクセシビリティ向けLintツールを導入しています。 Ubieではeslint-plugin-jsx-a11yとMarkuplintを導入しています。 両者は重複する部分もありますが、eslint-plugin-jsx-a11yはよりReactでの実装を考慮したチェック、Markuplintは純粋なマークアップのチェックに強みがあるので、両方のツールを使用することでより網羅的にチェックができます。 上記Lintはコンポ
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.5」が正式にリリースされました。 Astro 4.5 is here! Introducing the new Dev Audit UI — Catch real-world a11y & perf issues during development, right in your browser. Available today in the Astro Dev Toolbar! Plus: View Transition improvements, Multi-CDN, Shiki 1.0, and more.https://t.co/
【デザインエンジニアが解説】施行されたばかりの改正障害者差別解消法とウェブアクセシビリティの正しい関係 - レバテックラボ（レバテックLAB）
【デザインエンジニアが解説】施行されたばかりの改正障害者差別解消法とウェブアクセシビリティの正しい関係 2024年7月12日 Ubie株式会社 デザインエンジニア 大木 尊紀 WebフロントエンドエンジニアとしてWebアプリケーション開発に従事した後、UIデザイナーを経てデザインエンジニアとなる。デザインとエンジニアリングが交わるところが最近の主戦場で、プロダクト開発の他にデザインシステムの開発・運用にも取り組んでいる。また個人的な活動としてデザインシステムやUIデザインの同人誌を書いたり勉強会を主催したりしている。 X: @takanoripe 個人サイト 2024年4月1日に障害者差別解消法の改正法が施行されました。この記事ではWebエンジニアに向けて、今回の改正の内容と実際のプロダクト開発にどのような影響をもたらすのかについて解説します。また具体的にどんなところからプロダクトの改善を
We are thrilled to announce that oxlint is now generally available! This milestone signifies our team's ability to promptly address and triage issues. Oxlint is a JavaScript linter designed to catch erroneous or useless code without requiring any configurations by default. How to Use At this stage, oxlint is not intended to fully replace ESLint; it serves as an enhancement when ESLint's slowness
JavaScriptライブラリ キャビネット（Cabinet） ウェブアクセシビリティに対応した スライダー・カルーセルUI スライド、フェード、自動再生、ドラッグ操作、レスポンシブ、キーボード操作・スクリーンリーダーに対応しています。
Over the past decade, web UI technology has evolved by leaps and bounds. In spite of that, it’s harder than ever to build/maintain a production UI in 2024. At Storybook, we work with thousands of the top UI teams around the world, at places like Microsoft, Supabase, and JPMorganChase. And no matter how big or small the team, or how polished the final result, we see similar struggles to manage comp
自分だけの ESLint Config を作る
これはなに 自身のプロジェクトに適合した ESLint Config の設計および実装方法についてまとめたものです。 業務や趣味プロに関わらず、 JavaScript / TypeScript でコーディングする際に ESLint は非常に有用なツールであり、広く使われています。ほとんどの場合において ESLint 基盤はプロジェクトごとに必要なパッケージをインストールして設定ファイルを作成し、構築されます。しかしその設定内容がプロジェクト間で重複することは珍しくなく、プロジェクトの数が増えるにつれ冗長となりがちです。そこで、複数プロジェクト間で共通のルールセットを定義して単一の ESLint Config として再利用することで、メンテナンス性や再利用性の向上が期待できます。本稿では、そのような用途で使える自分だけの ESLint Config を設計・実装する方法を紹介します。 前提
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
タブUIをアクセシブルにする
どうも、nano72mknです。 アクセシビリティを意識してタブUIを作ったので、実装時に調べたことやポイントをまとめます。 タブUIについて まず、初めにタブUIと言われて思い浮かべるのは、この形だと思います。 このUIは、２つのパーツに分けることができます。 １つ目は、「タブ」と呼ばれるパーツ ２つ目は、「タブパネル」と呼ばれるパーツ この２つのパーツをがっちゃんこして、タブUIは出来ています。 タブUIをアクセシブルにする roleとaria属性を付与してアクセシビリティ対応をする。 roleを付与する 付与する必要があるものは下記の３つ tab tablist tabpanel tabとtablist タブにはtab、複数のタブを囲っている要素にはtablistのroleを付与する <div id="tab"> <div role="tablist"> <button role="
ついに広島で開催されたプログラミングの祭典YAPC 2024 Hiroshimaに参加し、さきほど帰宅したのでレポートです。2/19〜2/21までの各イベントに参加しました。いくつかのトピックに分けて、現場の熱量をなるだけ伝えようと思います。 ついにやってきた大規模カンファレンス ついに、と書いていますがYAPCは例年ある程度安定して開催されています。ではなぜこう書いたかというと、COVID-19によりプログラミングコミュニティのカンファレンスが熱量を失ってしまっていたことが理由です。 COVID-19の猛威は日本中に襲いかかり、ありとあらゆるイベントを中止に追いやってきたわけですが、プログラミングコミュニティの集会も例に漏れませんでした。YAPC::2020はCOVID-19の打撃を受けて延期してしまいました。他のコミュニティも、2020年当時に同じような苦渋の決断を行っていたことと思い
About this plugin The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations with engineers as part of your design. Accessibility is critical for good desig...
これは フェンリル デザインとテクノロジー Advent Calendar 2023 15日目の記事です。 こんにちは。大西です。年に一度くらいしか書かないnote、今年も一度しか書かずに終わりそうです。 私は視覚科学を勉強しています。特に文字の認識に関する研究が好きです。 文字について考えるのが楽しすぎて、博士号をとりました。今回は久しぶりに自分の専門領域の話を書きます。 IT業、しかもHCDを掲げて仕事をしている身ではありますが、実は私、WCAG関連の話題があまり好きではありません（個人的な見解です）。中でも、「4.5:1以上のコントラスト比がないとアクセシビリティ対応が不十分」のようにいわれがちな、コントラストチェッカーの結果を見るのが一番苦手です。チェッカーでの計算に限界があることを理解して使ってほしい、結果に一喜一憂するくらいなら輝度を実測しちゃえばいいのに、などと歯がゆい思いを
GitHub - ymrl/a11y-visualizer: A Browser Extension for Enhanced Web Accessibility Checking
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
ymrl @ymrl UIデザイナー・フロントエンドエンジニア。 「Webアプリケーションアクセシビリティ」という本を書きました webapp-a11y.com 最近はAccessibility Visualizerというブラウザ拡張を作っています https://t.co/vXuxayv4CN ymrl.net ymrl @ymrl なんとなくテレビを点けてたら家に着いてく番組やってて、取材された人が家について「OK Google 部屋の電気をつけて」って言ったので「やめろ！！！」って叫んでしまった。今回は家のGoogleデバイスたちは一斉に「エラーが発生しました。数秒後にもう一度お試しください」って言うだけで済んだ。
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
Storybook 8.4
Storybook is the industry standard workshop for building, testing, and documenting UI components. Hundreds of thousands of developers use it every week, including teams at Volvo, Netflix, and Chewy. In Storybook 8.4, we’ve created the best DX for testing, and debugging frontend tests in the browser. It builds on our work in component testing in partnership with Vitest. ▶️ 1-click Component Testing
今年サボった勉強を冬休みで全部取り戻す計画
どうも、仕事を納めてしまうと、何も予定がない人になってしまった人です... てなわけで、公式ドキュメント、リリースノート、信頼できる情報源全部読んじゃうぞという計画を立てました。計画倒れしないようにちゃんと読むことをブログで宣言します！ 何をするのか マジでやること何もないので、日頃サボったプログラミングの勉強を一気にしようと思っている。「勉強していない」なんていうと「嘘つけ」と言われそうだが、いつも必要になったことをその都度調べて誤魔化しているだけであり、読むのは本や記事といった誰かの二次三次情報なので、実は一次情報には触れていない。なので以下に挙げるドキュメントは実はちゃんと読んだことがない。全て雰囲気で使っている。 そのため自分は歳の割には未知になっている範囲がとても多く（この構文ってフリーレンぽくてなんかかっこいいよね）、未知の未知にとても弱いため、わかっている人から見るとおかしな
本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』の第7章「アクセシビリティの組織導入」を公開するものです。 改正された障害者差別解消法や、デジタル庁の取り組みからの影響を受け、アクセシビリティ向上への機運は日ごとに高まっているように感じます。著名な企業がアクセシビリティへのスタンスを表明するケースも増えてきました。 しかし、こうした情報が目に入っているのは、あなたがアクセシビリティに関心がある側の人だからです。多くの場合、社内でのアクセシビリティへの意識はまだまだ高くないのが実態です。 個人や有志による非公式な取り組みでも、アクセシビリティは徐々に改善することは可能です。しかし、いずれは限界を迎えます。企業が提供するWebサイトやWebアプリケーションは組織で開発されており、大規模であり、かつ成長していくからです。 継続的に取り組み、成果を出し続けるため
Visualize the information to ensure accessibility in your web pages, such as alternative text, heading levels, form labels, and… Visualize the information to ensure accessibility in your web pages, such as alternative text, heading levels, form labels, and live region updates. Until now, the only way to view this information was to read it using developer tools, read code, or view it using a scree
2024年に合理的配慮の義務化、Webアクセシビリティは？具体例とSEOとの関係も解説｜BringFlower
ウェブアクセシビリティは、ウェブのユニバーサルデザインのことです。2021年5月に改正が決まり、2024年4月に施行となる障害者差別解消法（※）により、これまで民間企業にとって努力義務だった「合理的配慮」が義務化されることが決まりました。なお、実際に義務化が開始するのは施行日とは異なり、2024年6月4日からとなります。 一部では、ウェブアクセシビリティ対応は法改正があっても義務化されないという論調も目にしますが、それはそれで、語弊があります。 この記事では、ウェブアクセシビリティ基盤委員会の委員を務めていたこともある私により、ウェブアクセシビリティとは何かと、要件、対応例、具体的に何をすればよいかというイメージを持っていただけるような内容を記載します。また、世界のウェブアクセシビリティ対応の流れ、日本でアクセシビリティに対応してない場合に今後どうなる可能性があるかについて述べます。 ※当
画面幅、メディアクエリに依存した要素の表示切り替え React + CSS Modules を使っている前提イメージ JSX 上で表示・非表示の分岐が明示されてほしい CSS を掘らないと分からないのは見通しが悪く感じる matchMedia() ベースの Hooks にすると SSR で難儀する 一貫性のためにサーバーサイドコードで頑張るのも億劫である 表示・非表示だけなら純粋な CSS で実現したい display: contents を使ってみた メディアクエリで display: none と block を切り替えれば良いという単純な話ではなく、親要素が Flexbox や Grid だった場合を想定する必要があるので、表示されている状態ではボックスモデル的に虚無になってほしい。 contents これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボック
vim-jp ラジオ オフィシャルサイト制作の舞台裏！
この記事はVim 駅伝の 7/22 の記事です。 また、この記事は デザインを担当した 輪ごむ さんとの共同執筆記事です。 はじめに 2024年7月8日月曜12時、ポッドキャストラジオ番組「 エンジニアの楽園vim-jpラジオ 」がAuDee（TOKYO FM）公式番組として配信開始されました。 本記事では、この vim-jp ラジオの Landing Page(LP) 制作の舞台裏を紹介します！ デザインや技術的なポイントなど、様々な視点から制作のポイントを紹介します。 デザインについて (by 輪ごむ) コンセプト ロゴから以下のようなイメージを膨らませてデザインを考えました。 夜 バーみたい わいわいとした雰囲気 ネオン調 これらのイメージを頭の片隅に置いて大量の web サイトや LP を大量にインプットしてなんとかひねり出したのが今回完成した LP になります。 デザインのレビュ
こんにちは！サイボウズ様で業務委託でフロントエンドエンジニアをしている Nokogiri です。 このたびはCybozu Summer Blog Fes'24にて執筆の機会をいただきましたので、僭越ながら寄稿させていただきます。 今回はReact Testing LibraryでのWAI-ARIAロールの活用事例について紹介させていただきます。 前提 Reactで書かれたUIをテストする方法の一つとしてTesting Library があります。 Testing Libraryでは要素取得にWAI-ARIA ロールを利用することを推奨しています。（ロールは視覚/マウス ユーザーだけでなく、支援技術を使用するユーザーのエクスペリエンスを反映するため） 実はWAI-ARIA ロールには66個のロールがありますが、実際によくWeb開発で使われるUIにどのようなロールが付与されているのかを知りたく
2024 年 5 月 28 日に東銀座の PLAID さんで開催された v-tokyo 20 に参加してきた。 v-tokyo は Vue.js 日本ユーザーグループが不定期（3 ヶ月に 1 回？）に開催している Vue の Meetup イベントだ。 頭がフレッシュなうちに参加レポートを残す。 headless な UI ライブラリを選択するアンカーリンク会場スポンサーの PLAID さんのセッション。 Headless UI ライブラリの説明からはじまって、Vue 向けの Headless UI ライブラリの Radix Vue を使って社内で Vue 版のデザインシステムを作成しているという話だった。 PLAID さんの社内には Sour というデザインシステムがあって、それの Vue 版を Radix Vue で実装しているらしい。 Sour のことは検索してもあまりアウトプットさ
Linterからはじめるa11y
Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。 ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-p…
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜ HTML の form は PUT / DELETE をサポートしないのか? | blog.jxck.io
2024年9月 俺の eslint.config.js
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
コードレビューの時に気にしている、べからずTierリスト
GitHub社内におけるエンジニアリングガバナンスはどのように行われているのか
フロントエンドカンファレンス北海道 2024 公開資料・Xアカウントリンクまとめ
アクセシビリティを担保するためにESLintの独自ルールを作っている話 - SmartHR Tech Blog
@axe-core/playwright によるアクセシビリティテストの自動化
The JavaScript Oxidation Compiler
ウェブアクセシビリティツール | 福岡・北九州のウェブアクセシビリティ専門web制作会社
Component testing in Storybook
YAPC::2024 Hiroshimaにはてなパーカーで参加しました #yapcjapan - Lambdaカクテル
A11y - Focus Order | Figma Community
視覚科学者がAPCAについて考えてみた｜Madoka Ohnishi
テレビ番組で出演者が｢OK Google 部屋の電気をつけて｣と発言→家のGoogleデバイスが一斉に反応してエラーを吐く
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
第1回 情報を共有して仲間を探す | gihyo.jp
Accessibility Visualizer - Chrome Web Store
メディアクエリに依存した要素の表示切り替えを `display: contents` でユーティリティコンポーネント化
React Testing LibraryでのWAI-ARIAロールの活用事例
v-tokyo 20 に参加した | blog.kzhrk.com