しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、APCAのルックアップテーブルを見てみましょう。 このルックアップテーブルは、WCAG3のシルバーレベルを満たすための基準を示しています。ブロンズレベルに追加して、この基準に準拠することでより精度の高いコントラストの確保が可能になります。 以下は、公式のシミュレーションサイトAPCA Contrast Calculatorにあるルックアップテーブルのスナップショットです。ページの下部、APCA Font Table: Silver Le
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1）、（その2）の続きです。 おさらい 対象ページ：「アトリエ金工やまぐち」 Basic認証があるので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください @HeldaForStudy氏に了承を得てアクセシビリティチェックを行っています チェック基準：WCAG 2.1レベルA 文中のSCはSuccess Criteriaの略で達成基準のこと 目的はどうやってアクセシビリティチェックしているのか、チェックしながら何を考えているのかを書き記すことです 制作ページやチェック内容にネガティブなことをいいたいわけではありません チェックに抜け漏れ、誤りがあるかもしれません 仕様等は基本的に日本語訳を当たります では続きに入っていきましょう。 「ABOUT」セクション アクセシビリティチェックの経験がある
本記事は<svg>要素のみを持つ<button>要素（アイコンボタン）にアクセシブルな名前（accessible name）を持たせる方法について調査した結果と、WCAG 2.2のSuccess Criterion 1.1.1 Non-text Contentに関する私見をまとめたものです。 結論 アイコンボタンの非テキストコンテンツは装飾ではなく意味を持つ画像なので、ボタンではなくアイコン画像自体にアクセシブルな名前を持たせるべきだと考えます 一方で、非テキストコンテンツの範囲をアイコンのみではなくアイコンボタン全体と捉えると、ボタンにアクセシブルな名前を持たせることも妥当に思えますが、<img>要素や<svg>要素など様々な種類のアイコン画像の実装を想定した場合、やはりボタンにアクセシブルな名前を持たせない方針に倒す方がシンプルだと思います <svg>要素のみを持つ<button>要素
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
こんにちは、ちょこです。 ここでは、ゲームUIに関係する記事が多く取り扱われているサイトを紹介します。 ほかにオススメなどありましたら、コメントなどで教えていただければ幸いです。 UI ゲームUI系 データベース系 Randoma11y - Accessible color combinations ランダムで配色を表示するサイトです。 自分で浮かばない配色やアイディアになりそう。 UI https://developer.apple.com/jp/design/human-interface-guidelines appleのヒューマンインターフェイスガイドラインです。UIの心構えについて広い範囲で記載があります。一通り目を通すことをおすすめします。 UX MILK | クリエイターのためのUXメディア 2021/8から更新が止まっていますが、海外の記事を翻訳して紹介してくれていた希少な
アクセシビリティ – React
なぜアクセシビリティが必要なのか？ Web アクセシビリティ（a11y とも呼ばれます）とは、誰にでも使えるようウェブサイトを設計・構築することです。ユーザ補助技術がウェブページを解釈できるようにするためには、サイトでアクセシビリティをサポートする必要があります。 React はアクセシビリティを備えたウェブサイトの構築を全面的にサポートしており、大抵は標準の HTML の技術が用いられます。 標準およびガイドライン WCAG Web Content Accessibility Guidelines はアクセシビリティを備えたウェブサイトを構築するためのガイドラインを提供しています。 以下の WCAG のチェックリストはその概要を示します。 WCAG checklist from Wuhcag WCAG checklist from WebAIM Checklist from The A1
ウェブアクセシビリティについてとあるツイートを枕にしてつれづれなるままに書いたら最後に政治の話になってた件 - 水底の血
書き殴りでロクに推敲をしていないのであんまり真に受けないような方向でひとつ Twitterネーム@_tsmdさんからっ*1 会社でアクセシ活動してて思うけど、アクセシビリティの認知度とか「大事だと思っている」って認識はずいぶん広まっているみたい。でもやるためのお墨付きがないとか、どこから着手すべきかわからない、何をすればいいのかわからない、みたいのが多い。— そめ (@_tsmd) 2020年10月14日 要はプライオリティが高くないのである。他にいろんな大事なことがあるから。大事さの絶対的指標は特になく、なんとなく決まるのではないか。「最近ちょくちょく耳にするな」とか「あの人が言ってたからそうなんだろう」とか— そめ (@_tsmd) 2020年10月14日 時間は限られているけれども、個人的な実践といういちばん小さいところから、えらいひとにトップダウンを働きかけてもらう取り組みまでの振
はじめまして。AmebaでAndroidエンジニアとして働いています、20新卒の小野歩（@airagu950）です。社内では「あゆむ」の「あゆ」をとって魚アイコンで生活をしています🐟 早速ですが僕はアクセシビリティ分野がとても好きです。 これは僕のエンジニアとしての根幹に理由があります。僕のエンジニアとしての生活は祖母がうまくスマートフォンを使用できなかったことから始まりました。そのため、うまく使えなかったことにはどのような理由があるのだろう、どのような人でもスマートフォンが使えるようになるためにはどうすればいいのだろうと考え始めたのが始まりでした。 その後、大学ではHCI（Human Computer interaction）についての研究を行い、この思いを人生の軸にしたいと考え、アクセシビリティに非常に前向きであり、すでにたくさんの実績のあったCyberAgentのAmebaに入社す
Register now for a full day of community, learning, and all things Visual Studio Code March 2022 (version 1.66) Update 1.66.1: The update addresses these issues. Update 1.66.2: The update addresses these security issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the March 2022 release of Visual Studio Code. There are many updates in t
JIS X 8341-3:2016（WCAG 2.0）では、用語集で「サイズの大きな (テキスト)」が定義されている。WAICの公開しているWCAG 2.0日本語訳のサイズの大きな (テキスト)は次のように記載されている*1： サイズの大きな (テキスト) (large scale (text)) 少なくとも 18 ポイント、又は 14 ポイントの太字。あるいは、中国語、日本語、及び韓国語 (CJK) のフォントは、それと同等の文字サイズ。 （中略） 注記 5: 半角の英数字のテキストにおける 18 ポイント及び 14 ポイントのサイズは、拡大印刷の最小サイズ (14 ポイント) と標準的な大きい文字サイズ (18 ポイント) に基づいている。例えば、CJK 言語のようなその他の文字については、「同等な」サイズはその言語での拡大印刷の最小サイズと拡大印刷でその次に大きな標準のサイズとなる。
Ameba Pickのアクセシビリティ向上への取り組みについて | CyberAgent Developers Blog
こんにちは、Ameba事業本部という部署でフロントエンド開発をしております宮本 (@hrfmmymt) です。 2020年4月(iOSアプリ版は5月)にAmebaブログの新アフィリエイト機能である Ameba Pick (アメーバピック) がリリースされました。 Ameba Pickのランディングページ ( はじめ方_Ameba公式アフィリエイトAmeba Pick ) Ameba PickはAmebaブログの管理画面やエディタから操作できる、Amebaブログの内包する一つの新機能という位置付けではあります。しかしながら、モーダルウィンドウなども含めた画面の数や、PCブラウザ・SPアプリへの対応、デザインや機能を既存の管理画面へ整合させる必要性があることなどの事情を含めると、要した開発期間はおよそ10ヶ月に及ぶもので、開発規模としては一サービス程度のものとなりました。 さて、本稿ではそんな
いつもYahoo!メールをご利用いただきありがとうございます。 現在のパソコン版Yahoo!メールは2012年12月に提供を開始し、9年たちました。 これもひとえに皆様方のご愛顧のたまものと深く感謝申し上げます。 今後も皆様に末長くご愛用いただけるよう、より安定性・快適性を向上するためのリニューアルをすることといたしました。 2021年6月頃より順次新しいYahoo!メールの提供を開始し、2022年1月頃に現在のデザインの提供を終了させていただく予定です。 新しいパソコン版Yahoo!メールの画面です。 ※本記事に掲載している画面はすべて開発中のものです。 ■新しいYahoo!メールの特長 現在のパソコン版Yahoo!メールの基本的な機能はそのままに、以下のように改善を行っています。 Web技術の標準化団体であるW3Cが提唱しているアクセシビリティー基準（WCAG2.1）に準拠したものにな
「UIデザイナーのスキルマップ」にアクセシビリティスキルを入れた話 - Chatwork Creator's Note
こんにちは。プロダクトデザイン部マネージャーの @cw-take です。 今年Chatworkのプロダクトデザイン部で「UIデザイナーのスキルマップ」をつくりました。 この記事では簡単なスキルマップの説明をした上で、アクセシビリティスキルを掘り下げて紹介したいと思います。 UIデザイナーのスキルマップ スキルマップ作成の背景 新しいデザイナーの入社をきっかけに、今年プロダクトデザイン部では価値観の相互理解などお互いを知るための取り組みをおこなってきました。 「UIデザイナーのスキルマップ」をつくったのもこういった取り組みのひとつです。 スキルマップを使いUIデザイナーそれぞれが持つ強みを可視化し共有することで、 伸ばしたいスキルについてお互いが支援できる環境 をつくりたいと考えました。 スキルマップの12項目 スキルマップの項目は「プロダクトデザイナーのスキルマップを考えてみた : cou
あるいは必要十分条件について1。 Nu Html Checkerの場合 Nu Html Checkerは、HTMLをチェックするツールである。Nu Html Checkerで特定の（種類の）エラーを0にすることは、「構文解析」のWCAGの達成基準を満たすための必要十分条件となる。 達成基準 4.1.1 構文解析 (レベル A): マークアップ言語を用いて実装されているコンテンツにおいては、要素には完全な開始タグ及び終了タグがあり、要素は仕様に準じて入れ子になっていて、要素には重複した属性がなく、どの ID も一意的である。ただし、仕様で認められているものを除く。 筆者による上記引用のハイライト部分“どのIDも一意的であること”について見てみる。たとえば以下のHTML断片のように、1つのページに同じid属性値が2回出現することはHTMLのエラーであり、かつ、WCAGの達成基準の違反となる：
JSer.info #584 - Deno 1.20がリリースされました。 Deno 1.20 Release Notes V8とRust間のOpコードの最適化をしてパフォーマンスの改善されています。 リクエストのAccept-Encodingヘッダを見て自動的にHTTP Response Bodyを圧縮するように変更されています。 また、deno benchコマンド、deno taskコマンド、deno.jsonがimportMapオプションをサポートしています。 Deno 1.19でDeno testでのリソースリークを検知する仕組みが実装されていましたが、パフォーマンスが悪化する場面がありました。 そのため、Deno 1.20では、deno testに--trace-opsフラグをつけた時のみデバッグ用の詳細な情報を表示するように変更されています。 破壊的な変更として、Workerと
APCA Contrast Calculator
Click on a color patch next to "Text" or "Background" above to use the HTML5 color-picker (modern browsers). Otherwise enter color values in the text-box as a three or six digit hex value, the '#' is not necessary. Other valid entries are integer rgb(r,g,b) or an HTML color name (see bottom of page for list). PROBLEMS? Try a "Forced Reload" on your browser, and/or clear the cache. This is the APCA
数字で見るGoogleフォントベスト15 2024年版（使い方のヒント付き） 本稿執筆時点で1,052種類のGoogleフォントファミリーが、無料で利用できます。これは膨大な数の中からベストなGoogleフォントのリストを見つけるのは、干し草の中から針を見つけるようなもので、誰かの手助けが必要でしょう。 そこで、私たちはベストなGoogleフォントのリストを選出しました。あわせて、WordPressでGoogleフォントを使用する際のベストプラクティスもご紹介します。 フォントの選択は、単なるデザインの問題ではありません。サイトの直帰率やコンバージョン率に大きな影響を与える可能性があります。そのため、最初に見つけたフォントをそのまま使うのではなく、少し時間をかけて、自分のウェブサイトに最適なGoogleフォントファミリーを選択することが大切です。 もっと多くのフォントが必要な場合は、こちら
Webデザインギャラリー MUUUUU.ORG I/O 3000 SANKOU! 他にもいろいろなギャラリーサイトがあるので、「Webデザインギャラリー」で調べて自分のお気に入りのサイトを見つけてるのがおすすめです。 デザインプラットフォーム Pinterest 画像をピンしたり、探索できるサービスです。 さまざまなテーマでボードを作成でき、似た画像をレコメンドしてくれるのでホームを見ているだけで楽しいです。 Behance Adobeが運営する、クリエイターのプラットフォームです。 さまざまなクリエイターの作品を見つけることができます。 Dribbble こちらもクリエイター向けのプラットフォームです。 求人サイトとしても使われており、ポートフォリオ的な作品が多いです。 クリエイティブ・コーディングの作品を投稿・閲覧できるプラットフォームです。 UIギャラリー Mobbin 様々なモバイ
米Adobe Systemsが色生成（カラージェネレーター）技術「Leonardo」をオープンソースとして公開している。ターゲットとするコントラスト比をベースに適応的カラーパレットを作成できるという。 LeonardoはWebサイトや各種アプリケーションに向けたカラーパレットを容易に生成できるツール。Adobeのデザインシステム「Spectrum」の色をベースとし、JavaScriptモジュールとインターフェイスで構成される。 d3-colorを使って構築しており、World Wide Web Consortium（W3C）のWeb Accessibility Initiative（WAI）のウェブアクセシビリティ標準であるWeb Content Accessibility Guidelines（WCAG）をサポートする。WCAGが定義する最小コントラスト比などのアクセシビリティ基準を満た
初めに この記事はyamanokuさんの投稿されたzennのscrapの内容について自分がまとめたものです。（yamanokuさんの許可はいただいています、ありがとうございます！） compassで1月13日に開催されるFEStudyでyamanokuさんが登壇されるのでもしよければ参加してみてください。 Zennに分割したのを投稿していますが、個人的にまとめてどこかにおいておきたかったためにこのような形で投稿しています。 間違った情報がないように注意はしていますが、もし間違っている箇所、不十分な箇所がありましたらコメントなどでいただけると幸いです。 それぞれの用語などの情報についてリンクを貼っているのでそこまで読めば深くまで理解できると思います。 かなり長いですが、頑張って書いたのでぜひ読んでください。 HTML HTML Standardを参照できる 入れ子関係 どういった用途で使われ
『 ビッグ・ファット・キャットの世界一簡単な英語の本 』をはじめとする、エドと太った猫の物語だ。このシリーズは、文法用語を使わず、二つの箱と矢印だけで英語のルールを解説した本と「英語を読むため」の物語 BFC BOOKS で構成されている。BFC シリーズとして愛されているこの物語は、英語なのだけどちゃんと向山貴彦な感じがする。私がとても大好きな本だ。 ところが本当に悲しいことに、向山貴彦は昨年、若くしてこの世を去ってしまった。だからもう、彼の新しい作品を読むことはかなわない。 しかし彼の英語作品を読んだのがきっかけで、私は自分が幼い頃読んでいた児童書を原書で、つまり英語で読むことを楽しむようになった。 私が英文を読むときは基本 BFC 読みをする。つまり辞書をほとんどひかず、２つの箱となる単語と矢印に注目し、頭から読んで英文を直接イメージにしていく。 マージョリー・W・シャーマットの『
freee 社のアクセシビリティガイドラインとチェックリストを丸ごと導入した - STORES Product Blog
hey Advent Calendar 2021 及び アクセシビリティ Advent Calendar 2021 の 24日目です。 業務委託で STORES の開発をしている @inouetakuya です。近年ウェブ業界全体でアクセシビリティをカイゼンする取り組みが盛り上がっていますが、hey においても今年いくつかの動きがありました。 今回はその中のひとつに絞って、2021年に行った取り組みのなかで最も効果があったと私が考えている、freee 社のアクセシビリティガイドライン と チェックリスト を丸ごと導入したことについて、その背景や導入理由、そして導入してどうだったか？などをご紹介します。 導入前に抱えていた問題 hey ではもともとアクセシビリティについて「プロダクトがどのような状態になっているのが理想か？」を定めたアクセシビリティガイドラインを独自に作成しようと試みていまし
わたしは「Webアクセシビリティ」というものに、ライフワーク的に取り組んでいる。 と、言い切っていいはず。少し気恥ずかしいけれども、これまでそんなことを触れ回ったことはないので、そろそろ改めて記録するべきだと思って書いている。 これはポートフォリオの一部のようなものでもある。 というのも、イベントやセミナーにお呼びいただいて登壇などの機会が、ありがたいことに増えてきている（後述）。あるいは、何らかの場でコメントを求められたり、Twitterでイベント中のリアルタイムレポートを（偉そうに！）したり。 そんな時にふと、「出自のわからないヤツが四の五の言ってて、周りの人はどう思うのだろう……」と考えてしまうからだ。 更に今まで、個人事業主などでもないことをいいことに「自分の情報」をまとめることを避けてきた。 そろそろきちんと考え方などまとめる時期ではないかと、画面に向かっている。 わたしにとって
Modern CSS Techniques To Improve Legibility — Smashing Magazine
In this article, we cover how we can improve websites legibility using some modern CSS techniques, great new technologies like variable fonts and putting into practise what we learned from doing scientific researches. We can read in many ways, and there are many different types of readers, each with their own needs, skills, language, and, above all, habits. Reading a novel at home is different fro
昨日付の経済産業省のニュースリリース、日本産業規格（JIS）を制定・改正しました（2022年8月分）にありますように、EPUBコンテンツのアクセシビリティに関する仕様、EPUB AccessibilityがJIS X 23761として制定、JIS規格化されました。規格は冊子またはPDF形式で、日本規格協会 JSA Group Webdeskから購入することができます。 EPUB Accessibilityとは、もともと国際電子出版フォーラム（IDPF：International Digital Publishing Forum）で策定された仕様です。2017年のW3CとIDPFの統合に伴い、現在EPUB AccessibilityはW3Cで管理されています。そのバージョン1.0、EPUB Accessibility 1.0は2021年、ISO/IEC 23761:2021としてISO標準化
「一部準拠」というWebアクセシビリティの対応度の位置づけについて | アクセシビリティBlog | ミツエーリンクス
2020年2月21日 「一部準拠」というWebアクセシビリティの対応度の位置づけについて アクセシビリティ・エンジニア 中村（直） 筆者はウェブアクセシビリティ基盤委員会（WAIC）に参加させていただいているのですが、そのWAICのSlackで、あるコメントをきっかけに先日ちょっとした議論が沸き起こりました。 そのきっかけとなったコメントの概要は、次のようなものでした。 あるWebサイトでJIS X 8341-3:2016に基づく試験結果が公表されているのを見かけた。 試験結果には、達成基準ごとの試験結果が記載されている。 レベルAのある達成基準に対して、不適合という結果が記載されている。 レベルAの達成基準で不適合のものがあるため、当然レベルAには準拠しないが、そのサイトでは「満たしている適合レベル」として、「JIS X 8341-3:2016の適合レベルAAに一部準拠」と記載されている
W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
2021年1月22日 W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました アクセシビリティ・エンジニア 中村（直） Web Content Accessibility Guidelines (WCAG) 2.0とそのマイナーバージョンの後続として開発されている、W3C Accessibility Guidelines (WCAG) 3.0がFirst Public Working Draft（初期公開作業草案）として発行されました。 元の言葉はWeb ContentからW3Cに変更されているものの、略称は同じWCAGになっているのは、WCAGという語がWebアクセシビリティを取り巻く世界ではよく知られている証左と捉えることもできそうです。 そんなWCAG 3.0ですが、Abstract（概要）には以下の1文が記載されています。
アクセシビリティを川柳で学ぶというアプローチ - GAADjp2022で登壇しました - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。弁護士ドットコムの太田です。 毎年、5月の第3木曜日は "Global Accessibility Awareness Day (GAAD)" とされています。世界的にデジタル分野のアクセシビリティを考える日ということで、アクセシビリティ関連のイベントが盛り上がります。日本でもさまざまな発表がなされたり、イベントが開催されたりします。 そんなわけで、今年2022年の第三木曜日である5月19日に、GAAD Japan 2022 というイベントが開催されました。このイベントで「大変だ アクセシビリティ なにすれば 〜川柳で見るアクセシビリティ再入門〜」と題してお話ししてきましたので、その様子や裏話をご紹介します。 このセッションのコンセプト 紹介した川柳と解説 大丈夫 ガイドラインが ちゃんとある まず欲しい 代替テキスト あと見出し いつだって 忘れちゃいけない キーボード これ
Overlay Fact Sheet
What is a web accessibility overlay?Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website. Website add-on products claiming to improve accessibility go back to the late 1990s with products like Readspeaker and Browsealoud. They added text-to-s
近ごろの様子
2024年5月 自分の個人ウェブサイト内でのここの呼称を「かつてTwitterとして知られていたプラットフォーム」で統一したい (12時35分) Firefoxに昔からあったので、大して調べずにoverflow-inlineプロパティーを使い始めたら、全然実装されていなかった (7時2分) 東西線の工事の日を確認しているが、関係なかった (8時1分) 隠したテキストは検索できないことがあるので、ちゃんと表示するようにした(v9.30.5) (7時33分) ソフトミント色のAirPods Proとか出たら買っちゃいそう (18時52分) Kindleのマンガが1000冊を超えてしまい、1冊500円とすると50万円だなと思い、ブックオフで売りたい (18時52分) Firefoxのプライベート・ウィンドウのタブでは、ダークモード対応のfavicon.svgでダークモード側が選択されるという学び
A Complete Guide To Accessible Front-End Components — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered CSS Auditing Tools and CSS Generators, and this time we look into reliable accessible components: from tabs and tables to toggles and tooltips. Table of ContentsBelow you’ll find an alphabetical list of all accessible components. Skip the table of contents, or j
色のアクセシビリティとチェックのためのツール｜セブンデックス
ユーザビリティが「使いやすさ」を指す言葉だとすると、アクセシビリティとは「使えるかどうか」を指す言葉で、コンテンツにおいてユーザビリティのひとつ手前にあるものです。例えば、障害を持つ方や高齢の方を含む、できるだけ多くの人にとって「そもそも使える」ものにするために、アクセシビリティへの配慮が必要になります。 Web上で公開されているコンテンツはあらゆる人に見られる可能性があり、私たち制作者は、常にアクセシビリティに配慮したデザインを心がけなければなりません。今回は色のアクセシビリティガイドラインの概要と、基準を満たしているかどうかを簡単にチェックできるツールをご紹介します。 WCAG（Webコンテンツアクセシビリティガイドライン） 「Web Content Accessibility Guidelines」の略称で、Web技術の標準化を推進する団体であるW3Cが提唱する、世界中で普及している
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1）の続きです。 おさらい 対象ページ：「アトリエ金工やまぐち」 Basic認証があるので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください @HeldaForStudy氏に了承を得てアクセシビリティチェックを行っています チェック基準：WCAG 2.1レベルA 文中のSCはSuccess Criteriaの略で達成基準のこと 目的はどうやってアクセシビリティチェックしているのか、チェックしながら何を考えているのかを書き記すことです 制作ページやチェック内容にネガティブなことをいいたいわけではありません チェックに抜け漏れ、誤りがあるかもしれません 仕様等は基本的に日本語訳を当たります では続きを進めていきましょう。 モーダル出現ボタン スクリーンショットですと、 HTMLソースとしては、
フォームのデザインをかっこよくするタブ(tab)切り替えのCSS/JSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 入力項目が多いけどスクロールは避けたい場合、タブ切り替え機能をhtml/CSS/Javascript/jQueryなどで実装することも多いと思います。本記事ではフォームの中でも「タブ切り替え」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 シンプルで押しやすい見た目・動作のタブ切り替えCSSデザイン例。基本形とも言えるシンプルタブ切り替え。縦型・横型の2パターン。See the Pen Bootstrap Tab Group by Stefan Rusu (@stephanrusu) on Cod
ホームページ制作／運用 #NEW #ホームページ制作 #ホームページ改善 【全事業者対象】2024年4月義務化が決定！ 2024年のウェブアクセシビリティ義務化についてわかりやすく解説 2024年4月1日より、障害者差別解消法の改正内容が適用され、民間事業者の「合理的配慮」が義務づけられることになりました。障害のある人が生活する上でバリア（障壁）を取り除くためにできる範囲の対応をする、Webサイトの場合ではウェブアクセシビリティを確保することがこれに当たります。また全事業者は、遅くとも2024年6月4日までに対応する必要があることもアナウンスされました。 出典：障害を理由とする差別の解消の推進｜内閣府 しかし、ウェブアクセシビリティ義務化の概要や、そもそもウェブアクセシビリティとは何かよくわからないという方もいるのではないでしょうか。ただ、ウェブアクセシビリティが義務化される以上、Web担
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用に新規記事の作成も考えましたが、ルビをフル活用した ウェブコンテンツに関する実装ノウハウとして纏まっているほうが後の役に立ちそうだったので大幅に加筆して、改訂版としました。 「やさにちウォッチ」 アイコン別ウィンドウで開きますは私たち(アルファサード株式会社) アイコン別ウィンドウで開きますが運営する「やさしい日本語の情報をやさしい日本語で発信する」オウンドメディアです。す
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
「アクセシビリティ」と聞くと、対応が難しそうだと考え、リソースが確保できずにいる企業も多いかもしれません。noteでも社内にそういった考えがあり、今年までなかなかアクセシビリティ向上のプロジェクトを始めることができませんでした。 アクセシビリティとは 一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。 似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティはユーザビリティより幅広い利用状況、多様な利用者を前提とします。 ウェブアクセシビリティとは（※） ウェブのアクセシビリティを言い表す言葉がウェブアクセシビリティです。ウェブコンテンツ、より具体的にはウェブページにある情報や機能の利用しやすさを意味します。 さまざまな利用者が、さまざまなデバイスを使い、さまざまな状況でウェブを使うようになった今、あらゆるウェ
この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基本スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その3） - 水底の血
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
ゲームUIデザイナーがチェックしておいた方が良いと思うサイト - ゲームアプリのUIデザイン
Amebaアプリのアクセシビリティに関する取り組み
Visual Studio Code March 2022
JIS X 8341-3:2016のいう「サイズの大きなテキスト」について - 水底の血
Yahoo!メール - Yahoo!メール新着情報
WCAG2の「十分な達成方法」について - 水底の血
2022-03-24のJS: Deno 1.20、Faker v6.0.0、Next.jsのアップデート
数字で見るGoogleフォントベスト15 2024年版（使い方のヒント付き）
デザインする時に参考にしているサイト・サービスまとめ - Qiita
米Adobe、カラーパレット作成ツール「Leonardo」をオープンソースで公開 | OSDN Magazine
フロントエンドに関わる人のスキルとして触れておきたい・知っておきたいこと - Qiita
会話が苦手な人のための英会話学習法｜Fenrir Designers
わたしとWebアクセシビリティ - note
EPUB AccessibilityのJIS規格化 | アクセシビリティBlog | ミツエーリンクス
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その2） - 水底の血
タブ切り替えをおしゃれにするCSS/JSスニペット16選。通常型もスライドショー型も縦型も。 | KodoCode
2024年のウェブアクセシビリティ義務化についてわかりやすく解説 – ミニナレ [web制作会社シスコム]
Accessibility testing with Storybook
やさにちウォッチのルビ(ruby - ふりがな)のスタイル (改訂版)
2019-12-03のJS: Got 10(Node.js HTTPクライアント)、FAB(Frontend Application Bundles)
noteのアクセシビリティ向上プロジェクトが始動｜note株式会社
使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】 - Qiita