App内のチャートへのアクセシビリティの導入 - WWDC21 - ビデオ - Apple Developer
チャートはデータを理解する上で欠かせないツールであり、自分自身、健康、経済、そして世界を理解する上で極めて重要です。オーディオグラフや音響データを使って、視覚に障がいのあるユーザがApp内のグラフにアクセスできるようにする方法について確認します。また、ユニバーサルデザインの原則とシステムのアクセシビリティ設定を利用して、チャートのアクセシビリティを向上させる方法も紹介します。 リソース Appearance Effects and Motion Color and Contrast isReduceMotionEnabled accessibilityReduceMotion Audio graphs HDビデオ SDビデオ ♪ (App内のチャートへの アクセシビリティの導入) こんにちはPrestonと申します さて 今日は App内のチャートに アクセシビリティを持たせる方法に つい
コントラストについて改めて考える｜LINEヤフーDESIGN 公式note
こんにちは、LINEヤフーでアクセシビリティの啓発と改善を行っている中野です。 ウェブコンテンツのアクセシビリティにおいて、コントラストは重要な要素です。私たちが日々目にするウェブサイトやアプリケーションのデザインにおいて、どのようにコントラストが担保されているかは、視認性と可読性に直接影響を与えます。この記事では、コントラストの重要性とその基準の変遷について掘り下げていきます。 なお、この記事は2025年6月30日と7月1日に開催された技術カンファレンス、Tech-Verse 2025で発表した「文字コントラストを改めて考える」の内容を再構成した記事です。SpeakerDeckで公開している資料と共にご覧ください。 視覚的な困難さとはウェブコンテンツは視覚情報が多くなっているため、文字の「見やすさ」「読みやすさ」がそのまま利用のしやすさに直結します。まず、視覚的な困難さについて考えてみま
アクセシビリティに配慮したWebデザイン ギャラリー・サイト AAA11Y（Accessible Website Gallery）
A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。
Apple Storeで対応してくれた人が目の見えない人だった→その体験は、Appleそのものの企業体質を表しているのではないか？という体験談
川尻大介（編集者） @jiricom2 昨日アップルストアで応対して下さったスタッフが目の見えない方だった。恐らくインカム（音声）と連動していたのだと思うが、iPhoneを手探りで上手に操りながら、受取り商品の確認から事前決済のフィニッシュ、受け渡しまでが自然に行われるのを見て率直に驚いた。さすがにアップルは進んでいるなぁと 2021-12-09 00:15:46 川尻大介（編集者） @jiricom2 続）その時は思ったのだが、この体験がもたらした意義がわかったのは帰りの電車に乗ってしばらく経ってからのことだった。たぶん、その彼（仮にJさんとする）は他のスタッフと同等にシステムに精通している（私がいくつか投げかけた質問にも立て板に水で答えてくれた）。だからと言ってすぐに店頭に 2021-12-09 00:16:27 川尻大介（編集者） @jiricom2 続）立つには難しい面もあったはず
デジタル庁が大切にしたい、アクセシビリティとアカウンタビリティ｜デジタル庁（準備中）
こんにちは、内閣官房ＩＴ総合戦略室の大橋 正司と申します。 4月12日から内閣官房に非常勤で採用された民間人材のひとりです。普段は人間中心設計（HCD）や情報設計（IA）の仕事をしています。 最初のnoteへの皆様のご意見をひとつひとつ拝見しながら、何を書こうか迷っていたのですが、今日はアクセシビリティとアカウンタビリティ（説明責任）についてお話をしたいと思います。前回のnoteで広野さんから「透明感」というキーワードが出ましたが、その土台になるのが、アクセシビリティとアカウンタビリティです。 まずはデジタル庁（準備中）による最近の情報発信について、お話ししておきたいと思います。デジタル庁（準備中）では、サイトを自前で実装せずにSTUDIOを使ってサイトを立ち上げ、noteなどの外部サービスを積極的に使って情報発信をしています（これは、官公庁ではちょっと珍しいやり方です）。外部サービスの利
Webエンジニアとしていま知っておきたいWebアクセシビリティ
この文章について これは Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」で基調講演をするにあたって、登壇内容を整理するために書いたものです。登壇内容とは一部に差異があります。 イベント映像 この文章はむちゃくちゃに長いので、登壇映像を見たほうがいいかもしれません。わたしの発表は13:23くらいから30分ちょっとです 登壇資料（内容は同一です） https://speakerdeck.com/ymrl/webenziniatosite-imazhi-tuteokitai-webakusesibiritei https://docs.google.com/presentation/d/1uhCvhh6sZCPUnReSBVDjvGfNAOTKbZ5Sxs8fYMlxMsI/edit?usp=sharing 目的 Web業界で「エンジニア」の肩書で仕事して
Webアクセシビリティ難しすぎる問題
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
アクセシビリティのためによく書く CSS - Qiita
アクセシビリティを意識した CSS に関するいくつかの tips です。 スクリーンリーダー用のテキスト テキストを視覚的には隠したいけどスクリーンリーダーには伝えたい、デザイン上にタイトルはないけどマークアップで見出しを入れて構造化したい要件などを実現するために、要素を隠すような CSS を書きます。 たとえば、Apple の ホーム にアクセスしてみると、次のような CSS で隠された h1 を見つけることができます。 .visuallyhidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: ins
Case Study on Color Ratio and Accessibility | Bounteous
Orange You Accessible? A Mini Case Study on Color Ratio I recently completed work for a client who used orange heavily in their branding: it was in their print ads, brochures, posters, and signage, and they wanted to incorporate it on their website. This led to a comparison of orange buttons. Can you guess which button is more accessible? If you guessed the left button, congrats! You are an access
文字色と背景色のコントラスト
コントラストに配慮した色の指定 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する 明度差 （color brightness difference） を求める計算式 色の差 （color difference） を求める計算式 計算例 － コントラスト計算例 計算式 － W3C が公開している計算式を使用して適切なコントラストを算出する 文字の色とその背景色のコントラスト（色の差、明度差）を十分にすると、文字の読みやすさが良くなります。すなわちアクセシビリティの面で考慮しなければならないことです。 適切なコントラストを適用するには、2000年4月26日付けで W3C 草案 （Working Draft） として公開されている 「Techniques For Accessibility Evaluation And Repair Tools」 のなかで紹介されて
【緊急提言】暴走事故はドライバーだけの責任ではない!! 天才エンジニアが見抜くクルマが改善すべき点とは - 自動車情報誌「ベストカー」
ここ最近、毎日のように報道され、ますます社会問題化しつつある深刻な高齢ドライバーによる暴走事故。 そこで、今回本誌連載、激辛試乗でおなじみの元GT-R開発責任者、水野和敏氏からの緊急提言としてこの問題について水野氏からの提案を2回にわけて、お送りしよう。 聞き手はこちらも同じく本誌26日号連載『ザ・インタビュー』でおなじみのフェルディナント・ヤマグチ氏。 文：水野和敏、フェルディナント山口／まとめ：ベストカー編集部 ベストカー2019年7月26日号 ■暴走事故にはドライバーにもクルマにも対策が必要だ（水野） フェルディナント山口（以下：フェル）：最近、高齢ドライバーによる暴走事故が相次いでいますが、水野さんはどのように思われますか? 水野和敏（以下：水野）：あれはね、ハッキリ言わせてもらえば踏み間違いもあるけどクルマにも課題があり、両方の対策が必要だよ。 フェル：う〜ん、運転している高齢ド
JIS X 8341-3:2016 概要
2016年9月 総務省「地方公共団体等におけるホームページの バリアフリー化に関する講習会」 講習会 JIS X 8341-3：2016 概要 植木 真（株式会社インフォアクシア） © Infoaxia, Inc. 2016. All rights reserved. 植木 真（うえき まこと） 株式会社インフォアクシア Webアクセシビリティ・コンサルタント Webサイトのアクセシビリティ対応、JIS X 8341-3 / WCAG 2.0対応のサポート JIS X 8341-3:2004原案、2010改正原案作成委員 W3C / WAI WCAGワーキンググループ メンバー 総務省「みんなの公共サイト運用モデル2015年度改定 に関する研究会」構成員 情報提供Webサイト（https://weba11y.jp/）を運営 ウェブアクセシビリティ基盤委員会 委員長 JIS X 8341-3
色のコントラストチェッカー | 文字色と背景色の組み合わせを確認
通常文字(22px未満)は、4.5 以上でAA、 7 以上でAAAです。 巨大文字(22px以上)は、3 以上でAA、 4.5 以上でAAAです。 太文字(14px以上)は、3 以上でAA、 4.5 以上でAAAです。 Web Content Accessibility Guidelines (WCAG) 2.0Web Content Accessibility Guidelines (WCAG) 2.0とは、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで、従うことで人々にとって利用しやすいウェブサイトとなります。達成レベルとして、AA(達成)、AAA(高いレベルで達成)があります。その中で、色のコントラスト比は次のように定められています。 文字の種類AAAAA通常文字 (22px未満)
Webアクセシビリティ対応で「音声読み上げ・文字拡大・色変更」は的外れ。本当に必要なのはSEO？ | 弁護士ドットコムがアクセシビリティに本気で取り組む狙い
なぜ、的外れなのでしょうか？ それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
入門者向け alt属性の書き方アドバイス
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
盲目のiPhoneユーザーに聞いた、視覚を使わない驚きのスマホ操作術 | スタッフブログ | マイネ王
画像：スマホのイラスト ！？ え、iPhoneってツルツルですよ！？ 触ってわかるボタン、ほぼないですよ！？ 『電話もメールもインターネットもしますよ』とのことだったのですが、 一体、どうやって使ってるの……！？ き………… 気になる〜〜〜〜！！！！ もっと話を聞かせて〜〜〜〜！！！！ 画像：ダイアログ・イン・ザ・ダーク前での社領の写真 ということで、外苑前にある施設 「ダイアログ・イン・ザ・ダーク」 にやって来ました！ 「ダイアログ・イン・ザ・ダーク」は、暗闇のソーシャル・エンターテインメント。完全な真っ暗闇の空間へグループを組んで入り、暗闇のエキスパートである視覚障がい者のスタッフの案内で、視覚以外の感覚を研ぎすませながら中を探検したりと、さまざまな体験ができる施設です。
車いすで飛行機に乗る時は | いすみ鉄道 社長ブログ
いすみ鉄道のようなローカル線は、鉄道会社といっても零細企業です。 こういう小さな会社は、社長が何を考え、どういうポリシ―や方向性で進んでいるのかを皆さまに直接お伝えし、ご理解いただくことが大切だと考えています。 このブログでは、地元の情報やイベントなども併せて、「いすみ鉄道の今日」をお伝えいたします。 どうぞお付き合いくださいますようお願い申し上げます。 赤組でもなく青組でもなく、アイスクリームの飛行機が車いすのお客様を乗せる乗せないでもめたようですね。 私も長年航空の現場で働いてきましたが、車いすのお客様がスムーズにご利用できることは、ふつうに考えたらあたりまえのことで、今回のアイスクリームさんは、搭乗ブリッジのない沖止めスポットに飛行機を駐機しているにもかかわらず、階段を上れないお客様のための手段を用意しておかなかったというのが、会社側としての敗因でしょうね。 これは言い訳ができないと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
お前らはまだ img タグの alt 属性の付け方を間違っている - Qiita
http://www.asahi-net.or.jp/~gx4s-kmgi/page04.htm
CUDガイドブック.pdf