社内向けにまとめていたものを加筆修正して公開します。 アクセシビリティの学習を始める人の助けになれば嬉しいです。 YouTube freee アクセシビリティ研修動画～全職種対象～ freee アクセシビリティ研修動画～技術職対象（Basic） freee アクセシビリティ研修動画～技術職対象（Advance） a11ygogo A11yTokyoMeetup Webコンテンツ 全般 WCAG WAI-ARIA HTML/CSS デザインシステム、ガイドライン その他 書籍 アクセシビリティ全般 HTML
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
Overview This documentation will help identify the trade-offs of the different React patterns and when each pattern would be most appropriate. The following patterns will allow for more useful and reusable code by adhering to design principles like separation of concern, DRY, and code reuse. Some of these patterns will help with problems that arise in large React applications such as prop drilling
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話 - Qiita
Nuxt.jsでバーコードリーダを作ったら、いろいろハマった上にiOSのPWAでカメラにアクセスできなかった話Vue.jsWebサービスバーコード個人開発Nuxt Nuxt.jsで開発しているWebサービスにバーコードリーダ機能をつけようとしたら、 いろいろハマったので、そのときの備忘録。 利用したのはQuaggaJS。簡単に使えて便利(´ω｀) はまったポイントは、以下の4点... 1. httpsじゃないとカメラを取得できない 2. QuaggaJSで表示されてないHTML要素を指定するとエラー 3. size/width/heightを指定してもいい感じにならない 4. iOSのPWAではカメラにアクセスできない いろいろハマったけど、QuaggaJS自体がすごく良いので、サクッとできた♪ 作ったのはこんな感じ バーコードリーダ、できてきた♪ いい感じな気がする(´ω｀) pic.t
Stable DiffusionをDocker Desktopで簡単に使い始める方法 ‣ Pocketstudio.Net
Stable DiffusionをWindowsのDocker Desktopで比較的簡単にはじめる手順をまとめました。ほぼ、自分の覚書です。 確認した環境は、Windows 10 Pro、21H2、build 19044.2846＋16GB RAM+NVIDIA GeForce RTX 2060 SUPER＋WSL2(Ubuntu)+Docker Desktop 4.18.0(104112) です。 どうして Stable Diffusion のために Docker Desktop を使うのか？ 楽してセットアップしたいからです。AUTOMATIC1111/stable-diffusion-webui というウェブ用 UI は既にありますが、動かすためには環境構築等いくつかの手順が必要です。ですが、この面倒な作業を省略してできる Stable Diffusion WebUI Docker
LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
はじめに わたしは普段フロントエンジニアとして働いており、WebアプリケーションのUIを設計・実装したりするような人間です。 UIを設計・実装していく時に、どういう考えをもとに取り組めばいいかというのをこの記事で整理してみたいと思います。 アプリケーション全体のUIを言語化すると壮大な話になり難しそうなので、今回はコンポーネントの設計・実装に絞って整理します。 コンポーネントとは、UIを構成する部品(ボタン、テキストフィールド、カードなど)のことを指しています。 さっそくですが、Webアプリケーションのコンポーネントを設計・実装していくにあたって重要なことは次の3点だと思っています。 Web標準に沿って設計・実装する どういう状態を取りうるかを明確にし、その状態を適切に表現する UIの文脈に応じて、十分なバリエーションを揃える 以降でそれぞれ詳しく書き出してみたいと思います。 1. Web
『閃光のハサウェイ』のベスト視聴環境はLGの有機ELテレビとDENONのサウンドバーDHT-S517（予算20万円以内） - ARTIFACT@はてブロ
『水星の魔女』が終わったあと、地上波放映された『閃光のハサウェイ』が、また話題になっている。配信が始まった頃に戦闘シーンが暗くて見にくいという声が多かったが、黒が浮きやすい液晶テレビでは見づらく、視聴環境を選ぶ作品である。*1 また、地上波で放映される作品の常で、音声はステレオだが、『閃光のハサウェイ』の魅力の一つとして音響があり、大半の劇場アニメや邦画は5.1chの中、珍しくDolby Atmosで制作されている。*2Dolby Atmosとは、映画の一般的なサラウンドフォーマットの5.1chや7.1chと違い、上方からも音が聴こえる立体音響のフォーマットだ。ただし、大半の上映は5.1chで、Dolby Atmosはそれに対応した映画館だけで上映されたため、誰でも気軽に体験はできなかった。しかし、Blu-rayやUltra HD Blu-rayにはDolby Atmosの音声が収録されて
@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。 実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。 https://gitlab.com/osaki-lab/cypress-aria Cypressのテストが縦横に短く書けるわけCypressはWebDriver系(Selenium)やChrome DevTool Protocol系（Puppeteer)のツールとAPIの粒度が異なります。Seleniumはそもそもウェブサイトのタイトルに「Browser Automation Too
VMwareは2024年1月15日（現地時間）、複数製品の販売終了を伝えた。販売終了には指定がない限り対象製品の全てのエディションや永久ライセンス、サポート＆サブスクリプション、SaaS／ホスト型、サブスクリプションを含む全てのライセンスオプションが含まれている。 VMware vSphere Enterprise Plus VMware vSphere+ VMware vSphere Standard（サブスクリプションは除外） VMware vSphere ROBO VMware vSphere Scale Out VMware vSphere Desktop VMware vSphere Acceleration Kits VMware vSphere Essentials Kit VMware Sphere Essentials Plus Kit（新しいサブスクリプションは除外）
2023年11月24日紙版発売 株式会社ICS 池田泰延，西原翼，松本ゆき 著 A5判／344ページ 定価2,860円（本体2,600円＋税10%） ISBN 978-4-297-13871-4 Gihyo Direct Amazon 楽天ブックス honto ヨドバシ.com 電子版 Amazon Kindle この本の概要 フロントエンド開発の範囲は広く，習得すべき技術は多種多様です。 HTML・CSS・JavaScriptはフロントエンドエンジニアにとって共通言語ではあるものの，Webサイトを制作するのか，Webアプリケーションを開発するのか，その違いによって採用すべき技術は全く異なります。それは，Webの多様性に対して技術的な正解がひとつではないことを示しています。 本書はフロントエンドの技術を俯瞰し，「エンジニアが共通して知っておくべき技術はなにか」，「（多種多様なエンジニアにと
2021年お世話になったReact関連ライブラリ10選 #techtekt Advent Calendar 2021 - techtekt
この記事は techtekt アドベントカレンダー2021 の 12日目の記事です。 こんにちは！ テクノロジー本部 エンジニアリング統括部 サービス開発部でエンジニアをしている Yuto SAGAWA です。*1 皆様今年もReactライフを満喫できていますでしょうか？ 個人的にはたくさんReactに触れる機会があり、非常に満喫することができました！ そんな2021年の個人的にお世話になったReact関連のライブラリ、フレームワーク、ツールなどの紹介をしたいと思います。 next nextjs.org Next.jsはReactのフレームワークで、昨今では使用例も多く人気のフレームワークであることが伺えます。 SSR / SSG だけではなく、ISR（Incremental Static Regeneration）など、 Webアプリケーションのパフォーマンス改善の手助けとなることが期待
Web NFCを試してみました 〜 動作確認とアプリケーション作成 〜 - 虎の穴開発室ブログ
皆さんいかがお過ごしですか？ラボのおっくんです。 気温が高い時期になってきました。室内にいても気が付くと脱水から熱中症になることもあるそうですので、お気を付けください。 今回は、Web NFC を試してみましたので、そちらをレポートします。 最終的には、次のものができました。 以下順を追って説明します。 実行環境 開発環境 OS:macOS Catalina 10.15.4 Chrome 84.0.4147.89 確認用デバイス OS:Android バージョン 10 Chrome 83.0.4103.106 NFC を備えたスマートフォンでないといけませんので、ご注意ください。 WebNFC とは WebNFCは、「Google Chrome 81」のベータ版から追加された実験的な機能です。 NFC(Near Field Communication : 近距離無線通信)タグをブラウザから
はじめに タイトルにもある通り、最近 Web アクセシビリティ (以下アクセシビリティ) の検証ツールを作っています。この記事では作るにあたったモチベーションや、現時点での機能、今後の展望についてまとめます。 モチベーション アクセシビリティを評価しようとすると Lighthouse にも付随する axe のようなツールを用いることが多いと思います。axe は WCAG 2.0 や WCAG 2.1 に則った数多くのルールを持ち、アクセシビリティに関する問題発見を支援してくれます。Lighthouse 以外では、axe をモジュールとして使えることはもちろん、Chrome の Extension などからも実行可能で、ユースケースに合わせた柔軟な利用ができます。 ただ、検証精度はどうかというと少し物足りなさを感じる部分があります。例えば以下のような例です。 <div role="butto
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ ひと手間でガラリと変わる、これからの新しいCSS HTML/CSSの入門書などには載っていない、登場したばかりの最新CSSテクニックをまとめてご紹介します。 サンプルのソースコード付きなので、理解しやすく、実装したいときにも役立ちます。 ページの演出に使える、デザインの仕上げにもオススメしたいワザが揃いました。 「こんなことがCSSでできるの?!」と思ってしまう、オドロキのテクニックを学んでみましょう。 コンテンツ目次 1. キラキラに輝くホログラフをCSSで実装 2. クールなグラデーション背景のつくり方 3. oklch()による色の設定 4. 夢のような景色「Dreamy Blur」エフェクト 5. オフキャンバスのメニューをポップアップで実装 6. スクロール連動型のCSSアニメーション 7. 3Dなグリッチ・
「HTMLの前提についてはざっと知った、ステップアップできるHTMLの勉強がしたい」「人に勧められるHTMLにまつわる書籍はあるだろうか」「令和でHTMLを学ぶならこの1冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。 その名も「HTML解体新書」だ。 本ブログ記事は、レビュアーとして関わり本書を読んだ＠okuto_oyamaによる感想と、HTMLのこれからについて考えていることをまとめたものである。 本の内容については、著者によるブログ記事にまとまってあるのでそちらを参考にしてもらいたい。 creators.bengo4.com まだまだHTMLについて知らないことがあった 私がHTMLについて始めて触れたのは、とあるブログサービスのHTML編集機能からだ。その頃は HTMLの仕様というものを知る由もなく、どういったタグを使うと画面上にどのように表示され
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
Markup from hell - HTMHell
Markup from hellA collection of bad practices in HTML, copied from real websites. skip code sample<button display="flex" role="button"> <svg role="img" viewBox="0 0 13 13" aria-hidden="false" xmlns="http://www.w3.org/2000/svg" height="15px" width="15px" fill="#000" name="close"> <title>Close dialog</title> <path d="…"> </path> </svg> </button> skip code sample<a href="/contact" aria-label="If you
Headless Component開発をはじめよう (Headless UI + React Spectrum)
はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ
今活用しているツールを紹介 古川陽介氏（以下、古川）：今、具体的にいくつかツールや考え方が出てきました。今聞いているみなさんはおそらく、「じゃあ、どれを使ったらいいんだろう？」とか「何をしたらいいんだろう？」となっているかもしれないですが、倉見さんにお聞きします。ずばり私たちは今何をやっているでしょうかというところで。例えば……。 倉見洋輔氏（以下、倉見）：すごく話を誘導されている感もありますが（笑）。 古川：そうですね（笑）。誘導しているんだけど。 例えば、先ほど言っていたHTMLとかそういうのをスナップショットでテストしているとか、もしくは、見た目の部分でテストをしているとか、そういうところでどういうことをやっていますかと聞いてもいいですか？ 倉見：宣伝の場をいただきありがとうございます（笑）。特に見た目に関する層のテストではいくつか活用しているツールがあります。 1つはやはり、「St
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
はじめに この記事内で扱うアクセシビリティとは、HTMLのマシンリーダビリティのことを指します。 配色、UIデザイン等は対象外としております。 アクセシビリティ観点を含めた画面機能のテストコード 私のプロジェクトの要件にアクセシビリティは含まれていません。工数インパクトを出さない範囲で気を遣っていこうという方針で開発をしていました。 要件に入っていないのでアクセシビリティの検証に工数を多く注ぐことは許されていません。しかし、考慮する以上は何らかの検証をしなければ実装の誤りに気がつくことができず、ない方がマシという状態になりかねません。 各コンポーネントのアクセシビリティを改善する際テストコードの中でアクセシビリティ検証を盛り込み、テスト駆動的に開発することでローコストかつ確実に改善を進めていく方法を実践したので記事にします。 WebシステムUIのアクセシビリティを向上させるモチベーション
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年に引き続き、技術仕様と国内法整備に関して、2022年のWebアクセシビリティの短期的な予測をしてみます。 WCAG 2.2とWCAG 3.0 WCAG 2.2に関しては、2020年末では2021年2月にCandidate Recommendation（勧告候補）になる予定だったものが、ずるずるとスケジュールが後ろ倒しになっており、執筆時点の2021年12月初頭になっても未だに勧告候補のステータスにはない状況です。一方で、執筆時点でのWhat’s New in WCAG 2.2 Working Draftによれば、2022年6月にRecommendation（勧告）を発行するスケジュールとのことです。 このスケジュールに間に合わせるのであれば、逆算すると4月までに勧告候補を発行する必要があります。よって、4月に勧告候
No Class CSS Museumという No-Class CSS フレームワーク比較サイトを作りました。 簡単な demo 用のコードに何かスタイル当てたいけど、そんなに時間かけたくないしそもそもデザインセンスないしどうしようかなってときに No-Class CSS フレームワークが便利です。 たとえば昨日公開したFirebase の存在をフロントエンドから隠蔽するためにのデモサイトもそういった No-Class CSS フレームワークであるnew.cssを使いました。 これは CSS ファイルを読み込んだだけ(タグにクラスを割り振ったりしていない)なのですが、それだけでいい感じにスタイルが当たってちょっと感動しました。 以前の記事であるブログの 1 ヶ月を振り返るに書いた通り、このブログは書いた内容のサンプルコードやデモをどんどん公開していく方針で運営しています。 ただ、なにもスタ
Puppeteer と ARIA Handler
先日、社内の技術共有会で https://github.com/puppeteer/recorder という npm パッケージの話が挙がったのだけど、ここで登場する ARIA Handler という機能が面白い内容だったため、それを書いていこうと思う。 https://developers.google.com/web/updates/2020/11/puppetaria で触れられている内容と重複する部分も多いため、先に参考として挙げておく。 また、Puppeteer の Undocumented な機能であったり、CDP の Experimental な機能への言及となるため、その点は承知した上で読んでもらえると。 Puppeteer Recorder@puppeteer/recorder 自体は名前の通り、Headless Chrome ラッパである Puppeteer を使って
みんなが使えるカルーセルUIを考える | CyberAgent Developers Blog
Ameba事業部の谷（@hiloki）です。Amebaのデザインシステム Spindleのマネージャーをしつつ、UIの設計・開発をしています。 2021年は多くのガイドラインやUIコンポーネント設計・開発に取り組んできました。この記事ではCyberAgent Developers Advent Calendar 2021の3日目の記事として1年を振り返り、特に考えることの多かったカルーセルUI について、その設計視点やアクセシビリティを考えてみました。 カルーセルUI とは あらためてこの記事におけるカルーセルUI（以下「カルーセル」と呼称します）を定義します。 『デザイニング・インターフェイス（第2版）』におけるカルーセルの定義を引用すると下記のように説明されています。 視覚的に興味を引くことができる項目のリストを、横一列またはアーチ状に配置し、画像のサムネイルを左右にスクロールまたはス
2020年、サイボウズのアクセシビリティを振り返る - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。開発本部 デザイン＆リサーチ アクセシビリティチームの SUGI(@blindsoup2p1)です。 私は今年の4月に新卒で入社した全盲のスクリーンリーダーユーザーで、アクセシビリティ・エンジニアとして活動しています。 サイボウズでは今年、正式にアクセシビリティチームが発足し、グループウェアのアクセシビリティ向上や社内への啓発を進めてきました！ この記事では、今年1年アクセシビリティチームが取り組んできた過程と成果をまとめ、来年の展望を示します。 と共に、エクストリームユーザーである私がアクセシビリティ向上にどうかかわっていったのかを合わせて紹介します。 ※アクセシビリティとは、能力・環境・状況にかかわらず、誰もがサービスやコンテンツを利用できること、またはその度合いのことです。 よくアクセシビリティは障害者・高齢者対応という誤解を受けますが、能力・環境・状況（の制約）は障害者
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマークアップを行った場合をみてみます。spanタグの class 名に btnの名前が付与されていますが、ブラウザー・支援技術は、以下をボタンだと認識できません。
フロントエンドエンジニアたちが語る、Tips【23選】 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは、技術広報のyayawowoです。 フロントエンドエンジニアの皆様、今のフロントエンドを楽しんでおりますでしょうか？ 変化の多いフロントエンド領域を楽しむために・・・ ラクスが開催している 「フロントエンド LT会」で発表された資料をご紹介します！ フレームワークや開発言語別にまとめておりますので、興味があるところだけを少し摘まむのも大歓迎です。 9月に開催した「フロントエンドLT会 - vol.4」は、参加者が500名越えとなるイベントなりました。 2022/1/19(水)に「フロントエンドLT会 - vol.5」を開催しますので、ご興味ある方は是非登壇/視聴申込よろしくお願いいたします！ rakus.connpass.com では、早速見ていきたいと思います！ イベント詳細はこちらからご確認ください。 ・フロントエンドLT会 vol.1 -2020夏祭り- ・フロントエンドL
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
はじめに みなさんは、フォームなので必須項目が入力されてない時、Submitボタンに disabled をつけて押せないようにしていませんか？ この記事では、ボタンにdisabled属性をつけない方がいい理由とdisabledをつけない方法を紹介します。 disabled属性をつけない方がいい理由 disabled 属性をつけると、ユーザーがボタンを操作することを防ぎます。 そのため、キーボード（Tabキー等）で操作している時フォーカスが当たらないため、ボタンの存在が認知できません。 disableがない時 disableがある時 ボタンの存在が認知できないため、支援技術（スクリーンリーダ等）で操作しているユーザーにとって、「送信ボタンどこだろう？」と思ってしまったり、「なんで送信ボタンが出てこないんだろう？」と思ってしまい、操作を完了させることができなくなります。 aria-disabl
こんにちは、 id:hogashi です。 masawada Advent Calendar 2022 - Adventar の 2日目です。 目次 目次 OTP 入力フォーム まずベストプラクティスを見る それでは本題です ちなみに ちなみに2 むすび OTP 入力フォーム なぜか id:masawada さんとたまにワンタイムパスワード (OTP) の話をする印象があります。偶然生成された「ホホンドホド」という文字列*1が TOTP で出そうな見た目じゃん、とか。 最近もまた微妙に使いづらい入力フォームに出会いました。そこで、世に存在するベストプラクティスとそれに沿わないフォームを見て、ベストたる所以をなんとなく感じてみる回をお送りします。結果的に GitHub がなんかむずい感じになっているという記事になりましたが、もちろん各サービスそれぞれ良いと思ってやっているはずなのであくまで個
はじめに この記事では以下のアクセシビリティ要件を満たすモーダルを実装します。 モーダル要素に role 属性、aria-modal 属性、aria-labelledby 属性、aria-describedby 属性が付与されている モーダルを開くと、モーダル内の最初の focusable な要素に自動でフォーカスされる モーダルが開いている間、モーダル以外の要素に aria-hidden 属性が付与される モーダルが開いている間、モーダル以外の要素のスクロールが無効化される モーダルが開いている間、モーダル内でフォーカスがトラップされる Esc キーを押下すると、モーダルが閉じる モーダルの外側をクリックすると、モーダルが閉じる モーダルを閉じると、モーダルが開く前にフォーカスされていた要素にフォーカスが戻る
こんにちは！ 株式会社ココナラの法律相談事業部でWebエンジニアをしている 原井 です。 ココナラ法律相談 と ココナラエージェント という2つのプロダクトのWebフロントエンド・バックエンド開発を担当しています。 この記事は、フロントエンド開発に使うUIコンポーネントライブラリの技術選定をするシーンでのお話です。 私たちが何を課題に感じていたのか、どう考えて Radix UI と Stitches の採用に至ったのか、採用してみてどうだったのかをご紹介します。 UIコンポーネントを開発していて思うこと 世の中にはUIコンポーネント集とでも呼ぶべき便利なライブラリがたくさん公開されています。 例えば以下のようなものがあり、他にも把握しきれないほどあると思います。 MUI (Material UI) Ant Design Chakra UI Vuetify これらのUIコンポーネントライブラ
過去に公開されたXcodeの高速ダウンロードや切り替えが可能なオープンソースのXcodeバージョン管理ツール「Xcodes App」がリリース。
過去に公開されたXcodeのダウンロードや切り替えが可能なXcodeバージョン管理ツール「Xcodes.app」がリリースされています。詳細は以下から。 Appleの統合開発環境Xcodeは、Mac App Storeから最新バージョンのダウンロード＆インストールが可能なものの、macOSやSDK、Swiftコンパイラのバージョンの関係で過去に公開された旧バージョンのXcodeを利用したい場合がありますが、そんなXcode.appのバージョン管理を行えるツール「Xcodes.app」がリリースされています。 The easiest way to install and switch between multiple versions of Xcode. RobotsAndPencils/XcodesApp – GitHub Xcodesシリーズはカナダのソフトウェア会社Robots & P
Talewind CSSでローディング・アニメーションを表示したくなったのですが、ググってもちょうど良いサンプルが見つかりませんでした。 というわけでコピペで簡単に使えるサンプルコードをいくつか考えてみました。あまりクオリティが高いものではないですが「Tailwind CSSでとりあえず何かローディング中っぽい表示にしたい」という場合にご自由にコピペしてお使いください。 波紋が広がるアニメーション <div className="flex justify-center" aria-label="読み込み中"> <div className="animate-ping h-4 w-4 bg-blue-600 rounded-full"></div> </div> アレンジ Reactでない場合はclassNameをclassに置き換えてください（もしくはCodePenのコードをコピペ） bg
Common mistakes with React Testing LibraryMay 4th, 2020 — 15 min read Hi there 👋 I created React Testing Library because I wasn't satisfied with the testing landscape at the time. It expanded to DOM Testing Library and now we have Testing Library implementations (wrappers) for every popular JavaScript framework and testing tool that targets the DOM (and even some that don't). As time has gone on,
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webアクセシビリティ学習リソースまとめ （2023年3月版）
フロントエンドウェブ開発者 - ウェブ開発を学ぶ | MDN
⚛️ 🚀 React Component Patterns
HTML Centricで行きたい私たち - LIFULL Creators Blog
WebアプリケーションにおけるUIを構築するときに考える3つのこと - コンポーネント編
Cypress - 書きやすいテストの秘密と独自コマンドの実装 | フューチャー技術ブログ
無償版VMware ESXiも対象 VMware、サブスクリプション移行に伴い複数製品を販売終了
フロントエンドの知識地図—— 一冊でHTML/CSS/JavaScriptの開発技術が学べる本
Web アクセシビリティの検証ツール acot を作ってる - wadackel.me
今すぐ使える最新CSSテクニックや書き方20選 サンプルコード付レシピ
「HTML解体新書」HTMLのこれからと向き合うための本 - クラウドワークス エンジニアブログ
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」 和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性
HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
React Testing Libraryでテスト駆動アクセシビリティ改善 - Qiita
2022年のWebアクセシビリティ | gihyo.jp
No-Class CSS フレームワークをいろいろ比較するサイトを作った
Vue.js から考えるアクセシビリティについて - 2019
WAI-ARIA 準拠には CSS Modules が最適という話
【HTML】ボタン要素にdisabled属性をつけるのをやめませんか？ - Qiita
ワンタイムパスワード(OTP)のベストプラクティスじゃない入力フォームに出会う - hogashi.*
実装しながら理解するモーダルのアクセシビリティ with React
ヘッドレスUIコンポーネントでいこう -- Radix UI + Stitches がいい感じ
Tailwind CSSでお手軽ローディングアニメーション
Common mistakes with React Testing Library
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita