2024年のGAADにあわせたWCAG 3.0の更新 | アクセシビリティBlog | ミツエーリンクス
タイトルのとおり、WCAG 3.0が5月の第3木曜（今年は5月16日）のGlobal Accessibility Awareness Day (GAAD)にあわせる形で更新されました（W3C Blogの記事、前回の更新2023年8月時点のWCAG 3.0の状況についても参照してください）。振り返ってみると、おととしのW3Cは、リニューアルしたARIA Authoring Practices Guide (APG)をGAADにあわせて公開していたことからも、GAADを節目の日に捉えているように思われます（リデザインされたARIA Authoring Practices Guideについても参照してください）。 さて、今回のWCAG 3.0の更新は何が変わったのかについては、Deque Systems社のWilco Fiers氏によるBlog記事W3C unveils 174 new outc
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス
containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo
Interop 2024に見るアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
フロントエンドBlogにInterop 2024がスタートという記事が先日掲載されましたが、ここでは重点分野として加わったアクセシビリティに関して深掘りしてみたいと思います。 アクセシビリティに関しては、WebKitが詳細に、Bocoupが端的に、Mozillaが軽く触れています。もちろんInterop 2024のREADMEにも記載されていますが、これらをまとめ直してみるとおおよそ次のようになります。 アクセシビリティは、既にInterop 2023では調査分野として取り上げられていました。以前のアクセシビリティBlogの記事ARIAを取り巻く2つの自動テストでも触れていましたが、Appleのアクセシビリティチームが主導して、執筆現在では1300を超えるアクセシビリティテストが作成されており、Interop 2024では重点分野としても組み込まれるに至っています。 細かくは3つの領域が挙
Interop 2024がスタート | フロントエンドBlog | ミツエーリンクス
Interop 2022、Interop 2023に続き、Interop 2024の取り組みがスタートした旨を知らせる記事が、参加組織それぞれから一斉に公開されました。 Interop 2024 | Blog | web.dev The web just gets better with Interop 2024 | WebKit Interop 2024 Launch - Bocoup Interop 2024 Launches | Igalia Microsoft Edge and Interop 2024 - Microsoft Edge Blog Announcing Interop 2024 - Mozilla Hacks - the Web developer blog 加えて、既にInterop 2024 Dashboardが公開されています。Interop 2023より引き
WCAG 2.2の勧告 | コラム | ミツエーリンクス
世界中で広く活用されているWebコンテンツのアクセシビリティに関するW3Cのガイドライン、Web Content Accessibility Guidelines（WCAG）の最新バージョン、 WCAG 2.2 が10月5日付けで勧告されました。前バージョンの2.1からは、およそ5年ぶりのアップデートとなります（コラム「 WCAG 2.1の勧告 」参照）。 バージョン2.0から2.1へアップデートされた際の流れを汲み、WCAG 2.2では認知障害や学習障害のあるユーザー、弱視のユーザー、モバイルデバイスを利用するユーザーへの対応が強化されています。具体的には以下に示すとおり、4つのガイドラインに関して都合9つの達成基準が新たに追加されました。
#47「障害者差別解消法とWebアクセシビリティ」 | ミツエーテックラジオ | ミツエーリンクス
「改正障害者差別解消法とWebアクセシビリティ」というテーマで、障害者差別解消法とはというところから、法律とWebアクセシビリティの関係や動向について話しました！ 佐竹: 皆さん、こんにちは！ミツエーリンクスの佐竹です！ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。 本日は当社エグゼクティブ・フェローの木達さんをゲストにお呼びして「改正障害者差別解消法とWebアクセシビリティ」をテーマに話していきたいと思います。木達さんよろしくお願いします！ 木達: はい、よろしくお願いします！ 佐竹: はい、まず木達さんが7月に「改正障害者差別解消法とWebアクセシビリティ」というセミナーに講師として登壇されていて、これまで開催されてきたセミナーの中でも参加人数が最多だったそうで
WCAG 2.2の勧告案が発行、8月にも勧告へ | アクセシビリティBlog | ミツエーリンクス
筆者の個人的な予測としては、WCAG 2.2の策定にはまだまだ時間がかかるのではと思っていましたが、2023年7月20日付けでWCAG 2.2の勧告案（Proposed Recommendation）が発行されました（W3Cのアナウンス）。 前回の勧告候補（前回の記事WCAG 2.2の勧告候補が更新（2023年5月版）もあわせて参照してください）からの変更点については、編集上の変更にとどまっています。不安定な機能（at risk）とされていたSC (Success Criteria) 2.4.13 Focus Appearanceと2.5.8 Target Size (Minimum)については残留する格好となりました。 現時点でのWhat's New in WCAG 2.2でも言及されているように、W3Cの文書プロセス上問題がなければ8月下旬にはW3C勧告（Recommendation）
#45「これから注目したいCSSは？ @mediaのscripting特性とimage()」 | ミツエーテックラジオ | ミツエーリンクス
2023年6月26日 #45「これから注目したいCSSは？ @mediaのscripting特性とimage()」 加藤: 皆さん、こんにちは！ミツエーリンクスの加藤です！ 佐竹: 佐竹です！ 加藤: はい、では今回もミツエーテックラジオやっていきたいと思います。ミツエーテックラジオは、株式会社ミツエーリンクスのスタッフが、Webデザイン、Webフロントエンドなどの、Web技術に関するニュースやツールをシェアするポッドキャストです。 加藤: えー突然ですが、先日CSS Dayというイベントがオランダのアムステルダムで行われましたよね。 佐竹: はい。私が参加してみたい海外イベントの一つで、社内でもこういうCSSについて話すイベントやってみたいなーと思っていたんですよね。 加藤: はい。知ってました笑。前に佐竹さんがそんなことを言っていたなーと思いまして、今回のテックラジオでは佐竹さんにCS
WCAG 2.2の勧告候補が更新（2023年5月版） | アクセシビリティBlog | ミツエーリンクス
GAAD (Global Accessibility Awareness Day)にあわせて、5月17日付けのWCAG 2.2の勧告候補（Candidate Recommendation）が公開されました（W3C WAIのツイート）。 前回の1月の勧告候補からの変更点としてはChange Logで2つが挙げられます（1月の勧告候補については「WCAG 2.2の勧告候補が更新されました」もあわせて参照ください）。 変更点の1つはFocus Appearanceで、レベルがLevel AAからLevel AAAに変更され、番号もSC 2.4.11からSC 2.4.13となっています。 Focus Appearanceの達成基準の内容については、1月の勧告候補での達成基準はかなり複雑なものでしたが、今回の勧告候補では、2つの項目に簡素化されています。Level AAAという位置付けを差し引いても
CSSだけでスクリプトの有効・無効に合わせてスタイルを設定する | フロントエンドBlog | ミツエーリンクス
CSSだけでJavaScriptなどのスクリプトの有効・無効に合わせてスタイルを設定するには@mediaのscripting特性を使用します。 @mediaのscripting特性とは @mediaのscripting特性はW3C Working Draft の Media Queries Level 5となり、Firefox Nightly 113で追加になりました。 構文 scripting特性のキーワードにはnone initial-only enabledがあります。 none ... スクリプトが利用できない状態で有効です。 @media (scripting: none) { body { /* ... */ } } initial-only ... スクリプトが利用できる状態のページロード時に有効です。 例として、CSSだけでページロードの間だけローディング要素を表示し、ペー
広色域とハイダイナミックレンジに関するW3Cのワークショップ | フロントエンドBlog | ミツエーリンクス
2021年9月24日 広色域とハイダイナミックレンジに関するW3Cのワークショップ アクセシビリティ・エンジニア 中村（直） W3C Workshop on Wide Color Gamut and High Dynamic Range for the Webというワークショップが7月から9月にかけて、バーチャルイベントとして、主に事前収録されたセッション形式で開催されています。 はじめに、ワークショップの名称になっているWide Color Gamut（WCG）について触れておきたいと思います。 よく知られているように、WebではsRGBの色域で表される色を用いています。これはテレビのハイビジョン規格から派生した、1996年に策定された標準に基づいたものですが、この25年もの間変わることなく使われ続けています。しかしその一方で、技術の進歩はめざましいものがあります。1996年当時に主流だ
Web3とWeb 3.0を巡る混乱 | コラム | ミツエーリンクス
先日、Web3とWeb 3.0についての興味深い記事を読みました。CNBCに掲載された Web inventor Tim Berners-Lee wants us to 'ignore' Web3 がそれで、ポルトガルのリスボンで開催されたイベント「Web Summit 2022」におけるTim Berners-Lee氏の発言を紹介しています。Berners-Lee氏の考えを私なりに約しますと、 ブロックチェーン技術は次世代のWebを支える主要な技術ではない ブロックチェーンとその周辺を意図するWeb3は、Webとはまったく異なる 多くの人々がBerners-Lee氏の推進する Solidプロジェクト （≒Web 3.0）をWeb3と混同している ということのようです。これらの指摘は、Webの発明者として古くからBerners-Lee氏に対し個人的に尊敬や感謝の念を抱いてきた経緯を差し引い
応答性を示す新しい指標「INP」 | フロントエンドBlog | ミツエーリンクス
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性（ページがユーザー入力に応答する速度）がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP（Interaction to Next Paint）は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性（インタラクション）を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る | フロントエンドBlog | ミツエーリンクス
2021年5月31日 source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る UI開発者 橋本 Google Chrome 90からsource要素におけるwidth属性、height属性の指定がサポートされました。 これまでpicture要素で表示する画像のアスペクト比は、picture要素に含まれるimg要素に指定されたwidth属性、height属性から計算されていましたが、source要素に指定したwidth属性、height属性からもアスペクト比が計算されるようになります。 width属性とheight属性を付けることで解決できる問題 Core Web Vitalsの3つ指標のうちの1つにCumulative Layout Shift、略してCLSというレイアウトシフトがどれくらい発生したかをスコアにしたものがあります。 レイアウト
障害者差別解消法の改正とWebアクセシビリティ | コラム | ミツエーリンクス
今年5月28日に遡りますが、 障害を理由とする差別の解消の推進に関する法律 、いわゆる障害者差別解消法が改正されました（令和3年法律第56号）。これにより行政機関等に加えて事業者、つまり一般企業に対しても、改正法の施行後には合理的配慮の提供が義務付けられます。 この文脈で言うところの合理的配慮とは、一体何でしょう？ これを理解するには、 障害者の権利に関する条約 （略称：障害者権利条約）の定義を参照する必要があります。同条約の「第二条 定義」に、以下のくだりがあります。 「合理的配慮」とは、障害者が他の者との平等を基礎として全ての人権及び基本的自由を享有し、又は行使することを確保するための必要かつ適当な変更及び調整であって、特定の場合において必要とされるものであり、かつ、均衡を失した又は過度の負担を課さないものをいう。 例えば、あるWebサイトにおいて、障害者が他の人と同じように利用できな
W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
Flashの終焉に思う| コラム | ミツエーリンクス
昨年末をもってAdobeはFlash Playerのサポートを終了、また今年1月12日からはFlashコンテンツの実行がブロックされるようになりました（ Adobe Flash Playerサポート終了情報ページ 参照）。Flashコンテンツ全盛の時代を知る一人としては寂しさ半分、諸行無常感が半分といったところです。 若い方にはもはや想像すら難しいかもしれませんが、ちょっと凝ったアニメーションなり仕掛けをWebサイトで実現しようと思ったら、Flashの採用をおいてほかに考えられない時代があったのです。さまざまなクリエイターが、面白おかしいFlashコンテンツを掲示板や個人サイトで発表し楽しませてくれたのも、そんな時代でした。 Web標準の実装状況がブラウザごとで大きく違った当時、Flashプラグインがその種の差異を吸収し、コンテンツの相互運用性を担保する側面もあったように思います。プラグイ
レシピを見ながら楽しく実装、フォームのアクセシビリティ！その3 | フロントエンドBlog | ミツエーリンクス
2017年6月23日 レシピを見ながら楽しく実装、フォームのアクセシビリティ！その3 UI開発者 宇賀 4月20日、2016年版のWCAG 2.0達成方法集の日本語訳が公開されました。 WCAG 2.0 達成方法集を掲載しました。2016年10月7日に公開された「Techniques for WCAG 2.0」の日本語訳です。 https://t.co/phwmpSVCOg — ウェブアクセシビリティ基盤委員会 (@waic_jp) 2017年4月20日 WCAG 2.0 達成方法集 前回はfieldset要素とlegend要素、2つの要素を適切に用いることでフォームのアクセシビリティを向上させる方法をお伝えしました。 今回は、WCAG 2.0 達成方法集に記載されている「よくある不適合事例」の中からフォームに関連する事例についてご紹介したいと思います。 ※ この記事は、以前執筆したレシピ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
持続可能なWebを目指して | コラム | ミツエーリンクス
