全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者（エンジニア、プロダクトマネージャー、デザイナー）向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい
ガラス張りの図書館がある「まちなかリビング北千里」について、蔵書の紫外線対策などを吹田市に質問しました｜塩谷舞（mai shiotani)
昨年11月12日、私の故郷でもある大阪府吹田市にあたらしく出来た「まちなかリビング北千里」ついてTwitterで投稿したところ、さまざまな声が届きました。 その際に投稿した写真がこちらです（一部）。 これらの写真や「場所によって飲食OK」と書いていたツイートの文言などを受けて、「ガラス張りの図書館は、紫外線によって蔵書が退色してしまうのではないか」「高い場所に飾ってある本を手に取ることが出来ないのではないか」「飲食OKの図書館では、本に虫害が発生するのではないか」ほか、多くの懸念の声が、引用リツイートなどで見られました。 夢なの？というような理想の図書館が千里に出来てしまった…… 圧倒的な蔵書数、電源Wi-Fi完備でPC作業OK、場所によって飲食OK、「図書館なのにそんなに…？！」という夜8時までの開館時間。 なにより、窓の向こうの箕面の山々が美しい……。北千里駅すぐ。22日オープンで、h
デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上（2019年12月現在）ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら
株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6
はじめに ドワンゴ教育事業 Web フロントエンドチームの berlysia です。 ドワンゴ教育事業が提供するオンライン学習サービス『N予備校』は、この 4 月でリリース 6 周年を迎えました。N 予備校の Web フロントエンドはリリース以来、全面的な書き換えを行い、今も続けています。 この記事では書き換えに伴う N 予備校の Web フロントエンド実装の変遷を説明し、これら書き換えの経験やWebフロントエンドという領域の性質を踏まえて、すべてを書き換え続ける選択をしていることを述べます。 この記事は berlysia が他社様イベント*1にて発表させていただいた話題を元に再構成しています。 speakerdeck.com ※JSConf JP 2021 で発表させていただいた事例とは異なるコードを対象にしています。 はじめに 実装の 5 つの世代 v1 v2 v3 v3(TypeSc
【翻訳記事】BDDの考案者が執筆した記事「テストについて話し合わなくてはならない」を翻訳しました！ - ブロッコリーのブログ
目次 目次 はじめに（本記事の見どころなど） テストについて話し合わなくてはならない テストの目的 「うまくいかないかもしれないものは何ですか？」 なぜテストをするのですか？ この場合に限り…… テスト駆動開発 〜テストについて語る前に説明が必要です〜 テストについて話しましょう なぜすべてのテストを自動化しないの？ テストカバレッジは有用な指標ですか？ 「テストをシフトレフトする」とはどういう意味ですか？ いつ、どこでテストすべきですか？ 十分なテストとはどれくらいですか？ おわりに はじめに（本記事の見どころなど） 今回は著者本人の許可をもらった上で、「テストについて話し合わなくてはならない」（原題は「We need to talk about testing」）を翻訳したので紹介します。 dannorth.net 本記事はDaniel Terhorst-North(Dan North
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
厚生労働省は9月8日、新型コロナウイルス感染症の接触確認アプリ「COCOA」（iOS／Android）を高齢者や障害者にも使いやすいようにする方針を発表した。2022年3月までに、「見出しやラベルを付ける」「音声解説を提供する」など38項目を満たすことを目指す。 対応を目指すのは、Webコンテンツの配慮設計（Webアクセシビリティー）について定めたJIS規格「JIS X 8341-3:2016」。全部で61項目の達成基準がある。 「タイトルを付ける」「情報を意味ある順序にする」など25項目の基準を達成するとレベルA、「見出しやラベルを付ける」「音声解説を提供する」など13項目を満たすとレベルAA、「手話の用意」など23項目満たせばレベルAAAになる。総務省は公的機関のサイトなどでレベルAAへの対応を推奨しており、COCOAでもレベルAAを目指すとしている。 関連記事 Webアクセシビリティ
1万軒以上巡ったラーメン評論家・山本剛志が選ぶ「車で行きたい」おすすめラーメン店 #くるまも - くるまも｜三井住友海上
著者 山本剛志：1969年、東京都生まれ。2000年「TVチャンピオン ラーメン王選手権」で優勝。全国10,000軒以上のラーメン店で、15,000杯以上のラーメンを堪能。雑誌・テレビ・WEB媒体などでラーメン情報の紹介多数。ブログは毎日更新し、ラーメン情報とラーメンに関するニュースを発信。「日本ラーメンファンクラブ」実行委員会代表委員を務める。 Twitter：@rawota ブログ：ラーメン評論家 山本剛志のら～マニア共和国 はじめまして。ラーメン評論家の山本剛志です。 私は、新横浜ラーメン博物館でラーメンという食文化の幅広さと奥深さに感銘を受けて以来、25年間で10,000軒以上のラーメン店を巡ってきました。昨年は年間で372杯、最高で1日に16杯食べたこともあります。それだけ食べていても、まだ他にない個性的なラーメンに出合うこともあります。そんな時にはテンションが上がって、次のラー
メディア統括本部・技術横断室の谷です。組織横断の活動しながら、AmebaやAmebaマンガという事業に関わっています。実務としては、コード実装をメインに、UI設計やUX設計、最近ではユーザーインタビュー等のリサーチ業務をおこなっています。 この記事では私が立ち上げから2年くらいかけて関わってきたAmebaのデザインシステムについて、その全貌を解説します。 そして本日からデザインシステム「Spindle」のサイトを試験的に一般公開します。詳しくは記事後半にて。 まず前段のお話として、Amebaという事業について説明させてください。 Ameba事業の概要 Amebaはブログサービスであるアメーバブログを主としたサイバーエージェントのメディア事業の1つです。 多くの人はおそらく「アメブロ」や「ピグ」の印象が強いですが、関連事業やサービスとしてはマンガや占い、ニュースなど色々と展開をしています。
《この記事は約 14 分で読めます（1分で600字計算）》 フリーライターの納富廉邦氏が、Amazon「Kindleダイレクト・パブリッシング」で紙の本の出版にチャレンジ、体験談をレポートいただきました。 【こちらはアマゾンジャパン合同会社の提供でお届けする記事広告です。】 【2023年10月17日追記：「納税に関する情報」に重要な訂正】 即売会で売りたいから、紙がいい 12年以上連載していたコラムが最終回を迎えました。そこで、この連載を本にまとめようと思ったのですが、連載していた新聞社は単行本を出す部門がなく、他所に持っていくと、電書でならというお話でした。それなら、自分で作ってしまえと思ったのですが、できれば文学フリマなどで販売したいので、紙の本がいいなと思いました。 全301回、様々なグッズを紹介した連載原稿は、単行本4冊分くらいは楽にあります。ここからセレクトしたものを本にしようと
もっとも注目されたUIデザインのテクニックの総まとめ
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 これまでの中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of the Best by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 細いフォントは暗いカラーにする 2. 長いフォームは常にラベルを上部に配置する 3. ボタンのラベルは一貫性を保つ 4. 不要なテキストでフォームのUIを乱雑にしない 5. フォームはインタラクションの後、すぐにフィードバックを提供 6. 次のステップの情報を提供する 7. CTA用にカラーを1つ確保しておく 8.
クレイモーフィズムはWebデザインの新しいトレンドの一つで、クレイ粘土みたいなもこもこの質感にシャドウを加えてフラットなデザインに奥行きを与えます。メタバースなどの影響でデザインやイラストにも3Dの人気が高まり、最近ローンチしたスタートアップでも使用しているのを見かけます。 クレイモーフィズムのスタイルをさまざまな要素に適用できるCSSを紹介します。 clay.css clay.css -GitHub 「クレイモーフィズム」とは clay.cssの特徴 clay.cssのデモ clay.cssの使い方 「クレイモーフィズム」とは 「クレイモーフィズム（Claymorphism）」は、UIデザインのフレッシュで新しいコンセプトです。呼び名はMichał Malewicz氏によって作られたもので、デザイナーはUIデザインへのこのアプローチの可能性を探求することに興奮しています。 メタバースやN
オブジェクト指向のハードコア
オブジェクト指向のハードコアは2019年5月25日にゼロベースサロンで行われたイベントです。「オブジェクト指向」というキーワードについて、プログラミング、デザイン、哲学などの分野を横断しつつ知的な議論ができました。記録映像は必見。 企画意図／招待状 この研究会の企画意図については、私が送った招待状を見ていただくのが早いでしょう： いくつか異なる分野で「オブジェクト指向」がキーワードとして注目されています。昨年からGUIデザインの分野では「オブジェクト指向ユーザーインターフェイス」(OOUI)の議論がホットです。ソフトウェア開発の分野では、数年前からオブジェクト指向の見直しとしての「ドメイン駆動設計」(DDD)が広まっています（※原著である英語版から日本語への翻訳は数年遅れています）。さらには「オブジェクト指向存在論」(OOO)も思想業界でブームになっています。 これはもうオブジェクト指向の
こんにちは。デジタル改革担当大臣の平井卓也です。 このたび、デジタル庁のプロセスを透明にしようというコンセプトで開設されたこのnoteで、せっかくならデジタル改革担当大臣である私自身の想いを、私の言葉で読者の皆さまに伝えたく思い、こうして筆をとっています。 デジタル庁で成し遂げたいこと私は今まで様々な場所で「デジタル庁を設立して成し遂げたいこと」を申し上げてきました。 それらをぐっとまとめて、あえて一言でまとめるのだとすれば、「日本はこんなもんじゃない」ということをもう一度国民と共有したい、ということです。 最近はネガティブなニュースばかり流れていますが、日本がこれまで危機的な状況において、必ず国民がその気になって乗り越えてきたことを考えれば、このままずるずる後退するようなことには絶対にならないし、してはならないと思います。 今はちょうど１００年に一度の変革期。 変革期を前にたじろぐ方もい
アクセシビリティとはアクセシビリティは、サービスや情報をどんな利用者も円滑に利用できるかの度合いです。 アクセシビリティが高いほど、より多くのユーザーが円滑に利用でき、アクセシビリティが低いほど、より多くのユーザーが利用できないということです。 アクセシビリティ向上は、障害当事者だけでなく、さまざまな環境や状況にいる人、高齢者、日本語以外を得意な言語とする人など、すべての人のためのものです。人だけでなく、サービスや情報にアクセスする機械(ロボット)もアクセシビリティの影響を受けます。 SmartHRの開発方針SmartHRは「well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会を作る。」というミッションを掲げ、働くすべての人を後押しするプラットフォームをつくっています。 誰もがその人らしく働ける社会を実現するため、SmartHRはアクセシビリティの向上に取
ツイッターでアクセシビリティ向上日誌２【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない（というか自分は知らない）ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-
2022年になりました。矢倉眞隆（@myakura）と申します。昨日に続き、新春特別企画のブラウザとウェブ標準動向について紹介します。 取り上げるトピックの数やそのインパクトから、今回はCSSを独立した記事として取り上げることになりました。「ブラウザとウェブ標準動向」についても寄稿していますので、そちらもお読みいただければうれしいです。 2022年以降のCSSは大きく変化しそうだなと思っています。これまでも、CSS3と呼ばれていた機能による表現力の強化、FlexboxやGridなど強力なレイアウト機能の追加など、大きな変化と言えるだろうものはありました。しかし現在提案・実装されている機能は、CSSの根幹を拡充するものと、これまでと性質が異なるものです。 Compat 2021とInterop 2022で互換性の向上 CSSのつらいところとしてまず取り上げられるのが、ブラウザ実装の挙動の違い
新規WebサイトのSEOで見落としがちな問題に対処する5つのポイント（#6～#10） | Moz - SEOとインバウンドマーケティングの実践情報
新規ウェブサイトのSEO戦略を構築するのに必要な10のステップ#6～#10ステップ6戦略的なコンテンツカレンダーを作成する（そしてコンテンツを継続的に投入する）戦略的なコンテンツカレンダーは、一貫性を持って意図的に利用すれば、必然的に顧客を引き付け、キーワードに対して上位に表示されるようにするのに役立つ。そうしたコンテンツ計画の方法を紹介しよう： キーワードマップのセクションに優先順位をつける： キーワードマップが100ページ以上に及ぶこともあるかもしれない。これはむしろ良いことだ。なぜなら、オーガニック検索トラフィックを蓄積できる余地が十分にあることを意味するからだ（HubSpotのように月間トラフィックが数百万に上るウェブサイトでさえ、最初はゼロだったことを忘れてはいけない）。 まずは、製品やサービスのページなど、ウェブサイトに今すぐ必要なページを優先すべきだろう。こういったページはコ
2020年6月17日に行われたイベント「UIT meetup vol.9『The new normal for frontend』」に、LINE株式会社のフロントエンドエンジニアであるChanghee Kim氏が登壇しました。「コロナ禍、私たちにできたこと」という講演タイトルで、新型コロナ対策のための全国調査を行った際のフロントエンド開発について紹介しました。講演資料はこちら コロナ禍での仕事の変化 Changhee Kim氏：それでは「コロナ禍、私たちにできたこと」というタイトルで発表させていただきます。まず自己紹介ですが、Kim Changhee（キム・チャンフィ）と申します。LINEでは2018年からフロントエンドエンジニアとして働いています。 LINEではたくさんの外国籍社員が働いています。私もその1人で、韓国出身のエンジニアです。ふだんはLINE公式アカウントの管理画面アプリを開
Intel MacからM1 Macの移行を想定。実際にはIntel MacからM1 Pro Macへ移行をしたのでその忘備録です。出来る限りというのは手動作業が存在するため。移行セットアップを利用せずにクリーンインストールを行う。 なぜクリーンインストールなのか CPUアーキテクチャがarm64に変わるからです。TimeMachineやThunderboltケーブル経由での移行を行ったとしてもM1に最適化されたアプリケーションやミドルウェアではなく、Intel環境下のファイルとarmアプリケーションが入り混じってグチャグチャになった環境を直すよりもクリーンインストールで綺麗な状態でセットアップをしたほうが利点が大きいと考えている。 逆に言えばアーキテクチャが同じであれば良いので、見ている方がいるかわからないがM1 MacからM1 Pro・Maxへの移行はThunderboltケーブル経由で
ICS MEDIAでは「Figma」の機能紹介記事を多く公開しています。Figmaは標準でも十分な機能が備わっていますがプラグインを利用することでより便利にカスタマイズ可能です。 今回の記事では、プラグインの使い方とオススメのプラグインを紹介します。Figmaは他のデザインツールと比べ、プラグインを利用するまでのハードルが低く、とても使いやすくなっています。まだ使ったことがない人や便利なプラグインをもっと知りたいという方にオススメの記事です。 Figmaプラグインの使い方 Figmaのプラグインを見つけるにはFigmaコミュニティが便利です。Figmaアプリのホーム画面の「コミュニティ」ボタンから、Figmaコミュニティへアクセスしましょう。 プルダウンから「プラグイン」を選択すると、コミュニティに公開されているプラグインの検索が可能です。 プラグインアイコンの右下のマークで、対応している
Re:Backlogs というプロジェクト管理(タスク管理)ツールを OSS としてリリースしました - saino.me (kaishuu0123)
自分の Qiita 記事からブログへの転載です。そこそこいいものが作れたなぁと思っています (∩´∀｀)∩ qiita.com 読み方: Re:Backlogs (リ・バックログ) https://github.com/kaishuu0123/rebacklogs 2019/12/23: 使い方の記事を書きました。 Re:Backlogs の使い方を Twitter もどきアプリの開発を例に紹介します 画面紹介 マスターバックログ カンバン (Kanban) プロジェクト設定画面 説明 セットアップ方法 開発動機 ソースコード 使っている技術 実装してて楽しかったところ Drag & Drop による操作と、バックエンドのソート順保持 見やすい色を自動的に決めるアルゴリズム webpacker でのパフォーマンスチューニング 開発者なりにユーザビリティを考えること 最後に 2019/01/
ゲームの色覚対応
ゲームの色覚対応、なんとかならないものか。自分は割と多い赤緑系なんだが。 ぷよぷよなんかはもう諦めるしかない。ぷよの形が違うから序盤はいいんだけど詰まってくると赤と緑を見間違えて終わる。これは昔のもだめだしフィーバー系はもっとひどかった。ぷよぷよ結構好きなので割と買いはするけどおかげで対戦ができない。 スプラトゥーンなんかはいかにも対応してますよという雰囲気を出しているだけで全然だめで、特にフェスになるとステージ全体が暗くなるから普段の青や黄色もわかりづらくなる。3は3色あるからもうだめだ。一番酷かったのは2のマヨネーズケチャップフェスで、これは境界線が全くわからなかった。あのレベルはもう二度と無いと思いたい。 FF14も最近のアップデートでマップに表示されるミッションの範囲がわかりやすくなったのは良かった。以前だとギルドリーヴの範囲は全く見えていなかった。けど新しくできたダンジョン(アル
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
全盲のeスポーツプレイヤーたちが開発に協力。『ストリートファイター6』のアクセシビリティ向上はどう実現した？ | CINRA
近年のビデオゲームの進化はめざましい。技術の発達で、現実と見まがうようなリアルなグラフィックのゲームがいくつもつくられ、またオンラインを介して国籍や言葉を超えた多様なプレイヤーが仮想世界の冒険や戦いや出会いを楽しんでいる。 しかしそれと並行して、じつは進化し続けているのがユーザーのアクセシビリティ。障がいなどがある人でもゲームを楽しめる工夫の進化だ。その最前線を突き進んでいるのが人気格闘ゲームの最新作『ストリートファイター6』だ。同作では、eスポーツを介した障がい者の就労支援を行なう株式会社ePARAと共同し、対戦相手との距離やお互いのコンディションをサウンドで把握する工夫などが随所に盛り込まれている。 今回、同作を制作したカプコンからディレクターの中山貴之、サウンドチームの渥美格之進、小池義規、ePARAから代表取締役の加藤大貴、ブラインドeスポーツプレイヤーのNAOYA、今回の共同プロ
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
「HTML解体新書」リフロー版電子書籍を作りました - 弁護士ドットコム株式会社 Creators’ blog
4月に発売された書籍「HTML解体新書」。その電子版は今までPDF版しかありませんでしたが、このたびリフロー版が発売となり、Amazonでも購入できるようになりました。 この記事では、HTML解体新書のリフロー版電子書籍を実際に作成した際の流れについて、なぜ作成したのか、どうやって作成したのか、どのようなトラブルがあったか、といった点をご紹介します。リフロー版の電子書籍の作成、出版を検討されている方の参考になれば幸いです。 リフロー版の電子書籍を作った理由 リフロー型と固定レイアウト型 リフロー型とアクセシビリティ リフロー版の電子書籍を作るには 電書協 EPUB 3 制作ガイド 実際の制作の流れ テキスト原稿を用意する XHTMLを作る その他EPUBに必要なファイルを準備する OCFコンテナのメタデータを用意する mimetype container.xml OPFパッケージのデータを
チャートのカラーをアクセシビリティを考慮した色へ変更する · Issue #1172 · Tokyo-Metro-Gov/covid19
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
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2022年のWebアクセシビリティに関連する出来事を振り返りつつ、2023年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2 2022年9月版のWCAG 2.2で、文書のステータスとしてはようやく勧告候補（Candidate Recommendation）にまでたどり着き、仕様文書として完成する勧告（Recommendation）が見えてきた…と思っていたところですが、12月になって達成基準4.1.1構文解析を削除するという話が急浮上してきました。 達成基準4.1.1がどういったものなのか、改めて振り返ってみましょう。この達成基準については、もとはWCAG 2.1（原文、参考日本語訳）と同じものであり、WCAG 2.0とも同一です。達成基準4.1.1は、マークアップ言語
CSSのスクロールスナップが登場して早4年、現在ではほぼすべてのブラウザにサポートされ、採用しているWebサイトやスマホアプリも増えてきました。 CSSのスクロールスナップについて、基礎知識をはじめ、各プロパティの機能や使い方、スクロールスナップの実際の使用例、実装の注意点などを紹介します。 CSS Scroll Snap by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSのスクロールスナップを使う理由 スクロールコンテナの基本 スクロール コンテナの注意点 CSSのスクロールスナップとは scroll-snap-stopの使い方 scroll-paddingの使い方 scroll-marginの使い方 CSSのスクロールスナップの使用例 block値とinline値について アク
デジタル庁創設に向けた準備サイト(www.digital.go.jp) なるものが立ち上がったようです。 が、スクリプト無効設定でアクセスすると残念なことに……。 スクリプト無効設定で www.digital.go.jp にアクセスした様子。真っ白で何も表示されていない。 サイトポリシー(www.digital.go.jp) の「閲覧環境について」を読むと、 当ウェブサイトでは、より快適にご利用いただくためJavaScriptを使用しています。ご使用のブラウザの設定においてJavaScriptが有効となっていない場合、正しく表示されない、又は操作できないことがありますので、ご了承ください。 サイトポリシー(www.digital.go.jp) とあるので、これは設定ミスやサーバーのエラーでそうなっているのではなく、意図的な作りと思われます。ソースコードを見るに「Nuxt.js」を使い、レン
アクセシビリティー対応とかいう害しかないクソ
今年の初めから弊社の公式サイトは「音声読み上げソフトに配慮した記述」が求められるようになった。 例えば「7/28(火)」はNG、「7月28日（火曜日）」が正しい。これはまあいい。 でも他の例では「※詳細はこちら」これはダメで、「注記：詳細はキャンペーン詳細サイト（外部サイトへ移動します）（別ウィンドウで表示します）をご覧ください。」と、こうなる。 あと「～」が使えなくなった。これ、「５～８ポイント」を「５から８ポイント」とするのが本来のアクセシビリティー対応なのだが、画一的に「～」を禁止されて「アマゾン ～最後の秘境～」とかの固有名詞まで「アマゾン 最後の秘境」に書き換えが発生している。もはや意味もないし商品名や番組名を改変しちゃって怒られるまである。 どうなんかね？音声ブラウザならまだしも、通常のブラウザでは明らかに日本語としての可読性が下がって苦情も来ている。でも社会的要請からアクセシ
公開日 : 2021年10月14日 (2023年10月11日 更新) カテゴリー : ユーザビリティ / アクセシビリティ ウェブのフォームにおいて、サブミットボタンをデフォルトで無効化しておいて、ユーザーの入力不備がなくなったときにボタンを有効化する UI があります。たとえば、利用規約などの文書を読んで同意する旨のチェックを入れないと、あるいは、入力必須フィールドにすべて正しく情報を入れないと、ボタンがアクティブにならない、というものです。 サブミットボタンがデフォルトで無効化されているフォームの例。 このような UI は、アクセシビリティやユーザビリティの観点で、以下の問題があります。 そこに存在しているはずのサブミットボタンが使用できないことに対して、その理由をユーザーが理解できずに、混乱してしまう恐れがある。(ユーザーの側に誤っているという自覚がなくても、ちょっとした見落としや入
「Lighthouse」はGoogleが作成したページの読み込み速度やアクセシビリティなどをまとめてチェック・採点してくれるツールですが、そのLighthouseをサイト上のさまざまなページで動作させることでサイト全体のスコアを一発で算出してくれるツールが「Unlighthouse」です。 Unlighthouse - Site-wide Google Lighthouse · Unlighthouse https://unlighthouse.dev/ Unlighthouseを利用するためにはNode.jsのインストールが必要です。下記のURLから、手元の環境に合ったインストール方法を選択してください。 パッケージマネージャを利用した Node.js のインストール | Node.js https://nodejs.org/ja/download/package-manager 今回は
gzip圧縮だとあまり圧縮できていなく、スライディングウィンドウが小さいせいかなと思ったのですが、実際に大きさがかなり違うみたいなので、それが原因としてありえそうです。 Gzip uses a fixed size, 32KB window, and Brotli can use any window size from 1KB to 16MB, in powers of 2 (minus 16 bytes). This means that the Brotli window can be up to 512 times larger window than the deflate window. Results of experimenting with Brotli for dynamic web content - The Cloudflare Blog AudioContextの
フロントエンドを考える 〜概念編〜
この記事のシリーズでは私がフロントエンドに関して思っていることを徒然に語っていこうと思います。 ちょっと長くなり過ぎそうなので以下の4つに分けて書いていこうと思います。 1.概念的な話 - フロントエンドアプリケーションとは何でできているか フロントエンドアプリケーションを保守性とユーザへの価値提供を両立して開発するために、アプリケーションを抽象化して、いい感じの設計をする必要があります。 これの土台作りをするために概念としてフロントエンドアプリケーションとは何なのかを考えていきます。 2.技術的な話 - フロントエンドアプリケーションはどのように実行されるか Webフロントエンドはブラウザで実行され、表示のためには HTML, CSS, JS が必要です。当たり前のことではありますが、実際に開発を進めていく上では概念だけでなく、実際に動く How の部分を知る必要があります。 これらの要
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く 最近は、ImmersedというMeta Quest(Oculus Quest)で動くアプリを使ってプログラミングをしたり文章を書いたりしています。 ImmersedはOculus QuestなどのVR機器で動くアプリです。 リモートデスクトップ的にOculus QuestとPCを接続して、Oculus QuestをPCのディスプレイとして使えます。 必要な道具 Oculus Quest 2 Oculus Questでも問題ないそうです Windows or macOS or Linuxが動くPC macOSだと自動で物理的なディスプレイが暗くなったり、macOSの方がサポートは良いのかも MacBook Pro (13-inch, 2020, Four Thunderb
React で h1-h6 を正しく使い分ける
Web の基礎を支える HTML の最も重要な要素の一つである h1-h6 要素ですが、 React を始めとするコンポーネントベースのライブラリを特に意識せずに利用すると、SEOやアクセシビリティー上の意図せぬ問題を生むことがあります。 この記事では、 React を例に取り h1-h6 を使うことで生じる問題と、その解決策を３つずつご紹介します。 尚、この記事で紹介するコードスニペットは GitHub リポジトリに動作する状態で公開しておりますので、併せてご参照ください。 前提知識 読者のみなさまは、HTMLの要素 h1-h6 にどのような役割があるか説明できますか？ 大きい文字を出したかったらh1を使って、それより少し小さい文字を出したかったらh2を使う...わけではありませんでした。h1-h6 は 「見出し要素」 と呼ばれ、文章の見出しとなるテキストをマークアップするのに用いられて
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ
『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
全てを書き換え続ける。N予備校Webフロントエンド実装6年のあゆみ - ドワンゴ教育サービス開発者ブログ
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
接触確認アプリ「COCOA」、高齢者・障害者にも使いやすく 22年3月までの達成目指す
Amebaのデザインシステム「Spindle」の全貌公開
Amazon「Kindleダイレクト・パブリッシング」で紙の本を出版してみた〈記事広告〉※訂正有 | HON.jp News Blog
2022年、Webデザインの新しいトレンド「クレイモーフィズム」のスタイルをさまざまな要素に適用できるCSS
DXからデジ道へ！デジタル改革担当大臣が考える「誰一人取り残さない」日本の未来。｜デジタル庁（準備中）
アクセシビリティ | SmartHR Design System
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1） - 水底の血
2022年のCSS | gihyo.jp
LINEユーザー8300万人を対象とするアンケートを1週間で開発するには？ コロナ禍におけるLINEの施策とフロントエンド開発
Intel MacからM1 (Pro・Max) Macへ(出来る限り)滑らかに開発環境を移行する
Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選 - ICS MEDIA
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
2023年のWebアクセシビリティ | gihyo.jp
CSSのスクロールスナップの便利な使い方、実装の注意点を徹底解説
「デジタル庁創設に向けた準備サイト」がスクリプト無効で閲覧できない
サブミット (送信) ボタンをデフォルトで無効化しない | Accessible & Usable
サイト上のさまざまなページのパフォーマンスをまとめて測定できるツール「Unlighthouse」
Web Speed Hackathon 2021 miniでほぼ満点を出しました
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
Immersed + Meta Quest(Oculus Quest) + Macbook Proで、文章やコードを書く