/** * This is intended to be a basic starting point for linting in your app. * It relies on recommended configs out of the box for simplicity, but you can * and should modify this configuration to best suit your team's needs. */ /** @type {import('eslint').Linter.Config} */ module.exports = { root: true, parserOptions: { ecmaVersion: "latest", sourceType: "module", ecmaFeatures: { jsx: true, }, },
TL;DR recommendation: Narrow down your definition of "tooltip," and jump to the last section. Tooltips have been a reliable source of web accessibility woes from the very beginning; or at least from the beginning of graphical web browsers. They have gone by many names: "tooltip," "infotip," "toggle tip," "hint text," "balloon help," "info bubble," "inaccessible overlay of shame"... the list goes o
GitHub - burnworks/a11y-test-assist-bookmarklets: Collection of bookmarklets to assist with accessibility testing.
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
このブログのCSSライブラリをVanillaExtractからLinariaに置き換えました。 Linariaに置き換えるにあたり全体のCSSを移行する必要がありデザイン崩れが心配だったので、Playwrightでビジュアルリグレッションテストを実施してデザイン崩れがないことを自動テストしました。 Playwrightの導入とLinariaへの移行は次のPRで確認できます。 Playwrightでのビジュアルリグレッションテストを導入 #543 vanilla-extractをlinariaに移行 #544 Playwrightのインストールと環境構築 パッケージ単体としてインストールもできますがcreateコマンドを利用すれば、設定ファイルの自動生成など環境構築を自動で行ってくれます。 $ yarn create playwright 設定ファイルの修正 自動生成された設定ファイルを自分
emahiro/b.log
社会人 10 年目が終わって、11年目になった。 2014年から社会に出たときには、先のことなんか何も考えられてなかったけど気づいたら10年賀過ぎてしまった。 10年目まではちゃんと数えておくか、と思っていたのもあり、来年以降は「社会人N年目」みたいなカウントはもうしなくなるとは思う。 特に社歴や社会人歴が意味を持つとは考えていないけれど、それでも10年は大きいな〜と思うともに「10年間なんやかんや体も壊さずに生き延びたのか〜」と思うとちょっと感慨深いものもあったりする。 30中盤なんて世間一般ではまだまだ若手だと思うけど、この業界では若手とは見られないし、見られ方も変わってくるのでそういう意味では自分の見方も見られ方も変わっているということは意識しないと行けない。 10年で公私とも置かれてる状況は10年前に想像していたものとは全然違うし予想もしてなかった変化を感じるので、次の10年ものん
VercelにNext.jsをデプロイ
$ yarn create next-app nextjs-vercel --typescript --eslint --src-dir --import-alias "@/*" yarn create v1.22.19 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4] 🔗 Linking dependencies... [4/4] 🔨 Building fresh packages... success Installed "create-next-app@13.1.6" with binaries: - create-next-app ✔ Would you like to use experimental `app/` directory with this project? … No / Yes
キーボードで操作してみよう マウスやトラックパッドでの操作が困難な事情があって、キーボードによる操作で Web を閲覧している場合は多くあります。 そのため、Web ページ上のすべての操作をキーボードで完結できるようにしてください。 キーボードによる主な操作方法 Tabキーを押してフォーカスを移動（Shift+Tab キーで逆順に移動） リンク、ボタン、入力フォームなどにフォーカスが移動していく Safari を使用している場合は、設定によってはOption キーを押しながら TabキーやShift+Tab キーを押さないと、リンクなどにはフォーカスが移動しない場合があります Enterキーを使ってリンクやボタンをクリック ↑, ↓, ←, →キーや PageUp, PageDownキーでスクロール チェックボックスはSpaceキー、ラジオボタンは↑, ↓, ←, →キーで選択状態を変更す
freee、Web開発で音声読み上げを活用するための解説動画を公開 視覚障害者にも利用しやすいアクセシビリティが高いWeb開発を支援 | プレスリリース | フリー株式会社
freee、Web開発で音声読み上げを活用するための解説動画を公開 視覚障害者にも利用しやすいアクセシビリティが高いWeb開発を支援 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeは、視覚障害者がPC操作をする際の補助として必要な「スクリーンリーダー」の利用を考慮したWeb開発に必要な手順がわかる解説動画集（全22本）を公開しました ・freeeが社内向けにアクセシビリティを意識した開発を推進する為に制作した動画ですが、社会全体でスクリーンリーダーに対応するためのアクセシビリティ開発が拡がっていくことを目的に公開しています freee株式会社（以下freee）は、視覚障害者がPC操作をする際の補助として必要な「スクリーンリーダー（音声読み上げ）」を、Web開発で活用するために必要な手順や具体的な方法がわかる解説動画集（全22本）を公開したことをお知らせします。本解説動画
コラム32：【アナタも紹介されてるかも！】僕がチラチラ見て勉強させてもらっているXのアカウントを紹介✌ | オンラインコミュニティ「集まれ！Webディレクターの森」
ちわっす。僕です。 先日、僕が普段からチラチラ見ているXのアカウントを何気なく紹介したのですが、 とりあえず、、、 デザインのチェックバック 岩松さん、すぎそん、𝖢𝗁𝗂𝗍𝗈𝗌𝖾 𝖪𝖺𝗍𝗈さん UI周り ベイジブログ、i3DESIGN Designersさんのnote、うさぴよさん クオリティ QUOITWORKSさん、エムハンドさん、Redesignさん、イム ジョンホさん 発信について 石川さん、横澤さん… — 𝕏タケ𝕏東京Webディレクター🦒 (@takelogtake) February 15, 2024 それぞれのアカウントにメンションをあえて付けないのは 通知が飛ぶと煩わしいからという僕なりの配慮です。 流石ですね。← これがまぁまぁ反響あってビックリしました。そして「こいつぁ…記事にしたら伸びるのでは？」という下心が芽生えましたので今日は紹介系の記事
そしてつい先日、同講演のレポート記事、「ビヨンセの公式サイトも訴えられた」企業Webサイトがアクセシビリティに取り組むべき理由とは？がWeb担当者Forumに掲載されました。当日お話しした内容をかなり精緻に書き起こしていただいており、スライドを見ただけでは伝わらない・わかりにくい部分も、同記事をお読みいただくことで解消できるかと思います。 改めてイベントにご参加くださった皆様、イベントを主催されたシックス・アパートの皆様には、厚く御礼申し上げます。ありがとうございました。 講演の冒頭で触れた、アメリカでのWebアクセシビリティ関連訴訟について若干補足させていただきますと、比較的最近にも注目に値するニュースがありました。Webサイトやモバイルアプリから好みのピザを注文できなかったために全盲のGuillermo Robles氏より訴訟を受けたドミノ・ピザ社が、WebやアプリはADAの適用対象外
Tab に渡す ID を作りたい 「アクセシブルな Tabs を実装するには適切な ID を使用する」と、W3C の ガイド (Example of Tabs with Automatic Activation) が言っています1。 <div> <div role="tablist"> <button id="tab-1 👈👈👈 これ" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1" > タブボタンの中身 </button> </div> <div id="tabpanel-1 👈👈👈 これ" role="tabpanel" tabindex="0" aria-labelledby="tab-1" > タブパネルの中身 </div> </div> Vue で Tabs を実装すると
waiariaの記事一覧
articlesTrendingAlltimeLatest📕【HTML】dl, dt, ddで組みたくなる表、tableにするのがいいかもね（スクリーンリーダーと検索エンジンのために）かがん7時間前 1🧗♂️aria-labelで始める、アクセシビリティ改善活動wozittoinMoney Forward Developers5ヶ月前 96🍕アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきかTaiga KIYOKAWAinMoney Forward Developers5ヶ月前 101💎a11y を強化する ReactComponent の型推論Takepepe2021/06/25 73🧑🎓WAI-ARIAを学ぶときに整理しておきたいことゆうてん2021/03/09 374🔍【仕様の読み方】HTMLの要素をどうやって学ぶかゆうてん2023/03/2
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel. — Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第
こんにちは、ヌーラボのウェブサイト課でフロントエンドエンジニアをしている東尾です。2024年からヌーラボのウェブサイト課が中心となって取り組んでいるアクセシビリティの取り組みを共有します！ きっかけは昨年のアクセシビリティカンファレンス福岡に参加したチームメンバーたちからの共有です（当時はまだ私はヌーラバーではなかったため、参加していませんでした）。伊原力也さん・柴田宏仙さんの発表「ウェブアクセシビリティ社内教育のすゝめ 〜品質か、営業か〜」の中で、「どんな小さなことでもまずはアクセシビリティに関して取り組んでいることを発表していく」ことを推奨する趣旨のお話をされていたと聞いています。 サービスは約20年の歴史がありますが、ヌーラボではアクセシビリティに関する取り組みはまだ始めたばかりです。改善としては小さいもの、中には今や当たり前に対応しなければいけないものもあるかもしれません。しかし、
【PIXIV MEETUP 2023登壇セッション】ピクシブのデザインシステム「Charcoal」のアイコンライブラリをつくる - pixiv inside
こんにちは、mimoと申します。CTO室デザインシステム部に所属しており、ピクシブのデザインシステム「Charcoal」のWeb実装の開発などを行っております。 この記事では、2023年9月29日に行われたピクシブの完全招待制カンファレンス「PIXIV MEETUP 2023」のメインセッションとして発表させていただいた「ピクシブのデザインシステム「Charcoal」アイコンライブラリをつくる」について振り返ります。 ありがたいことに自分の発表はメインセッションとして行わせていただいておりまして、ログミーTechによる文字起こし記事が出ていますのでこちらもご覧ください。 logmi.jp どんなことを発表したかに細かく触れているととても長大な記事になってしまうので、発表そのものについてはぜひ文字起こし記事をご覧いただくこととして、この記事では発表準備中に考えたことと、発表した感想を中心に紹
【Flutter】文字サイズのアクセシビリティ対応方法
記事の概要 Flutterアプリのテキストは、デフォルトではOSの文字サイズ設定に合わせて自動的に調整されてしまい、意図しないUIの崩れや操作性の低下が発生する。本記事では、アプリ全体に適用される文字サイズの上限値を設定し、アクセシビリティを向上する実装方法に関して解説する。 ※解説にはiOSを利用します 前提知識 アクセシビリティとは アプリ開発においてアクセシビリティ(Accessibility(A11y))とは、あらゆるユーザや状況でのアプリの機能の利用のしやすさを表す。 アプリがアクセシビリティに対応する例としては、視覚障害の方の利用を考えてアプリ内のコンテンツを音声で読み上げる機能や、文字サイズを拡大できる機能、ズーム機能を備えることや、聴覚障害の方の利用を考えてBluetoothで補聴器と連携できるようにするなどがある。 アプリ開発の際は、このように様々なユーザの利用を想定した
だれもが楽しめるミュージアムをつくる！ | A11yTokyo Meetup (2024/01/27 14:00〜)
【満員御礼 ただいまキャンセル待ちとなります。】 定員に達しましたので、キャンセル待ちとなっております。ご了承いただけましたら幸いです。 土曜日の午後、現地だけで参加できる特別企画 2024年1月のA11y Tokyo Meetupは、東京都のお台場にある科学館「日本科学未来館」のアクセシビリティへの取り組みをテーマに、展示やAIスーツケースを見学するツアーを開催します。日本科学未来館の副館長 高木啓伸さんのガイドで、11月22日に公開された新しい常設展示も含め、さまざまな工夫を凝らした館内をご紹介いただきます。 アクセシビリティを高めて、常設展示をリニューアル 例えば、2023年9月に行ったノーベル賞受賞者たちからの問いを紹介する常設展示「ノーベルQ」のリニューアルでは、次のようにアクセシビリティを強化しています。 • 視覚に障害のある方も楽しめる工夫として、前述の映像に音声アナウンスお
XR やクローラーについて話した次世代 Web カンファレンス A11y セッションが無事終了しました - ARTICLES
2023年の暮れも迫る12月16日、東京で 次世代 Web カンファレンス 2023 というイベントがありました。 セッションの動画もあがっているので、報告記事を書きます なお、この動画は Bar エリアで行われた全セッションが詰まっていますので、ピンポイントで見たい方は A11y セッションに再生開始時間をセットした 次世代 Web カンファレンス2023 Bar からご覧ください。 僕はこんなポジションで A11y セッションに参加しました。 次世代 Web カンファレンスの a11y セッションに出場します - ARTICLESセッションは1時間半という長丁場で、始まる前はこんなに時間があって話すことそんなにあるだろうかと不安でしたが、ふたを開けてみると話足りないくらいな状態で、話せなかったネタを一つ別記事で投稿したのでした。 静岡のやさしい日本語講座関連情報についてしらべてみる -
The Nu Html Checkerを用いたHTMLのバリデーション — freeeアクセシビリティー・ガイドライン Ver. 202403.0-CURRENT.20240322+4.3.7
The Nu Html Checkerは、W3CやWhatWGでも利用されているHTMLのバリデーターです。上記W3CまたはWhatWGのページにアクセスして、チェック対象のページのURLを入力して、HTMLの仕様に準拠しているかどうかをチェックするというのが一般的な使い方です。 しかし、この方法には以下の問題があります： 開発中のページのように社外からアクセスできないページや、ログインが必要なページのチェックができない 公開前のページなど、社外に出せないページのチェックに向いていない 以下の方法で、これらの問題に対応することができます。 ブックマークレットの利用 以下の手順でブックマークレットを利用することで、ブラウザーに表示中のページのDOMツリーを送信してチェックすることができます。 以下のコードをターゲットとするブックマーク（ブックマークレット）を作成。 コードを表示 javasc
はじめに Webアクセシビリティは、ウェブサイトやアプリケーションがすべてのユーザー、特に障害を持つ人々にとって利用しやすくなるように設計されていることを指します。 アクセシビリティを考慮した設計は、視覚障害、聴覚障害、運動障害、認知障害などのさまざまな障害を持つユーザーにとって使いやすさを提供します。 次に、Webアクセシビリティの具体例をいくつか挙げます。 Webアクセシビリティ 13のポイント 1. キーボード操作: すべての操作をキーボードだけで行えるようにすることで、運動障害を持つユーザーやマウスが使えない状況のユーザーに対応します。 例えば、タブキーでフォーカス可能な要素を移動し、エンターキーでクリック操作を実行できるようにすることが重要です。 2. キーボード操作に対応したカスタムコントロール: カスタムUIコントロール（例: カスタムドロップダウンメニューやスライダー）を作
Nokoです。メルボルン在住のプロダクトデザイナーで、リモートで仕事をしています。 過去8年間は、ブランド戦略、エクスペリエンスデザイン、ビジュアルデザイン、モーションおよびイラスト、アクセシビリティデザインなどのデジタルデザインの様々な分野で仕事をしてきました。現在は、Two Bulls/DEPTでシニアプロダクトデザイナーとして、様々な国際的なデザインプロジェクトに取り組んでいます。 アクセシビリティ（Accessibility）とは、みんなが情報にアクセスできるようにすることを意味します。例えば、身体に障害を抱えている人や、お年寄りなど、異なる能力や状況を持つ人々がサービスなどを利用できるようにすることです。みなさんも「#a11y」というハッシュタグや「ally（アリー）」という言葉を聞いたことがあるかもしれません。#a11yは、ウェブ開発の中で「アクセシビリティ」を意味する言葉の省
File is a CommonJS module; it may be converted to an ES module
/** @type {import('@typescript-eslint/experimental-utils').TSESLint.Linter.Config} */ const config = { extends: [ 'plugin:import/typescript', 'plugin:import/warnings', 'next', 'next/core-web-vitals', 'plugin:jsx-a11y/recommended', 'prettier', ], plugins: ['jsx-a11y', 'testing-library', '@typescript-eslint'], rules: { 'react/function-component-definition': [2, { namedComponents: 'arrow-function' }]
この記事は「アクセシビリティ Advent Calendar 2023」7日目の記事です。 はじめに 「モバイルアプリ」「iOS, Android」以外は Web 開発者向けに書いているので、フレームワークの説明が冗長なこともある。 モバイルアプリ iOS, Android Xamarin.Forms(.NET MAUI) React Native Capacitor Flutter モバイルアプリ 今年は Be My Eyes の GPT-4 導入が印象的だった。 Be My Eyes は、ボランティアのユーザーと対話して、画像や動画の内容を説明してもらうサービス。その説明を AI にお願いできるようになった。 実際に写真を撮って説明してもらったけど、なかなか精度が高い。 ユーザーは、AI の説明がわからなければ追加でチャットできるし、従来通りボランティアにも連絡できる。AI が説明して
こんにちは。先日、アルファサード・eboard・SmartHR合同主催で「ウェブでの情報提供とやさしい日本語」を開催しました。 今回はオンラインでの開催でしたが、たくさんの方にご視聴いただきありがとうございました！ 全ての発表者さんが発表資料を公開しています。
リンク connpass アクセシビリティやるぞ！LT祭り #5 @asobiba (freeeオフィス) (2024/05/20 19:30〜) ## 第5回！「アクセシビリティやるぞ！LT祭り」とは アクセシビリティ向上のための取り組みを共有するLTイベントです。LT初心者歓迎です！ 前回のレポート: 「アクセシビリティやるぞ！LT祭り ＃4」を開催しました｜SmartHRアクセシビリティ https://note.com/a11y_tester/n/nebaa8f4c5cef?magazine_key=m351e3cea6fa0 ※この会は2014〜16年に開催された「アクセシビリティやるぞ！祭り」シリーズにインスパイアされています。 ### 第5回「アクセシビリティやるぞ！LT祭り」が開催されました。このイベントでは、アクセシビリティの向上を目指す取り組みや経験を共有するライトニン
Awesome japanese a11y companiesの取り組みと今後について | yamanoku Advent Calendar 2023
Awesome japanese a11y companiesの取り組みと今後について この記事はyamanoku Advent Calendar 2023の21日目の記事になります。 Awesome japanese a11y companiesとは何か Webアクセシビリティのまとめサイトとしてaccrefs.jpというものがあるのですが、日本企業の取組事例を抽出してそれをいつでも参照できるようにしたいというモチベーションがきっかけとなり、2021年9月に誕生したyamanokuによるAwesome listsです。 yamanoku/awesome-japanese-a11y-companies: アクセシビリティに取り組む・推進している日本企業まとめ（随時更新） A11YJ Slack1やウェブアクセシビリティのDiscordサーバーでも情報共有チャンネルがあるのですが、Sl
オープンソースへのアクセシビリティコントリビュート振り返り | yamanoku Advent Calendar 2023
オープンソースへのアクセシビリティコントリビュート振り返り この記事はyamanoku Advent Calendar 2023の3日目の記事になります。 オープンソースとアクセシビリティことはじめ アクセシビリティを学び始めて、なんらかのアクセシビリティ改善したいと望むことはあるでしょう。事業会社であれば自分が関わるプロダクトであったり、受託制作であればサイトであったり、あるいは自分の作ったプロダクトであればそれ自体を、といった形で改善してみたい対象は様々だと思います。 私は現在事業会社に勤めており、関わるプロダクトや会社全体のアクセシビリティ向上に取り組んでいます。アクセシビリティに関する縁から副業に参画し、そこでも改善活動を行ってきました。しかし、本業や副業以外でもアクセシビリティを向上させる方法がないかと考えていました。 そんな時、機会が突然訪れました。2020年に新型コロナウ
こんにちは！フロントエンドエンジニアのつかじです。 今回は、私がReact開発で普段利用しているアクセシビリティのチェックツールについてご紹介したいと思います。 アクセシビリティとは アクセシビリティとは、情報へのアクセスを全ての人が平等に行うことができる状態を意味します。ウェブアクセシビリティは具体的には、視覚・聴覚などの障害を持つ人々や、高齢者などがウェブサイトやアプリケーションを利用する際に遭遇する可能性のある困難を解消することを目指します。 React開発においても、アクセシビリティの確保は重要な観点となります。この記事では、その実現をサポートする一部のツールを紹介します。 アクセシビリティのチェックツール eslint-plugin-jsx-a11y React開発においては、コーディングの初期段階からアクセシビリティの問題を特定することが重要です。その一助となるのがESLint
普段あんまりこういうのはしないのだけど、ちょっとの余裕といつもと違う感覚があるので記録しておく。 今年のしごと 学びの場 気付き 今年のしごと 今年はなぜかバタバタしていた。業務的にも、学び的にも。詳細までは記載しないが、ザッと列記する。 新しいチームをドライブさせるためのチームビルドをコツコツ頑張った チームでの動き方の整理とアサインされているメンバーの特長の把握と成果の出し方を考えた スポンサーセッションながらGAAD Japan 2023に登壇した 社内で仕掛けたアクセシビリティの啓蒙の為のTipsを15分間で片っ端から紹介 「アクセシビリティ」を考える一日。2023年5月18日（木）開催 - GAAD JAPAN 2023 （社内向けに）ダークパターンとは何かと、回避のためのチェックリストなどの仕組みづくり 年末にかけて、一般的なメディアでも「ダークパターン」の記事が増えてきたので
Switching It Up With HTML’s Latest Control 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに Webは、HTMLの要素を取り入れ、見た目、動作、感触を完全に異なるものに変換することに慣れ親しんでいます。この一般的な例がスイッチ(トグル)コンポーネントです。複数のスタイルレイヤーの下にチェックボックスを隠し、ARIAの役割を「スイッチ」として定義し、そして出荷していました。しかし、この手法には不確定な状態における使いやすさの問題がありました。結局のところ、言葉にあるように、最高のARIAはARIAがないことです。 しかし、ネイティブHTMLスイッチが普及するための新たな希望が生まれました。 はじめに ネイティブHTMLスイッチの登場 疑似要素によるスタイル付け スタイル付け 基本的なインプッ
【ESLint】個人テンプレートのESLintを改善するためにeslint-config-airbnbを調査してみる
モチベーション 個人テンプレートのESLintをアップデートさせる 〇〇/recommendedなどおすすめルールセットではなくairbnbのルールセットをベースにしたい airbnbでどのようなルールセットが適応されているのか探すのが面倒なので設定ファイルのリンクを載せて辞書っぽい記事にしたい 改善前のESLint { "env": { "browser": true, "es2021": true }, "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react/recommended", "plugin:react-hooks/recommended", "airbnb", "airbnb-typescript", "prettier" ], "parser": "
モノレポ採用時のconfig系の管理メモ
{ "name": "@shared/eslint-plugin", "version": "1.0.0", "license": "UNLICENSED", "private": true, "main": "index.js", "type": "commonjs", "dependencies": { "@typescript-eslint/eslint-plugin": "^6.5.0", "eslint": "8.48.0", "eslint-config-next": "13.4.19", "eslint-config-prettier": "9.0.0", "eslint-config-turbo": "1.10.12", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslin
2021年から始まったアクセシビリティの活動も、丸2年を経過しました。 定期的に記事にまとめていますが、大きいポイントだけ抽出した記事を書きたいと思いました。 発足から1年間の動きはこちらの記事をご覧ください。 noteとアクセシビリティインタビュー去年に引き続き、全盲、弱視、色覚特性、上肢障害さまざまなインタビューを行いました。このインタビューという取り組みは「インタビューが無ければチームも解散していた」と言えるくらいに重要な要素です。 我々にとってのインタビューは課題を見つたり、ユーザーテストとしての意味合いももちろんあるのですが「ユーザーが喜ぶ顔が見たいから改善する」というシンプルな動機を産む機会でもあります。 「アクセシビリティの浸透を心から願っていることが、インタビューをしたみなさんから伝わってきます。一人ひとりの熱量が本当に高くて毎回驚きます。『自分たちで世界を変えていく』とい
第5回！「アクセシビリティやるぞ！LT祭り」とは アクセシビリティ向上のための取り組みを共有するLTイベントです。LT初心者歓迎です！ 前回のレポート: 「アクセシビリティやるぞ！LT祭り ＃4」を開催しました｜SmartHRアクセシビリティ https://note.com/a11y_tester/n/nebaa8f4c5cef?magazine_key=m351e3cea6fa0 ※この会は2014〜16年に開催された「アクセシビリティやるぞ！祭り」シリーズにインスパイアされています。 LTについて LTのテーマはアクセシビリティ向上です。組織や個人でアクセシビリティ向上のためにやっていることについて話してください。 発表時間は1人5分を想定しています。5分を超えそうな場合はご相談ください。 発表希望者は参加登録時「LT枠」で申し込んでください。諸連絡用の連絡先を申し込み時のアンケート
はじめに 僕は radix-ui に最近ハマっている。書き心地がよい。radix-ui とは何かというと公式にも書いてある通りユーザーがスタイルを後から付けることができる headless UI ライブラリ。 Unstyled, accessible, open source React primitives for high-quality web apps and design systems. 高品質な Web アプリやデザインシステムのための、スタイルがなく、アクセスしやすい、オープンソースのReactプリミティブ。 switch が好きなので radix-ui で書かれたコードを見てみる。僕はこの見た目がかなり好きだ。なのでどのようにして styling しやすいように細かくコンポーネント分割をしつつ、どのようにして共有値を管理しながら wai-aria やロジックを実装している
React コンポーネントライブラリ 調査/選定メモ
個人的結論 headless を選ぶなら Radix UI + linaria or emotion UI library を選ぶなら Mantine + emotion ツールレベルなら UI library で十分に思うが、プロダクトレベルであれば先々見越してheadless 選んで移植性は高めに保つかなという個人的見解（スピード感にもよると思うが） パフォーマンスを気にするものなら、headless ＋ ゼロランタイムCSS in JS or CSS Modules を選ぶ 2023/4時点 前提/選定基準 個人で開発するフロントエンドアプリ（Gihub&GitlabのPR/MRビューアー的なツール）と、中規模プロダクト(Next.js使用予定)で使用する予定 TypeScript React 18対応 Vite対応 a11y メンテナンス体制 カスタマイズ性（出だしはそこまで必要な
花王が挑む、600サイト・1200名を巻き込んだ全社ウェブアクセシビリティプロジェクトの全貌【後編】 - Findy Engineer Lab
企業がウェブアクセシビリティの向上に取り組む際、まずは少人数で小さな改善から始めていく方法を選択するケースがほとんどです。しかし、2022年のGAAD（※1）で、ある企業の革新的な取り組みが大きな話題になりました。 その企業とは、大手消費財化学メーカーとして知られる花王株式会社。花王が発表したのは、全社を挙げたウェブアクセシビリティ推進プロジェクトの発足と取り組み内容についてでした。 ウェブアクセシビリティの啓蒙に取り組むFindyでは、花王でウェブアクセシビリティの推進に携わる後藤 亮さんと渡邊 佳菜恵さんにお話を伺うべく、ウェブアクセシビリティの専門家として活動されている株式会社ディーゼロのゆうてん（@cloud10designs）さんをインタビュアーに迎えて対談を実施。本記事では、対談の内容を前・後編に分けてたっぷりお届けします。 社員数が3万人を超える大企業である花王が、どのように
株式会社ミツエーリンクス（東京都新宿区、取締役社長・藤田 拓、以下ミツエーリンクス）は、2024年1月18日にオンラインで開催したセミナー「改正障害者差別解消法とWebアクセシビリティ」（以下「本セミナー」）の録画を、どなたでもご覧いただけるよう公開しました。 ミツエーリンクスでは通例、セミナー開催後に実施するアンケートにご回答いただいた皆様に限り、期間限定でセミナー録画を振り返り視聴していただく機会をご提供しています。 本セミナーについては、2024年4月1日に施行が迫る改正障害者差別解消法への興味・関心の高まりを受け、特別にその録画（質疑応答を除く約40分）を公開するものです。 セミナー開催の背景 障害を理由とする差別の解消の推進に関する法律、いわゆる「障害者差別解消法」は、2016年4月1日から施行されています。その後、2021年5月28日に改正され、その改正法がいよいよ2024年4
概要 アクセシビリティのチェックポイントとして、 ユーザーが操作するコンポーネントを適切なタグで実装するか、 適切に属性を設定する必要があるというものがあります。 対話的なUIコンポーネントの実装(freeeアクセシビリティー・ガイドライン) なぜ <div> に onClick がダメなのか？ create-next-appで作成したばかりのプロジェクトでは、 divタグなど非対話型コンテンツにonClickが設定されただけの場合、ESLintで特に指摘されません。 また、StorybookとAccessibility addonでコンポーネントをチェックしても指摘されず、 そのまま実装を進めてしまいがちです。 最近自分もこの事に気付いてコードレビューで指摘される前に検知・改善できないか調査しました。 この記事ではESLintルールを変更して、静的解析で適切なタグが利用できてないことを検
現在の最新版は8/25リリースのv3.1らしいぞ！ MathJax公式ドキュメント 何かあったらこ↑こ↓を読んでくれよな〜頼むよ〜 注意 ちょっと頑張って和訳したり実験したりしているだけです，あんまり本気でアテにするなよ…？ 前提 （特には）ないです． MathJaxの導入 最も基本の型 こ↑こ↓にある通りだと <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script> を<head></head>にぶち込めばおk． ちなこのcdn.jsdelivrはこのままだと強制的に最新版を読み込ませてくるので，それが嫌なら <script id="MathJax-script" async sr
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
remixのESLintの設定をFlat Configで記述し直す - Qiita
Tooltips in the time of WCAG 2.1 | Sarah Higley
Playwrightでビジュアルリグレッションテストを導入して安全にCSSライブラリを置き換える | みどりのさるのエンジニア
キーボードで操作してみよう | freee Accessibility Training
企業がWebアクセシビリティに取り組むべき理由 | アクセシビリティBlog | ミツエーリンクス
アクセシブルな Vue コンポーネントを実装するための `useId()` を作る | t28.dev
なんでもSPAにするんじゃねぇ！という主張のその先 | Memory ice cubes
ヌーラボ アクセシビリティレポート #1 | 株式会社ヌーラボ(Nulab inc.)
a11y（accessibility）13のポイント - Qiita
コ・デザインとは？障害を持つ方々と共に作り上げたデザイン
クロスプラットフォームのアクセシビリティを振り返る 2023 | きるこの日記帳
「ウェブでの情報提供とやさしい日本語」を開催しました｜SmartHR ACCESSIBILITY
アクセシビリティやるぞ！LT祭り #5 @asobiba (freeeオフィス) #a11yfes
React開発におけるアクセシビリティのチェックツールの紹介 | Sqripts
2023年個人的ふりかえりと気付き - note
最新のHTMLではスイッチが進化！ネイティブHTMLによるスイッチインターフェイスの実装方法 - コハム
noteアクセシビリティ2022｜sawa / swn.jp
アクセシビリティやるぞ！LT祭り #5 (2024/05/20 19:30〜)
@radix-ui/react-dialog から見る UI ライブラリの作り方
セミナー「改正障害者差別解消法とWebアクセシビリティ」の録画を公開
divタグにonClickが設定されるのをESLintでチェックする - Qiita
MathJax v3.x メモ-1 MathJaxの導入 - 雑記簿帳・調法調度