タグ: つくば市

ブラウザの更新情報というと新しいCSSやAPIに目が向きがちですが、9月に出たChrome 154とFirefox 155、156の開発者向けリリースノートを読み比べると、こちらが何も変えていなくても既存サイトの見え方や動き方に関わる変更がいくつか含まれていました。新機能の紹介とは少し角度を変えて、納品済みのサイトや社内システムを抱える側が気にしておきたい項目を並べてみます。

その1 HTTPのまま開くと確認画面が出るのが既定に

Chrome 154では、暗号化されていないhttpの接続でサイトを開こうとしたとき、利用者に確認を求める動作が既定で有効になりました。管理者向けには企業ポリシーでこの既定を制御する手段も用意されています。

公開サイトの多くはすでにHTTPS化されていますが、気になるのは周辺部分です。印刷物やQRコードに載せたhttpのURL、古い記事の中に残った内部リンク、LAN内で動く機器の管理画面などは、これまで素通りだったところで一度立ち止まる形になります。httpからhttpsへの転送がきちんと効いているか、紙の販促物に刷ったURLが今どうなっているかを、この機会に確かめておくと安心です。

その2 古い鍵交換方式だけのサーバーにFirefoxがつながらなくなる

Firefox 156では、TLSの接続開始時に既定で提示する鍵交換の方式から、有限体Diffie-Hellmanのffdhe2048とffdhe3072が外れました。リリースノートによると、これらの方式しか扱えないサーバーとは接続の取り決めが成立しなくなるとされています。

ほとんどのサーバーは楕円曲線を使うECDHEに対応しているため、一般的なレンタルサーバーやCDN経由のサイトで問題になることはまずないはずです。ただ、長く更新されていない自前のサーバー、古い業務用機器の管理画面、社内の古いシステムなどはこの限りではありません。「Firefoxでだけ開けない」という問い合わせが来たときの確認項目として覚えておくと役に立ちます。

その3 ポップオーバーやダイアログが意図せず閉じにくくなった

Chrome 154では、ポップオーバーやダイアログの外側を押したときに閉じる「ライトディスミス」の判定が、押し下げと離す操作の組み合わせからクリックイベントに切り替わりました。これにより、スマートフォンで画面をスクロールしただけのときや右クリックしたときに、開いていたメニューが勝手に閉じてしまう現象が起きにくくなります。

利用者にとっては素直な改善ですが、標準のpopover属性やdialog要素の挙動に合わせて独自の処理を足しているサイトでは、閉じるタイミングが以前と少しずれる可能性があります。スマートフォンでメニューを開いたまま縦にスクロールしてみる、といった簡単な確認をしておくとよさそうです。

その4 読み込みに失敗したモジュールを後から読み直せる

Firefox 155では、ネットワークエラーやMIMEタイプの誤りで読み込みに失敗したJavaScriptのモジュールが、失敗した状態のまま記憶されなくなりました。サーバー側が復旧すれば、同じ指定で読み込み直したときに成功するようになります。JSONやCSSのモジュール、動的なimportも対象です。

サーバーの一時的な不調やデプロイ中の瞬断で、ページを開き直すまで一部の機能が動かないという状況が減る方向の変更です。逆に言えば、配信側でMIMEタイプの設定を誤っていた場合、再試行のたびに同じ失敗を繰り返すことになるので、サーバー設定の見直しは引き続き大切です。

その5 開発者ツールの表示サイズが端数まで出るように

Firefox 156の開発者ツールでは、インスペクターで要素を選んだときに出るビューポートの幅と高さが、四捨五入されずに表示されるようになりました。ブラウザの拡大率が中途半端なときや高精細なディスプレイでは、これまでの表示が実際と食い違っていたためです。

レスポンシブデザインの切り替え幅を確かめる際、境界ぎりぎりで表示が崩れる原因を追うときに小数点以下の値が見えるのは助かります。制作中に表示される数字が以前と違って見えても、不具合ではなく正確になった結果と受け止めてよいでしょう。

どれも派手な変更ではありませんが、何年も前に納品したサイトほど影響を受けやすい種類の話です。隔週で更新が届く時代になり、こうした細かな挙動の変化は今後も積み重なっていきます。新機能を追いかけるのと同じくらい、既存のサイトに何が起きうるかを定期的に拾っておくことが、運用を任される側の地道な仕事になりそうです。

ウェブサイトの使いやすさを測る物差しが、欧州で一段新しいものに切り替わろうとしている。情報通信技術のアクセシビリティ要件を定めた欧州規格EN 301 549の新しい版が2026年9月に公開され、参照する指針がWCAG 2.1からWCAG 2.2へと改められた。

規格の版が上がっただけと言えばそれまでだが、中身を見ていくと、派手な新機能の話ではなく、日々の制作でつい後回しにしがちな部分が並んでいる。法令の直接の対象になるかどうかとは別に、自分たちのサイトを点検する材料として読む価値がありそうだ。

欧州の参照先が入れ替わる準備が進んだ

新版のEN 301 549 V4.1.1は、ウェブコンテンツだけでなく、ソフトウェアや電子文書に対する要件もWCAG 2.2に合わせて更新されている。公開元の説明によると、欧州アクセシビリティ法を明確に意識して作られた最初の版でもあり、規格の要件と同法の要求事項を結びつける附属書が新しく加わったという。

ただし、公開されたからといってすぐに法的な基準が切り替わるわけではない。欧州委員会が官報で新版を正式に引用するまでは、2021年の版であるV3.2.1、つまりWCAG 2.1のレベルAAが参照される基準として残る。正式に引用された後は、新版に適合していれば欧州アクセシビリティ法とウェブアクセシビリティ指令の両方に適合しているとみなされる扱いになる。

言い換えると、いま慌てて何かを差し替える必要はない。その一方で、欧州が向かう先がWCAG 2.2だとはっきりしたので、準備を始めるなら目標は定まったことになる。

増えた達成基準はどれも地味で実務的

WCAG 2.1と比べると、ウェブコンテンツ向けにはレベルAとAAの達成基準が六つ増えている。キーボードのフォーカスが他の要素に覆い隠されないこと、ドラッグ操作に代わる手段を用意すること、クリックやタップの対象を一定の大きさに保つこと、ヘルプへの導線を各ページで同じように置くこと、同じ情報を何度も入力させないこと、そして認証で記憶や謎解きに頼らせないこと。並べてみると、どれも新しい技術の話ではなく、作り方の話だと分かる。

たとえばクリック対象の大きさは24×24ピクセルが目安になるが、周囲に他の対象が近接していない場合や、同じ機能を別の適合した方法でも実行できる場合、文章やリストの中のリンクである場合などは除外される。ドラッグについても、並べ替えのような操作をドラッグ以外の単一のポインタ操作でも達成できるようにすることが求められ、ドラッグそのものが本質的な機能である場合は対象外になる。

再入力に関する基準は、ひとつの手続きの途中で同じ情報を書かせる場面を想定している。前に入力した内容を自動で埋めるか、選べるようにするのが基本で、安全上の問題がある場合や、以前の情報がもう有効でない場合は例外として扱われる。

中小企業のサイトで先に引っかかりやすいところ

この六つを実際のサイトに当てはめると、引っかかりやすい場所はだいたい決まっている。画面上部に固定したヘッダーや同意を求めるバーは、キーボードで送っていったフォーカスを覆い隠しやすい。スマートフォン向けに詰めて配置した小さなアイコンは、対象の大きさの目安を下回りやすい。

問い合わせフォームも見どころが多い。確認画面から戻ったときに入力内容が消える作りは、再入力に関する基準から見ると改善の余地がある。パスワードの貼り付けを禁止する設定も、記憶に頼らせない方向とは逆を向いている。ヘルプや連絡先の置き場所がページによってばらばらというサイトも珍しくない。

どれも大規模な作り直しを必要とする話ではない。固定ヘッダーの高さの分だけスクロール位置をずらす、アイコンの間隔を少し空ける、入力値を保持する。こうした細かい修正の積み重ねで届く範囲がかなりある。

法令の対象でなくても点検の材料になる

欧州の規格なので、国内の中小企業サイトが直接その適用を受ける場面は限られる。ただ、欧州向けに商品やサービスを販売しているなら無関係とは言えないし、この動きは欧州だけにとどまらない。オーストラリアの規格も欧州規格を土台にしており、現時点ではWCAG 2.1を参照しているが、今後の改訂で新しい版を取り込む可能性が指摘されている。

公開元が当面の準備として挙げているのは、サイトと電子文書をWCAG 2.2の観点で見直すこと、検査の手順や点検表を更新すること、調達の条件や発注先への要求を見直すことなどだ。制作を請け負う側からすると、最後の項目が効いてくる。発注元の点検表が更新されれば、納品物に求められる水準もそこに合わせて動く。

期限が切られているわけではないので、次に作るサイトから少しずつ織り込んでいけば足りる。フォーカスが隠れていないか、指で押せる大きさか、同じことを二度書かせていないか。基準の番号を覚えるより先に、その三つを手元の画面で確かめてみるところからでいいと思う。