:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
Designing better target sizes
Intro As a user, you need to interact with clickable UI elements like buttons, links, cards, and more. If an action has a small target size, it will be harder for the user to click, or they might click an adjacent action element by mistake. Let’s take a look at the following example.
この記事はlocation-stateをconformに対応させるために開発した、@location-state/conformの紹介記事です。 location-stateとは location-stateは履歴位置に同期する状態管理ライブラリです。主にNext.jsをサポートしています。 Next.jsなどを採用している場合、ページ内のuseStateは遷移時のunmountで状態が破棄され、ブラウザバック時には復元されません。そのため、アコーディオンやform要素の状態はブラウザバック時にはリセットされてしまいます。これはNext.jsに限らず、ReactやVueなどをベースにしたモダンなフロントエンドフレームワークを採用して、クライアントサイドルーティングが発生する場合に起きがちな挙動です。クライアントサイドルーティングが不在なMPAでは、bfcacheやブラウザ側の復元処理によっ
モノづくりが好きな少年時代 厚生労働省は毎年、卓越した技能を持つ技術者や職人を「現代の名工」として表彰しています。2023年、視覚に障害のある人で初めて選ばれたのが齋藤正夫さん（75）です。 石川県小松市で盲導犬と共に過ごす齋藤さんは、パソコン画面の情報を音声で読み上げるソフト「スクリーンリーダー」を開発しました。視覚に障害のある人たちのコミュニケーション手段を広げたことが高く評価されています。 「突然、そういう話（表彰）を聞きまして、ちょっとドギマギしましたね、思いがけないことなので。（表彰が）決まってから、古い仲間たちからどんどんお祝いのメッセージやら電話やらいただいて、みんな義理堅いなとしみじみ思いました。異口同音に自分のことのようにうれしいと言ってもらえたんですよ。それが本当にうれしかったですね」（齋藤さん） ソフトを開発したきっかけは、視覚に障害があってもパソコンを自由に使いたい
“あご”でFPSを楽しむ「障がい者ゲーマー」にゲームプレイのハードルを聞く―当事者から見たアクセシビリティとは？【インタビュー】 | Game*Spark - 国内・海外ゲーム情報サイト
昨今のゲーム業界を取り巻く流れとして、どのような障がいを持つ方でもゲームが遊べるようにというアクセシビリティ化の動きが加速しています。直近では、ある程度手足が動かせる方が買ってすぐプレイできるようにと、SIEがAccessコントローラーをリリースしたのも記憶に新しいでしょう。 しかし同時に、個々人がもつ身体的なハードルの高さ、そして各々を取り巻く環境は様々だと思います。ゲーム業界がプレイのハードルをなくす世界を望んでいることを感じながらも、未だ至らぬ点は多いはずです。そこで本記事では、そうしたアクセシビリティ問題の当事者の声を聴くべくインタビューを敢行しました。 今回お答えくださったのは、YouTubeで「りくおのへや【Chin Game Player】」というチャンネルを運営しているゲーマーの「りくお」さんです。「脳性麻痺のアテトーゼ型」という障がいを抱えながらも、顎を使ったプレイにて『
Firefox、オンデバイスAIで画像のAltテキストを自動生成する実験的機能を導入、スクリーンリーダーのユーザーに利便性
Firefoxの開発元であるMozillaは、Webページ上の画像のAltテキストをオンデバイスAIモデルを使用して自動的に生成する実験的な機能を、9月にリリースされる予定のFirefox 130で導入することを明らかにしました。 この機能は、Firefoxに搭載されているPDFエディタの一部となる予定です。 最終目標としては、Webページを音声で読み上げるスクリーンリーダーを使用している視覚障害者などのユーザが一般的なブラウジングで利用できるようにすることとされています。 オンデバイスAIでAltテキストを生成する理由 画像のAltテキストは、Webページで画像が表示できないときに、画像の代わりに使われるテキストの情報です。しかし、Altテキストが設定されていない画像は多くのWebページで存在します。 今回のMozillaの取り組みは、こうしたAltテキストが設定されていない画像を含むW
スマホやパソコン、雑誌をはじめ、街中の電光掲示板やレストランのメニューに至るまで、普段は意識しなくても、印刷物やディスプレーの文字は、すべて何らかの書体＝フォントで表されている。ところが、世の中には、そのフォントの種類によって、文章が読めなかったり、強いストレスを感じたりする人がいることは、あまり知られていない。 フォントの考案や制作を仕事にする書体デザイナーの高田裕美氏は、そんな人たちの読みづらさの原因を探り、誰もが読みやすいフォント「ＵＤデジタル教科書体」を開発した。デジタル時代の日本語環境を一変させた画期的なフォントを発明するまでの苦闘を、著書『奇跡のフォント』で自ら語っている。 ＵＤデジタル教科書体の特徴［株式会社モリサワ提供］【時事通信社】 見やすく「教育現場」でも使えるフォントを追求 「ＵＤデジタル教科書体」の「ＵＤ」は「ユニバーサルデザイン」を意味する。ユニバーサルデザインと
「あれ、なんか字幕が読みにくいな…」 ガヤガヤと人でにぎわう昼どきの社員食堂。 日替わり定食を食べながらぼんやりとニュースを眺めていたある日、ふと違和感を覚えました。 生放送のニュース番組。すらすらとしゃべるアナウンサーの声に、少し遅れて表示される字幕…。 みなさんはふだん、テレビを字幕付きで見たことはありますか？ テレビ番組表に「字」と書いてあったり、番組の開始直後に「字幕放送」と告知テロップが出たりするので、ご存じの方もいるでしょうか。 ドラマなどの収録番組は、あらかじめ制作過程で字幕を作ることができるので、番組内容と字幕の表示タイミングがきちんと合っています。 一方、ニュースなどの生放送番組（以下、生番組）の場合、アナウンサーや出演者が話すことばが事前に決まっていないため、実際に話されたことばを人が文字起こしして字幕を制作します。 そのため、どうしても数秒から数十秒の作業時間がかかっ
こんにちは。株式会社トルクのデザイナー山﨑です。唐突ですが私は発達障害当事者です。ASD（自閉症スペクトラム障害/アスペルガー症候群）とADHD（注意欠如・多動症）を持っています。トルクでは私の障害を受け入れていただきウェブデザイナーとして一般雇用で勤務しています。 近年、発達障害は話題にあがりやすいトピックスですので、聞いたことある方やなんとなくご存じの方もいらしゃるかと思います。発達障害について説明しますとそれだけで長くなってしまいますので詳しくは「大人の発達障害ナビ」や政府広報オンラインの「発達障害って、なんだろう？」などをご覧いただくか、ご興味のある方は各自でググっていただければと思います。 今回は発達障害当事者デザイナーがウェブデザインをする上で工夫していることやアクセシビリティの観点からも書いていこうと思います。 ASD編：発達障害デザイナーがデザインする上で工夫していること①
名鉄海上観光船（南知多町）は、美浜町の河和港―名鉄河和駅間で運行していた無料送迎バスを運転士確保の困難を理由に3月で廃止した。南知多町の日間賀島や篠島に向かう観光客だけでなく、知多半島の病院などに行く島民も利用していた送迎バス。高齢者にとっては港から駅まで歩くのも簡単ではない。島民には困惑の声が広がっている。 小雨の降る11月上旬。記者が港から駅までを歩いてみた。駅前には交通量の多い交差点があり、信号待ちをする際の歩道の整備は十分ではない。歩道橋はあるが、階段を上るのが難しい高齢者もいる。実際、この時も歩道橋の利用を諦めている高齢者がいた。記者が歩道橋を使わずに要した時間は7分半だった。...
しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、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サイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
モーダルダイアログの未来はdialog要素で幸せになるか
こんにちは、及川です。 今回のテーマはdialog要素です。みなさん、dialog要素はご存知でしょうか？もう現場で使っているでしょうか？ dialog要素はいわゆるダイアログボックスを描画するための実装で、HTML要素の中では比較的新しめの要素です。このdialog要素の仕様を理解し、モーダルダイアログコンポーネントとしてどのように実装するかを学習することが本記事のゴールです。 dialog要素 ってなに？dialog要素はダイアログボックスを表現するためのHTML要素です。 cf) <dialog>: ダイアログ要素 – HTML: ハイパーテキストマークアップ言語 | MDN dialog要素は新しめとは言うものの意外と長い歴史をもっていて、2012年あたりから今の形でHTMLの草案に追加されたり削除されたりを繰り返し、全てのモダンブラウザで動くようになったのが2022年のことです。
カラーユニバーサルデザインとはどのような手法ですか？ CUDO副理事長・伊賀公一さんに聞いてきた | Webのコト、教えてホシイの！
※カラーユニバーサルデザイン推奨配色セットについて（CUDO） 次回は7月26日（金）公開予定 ※このコンテンツはWebサイト「Web担当者Forum - 企業Webサイトとマーケティングの実践情報サイト - SEO・アクセス解析・SNS・UX・CMSなど」で公開されている記事のフィードに含まれているものです。 オリジナル記事：カラーユニバーサルデザインとはどのような手法ですか？ CUDO副理事長・伊賀公一さんに聞いてきた | Webのコト、教えてホシイの！ Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved. » Webのコト、教えてホシイの！ のバックナンバーを見る
「踏切の音が鳴っていても、自分が遮断機の中にいるのか外にいるのか分からないことがある」 おととし静岡県三島市で、視覚障害のある男性が踏切の中で列車にはねられて死亡する事故が起きました。そのとき、男性は危険な場所に立っている自覚がなかった可能性があるとみられています。 事故防止のカギは、視覚障害者を安全に誘導するための点字ブロックの設置です。男性の事故から2年、国土交通省は点字ブロックなどの誘導表示の設置基準を作るための実験を始めました。 自宅近くの踏切で… おととし8月、静岡県三島市の踏切事故で亡くなった会社員の佐藤一貴さん（26）。生まれつき左目の視力はなく、右目にも弱視の視覚障害があった佐藤さんは、自宅近くの踏切の中に取り残され、列車にはねられて死亡しました。 NHKが事故当時の状況について取材を進めたところ、現場の踏切には視覚障害者を安全に誘導するための点字ブロックなどはなく、佐藤さ
Googleマップの新デザイン、見慣れました？ 元デザイナーは苦言を呈しているが、アクセシビリティーの観点からメリットもありそう
Googleマップのデザインが11月中旬頃に変わりました。主に地図全体の配色が変更され、一目で「変わったな」と分かる大きなアップデートです。従来の配色とかなり異なるため、一部では賛否両論のようですが、アクセシビリティーの観点でメリットを指摘する声もあるようです。 Googleの元デザイナー「人間的ではない」 実は9月頃から、一部ユーザーを対象にGoogleマップの新しいデザインがテストされてきました。11月中旬のタイミングで多くのユーザーに反映されたようで、今注目が集まっているということです。 海や緑地の色が淡い色合いになったり、道路上の横断歩道が表示されるようになったりと、見慣れたGoogleマップの見た目が変わって新鮮に感じる一方で、一般道と高速道路が同じ灰色基調で表示されるなど、見づらくなったと言う人もSNSで見かけます。 米Googleの元デザイナーで、Googleマップのデザイン
タブUIをアクセシブルにする
どうも、nano72mknです。 アクセシビリティを意識してタブUIを作ったので、実装時に調べたことやポイントをまとめます。 タブUIについて まず、初めにタブUIと言われて思い浮かべるのは、この形だと思います。 このUIは、２つのパーツに分けることができます。 １つ目は、「タブ」と呼ばれるパーツ ２つ目は、「タブパネル」と呼ばれるパーツ この２つのパーツをがっちゃんこして、タブUIは出来ています。 タブUIをアクセシブルにする roleとaria属性を付与してアクセシビリティ対応をする。 roleを付与する 付与する必要があるものは下記の３つ tab tablist tabpanel tabとtablist タブにはtab、複数のタブを囲っている要素にはtablistのroleを付与する <div id="tab"> <div role="tablist"> <button role="
神奈川県内にある３８９の鉄道駅のうち、６月時点で４分の１に当たる９９駅が終日または一部時間帯で駅員不在となっていることが５日、分かった。同日の県議会予算委員会で、共産党の大山奈々子氏の質問に対し、県が明らかにした。 県によると、県内にはＪＲや私鉄、横浜市営地下鉄などの駅が合計で３８９あり、このうち６２駅（１５・９％）は終日、３７駅（９・５％）は一部時間帯で無人化されている。一部でも窓口を無人としている駅も６９駅あるという。 障害者らの移動に支障が ＪＲ鶴見線の昭和駅＝川崎市川崎区扇町（資料写真） ［写真番号:1170479］ この写真に関するお問い合わせ ＪＲ東海道線の根府川駅＝小田原市根府川（資料写真） ［写真番号:1170480］ この写真に関するお問い合わせ ＪＲ浜川崎駅＝川崎市川崎区（資料写真） ［写真番号:1170481］ この写真に関するお問い合わせ ＪＲ扇町駅＝川崎市川崎区扇
Webサイトから思うような成果が得られない場合、もしかしたら原因は「デザイン」にあるかもしれません。 見えにくい、読みにくい、わかりにくいといった、次のアクションを迷わせるデザインになっていないでしょうか。 情報を適切に伝えるために意識したいのが「ウェブアクセシビリティ」です。デザインに関する専門書の著述や講演を数多く行うデザイナーの間嶋沙知氏に、その詳細を伺いました。 プロフィール 間嶋沙知 氏 高知在住のフリーランスデザイナー。majima DESIGNの屋号で県内外の企業、個人、団体のサービスに関わる印刷物やウェブのデザインを手がける。「個々の良さが発揮される風通しの良い世界」にデザインで貢献することを目指して活動中。著書に『見えにくい、読みにくい「困った！」を解決するデザイン』（マイナビ出版） 目次 ウェブアクセシビリティとは ウェブアクセシビリティはなぜ重要なのか ウェブアクセシ
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より引き
国立国会図書館 図書館におけるアクセシブルな電子書籍サービスに関する検討会 令和5年7月 ※本書は、クリエイティブ・コモンズ・ライセンス 表示 4.0 国際（CC BY 4.0）に従って利用が可能です （本ガイドラインのPDF版（1.95MB）は国立国会図書館デジタルコレクションからご覧いただけます。） 令和元年6月、「視覚障害者等の読書環境の整備の推進に関する法律」（令和元年法律第49号。以下「読書バリアフリー法」という。）が施行された。令和2年7月には、同法第7条の規定に基づき、文部科学省及び厚生労働省において「視覚障害者等の読書環境の整備の推進に関する基本的な計画」（以下「基本計画」という。）が策定された。基本計画では「音声読み上げ機能（TTS）等に対応したアクセシブルな電子書籍等を提供する民間電子書籍サービスについて、関係団体の協力を得つつ図書館における適切な基準の整理等を行い、図
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1）の続きです。 おさらい 対象ページ：「アトリエ金工やまぐち」 Basic認証があるので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください @HeldaForStudy氏に了承を得てアクセシビリティチェックを行っています チェック基準：WCAG 2.1レベルA 文中のSCはSuccess Criteriaの略で達成基準のこと 目的はどうやってアクセシビリティチェックしているのか、チェックしながら何を考えているのかを書き記すことです 制作ページやチェック内容にネガティブなことをいいたいわけではありません チェックに抜け漏れ、誤りがあるかもしれません 仕様等は基本的に日本語訳を当たります では続きを進めていきましょう。 モーダル出現ボタン スクリーンショットですと、 HTMLソースとしては、
こんにちは！i3DESIGNデザイナーチームです。 今回は、先日発刊させて頂きましたホワイトペーパー”とってもやさしいウェブアクセシビリティチェックリスト”の一部を記事にまとめたいと思います。 ホワイトペーパーには、ウェブアクセシビリティチェックリストというシートがあります。 このシートは、JIS X 8341-3:2016(アクセシビリティについてのJIS規格)に基づき、私たちの解釈で分類・文章を再構成しました。 エンジニアやデザイナーでない方でも理解しやすいよう、一部内容を簡略化したり、複数の達成基準をひとつにまとめたりしている箇所があります。 このチェックリストを「現在提供しているウェブサービスが、どこまで達成できているのか」を図る指標として、ご活用ください。 👇ウェブアクセシビリティチェックリストがついているホワイトペーパー”とってもやさしいウェ
Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき - 水底の血
ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあたり、まあそういうことなんじゃないかなと*1。……という話だけはあまりにもアレなので、ざっくりとですが、ほんのちょっと深掘りしてみましょう。 WCAG 2.1 達成方法集のF24のタイトルは、「達成基
ホームページ制作／運用 #NEW #ホームページ制作 #ホームページ改善 【全事業者対象】2024年4月義務化が決定！ 2024年のウェブアクセシビリティ義務化についてわかりやすく解説 2024年4月1日より、障害者差別解消法の改正内容が適用され、民間事業者の「合理的配慮」が義務づけられることになりました。障害のある人が生活する上でバリア（障壁）を取り除くためにできる範囲の対応をする、Webサイトの場合ではウェブアクセシビリティを確保することがこれに当たります。また全事業者は、遅くとも2024年6月4日までに対応する必要があることもアナウンスされました。 出典：障害を理由とする差別の解消の推進｜内閣府 しかし、ウェブアクセシビリティ義務化の概要や、そもそもウェブアクセシビリティとは何かよくわからないという方もいるのではないでしょうか。ただ、ウェブアクセシビリティが義務化される以上、Web担
How to set up Storybook with Guidepup's Virtual Screen Reader and test what the screen reader speaks Recent changes to the @guidepup Virtual Screen Reader library make it ridiculously easy to integrate into Storybook for use in your integration tests. This article shows how to get the basic setup going and how to write your first screen reader test in Storybook. tl;dr The Virtual Screen Reader is
About this plugin The A11y - Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements of desktop, website, and mobile applications. You can share these annotations with engineers as part of your design. Accessibility is critical for good desig...
2023年7月12日に、国立国会図書館（NDL）が、OCR処理プログラム「NDLOCR」のver.2を、NDLラボ公式GitHubで公開しました。 NDLOCRは、NDLがデジタル化した資料から、全文テキストデータを作成することを目的に開発したものです。 2023年4月に公開したver.1が、全文検索用途が主目的の開発であるのに対し、ver.2は、視覚障害者等の読み上げ用途にも利用できるよう、読み上げ順序の推定等の機能の追加や文字認識性能の改善を行っています。 また、ver.2には、2022年度にNDLが外部委託して開発したver.2.0と、2023年4月～6月にNDLが改善作業を実施したver.2.1があります。 NDLOCR ver.2の公開について(NDLラボ, 2023/7/12) https://lab.ndl.go.jp/news/2023/2023-07-12/ NDLOCR
In web design, colour contrast is the first (and biggest) step towards creating an accessible site. As the web is accessed through a screen, colour contrast issues are experienced by a number of users. learn more The choice of typeface, and how this typeface is hierarchised, is an essential step in ensuring web accessibility. This step helps both visually and by allowing users with screen readers
チームラボ、成田国際空港公式WEBサイトのリニューアルにおいて、企画、UI/UX設計、デザイン、開発を担当。2024年2月21日公開。
チームラボは、成田国際空港公式WEBサイトのリニューアルにおいて、企画、UI/UX設計、デザイン、開発を担当しました。全ての人の快適な空港体験をサポートするサイトに。2024年2月21日公開。 「ハブ・アンド・スポーク」をコンセプトに、これまでサイト内に、バラバラに点在していたコンテンツを、再整理しました。ページ間のつながりに一貫したルールを設け、かつ、カテゴリ横断で情報を集約し、連携するいくつかのハブを設ける情報設計によって、さまざまな目的を持ったユーザーが、求める情報へストレスなくたどりつけるサイト構造を実現すべく、再構築しました。 「チームラボCMS」の導入によって、サイト内のコンテンツの一元的管理と動的なページ生成を可能にし、有機的なコンテンツの集約と連携を実現しています。 また、すべてのユーザーへの使いやすさを確保することを目的にウェブアクセシビリティの改善を徹底し、日本工業規格
これは フェンリル デザインとテクノロジー Advent Calendar 2023 15日目の記事です。 こんにちは。大西です。年に一度くらいしか書かないnote、今年も一度しか書かずに終わりそうです。 私は視覚科学を勉強しています。特に文字の認識に関する研究が好きです。 文字について考えるのが楽しすぎて、博士号をとりました。今回は久しぶりに自分の専門領域の話を書きます。 IT業、しかもHCDを掲げて仕事をしている身ではありますが、実は私、WCAG関連の話題があまり好きではありません（個人的な見解です）。中でも、「4.5:1以上のコントラスト比がないとアクセシビリティ対応が不十分」のようにいわれがちな、コントラストチェッカーの結果を見るのが一番苦手です。チェッカーでの計算に限界があることを理解して使ってほしい、結果に一喜一憂するくらいなら輝度を実測しちゃえばいいのに、などと歯がゆい思いを
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
アクセシビリティへの取り組み | STUDIO
STUDIOで、あなたのサイトのアクセシビリティを向上しよう。STUDIOを利用することで対応可能なWebアクセシビリティのポイントや、リファレンスを掲載しています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
サントリーのウェブアクセシビリティ改善プロジェクト：適合レベルAA達成と進め方 | Webサイトリニューアル特集
東京ニトロ 🍉𝙏𝙤𝙠𝙮𝙤𝙉𝙞𝙩𝙧𝙤 on X: "おれはイオンシネマに怒っている。というのも今回の件で、イオンシネマのバリアフリー対応を調べようとしたら、ウェブサイトの時点でバリアと不平等があるからだ。 https://t.co/v4Z5yMV1zp" / Twitter
@location-state/conformをリリースした
「スクリーンリーダー」開発者 齋藤正夫さん 「現代の名工」に選ばれた諦めない力 - 記事 | NHK ハートネット
新生FCNT、レノボ出資で再スタート arrows・らくらくシリーズ継承
「奇跡」のフォントが社会にもたらすものは 一人の書体デザイナーが変えた「日本語環境」：時事ドットコム
ストレスフリーで字幕が見られる？「ぴったり字幕」開発の舞台裏｜NHK広報局
発達障害当事者デザイナーとウェブアクセシビリティ ｜Yuu Yamasaki
河和港―名鉄河和駅間の無料送迎バス廃止、日間賀島民「名古屋が遠ざかった」：中日新聞Web
第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その3） - 水底の血
アイコンボタンのアクセシブルな名前はボタンが持つべきかアイコンが持つべきか
いま踏切のどこに？警報鳴っても分からない視覚障害者の安全は | NHK
Xユーザーの新田 龍さん: 「イオンシネマで介助を断られた経験をX上で投稿し、議論になっている車椅子インフルエンサーの人(以下N氏)が話題のようですね。全容をご存知でない方もおられるかと思いますので、ネット上で見かける疑問や質問、批判意見などを基に一問一答形式で当方の考えを述べていきますね。… https://t.co/ieG1dW6WP5」 / X
台湾にグーグルの新オフィス誕生、ハードウェア開発などを行う
神奈川の鉄道駅、４分の１が無人化 ６２駅は終日駅員不在 | カナロコ by 神奈川新聞
デザイナーに聞く「ウェブアクセシビリティ」の重要性。成果が出ないサイトの原因はデザインかも？
Interop 2024がスタート | フロントエンドBlog | ミツエーリンクス
電子図書館のアクセシビリティ対応ガイドライン1.0｜国立国会図書館―National Diet Library
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その2） - 水底の血
とってもやさしいウェブアクセシビリティチェックリスト｜i3DESIGN Designers
2024年のウェブアクセシビリティ義務化についてわかりやすく解説 – ミニナレ [web制作会社シスコム]
Simple setup: Virtual Screen Reader in Storybook
A11y - Focus Order | Figma Community
国立国会図書館（NDL）、OCR処理プログラム「NDLOCR」ver.2を公開
Understanding Accessibility
視覚科学者がAPCAについて考えてみた｜Madoka Ohnishi