機種依存文字とUnicode - WebStudio
導入 機種依存文字と呼ばれる文字があります。 例えばWindowsでは、 大文字のローマ数字(ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ)、 小文字のローマ数字(ⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹ)、 丸囲み数字(①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳)、 丸囲み文字(㊤㊥㊦㊧㊨)、 カタカナ表記の単位(㍉㍍㌔㌘㌧㌦㍑㌫㌢)、 単位記号(㎝㎏㎡)、 複数のアルファベットを合成した文字(㏍℡№)、 元号(㍻㍼㍽㍾)、 会社名等で用いられる括弧囲み文字(㈱㈲㈹)等が機種依存文字と呼ばれています。 機種依存文字は一般的に、異機種間でデータの交換を行った場合、 例えばWindowsで作成したテキストファイルをMacintoshで表示した場合に文字化けしてしまうので、 これら異機種でデータ交換することを前提としたインターネットでは利用するべきではないと言われています。 しかし、これらは機種依存文字と呼ばれているものの、 その意味はあ
alt属性の使い方が厳密に規定されたHTML5のimg要素
HTML5では、新要素が追加されただけではなく、HTML4からある既存の要素についても、再定義しているのが特徴です。その中でも、img要素は、他の要素に比べても、すごい力の入れようで、定義されています。 特筆すべき点として、alt属性が挙げられます。 HTML4のimg要素の仕様では、alt属性は、イメージをレンダリングできないブラウザーの場合に表示する代替テキストとして使われ、イメージの簡単な説明を入れる、という程度にしか、定義されていませんでした。そして、もし詳細な説明を入れたい場合は、オプションで、longdesc属性を使うこととなっていました。これまでは、アクセシビリティの観点から、alt属性の使い方についてガイドラインや、業界のコンセンサスはありましたが、HTML準拠要件という形では存在していませんでした。 ところが、現時点でのHTML5のimg要素の仕様では、longdesc属
HTML5のimg要素のalt属性の仕様は読んでおくべきだと思う。
読んでおくべき。で終わってるタイトルが、自分っぽくなくて違和感有り有りだったの何となく変更。 都道府県選択するやつ。がもしかしたら一日辺りの過去最高のアクセスを稼いだかも知れないという現実。 7月16日のアクセスが17,000PVオーバーって何だ・・・おかしいな、ウチはCSSネタが主力なのに・・・あぁ複雑。 本題ですが、HTML5のimg要素のalt属性に関する仕様がすごい事になってますね。 ちょっと読んでて泣きそうになるくらい事細かに書かれています。 これは、コーディングを生業としている人間なら覚えていなければならないと思うので、必読すべき内容です。 4.8.2.1 Requirements for providing text to act as an alternative for images 4.8.2.1 イメージの代替として作用するテキストを提供するための要件 ざっくりまとめ
サイトのアクセシビリティをチェックする12のツール | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて12 Tools To Check Your Site’s Accessibilityのタイトルのもと、Webページのアクセシビリティをチェックするための12のツールを紹介している。紹介されているツールは次のとおり。 ACTF aDesigner (視力障害者向けのアクセシビリティテストツール。Eclipse向けのプラグインで、Windows XPはまたはそれ以降のバージョンのOSで動作) Adobe Dreamweaver CS4 accessibility (Adobe Dreamweaver CS4向けに用意されているアクセシビリティ検証ツール) Contrast Analyser (2色
ウノウラボ Unoh Labs: ユーザビリティ・ガイドライン
sashaです。 naoya君が前回のエントリーで振ってくれたように、ジョエルテストの話から、ユーザビリティ・テストをどこまで行うかという話になりました。 私が今まで見たユーザビリティ系の記事の中には、追求したら悟りが開けそうな、限りなく奥深いものもありましたが、適度に深く、満遍なくカバーしているユーザビリティ・ガイドライン（原文）を見つけ、以降これを参考にしています。少し前に翻訳しましたので、今日はそれをご紹介いたします。 一般ユーザー向けのWebサービスでは、全部のチェック項目が該当するわけではありません。個人的には、各項目のスコアより、「スコアの説明」という欄を重視しています。現状では何が問題であり、どう解決するべきなのか、そういった思考のプロセスが、「ユーザーのことを思うこと」だと思うのです。 いま、ウノウではフォト蔵のデザイン見直しを行っております。私たちのデザインを省み、
アクセシビリティから考える画像のマークアップ
はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第4回目となる今回は、「画像の代替テキスト」について扱います。「画像の代替テキスト」は、Webアクセシビリティの指針である「WCAG 2.0（Web Content Accessibility Guidelines 2.0）」や「JISX-8341-3（JIS X 8341-3:2004 高齢者・障害者等配慮設計指針－情報通信における機器、ソフトウェアおよびサービス－第3部：ウェブコンテンツ）」の中でも扱われている基本的な部分です。「画像の代替テキスト」について、前回の記事で紹介した「構文の妥当性」と「目的の妥当性」の両方の側面からみていくことにしましょう。 対象読者 XHTMLと
富士通株式会社 本店・川崎工場ご案内 視覚に障害のある方へのご案内 - 富士通
Skip to main content Japan 会社概要 プロフィール 事業内容 役員一覧 組織 富士通の歩み（沿革） 拠点情報 営業拠点 事業所 工場 海外支店、駐在員事務所 ショールーム 学校、研修施設、病院 等 国内グループ会社 海外拠点、海外グループ会社 国内グループ会社 海外拠点、海外グループ会社 富士通販売パートナー 富士通株式会社 本店・川崎工場ご案内 視覚に障害のある方へのご案内 ページの先頭へ 関連リンク 株主・投資家の皆様 採用情報 購買活動 広告宣伝 プレスリリース 富士通からのお知らせ イベント、セミナー ソーシャルメディア公式アカウント開設ポリシー 富士通株式会社 会社案内パンフレット 富士通株式会社 会社案内パンフレット PDFダウンロード (3.32 MB , 8 pages) このサイトについて 個人情報保護ポリシー お問い合わせ サイトマップ Cop
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
ユーザビリティテストと「poo（プリントアウト最適化）」 | 京都のSEOコンサルタント松尾茂起のブログ
ユーザビリティテストと「poo（プリントアウト最適化）」:京都のSEOコンサルタント松尾茂起のブログ 京都のSEOコンサルタント松尾茂起のブログTOP > > ユーザビリティテストと「poo（プリントアウト最適化）」 気がつけば2月も終わり。 1ヶ月近く、このSEOブログの更新ができていませんでした。 「このサイトはコンピュータに損害を与える可能性がありますとは？」の記事って、一体いつの話だよ、っていう感じです。（SEO業界は変化が早いので） で、1ヶ月近く更新していなかった当SEOブログの順位はというと・・・・・・ ・・・ 特に変化ありません。 今月は賢威のリニューアル作業でてんてこまいでした。 自社商品の話をするのもあれなんですが、今回のテンプレート改良の第一のテーマを「ユーザビリティの改善」に定め、色々なことを試しました。 その一つが「ユーザビリティテスト」の導入。 「ユーザビリティ
ユーザビリティ・アクセシビリティの入門リソース - Trans
当エントリーはイメディオで2月28日に実施する『初級Webマスターを卒業したい人のための「使いやすいWebサイト」構築術』のフォロー用エントリーです。 はじめに このエントリーを書き始めてから思い出したのですが、よくよく考えてみるとlevaさんが下記のエントリーでまとめてくれていています。 ウェブユーザビリティについて考え始めたい人にオススメのウェブページ集 ウェブユーザビリティについて考え始めたい人にオススメの5冊 こちらで紹介されているものは僕も推薦できるものばかりですので（全部読んだわけでもないのですが）、当エントリーではちょっと違った視点からユーザビリティ・アクセシビリティの入門リソースを紹介したいと思います。 書籍 誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書) 作者: ドナルド・A.ノーマン,D.A.ノーマン,野島久雄出版社/メーカー: 新曜社発売日:
HTMLのマークアップ時に目的に合った要素を選ぶ方法
本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正しいかどうか」はツールを使ってチェックすることができますが、「目的に合っているかどうか」については人間が判断する他ありません。どの要素でマークアップするか、判断に迷う部分について掘り下げて考えてみましょう。 はじめに 本連載では、Web標準のメリットを最大限に生かすことをテーマに、仕様書には書かれていない部分を中心に取り上げ、実際のWeb制作現場で起こり得る問題について、解決の糸口をたらしていきたいと思います。 連載第3回目となる今回のテーマは、「目的にあった要素選び」です。コーディングの際、「構文的に正
アクセシビリティメモ/社内用「アクセシビリティJIS(JIS X 8341-3) 理解度テスト」をシェア
アークウェブアクセシビリティWiki Web制作会社アークウェブのスタッフが、アクセシビリティに関するTips・ノウハウをまとめているWikiです http://www.ark-web.jp/accessibility/235.html トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ] アクセシビリティメモ/社内用「アクセシビリティJIS(JIS X 8341-3) 理解度テスト」をシェア アークウェブでは昨年後半に、書籍「よくわかる ウェブ・アクセシビリティ&ユーザビリティ(改訂版)」をテキストにとしてアクセシビリティの勉強会をXR(エクストリームリーディング)形式で行いました。 またその後で、社員全員が確実に知識を活かせるようにするためにペーパーテストを作成して試験を行い、スタッフ全員
植木真に学ぶ 改正版JISの達成基準と実装方法 | ロクナナワークショップ イベント企画
この度はご協賛企業様のご協力により アフターパーティ（懇親会）の参加費が無料 に変更になりました。本編終了後お時間のご都合のつく方は、是非ご参加いただき、交流の場としてご活用ください。 2004年6月に制定されたWebアクセシビリティの日本工業規格「 JIS X 8341-3 」の改正版が、W3C（World Wide Web Consortium）勧告となった「 WCAG 2.0 （Web Content Accessibility Guidelines 2.0）」をほぼそのまま採用し、2010年8月20日に公示されました。 本イベントでは「WCAG 2.0」と「 JIS X 8341-3:2010（改正版JIS）」両方のワーキンググループに参画され、ウェブアクセシビリティ基盤委員会（WAIC：Web Accessibility Infrastructure Committee）の副委員
Google検索結果ページのアクセシビリティ - Trans
Googleの検索結果ページがアクセシビリティの観点からいろいろと実験されています。この動きは本当に面白いです。 Google検索結果のページ 百聞は一見にしかずということで、まずはこれを見てください。 これがGoogleの検索結果のページです。普段見ている検索結果のページとはちょっと違いますね。検索結果のアイテムにフォーカスが当たり、フォントサイズが大きくなっています。その上で、そのアイテム周りに薄い青色の背景色がかけられています。 この検索結果をどのように出したかと言いますと、 Google Experimental Searchのページへ行く Accessible ViewのJoin this experimentをクリック Google（英）で何か検索する という流れです。Official Google Blog: Accessible View: An ARIA for web
ズーム機能と文字サイズ変更機能のこれから | Web標準Blog | ミツエーリンクス
CSS Zen Gardenの創始者であるDave Sheaが、“Zoom”という記事で、ブラウザーのズーム機能の普及がこれからのWeb制作にどのような影響を及ぼすかを投げかけたことで、活発な議論が行われています。 画像やレイアウトを維持しながらページ全体を拡大するこのズーム機能は、Internet Explorerでは7から、Firefoxでは3から、そしてOperaにはかなり前のバージョンから搭載されています。従来からのテキストサイズ変更機能もIEやFirefoxには残っていますが、現在はズーム機能のほうをプッシュしているようです。Safari（WebKit）では今のところテキストのサイズ変更のみを搭載していますが、開発版ではズーム機能が実装され、デフォルトの挙動として採用されているとのことです。 つまり来年には、どのブラウザーもズーム機能を実装しているものと考えられます。ズーム機能の
CSS Nite in Osaka, Vol.12 「alt属性考」スライド公開 - Trans
一昨日、CSS Nite in Osaka, Vol.12に来ていただいた皆様、ありがとうございました。 さて、とりあえずなのですが、その際のスライドを公開します。 alt属性考View SlideShare presentation or Upload your own.ちなみに、何が悪いのか、SlideShareのほうはある特定の条件の画面で背景が真っ赤になるという摩訶不思議な現象も体験できます。 PDF版（5.9MB）もあります。 音声はCSS Nite公式ブログのほうで後日聞くことができるようになると思いますので、そちらも聞いてみてください（後ろの方で聞いていた方から聞こえづらかったという意見も伺いましたし）。 あと、最後に触れたのですが、インクルーシブデザインワークショップ with Re:Creator's Kansai、やります。とりあえず、ご報告。これはまた別のエントリーで
Web制作者ってとりあえずalt属性は空にしておけばいいって思ってるよね？ - Trans
アクセシビリティの基本でありながら、奥が深いalt属性。こんな視点もあるのだということを書いておきます。 追記（2008年7月14日）：文章中に誤解を招く表現がありましたので、文章を追記しました。 ある視覚障害者の意見 上のタイトルは皆さんを煽っているわけではなく、僕が実際に言われたこと。 どこのセミナーか講演会かは覚えていないのですが、決してプロレベルではないが自分でもWebサイトを制作できる全盲の視覚障害者（スクリーンリーダー利用者）がそのときに言っていた言葉。 もう少しちゃんと説明すると、もし何らかの画像があった場合に、僕たちのようなWebサイト制作者がそのimg要素のalt属性に何を入れればよいのかをパッと閃かなかったときに「とりあえず」alt属性を空にしているよね、と言われたということです。 僕はこれを言われたときに本当に胸に刺さるものがありました。思い当たる節が多すぎた（追記（
「生活の質」を向上させるWebサイトとは
企業や官公庁がWebサイト上で様々な情報やサービスを提供するようになるにつれ，「様々な人がWebサイトにアクセス可能かどうか，Webサイトから情報を入手できるどうか」という「Webアクセシビリティ」が，非常に重要な課題になっている。利用者がこうした情報やサービスを入手できるかどうかが「生活の質（Quality of Life：QOL）」を左右すると言っても過言ではないからだ。 Webアクセシビリティ・ガイドラインの「JIS X8341-3」策定の中心的人物である東京女子大学の現代文化学部コミュニケーション学科教授である渡辺隆行氏と，インフォアクシア代表取締役の植木真氏の2人が，ガイドライン策定までの道のりと最新の事情，アクセシブルなサイト制作のキモを語る。（聞き手＝矢野りん／ライター） ・第1回 Webアクセシビリティとは何か？ ・第2回 世のため人のためだけでは長続きしない ・第3回 リ
base要素とナビゲーションスキップとアクセシビリティと。 - Trans
2008年4月14日21時：追記 はてブのコメントに関して書き足しました（文末）。 base要素とナビゲーションスキップを同時に実装すると、そのナビゲーションスキップは本当に機能していますか？ base要素とその使い道 いきなり引用で申し訳ないのですが、base要素とは、 HTML 文書の基準 URI を指定します。href属性に書かれた URL が、この文書の基準 URL とされ、相対参照を解釈する際に利用されます。 base要素@ばけらの HTML リファレンス(未完成) とのことでして、コードはこんなふうに使います。 <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <base href="http://www.123kobe.com" /> HTML文書のURLの起点を作るみたい
hn要素を各エリアに配置し、アクセシビリティを高くする。 - Trans
ページの各エリアに対してhn要素を使い起点を設けることにより、アクセシビリティを高めることができるかもしれません。 ある全盲の音声ブラウザユーザの意見 最近、ある全盲の音声ブラウザユーザの意見を聞く機会がありました。彼女が主張する使いやすいWebサイトとは以下の3つとのことでした。 ページ全体の構造がイメージしやすいこと 迷子にならないように道しるべがあること 自分の行きたい場所にすぐに行けること 1つ目はWebサイトの標準的なデザインに従えば、ある程度達成できます。このあたりは、Alertbox: ウェブデザイン標準の必要性（2004年9月13日）を参考にしてください。 また、3つ目はWebコンテンツJISにもあるナビゲーションスキップである程度対応できます。ただ、ジャンプするのはメインコンテンツだけにするべきか、それともサブナビゲーションも入れるべきかなどの問題もあるとは思いますが。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
