26% of adults in the US have at least one disability. When you improve accessibility, it has an outsized impact on your current and future customers. It’s also a legal requirement. The most accurate way to check accessibility is manually on real devices. But that requires specialized expertise and a lot of time. Both of which are scarce on frontend teams. Teams at Twilio, Adobe and Shopify use a c
この記事は アクセシビリティ Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は PowerCMS X Advent Calendar 2021 アイコン別ウィンドウで開きます の第1日目の記事です。 この記事は やさしい日本語 Advent Calendar 2021 アイコン別ウィンドウで開きます の第10日目の記事です。 ※ Advent Calendar用に新規記事の作成も考えましたが、ルビをフル活用した ウェブコンテンツに関する実装ノウハウとして纏まっているほうが後の役に立ちそうだったので大幅に加筆して、改訂版としました。 「やさにちウォッチ」 アイコン別ウィンドウで開きますは私たち(アルファサード株式会社) アイコン別ウィンドウで開きますが運営する「やさしい日本語の情報をやさしい日本語で発信する」オウンドメディアです。す
「アクセシビリティ」と聞くと、対応が難しそうだと考え、リソースが確保できずにいる企業も多いかもしれません。noteでも社内にそういった考えがあり、今年までなかなかアクセシビリティ向上のプロジェクトを始めることができませんでした。 アクセシビリティとは 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティはユーザビリティより幅広い利用状況、多様な利用者を前提とします。 ウェブアクセシビリティとは（※） ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェ
JSer.info #464 - Node.js向けのHTTPクライアントライブラリであるGot 10がリリースされました。 Release v10.0.0 · sindresorhus/got TypeScriptで書き直されたバージョンで、Node.js 10以降がサポート対象となっています。 Node.js 12以降を対象にBrotliのサポート、DNS Cacheのオプションを追加なども行われています。 また、オプション名のリネームを中心に破壊的な変更も多く含んでいます。 query -> searchParams baseUrl -> prefixUrl encoding -> responseType その他にもリトライオプションの使い方の変更、リクエストとレスポンスにおけるJSONの扱い方の変更なども含まれています。 FAB — Frontend Application Bu
この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基本スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎
board（SaaS）のアクセシビリティー改善の取り組みの現在地（2022年10月） - ヴェルク - IT起業の記録
boardという見積書・請求書等の作成を中心とした業務管理のSaaSのアクセシビリティー改善に取り組んでいるので、その内容や現在の状況について書きたいと思います。 これまでの取り組みの流れ 2021年11月に「Webアクセシビリティー向上のための取り組みについて」というアナウンスを出しましたが、2021年夏ごろから準備をスタートし、2022年からアクセシビリティー改善に関するデプロイを継続的に行っています。 boardではこれ以前の2019年に、色覚特性を考慮した配色にするカラーユニバーサルデザイン（CUD）の取り組みを行っています。NPO法人「カラーユニバーサルデザイン機構（CUDO）」に検証を依頼し、同機構が発行するカラーユニバーサルデザイン（CUD）認証を取得していました。 tamukai.blog.velc.jp 今回の取り組みは、WCAG（Web Content Accessib
freee、「アクセシビリティチェックリスト」を公開
freee、「アクセシビリティチェックリスト」を公開障害の有無・年齢問わずだれでも利用できるプロダクトやWebサイトを開発するためのチェックリストを無料公開 freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、「アクセシビリティチェックリスト」を公開しました。本シートは、プロダクトやWebサイトがアクセシビリティに対応しているかをチェックするために必要な「チェック内容、必要なツール、優先度、参考リンク、ガイドライン等」がリスト化されており、順にチェックすることでアクセシビリティの向上に活用することが可能です。これまでfreeeは独自の「アクセシビリティガイドライン」を公開していますが、更に実用的にガイドラインを活用していただくために本シートの公開をしました。 無料でどなたでもご利用いただけます。 【画像】「アクセシビリティチェックリスト一般公開用」実際のシー
この記事は STUDIO アクセシビリティ委員会のマガジン vol.7 です。 こんにちは！STUDIO株式会社 フロントエンドエンジニアのjimbouです。 私からはSTUDIO アクセシビリティ委員会マガジンにて、主にエンジニア/デザイナーさん向けに技術的な記事を発信しています。 STUDIOに限らずWebサイト、Webアプリに携わる全ての方々に読んでいただければと思います🌟 今回は「カルーセルUI」についての記事になります💡 Webサイト、WebアプリでカルーセルUIをデザイン/実装する方に向けて、少しでも役に立つ記事になれば幸いです☺️ 何のためにアクセシビリティを向上させるのか？では、カルーセルUIを実装する上で、アクセシビリティを向上させるとどんな良いことが起こるのでしょうか。 例として、アクセシビリティを特に意識せず、主にdivタグを用いてマークアップしたカルーセルUIを
はじめに TechFeed Conference 2022 が 2022/05/14 実施されました 見返したい LT があり LT 資料を探していたら、結構な量になったのでまとめました（非公式です） 一部資料が見つけられていませんが、見つけたら更新します (もしご存じだったらコメント、編集リクエストお願いします ) TechFeed Conference 2022 資料 Web / フロントエンド Web 標準 / ブラウザ最新動向 Web Standards Interop 2022 パスワードのない世界に向けて 見つけたら追加します CSS / Web アニメーション 2022 年のモダン CSS クリエイティブ系のウェブサイト制作で役立つ CSS 技法 Web Accessibility WCAG 2.2 で追加される達成基準 アクセシビリティツリーを読む React React
失敗例で学ぶアクセシビリティ（WCAG 2.1）
はじめに 突然アクセシビリティ筋を鍛えたくなったのが先月の話です． WCAG 2.1の日本語訳を全部読めばムキムキになれるのではと思い，先頭から読み進めて1ヶ月かかり読了しました． 中でも面白かったのは「失敗例」という項目です．ここには良くないWebページの実装例がたくさん書かれており，「あ〜初心者ならやりがちだよね〜」という例から「え…？職場のコードでやらかしてるんだが……？」みたいな例まであり，マジで死にたくなりました． 私の学習メモとして，またはアクセシビリティの入門資料として，あるいは過去の過ちへの禊みそぎとして，やらかしそうな失敗例を， WCAG 2.1のすべての達成基準に対して 思いつく限りまとめようと思います． レベル（A，AA，AAA）の低い順に記載しますので，下に行くほど発展的な内容になります． 失敗に気づいたら 「WCAG2.1 達成基準の番号 十分な達成方法」でググり
Design systems enable designers and developers to quickly create quality software on a massive scale. As the needs of software-driven businesses grow even larger, design systems are evolving — they are beginning to look and work like APIs. In software development, “API” stands for “Application Programming Interface.” An API is a reliable way for two or more programs to cooperate. It allows program
ウェブアクセシビリティを実践する際、基準となるのがWCAG（Web Content Accessibility Guidelines、ウェブコンテンツアクセシビリティガイドライン）です。しかし、WCAGの文章は難しい！ なので、簡単な言葉に読み替えながら理解しましょう！
Twitterでフォントサイズの指定にpxを使うべきかremを使うべきかという議論が起きて軽く盛り上がっていたので僕の中での結論をまとめておきたいと思います。 事の始まり 始まりは以下の記事でした。是非読んでみてください。 闇雲なrem信仰に物申す | CAMP この記事によると ブラウザデフォルトの文字サイズ設定を反映させるなら rem 一括で文字サイズ変更したいなら rem 記述の直観性を重視するなら px という選択が存在するということです。巷のブログや開発現場で、あまりにもpx＝悪という言及が目立つので、その点についてもう少し正しい認知を広めたい思いで書きました。 との事でした。 記事の内容としてはGAFAでもpxを使っているのだから、開発時の直観性を重視しpxで良いのでは？という結論だと理解しました。 さらに、1.4remより14pxのほうが2タイプ少なくすみます。チリも積もれば
こんにちは！i3DESIGNデザイナーチームです。 今回は、先日発刊させて頂きましたホワイトペーパー”とってもやさしいウェブアクセシビリティチェックリスト”の一部を記事にまとめたいと思います。 ホワイトペーパーには、ウェブアクセシビリティチェックリストというシートがあります。 このシートは、JIS X 8341-3:2016(アクセシビリティについてのJIS規格)に基づき、私たちの解釈で分類・文章を再構成しました。 エンジニアやデザイナーでない方でも理解しやすいよう、一部内容を簡略化したり、複数の達成基準をひとつにまとめたりしている箇所があります。 このチェックリストを「現在提供しているウェブサービスが、どこまで達成できているのか」を図る指標として、ご活用ください。 👇ウェブアクセシビリティチェックリストがついているホワイトペーパー”とってもやさしいウェ
はてなブログ独自の集計による人気記事のランキング。11月12日（日）から11月18日（土）〔2023年11月第3週〕のトップ30です*1。 # タイトル／著者とブックマーク 1 仕事ごときで燃え尽きてしまわないために、何をすればいいのか──『なぜ私たちは燃え尽きてしまうのか』 - 基本読書 by id:huyukiitoichi 2 エンジニアが給料を12倍にする方法 - k0kubun's blog by id:k0kubun 3 短縮URLサービス利用時に表示された悪質な広告についてまとめてみた - piyolog by id:piyokango 4 大人が未成年と知り合い、その子の成人を待って結婚・恋愛することについて - INVISIBLE D. ーQUIET & COLORFUL PLACE- by id:gryphon 5 ChatGPTに社内文書に基づいた回答を生成させる仕組
APCA何もわからない - Qiita
Accessible Perceptual Contrast Algorithm（APCA）はWCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムです。 つたない英語力でそのコンセプトや概略を読み込んでみて、なんとなく以下のように理解しました。 コントラストというのは単純な背景色と前景色の差分だけで判断できるものではない。錯覚とかあるからね。フォントのサイズやウェイト、行間、コンテキストなどから総合的に知覚されるものだ、ということらしい。 文字の読みやすさに影響するコントラストの知覚に関しては、フォントサイズやウェイトなどからなる空間周波数の影響をとくに受ける。 空間周波数はWikipediaによると「空間的な周期をもつ構造の性質」とのこと、なんとなく一定の二次平面上のパターンの複雑さってことかなぁ？このパターンの刺激が一定程度を超えると知覚できるよう
【コロナ】納豆菌酵素がスパイクタンパク質を分解することを確認 デルタ株にも有効 1 名前：haru ★：2021/09/26(日) 12:05:31.39 ID:ATeJL3+H9 水谷教授らのチームは、納豆菌のタンパク質分解酵素が新型コロナウイルスのスパイクタンパク質を分解し、感染を阻害することを確認したと、国際学術誌「バイオケミカル・アンド・バイオフィジカル・リサーチ・コミュニケーションズ」に発表しました。 水谷教授らは納豆の抽出液と新型コロナウイルスを混ぜ、ウイルスが細胞に感染するかどうか実験。納豆菌の持つ約80種類のタンパク質分解酵素がスパイクタンパク質を分解し、ウイルスは受容体と結合できなくなった。 デルタ株など変異株も同様だった。新型コロナウイルスは表面にあるスパイクタンパク質がヒトの細胞の表面にある受容体に取り付いて感染します。 水谷教授は「納豆を食べて感染を防げるかはこれか
There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design, without understanding in which situations a color contrast standard applies. Not only that, but they assu
モバイルサイトをデザインするときの7つのポイント | アドビUX道場 #UXDojo モバイル向けWebサイトに良いデザインが求められるのはもはや常識です。この記事では、モバイルサイト訪問者に良い体験を提供するために注意すべき7つのポイントを紹介します。 ますます多くの人々がスマートフォンから情報を探すようになり、Webを閲覧する手段は大きく変わりました。実際、全世界にはおよそ38億人のスマートフォンユーザーがいると推測されています。この数字は、モバイル向けにサイトを最適化することの重要性を物語っています。では、その最適化はいったいどのように行えばよいのでしょうか？ この記事は、優れたモバイルデザインを提供したいデザイナーのために、7つの実践的な原則を紹介します。 モバイル向けデザインアプローチ モバイル向けのWebデザインとは、サイト体験をモバイルユーザーのために最適化するプロセスです。
ぼくとわたしのアクセシビリティ原稿を公開します
これは何？ サードプレイス金沢オンラインのイベント登壇した際の発表原稿です。 実際に発表したスライドや映像との差分はありますが、大きな内容は変わらないのでほぼそのまま公開します。 関連リソース この発表のスライド（GoogleDrive） 当日の映像のアーカイブ（サードプレイス金沢のYouTubeチャンネル）。 サードプレイス金沢は 3rd LINKの運営するコミュニティで定期的にイベント開催しているそうです。 発表内容 アジェンダ 自己紹介と今日のテーマ アクセシビリティを取り組み始めた個人的経緯 アクセシビリティと障害モデル 障害者と僕 僕もある意味では障害者 アクセシビリティに取り組む 世間のアクセシビリティの状況 技術資料などの共有 自己紹介と今日のテーマ はじめまして。どうけといいます。 ミチにイエと書いて道家です。 経歴ですが、かつては面白法人カヤックでFLASHチームにいまし
ウェブやアプリの情報やサービスは、誰でも利用できる仕様になっているだろうか。 ウェブやアプリなどへのアクセスのしやすさ、製品やサービスの利用のしやすさはウェブアクセシビリティと呼ばれ、身体的条件や年齢、利用環境にかかわらず利用できることを意味する。 全盲でスクリーンリーダーソフトウェア（PCやスマートフォンに搭載されている読み上げ機能）を利用している人にも、ロービジョン（弱視）で画面拡大機能を利用している人にも、聴覚障害で音声が聞こえない人にも、手が不自由でマウスが使えない人にも、LD（学習障害）により文字を認識しづらい人も、健常な人と同じように、誰かの力を借りる必要なく一人でアクセスできるように、ということだ。 アメリカでは視覚障害の男性がピザチェーンのドミノ・ピザに対し、ウェブやアプリのアクセシビリティが不十分でメニューを注文できなかったことがADA法（障害を持つアメリカ人法）に違反す
同僚の @wadackel とウェブアクセシビリティの検証ツール acot （アコット）を作っていて、まだまだ途中だけど、Webアクセシビリティ Advent Calendar 2020の18日目になってしまったのでご紹介。 https://github.com/acot-a11y/acot すでにWeb アクセシビリティの検証ツール acot を作ってる - wadackel.meで詳しく紹介されているので、私の記事では補足的にacotを作るモチベーションや経緯、アイデア、どんなルールが書けるかなどを紹介する。 モチベーションとか経緯とか 以前に @wadackel と開発していたWINTICKETというサービスでは、ウェブアクセシビリティに関する開発ポリシーとコードレビュー、そしてeslint-plugin-jsx-a11yによって一定の品質が保たれていた。 ウェブアクセシビリティ -
Status update on HTML/CSS ruby: ➤ https://t.co/eVs8ylc0EN ➤ https://t.co/xffoIkmahD— fantasai (@fantasai) 2021年3月11日 fantasaiのツイートをたまたま見かけて知ったわけだけど、ここに来てHTML/CSS Ruby方面が一気に加速していると。 CSS Rubyについては、2020年になって6年ぶりにドラフトが更新され、この3月にも更新がされた。CSSでは何がどうなった、というのはここでは触れない。Change logを追ってもらえればと。 で、HTMLはというと、CSS Rubyのドラフト更新と時を同じくして、Restore the rb and rtc elements and update ruby content model accordingly - whatwg/
In the spirit of “everything old is new again,” browsers are once again supporting the ability to style the scrollbar. Much like custom CSS mouse cursors, I feel this is also a mistake. When you style things on the web, you get control over almost the entire experience. From ten thousand feet up, your scope of concern is this: The scope of concern for the browser is this: The browser’s UI is infor
JSer.info #521 - WebAssemblyのランタイムであるWasmer 1.0がリリースされました。 Wasmer 1.0. By leveraging Wasm for software… | by Syrus Akbary | Wasmer | Jan, 2021 | Medium wasmer/CHANGELOG.md at master · wasmerio/wasmer Wasmer 1.0では、Wasmファイルを.dllなどにプリコンパイルするwasmer compileの追加、クロスコンパイルの対応、エラーレポートの改善などが含まれています。 1.0ではAOT (Ahead Of Time) compilation(wasmer compileによるprecompile)などをサポートしたことでproduction readyとなったと書かれています。 次の記
2022/05/14(土)で開催された TechFeed Conference 2022 に関する、現時点での公開資料と Twitter アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Twitter アカウントについては、多くの方は公式サイトの紹介ページに記載 or 資料記載がありましたので、そちらから引用させていただきました。 そちらに記載がなかった方については、別途分かった方のみ記載。 資料について、見つけられなかった or 元々資料を使用していない 方についてはレポート記事を見つけられた方のみ、そのリンクを記載しています。 （ご本人の記事の場合は、本人記事という表記） リンクの間違い等ありましたらコメントい
Geri Reid - Forms best practice
Form design Best practice, research insights and examples Here's my best practice guidelines for form design. Working on a design system for a bank taught me a lot about forms. I watched testing in labs. I worked alongside experts from specialist accessibility organisations. I saw forms tested by people with disabilities and users of assistive technology. I've also read a lot of research. From all
この本は、各社でWebアプリケーションのアクセシビリティを推進していくうえで「デザイナーやエンジニアとして開発している現場のメンバーのために、アクセシビリティを向上させるために必要な知識がまとまった本が欲しよね」ということで執筆しました。そうして出来上がった本はまさかの576ページで、ソフトカバー製本のくせに自立します。 レビュー協力させて頂いた、Webアプリケーションアクセシビリティを献本いただきました。自立する厚さに内容たっぷりです。 pic.twitter.com/iNnQouICwQ — ShunIto ʕ•ᴥ•ʔ (@shunito) February 17, 2023 そんな大ボリュームな本になったのは、著者4人が4人とも、デザインもコーディングもやる人たちで、各社のサービスのアクセシビリティ向上を牽引していて、そしてとにかく言いたいことがいっぱいいっぱいあるから……という感じ
いま自分は、担当サービスのアクセシビリティ向上を推進する「アクセシビリティタスクフォース」を率いる立場になっています（アクセシビリティタスクフォースについては AbemaTV ABEMA iOS版アプリのアクセシビリティ向上支援 ｜ 事例紹介 ｜ 株式会社コンセント で少し触れられています）。 現在、アクセシビリティ向上の文化やプロセスを社内に浸透させていくため、さまざまな施策を考え実行しています。 ただそうやって活動していくうちに、ふと気づいたことがありました。自分はなぜアクセシビリティ向上に力を込めているかという言語化をしていないことです。 アクセシビリティ向上の推進は、個人でやるには大変で、組織としてやっていくのが一番良いと思っています。 ただ、組織としてアクセシビリティ向上をやっていくように伝えていく中で、個人の思いというのは活動の原動力として大事だと思っています。ここをあやふやに
これは フェンリル デザインとテクノロジー Advent Calendar 2023 15日目の記事です。 こんにちは。大西です。年に一度くらいしか書かないnote、今年も一度しか書かずに終わりそうです。 私は視覚科学を勉強しています。特に文字の認識に関する研究が好きです。 文字について考えるのが楽しすぎて、博士号をとりました。今回は久しぶりに自分の専門領域の話を書きます。 IT業、しかもHCDを掲げて仕事をしている身ではありますが、実は私、WCAG関連の話題があまり好きではありません（個人的な見解です）。中でも、「4.5:1以上のコントラスト比がないとアクセシビリティ対応が不十分」のようにいわれがちな、コントラストチェッカーの結果を見るのが一番苦手です。チェッカーでの計算に限界があることを理解して使ってほしい、結果に一喜一憂するくらいなら輝度を実測しちゃえばいいのに、などと歯がゆい思いを
公開日 : 2022年2月17日 カテゴリー : アクセシビリティ マウスなどのポインティングデバイスの代わりにキーボードを用いてウェブを利用する人や、ロービジョンのユーザーにとって、ウェブコンテンツ上で (キーボード操作による) フォーカス位置が視覚的に明示されることは、とても重要であり、大きな助けになります。 W3C が勧告している WCAG (Web Content Accessibility Guidelines) には「Focus Visible (フォーカスの可視化)」という達成基準があります (参考 : WCAG 2.1 解説書 達成基準 2.4.7 Focus Visible / 日本語訳)。また、WCAG の次期バージョン (2.2) では「Focus Appearance (フォーカスの外観)」という達成基準が新たに追加される見込みです (参考 : WCAG 2.2 解
A guide to designing accessible, WCAG-conformant focus indicators
A guide to designing accessible, WCAG-conformant focus indicators Published on 13 Aug, 2021 | Last updated on 27 Aug, 2023 | Takes approximately 24 min to read This post is a modified, text-only excerpt from my Practical Accessibility video course. I wanted to share this guide to designing accessible focus indicators because focus styles are a recurring discussion I have with designers I wor
Skip to patterns GIVEN devs wanna conform to WCAG 🤔 AND devs don’t wanna read APG 😵💫 THEN devs can CPAC (Copy & Paste Accessible Code) 🥳 Patterns Common design patterns written in accessible HTML. All you have to do is dress it up with CSS and sometimes JavaScript. Button <button type="button"> Button </button> <button type="submit"> Submit Button </button> <button type="reset"> Reset Button
アクセシブルなビジュアルをデザインするためには、色のコントラストを考慮すること、色だけに頼らないこと、インタラクティブな要素を識別しやすくすること、画像に対して役立つ代替テキストを提供すること、実際のユーザーでビジュアルをテストすること、が挙げられる。 5 Visual Treatments that Improve Accessibility by Kelley Gordon on October 30, 2022 日本語版2023年5月10日公開 CDC（アメリカ疾病予防管理センター）によると、米国では6100万人の成人が障害を抱えて生活している。障害を持つ人々の数と、アメリカ障害者法（ADA）のWebサイト関連の訴訟の近年の増加を見る限り、これらの人々のためにデザインをすることは不可欠である。また、アクセシブルなデザインは、結果的にユーザビリティを向上させる。Web Content
こんにちは。フロントエンドエンジニアの yamanoku と申します。 最近久々に出社しましたが、どうやら半年以上も出社していなかったことに驚愕しました。自分自身が違和感なくリモート作業やれているのかもなぁという気づきにもなりました。 前回の記事では東京都 新型コロナウイルス対策サイトの Web アクセシビリティチェックをしたという話をしました。 engineer.crowdworks.jp 今回の記事では、チーム内でクラウドワークスの Web アクセシビリティチェックを実施してみた話をします。 Webアクセシビリティとは？ Accessibilityは「アクセスできる・アクセスしやすさ」と翻訳されます。そしてWebアクセシビリティはWebにある情報やコンテンツに、あらゆる人がアクセスできようにすることを指します。 あらゆる人がアクセスできるようにする、とはどういうことか。以下はその対応例
Button design tips to avoid common mistakes - Adham Dannaway
Practical button design tips to avoid common usability and accessibility problems. I’ve been a designer for nearly 2 decades now and I’ve used buttons in many projects, but I don’t think I’ve ever taken the time to think about button design in detail. It wasn’t until recently that I realised I’d been making some common button design mistakes (and I’m not the only one). If you pull out your phone,
Leonardo: an open source contrast-based color generator
Create beautiful, accessible, and adaptive color systems using contrast-ratio based generated colors. Leonardo now supports full theme generation. If you’ve created a color palette for a website or app, you’ve probably encountered a few of the challenges in creating color palettes for user interfaces. One of the most common challenges is meeting accessibility criteria such as a minimum contrast ra
この記事は Cybozu Frontend Advent Calendar 2023 の 6 日目の記事です。 最近になって、Progressive Enhancement（プログレッシブ・エンハンスメント） というワードを目にする機会が増えています。 Remix や Next.js といったフレームワークにおいても頻繁に登場します。 Progressive Enhancement という概念は最近になって登場したものではなく、Wikipedia によると最初に登場したのは 2003 年のことだそうです。 今回はこの "Progressive Enhancement" について少し考えてみたいと思います。 Progressive Enhancement とは Progressive Enhancement は特定の仕組みや機能のことではありません。設計哲学・戦略・概念、といった言葉で説明さ
Accessibility Myths
Debunked Accessibility only affects a small group of users Not that small. Around 15% of the world's population, or estimated 1 billion people, live with disabilities, they are the world's largest minority. The number of people with disability is dramatically increasing. More details about Accessibility only affects a small group of users Disabled users don't use my website How can you be so sure?
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Accessibility testing with Storybook
やさにちウォッチのルビ(ruby - ふりがな)のスタイル (改訂版)
noteのアクセシビリティ向上プロジェクトが始動｜note株式会社
2019-12-03のJS: Got 10(Node.js HTTPクライアント)、FAB(Frontend Application Bundles)
使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】 - Qiita
カルーセルUIのアクセシビリティを向上させてみよう！｜bonji810｜note
TechFeed Conference 2022 資料まとめ - Qiita
Design APIs: The Evolution of Design Systems
【ゆるふわWCAG】中学生でもわかるウェブアクセシビリティガイドライン
フォントサイズの指定でpxを使うべきかremを使うべきかの（個人的な）結論
とってもやさしいウェブアクセシビリティチェックリスト｜i3DESIGN Designers
今週のはてなブログランキング〔2023年11月第3週〕 - 週刊はてなブログ
【コロナ】納豆菌酵素がスパイクタンパク質を分解することを確認 デルタ株にも有効 : 痛いニュース(ﾉ∀`)
The Myths of Color Contrast Accessibility
モバイルサイトをデザインするときの7つのポイント | アドビUX道場 #UXDojo
米ではドミノ・ピザが｢クーポンが読み取れない｣で敗訴。ウェブやアプリは障害者が利用しやすいか
Web アクセシビリティの検証ツール「acot」 / masuP.net
帰ってくるHTML Ruby（rb/rtc）要素 - 水底の血
Don’t use custom CSS scrollbars
2021-01-07のJS: Wasmer 1.0、2021年のウェブ標準とブラウザ、xstyled
TechFeed Conference 2022 公開資料・Twitterリンクまとめ
「Webアプリケーションアクセシビリティ」どこから読む？｜ymrl
自分がアクセシビリティ向上に力を入れる理由 / 学ぶ、考える、書き出す。
視覚科学者がAPCAについて考えてみた｜Madoka Ohnishi
一貫性のあるフォーカスインジケーター | Accessible & Usable
Copy and Paste Accessible Code | Mike Mai
アクセシビリティを向上させる5つの視覚処理
クラウドワークスのWebアクセシビリティチェックを始めてみた - クラウドワークス エンジニアブログ
現代の Progressive Enhancement について考える