Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、Webアクセシビリティの初心者が基礎を学ぶときに助かった資料を紹介します。各資料に対する説明も掲載しているので、どうぞ最後までお楽しみください🌏 ※冒頭、Webアクセシビリティに関する前提知識の紹介が長くなっています。本編を読みたい方は「資料①｜ざっくり知ろう」からご覧ください。 ※今回は、デジタル庁等の引用元にならって「障害」の表記を使用します。 ※noteの内容に誤りがございましたら、お手数ですがコメントやSNS等でご指摘いただけると幸いです。 はじめにまずは、Webアクセシビリティに関する基礎知識の整理からスタートします。最近よく耳にする「合理的配慮」のことも振り返ります。 WebアクセシビリティとはWebアクセシビリティとは、文字通りWebサービスにおけるアクセシビリティのことです。 アクセシビリティは「アク
Holy Cater @linear_pcm0153 アメーバブログで「音響・映像・電気設備が好き 」というコンテンツを書いているアカウントです。音響映像設備の設計・施工・設定調整・保守、ビデオエンコード・編集、ごく稀にオペレートを行っています。詳しかったり詳しくなかったり。 ｢ヒゲドライバー｣｢suguruka｣というピコピコ・ミュージシャンが好きです。 ameblo.jp/holycater/
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
入力欄のプレースホルダーって結局どうなの - Qiita
入力欄のプレースホルダーの話をします。プレースホルダーというのは、フォームの入力欄で、ユーザーが入力するまでの間に表示されているテキストのことです。 書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders
アップル、目で iPhoneやiPadを操作するアイトラッキングを追加。乗り物酔い防止や振動で感じる音楽などアクセシビリティ機能強化 | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 アップルは、毎年5月に行われれる世界各地でアクセシビリティを考える一日（Global Accessibility Awareness Day：GAAD）に合わせ、障害を持つ人たちに新たな体験を提供すべく、アップル製品への複数の新機能追加を発表しました。 今回発表された新機能のうち、iPhoneやiPadを対象とするものとしては、アイトラッキング(Eye Tracking)機能をはじめとして、カスタマイズ可能なVocal Shortcuts機能、Music Haptics機能、Vehicle Motion Cues機能などがあります。 アイトラッキングまず、一般ユーザーでも気になりそうなアイトラッキング機能は、
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
We are excited to announce support of submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the
アクセシビリティに取り組む制作者のためのポータル。 アクセシビリティをあたりまえにするために。写真をシェアする、予定を確認する、動画を見る、 食べたいものを注文する――― そんなウェブのあたりまえを、誰にでも。 誰ひとり取り残さないウェブを。
はじめましてkanappleと申します。 普段HTMLコーダーとしてウェブサイト制作をしていますが、今までふんわりとしか理解できていなかったアクセシビリティについて、これからしっかりと学んでいきたいと思います！ ウェブアクセシビリティとは ウェブアクセシビリティと聞くと、「視覚や聴覚など身体に障害がある人に向けた対応」をイメージしている人が多いかもしれませんが、実際はウェブサイトを利用する全ての人にとって重要な対応です。 ・怪我や病気などで一時的に手が使えなくなった ・加齢により視力や聴力が衰えた ・明るさの足りない環境や雑音により音声の取得が難しい状況での利用 など、現代社会ではあらゆる人が様々な環境においてウェブサイトを利用しています。 社会のインフラの一つであるウェブサイトがウェブアクセシビリティに配慮して作られていないと、どのような問題が考えられるでしょうか。 ウェブサイト上から必
総務省の公開する「みんなの公共サイト運用ガイドライン」が、2024年版に改訂されました。2016年版との違いについては、以下のような説明がなされています。 2024年版となる本書は、（1）近い将来のJIS改正に向けた動向、求められる取組を解説、（2）公的機関取組事例の刷新、（3）関係法令、参照文書等の最新化を行ったものです。 残念ながら、上記より細かい粒度の差分が提供されていないため、2016年版と2024年版のPDFファイルをAdobe Acrobatの「ファイルを比較」機能で比較したところ、503件の置換、185件の挿入、128件の削除の都合816件の変更があったようです。 両者の目次を比較しますと、構造的に大きく変更されているのは、まず「1. 運用ガイドラインの目的と活用方法」です。1.4.以降の内容が、以下のように変更されています（タイトルが「JIS X 8341-3:2016」の
こんにちはkanappleです！ 前回の記事でウェブアクセシビリティの必要性が理解できたので、今回はガイドラインを規格についてです。 ウェブアクセシビリティには主に３つのガイドラインがあります。 WCAG（Web Content Accessibility Guidelines） ウェブ技術の標準化を行う世界的な非営利団体W3C（World Wide Web Consortium）が定める規格で、世界で標準に使われいるガイドラインです。 現在はWCAG2.2というバージョンが勧告されています。 ISO/IEC 40500:2012 国際標準化機構（ISO）と国際電気標準会議（IEC）が定める国際規格で、WACAG2.0をそのまま採用して発表されました。 この動きによっててWCAGを規格として使うことができるようになりました。 JIS X 8341-3 日本工業規格（JIS）が定める国内規格
こんにちは！kanappleです。 今回は、前回の記事で紹介したウェブアクセシビリティの国内規格である「JIS X 8341-3:2016」の対応の証明についてです。 JIS X 8341-3:2016は日本工業規格（JIS）が定める国内規格ですが、JISマーク表示制度の対象規格ではない為、証明としてJISマークを付けることはできません。 そこで、JISマークの代わりに証明する方法として「供給者適合宣言を作成する」または「ウェブアクセシビリティ基盤委員会のガイドラインの基準を満たす」があります。 前回の記事で書いた通り、供給者適合宣言を作成して証明するのは対応が困難な場合が多い為、ここではウェブアクセシビリティ基盤委員会（WAIC）が作成した「ウェブコンテンツのJIS X 8341-3:2016 対応度表記ガイドライン」を使用した証明について書きます。 JIS X 8341-3:2016の
このサイトは、WCAGの「適合レベルAA」に準拠することを目的に、基本的なウェブアクセシビリティ対応を施したコンテンツの基礎です。 「適合レベルAA」に準拠するウェブサイトを作成する際に、このサイトをベースとして利用することで、効率的に構築が可能です。
Webブラウザの標準機能（開発者ツール）を使って、Webページの色のユニバーサルデザインを学ぶ | あんこエデュケーション
私たちが日常的に目にしているウェブサイト。色覚異常を持つ人たちには、違った見え方をします。色覚異常がある人は、色を識別したり、特定の色調を区別したりする能力が通常とは異なっているためです。 そうした人たちの見え方を理解した上で、使いやすいWebページを作ることは、ユニバーサルデザインの考え方にかなっています。 普段使用しているWebブラウザには、Webページをデザインしたり制作したりする人が、色覚異常を擬似的に体験するためのツールが組み込まれています。この記事では、その機能の使い方と、Webページの見え方を紹介します。 開発者ツールの起動 色覚異常を擬似的に体験するための機能は、Webブラウザの開発者ツール（デベロッパーツール）の一部です。Chromeブラウザ、Edgeブラウザを開いた状態で、F12キーまたはControl+Shift+Iを押すと、開発者ツールが起動します。 ただし、Web
(Danger!) Preventing Zoom from Changing Text Size 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ブラウザのズームは、アクセシビリティの機能です。これに反するような試みは、無用な問題を引き起こす可能性があります。放っておくべきです。 ブラウザズームを活用しつつ、高ズームレベルでもサイトが見栄えよく表示されるようなコーディングの優れた例を見たことがあります。しかし、それらはズームに対して闘うようなものではありません。 あなたが言うかもしれません。「私のサイトを 500% にズームすると、見た目が悪くなる!」確かにそうかもしれません。しかし、それは単なるあなたの意見に過ぎません。ズームは一貫して機能します。ズームを使う人々は、その動作を知っています。彼らはあなたとは違う、あなたが持っていない違
AppleがiOS18で追加する新アクセシビリティの詳細がプレスリリースで明かされました。目玉機能は「アイトラッキング（Eye Tracking）」と乗り物酔い防止機能「Vehicle Motion Cues」です。 アイトラッキングはiPad/iPhoneで動作 人工機能（AI）がベースになっているという「アイトラッキング」は、iPadおよびiPhoneで使用することができます。身体障害がある人向けの機能で、自撮りカメラでカリブレーション（調整）を行うことで、視線でデバイスをコントロールできるようになります。 聴覚障害がある人向けのMusic Haptics Music Hapticsは、聴覚障害がある人でも音楽を体験できる機能で、iPhoneのTaptic Engineで楽曲に合わせてタップ、テクスチャー、洗練された振動を再生してくれます。 乗り物酔い防止機能「Vehicle Moti
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和のHTML / CSS / JavaScriptの書き方50選
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
Webアクセシビリティことはじめ【おすすめ資料5選】｜akane
ノートパソコンのキーボードの配置や仕様はどうにかならないものか、というお話「この前やらかしたよ」
LCHは、UIにベストなカラースペース｜hirotoarakawa
Creating a pointer-friendly submenu experience
Porta11y | アクセシビリティをあたりまえに
ウェブアクセシビリティ対応の必要性 | アクセシビリティ連載 | 北九州・福岡のウェブアクセシビリティ専門Web制作会社
「みんなの公共サイト運用ガイドライン」が2024年版に改訂 | アクセシビリティBlog | ミツエーリンクス
ウェブアクセシビリティのガイドラインと規格 | アクセシビリティ連載 | 北九州・福岡のウェブアクセシビリティ専門Web制作会社
ウェブアクセシビリティ対応の証明 | アクセシビリティ連載 | 北九州・福岡のウェブアクセシビリティ専門Web制作会社
WCAG AA準拠サイト作成のためのスタイルガイドライン｜ましじめ株式会社
やってはいけない：ブラウザのズーム機能で拡大できない文字サイズの指定方法 - コハム
iOS18のアクセシビリティ進化！アイトラッキング実装 - iPhone Mania