A最低限の基準です。この基準を達成しないとWebサイトを閲覧できない人が存在しうるとされます。 AA望ましい基準です。この基準を達成すればWebサイトの閲覧が困難なケースは多くないとされています。 AAA発展的な基準です。この基準を満たすと最も閲覧しやすいWebサイトと言えます。
1行で alt属性は、「全ての 画像をそのalt属性のテキストに置き換えたときにページの意味が変わらない 」ようにつける。 (HTMLの標準規格書より) マジでこれに尽きる。 具体例 例1:ロゴ ❌ 間違ったマークアップ
川尻大介(編集者) @jiricom2 昨日アップルストアで応対して下さったスタッフが目の見えない方だった。恐らくインカム(音声)と連動していたのだと思うが、iPhoneを手探りで上手に操りながら、受取り商品の確認から事前決済のフィニッシュ、受け渡しまでが自然に行われるのを見て率直に驚いた。さすがにアップルは進んでいるなぁと 2021-12-09 00:15:46 川尻大介(編集者) @jiricom2 続)その時は思ったのだが、この体験がもたらした意義がわかったのは帰りの電車に乗ってしばらく経ってからのことだった。たぶん、その彼(仮にJさんとする)は他のスタッフと同等にシステムに精通している(私がいくつか投げかけた質問にも立て板に水で答えてくれた)。だからと言ってすぐに店頭に 2021-12-09 00:16:27 川尻大介(編集者) @jiricom2 続)立つには難しい面もあったはず
こんにちは、内閣官房IT総合戦略室の大橋 正司と申します。 4月12日から内閣官房に非常勤で採用された民間人材のひとりです。普段は人間中心設計(HCD)や情報設計(IA)の仕事をしています。 最初のnoteへの皆様のご意見をひとつひとつ拝見しながら、何を書こうか迷っていたのですが、今日はアクセシビリティとアカウンタビリティ(説明責任)についてお話をしたいと思います。前回のnoteで広野さんから「透明感」というキーワードが出ましたが、その土台になるのが、アクセシビリティとアカウンタビリティです。 まずはデジタル庁(準備中)による最近の情報発信について、お話ししておきたいと思います。デジタル庁(準備中)では、サイトを自前で実装せずにSTUDIOを使ってサイトを立ち上げ、noteなどの外部サービスを積極的に使って情報発信をしています(これは、官公庁ではちょっと珍しいやり方です)。外部サービスの利
この文章について これは 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業界で「エンジニア」の肩書で仕事して
はじめに 私はデザイナー兼フロントエンドエンジニアというような立ち位置で、勤務するfreee株式会社のアクセシビリティガイドラインの作成に関わったり、アクセシビリティまわりの仕組みの整備や社内エバンジェリストみたいなことをしています。 もともと私はWebアクセシビリティという分野が、重要なものである以上に技術や考え方として面白いと思ってやっているうちに気付いたら仕事で大きなウェイトを占めるようになってしまったタイプの人です。しかし、そうではない人たちにその重要さを説明したり、対応をお願いしたり、そのための資料を作ったりしているうちに、「やっぱWebアクセシビリティって難しいんだなぁ」と思うようになってきたので、それについて書いてみようと思います。 なお、背景を説明するうえで必要なので社名を出しましたが、あくまでこの文章は個人の見解であり、所属組織とは関係がありません。 誰のためにやるのかが
アクセシビリティを意識した 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
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日号 ■暴走事故にはドライバーにもクルマにも対策が必要だ(水野) フェルディナント山口(以下:フェル):最近、高齢ドライバーによる暴走事故が相次いでいますが、水野さんはどのように思われますか? 水野和敏(以下:水野):あれはね、ハッキリ言わせてもらえば踏み間違いもあるけどクルマにも課題があり、両方の対策が必要だよ。 フェル:う〜ん、運転している高齢ド
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未満)
なぜ、的外れなのでしょうか? それは、実際にユーザーが使っているシーンを考えればわかります。たとえば、PCを起動してからサイトのコンテンツを読むまでの流れを書き出してみましょう。 ブラウザを立ち上げるアドレスバーに文字列を入れて検索する検索エンジンの検索結果から該当のコンテンツを探すサイトに訪問し、コンテンツを読むサイト側で用意した支援機能は、4の「サイトに訪問し、コンテンツを読む」の段階になって初めて使えるものです。サイトに「音声読み上げ機能」があれば、そのサイトのコンテンツを読み上げることはできますが、他のサイトのコンテンツを読むことはできません。そしてもちろん、ブラウザを立ち上げたり、検索文字列を入れたりする際にも、この機能を使うことはできません。 もし、このような支援機能にニーズがあるとすれば、普段は目で見てアクセスする人が「何らかの事情でそのサイトのコンテンツだけ読み上げで聴きた
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
画像:スマホのイラスト !? え、iPhoneってツルツルですよ!? 触ってわかるボタン、ほぼないですよ!? 『電話もメールもインターネットもしますよ』とのことだったのですが、 一体、どうやって使ってるの……!? き………… 気になる〜〜〜〜!!!! もっと話を聞かせて〜〜〜〜!!!! 画像:ダイアログ・イン・ザ・ダーク前での社領の写真 ということで、外苑前にある施設 「ダイアログ・イン・ザ・ダーク」 にやって来ました! 「ダイアログ・イン・ザ・ダーク」は、暗闇のソーシャル・エンターテインメント。完全な真っ暗闇の空間へグループを組んで入り、暗闇のエキスパートである視覚障がい者のスタッフの案内で、視覚以外の感覚を研ぎすませながら中を探検したりと、さまざまな体験ができる施設です。
いすみ鉄道のようなローカル線は、鉄道会社といっても零細企業です。 こういう小さな会社は、社長が何を考え、どういうポリシ―や方向性で進んでいるのかを皆さまに直接お伝えし、ご理解いただくことが大切だと考えています。 このブログでは、地元の情報やイベントなども併せて、「いすみ鉄道の今日」をお伝えいたします。 どうぞお付き合いくださいますようお願い申し上げます。 赤組でもなく青組でもなく、アイスクリームの飛行機が車いすのお客様を乗せる乗せないでもめたようですね。 私も長年航空の現場で働いてきましたが、車いすのお客様がスムーズにご利用できることは、ふつうに考えたらあたりまえのことで、今回のアイスクリームさんは、搭乗ブリッジのない沖止めスポットに飛行機を駐機しているにもかかわらず、階段を上れないお客様のための手段を用意しておかなかったというのが、会社側としての敗因でしょうね。 これは言い訳ができないと
2015年2月13日に開催された「Web担当者のためのアクセシビリティセミナー [2015年2月] 〜国内・海外動向を踏まえたJIS X 8341-3:2010の活用〜」のセッション2 講演「障害者差別解消法の概要とWebアクセシビリティ」の資料です。講師および資料作成をご担当いただいたのは、内閣府障害者政策委員会委員長、静岡県立大学国際関係学部の石川 准 教授です。Read less
by Marco / Zak ウェブサイトやアプリをデザインするにあたって、使いやすい・読みやすいコンテンツを作成するために必ず考えなければいけないのが「情報をどのように配置するのか」ということ。情報の多くは文字や文章で表示されるということで、ウェブデザイナーのViljami Salminenさんが、なぜウェブデザインにとって文字列が重要になるのか、どうすれば読みやすい文字列をデザインできるのかをまとめています。 Typography for User Interfaces | Viljami Salminen https://viljamis.com/2016/typography-for-user-interfaces/ ◆グラフィカルユーザインタフェース(GUI)の成り立ち GUIの歴史の中で重要な転換点にいるのが、マウスによるウィンドウ操作を初めて導入したゼロックスのコンピューター
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く