アクセシビリティに取り組まないと、企業はどれくらい「損」をする？ 試算する方法をご紹介｜Goodpatch Blog グッドパッチブログ
2024年4月に施行された法改正により、障害を持つ方への「合理的配慮」の提供が、民間企業においても法的義務となりました。これによりウェブデザイン分野では、アクセシビリティ対応の機運がますます高まっています。 この手の話になると、「アクセシビリティに取り組むには、どれくらいのコストがかかるんでしょう？」という質問をよくいただきます。実際に挙げてみると、以下のようなところでしょうか。 アクセシビリティの知識習得に費やす時間 専門家にアクセシビリティ診断を依頼する費用 アクセシビリティに対応するため、Webサイトやプロダクトを改修する費用 こうやって具体的な項目を見ると、アクセシビリティ対策に取り組むことを躊躇する方もいるかもしれませんが、逆に「アクセシビリティに取り組まないコスト」を考えたことはありますか？ アクセシビリティに取り組まないことで、潜在的な市場機会を逃し、顧客満足度を低下させるリ
ウェブブラウザ「Firefox 132」の正式版が公開されました。Firefox 126で導入された「サイト追跡を除いたリンクをコピー」の改善や、macOS版Firefoxの挙動変更などが実施されています。 Firefox 132.0, See All New Features, Updates and Fixes https://www.mozilla.org/en-US/firefox/132.0/releasenotes/ ◆「サイト追跡を除いたリンクをコピー」の改善 「サイト追跡を除いたリンクをコピー」はFirefox 126で追加された機能で、リンクを追跡パラメータを除いた状態でコピーできます。新たに、リンク内に既知のパラメータが含まれていない場合、「サイト追跡を除いたリンクをコピー」がグレーアウトするようになりました。 ◆Microsoft PlayReadyを用いた暗号化メデ
本記事の内容はあくまで経験に基づくものです。 公式の文献等ありましたらコメントいただけると助かりますmm ユーザーの環境に関係なくスクロールバーを表示させたいなら-webkit-scrollbarを使用するしかなさそう スクロールバーのデザインをカスタマイズしているとき、 -webkit-scrollbar-*を使用していればmacOSのスクロールバーの設定によらず常時表示してくれるのですがscrollbar-*を使用しているとmacOSの設定に準拠してしまい常時表示されません。 サンプルコード <div> <h3>-webkit-scrollbar-*</h3> <div class="container vendor-prefix"> <p> この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認する
![[CSS]scrollbar-*はmacOSのスクロールバー設定を貫通しない](https://cdn-ak-scissors.b.st-hatena.com/image/square/79ae1d5a12bb3a9eb317357e12b8946c5a4d94a4/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--kgnPoYm3--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BCSS%25255Dscrollbar-%25252A%2525E3%252581%2525AFmacOS%2525E3%252581%2525AE%2525E3%252582%2525B9%2525E3%252582%2525AF%2525E3%252583%2525AD%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E3%252583%252590%2525E3%252583%2525BC%2525E8%2525A8%2525AD%2525E5%2525AE%25259A%2525E3%252582%252592%2525E8%2525B2%2525AB%2525E9%252580%25259A%2525E3%252581%252597%2525E3%252581%2525AA%2525E3%252581%252584%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_34%3AAyuu%252Cx_220%252Cy_108%2Fbo_3px_solid_rgb%3Ad6e3ed%252Cg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzUyNGYwMGIzM2MuanBlZw%3D%3D%252Cr_20%252Cw_90%252Cx_92%252Cy_102%2Fco_rgb%3A6e7b85%252Cg_south_west%252Cl_text%3Anotosansjp-medium.otf_30%3ASMARTCAMP%252520Engineer%252520Blog%252Cx_220%252Cy_160%2Fbo_4px_solid_white%252Cg_south_west%252Ch_50%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2hCRXRzOTYwTHZiRnpjamotQ2ZjLUZlQjRKNy1QaTZPc0FhZVZsPXM5Ni1j%252Cr_max%252Cw_50%252Cx_139%252Cy_84%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
こんにちは、mehm8128 です。今まで所属サークルのブログ記事にずっと投稿していたのですが、サークルを卒業したので Zenn の住民になることにしました。 サークルで投稿していた過去の記事はこちらからご覧ください。 今回はタイトルの通り Combobox のフォーカス折り返しについて気になって調査していたので、折角なのでブログにしてみることにしました。 調査背景 数日前からほぼ毎日 React Aria のドキュメントとソースコードを読んでいるのですが、useSelect – React Aria を用いた実装例を眺めていたところ、あることに気づきました。 useSelectは以下の画像のような Select を実装することができるのですが、この Select で一番下のオプションにフォーカスしているときに、さらに ↓ キーを押しても一番上のオプションにフォーカスしないのです(逆に、一
REST vs SOAP - 最新のアプリケーションの構築RESTとSOAPの主な相違点について説明します。いつどちらを使用するべきか、また、それらを保護するそれぞれの方法について説明いたします。 最新のアプリケーションを構築する際、開発者には多くの選択肢があります。静的言語か動的言語、確立されたJavaまたは比較的新しいGolang 、モノリシックなオールインワンフレームワークかモジュール化されたライブラリ、またはJavascriptでスタック全体を実行するかなど、これらは氷山の一角にすぎません。RESTまたはSOAPという問題は、開発者が選択しなければならない重要な決定事項です。 RESTとSOAP は、簡単に言えばアプリケーション間の通信方法です。最終目標は同じですが、RESTとSOAPを直接比較することはできません。RESTは、開発者がプロジェクトごとに異なる実装方法を選択する上で
ログイン フォームのベスト プラクティス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 サイトにログインする必要がある場合は、ログイン フォームをデザインすることをおすすめします。 重大な問題ですこれは、接続が不安定なユーザー、モバイル デバイス、 急いでいるときやストレスにさらされているときなどに便利です。ログイン フォームのデザインが不適切だと、直帰率が高くなります。 バウンスの回数は、ログインを忘れただけでなく、ユーザーが不満を抱いていることを意味している可能性がある 学びます。 次の簡単なログイン フォームの例で、すべてのベスト プラクティスをご確認ください。 チェックリスト 意味のある HTML 要素を使用する: <form>、<input>、 <label>、<button>。 各入力に <label> でラベルを付けます。 要素の属性を使用
JavaScript での Base64 エンコード文字列の微妙な違い コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 base64 エンコードとデコードは、バイナリ コンテンツを ウェブセーフ テキストとして表現されます。通常はデータ URL インライン画像などです base64 のエンコードとデコードを JavaScript ですか。この投稿では、微妙な違いと回避すべき一般的な注意点について解説します。 btoa() と atob() JavaScript で base64 エンコードとデコードを行うコア関数は次のとおりです。 btoa()、 atob()。 btoa() は、 文字列を base64 でエンコードされた文字列に変換し、 atob() はデコードして戻します。 簡単な例を次に示します。 // A really plain string
【テキストエディタNOVA】便利な拡張機能の紹介
テキストエディタNOVAの拡張機能で私がよく使っているものを紹介します。 マークアップエンジニア目線で、インストールしておくと便利なものとなっています。 拡張機能のインストールまず拡張機能のインストール方法です。 メニューバーにある「機能拡張」から「機能拡張を管理する」をクリックします。 すると下記のような画面が開きます。 ここから入れたい機能を検索して、「インストール」ボタンをクリックしてインストールします。 もちろん下記のように機能の説明も見ることができます。 便利な拡張機能Emmet「Emmet」を使うと、HTMLのコードやCSSのプロパティを短縮して書くことができます。 VS Codeにもあるので知っている方は多いと思いますがNOVAにもあります。 例として公式サイトにも記載されているものですが、HTMLの場合 ul#nav>li.item$*4>a{Item $}このように書くと
Theme 第 164 回のテーマは 2024 年 10 月の Monthly Platform です。 Show Note Chrome 動向 Stable: 130 Updates New in Chrome 130 https://developer.chrome.com/blog/new-in-chrome-130 Document Picture-in-Picture CSS nested declarations box-decoration-break What's new in DevTools, Chrome 130 https://developer.chrome.com/blog/new-in-devtools-130 Chrome 131 beta https://developer.chrome.com/blog/chrome-131-beta CSS CSS A
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Firefox 132」正式版リリース、macOSの再起動時の挙動が変化
[CSS]scrollbar-*はmacOSのスクロールバー設定を貫通しない
Comboboxのフォーカス折り返しについて調査してみた
REST vs SOAP - 最新のアプリケーションの構築
ログイン フォームのベスト プラクティス | Articles | web.dev
JavaScript での Base64 エンコード文字列の微妙な違い | Articles | web.dev
ep164 Monthly Platform 202410 | mozaic.fm