画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt！と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合
Account Suspended This Account has been suspended. Contact your hosting provider for more information.
Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ
Truwex manages website compliance with web accessibility, online privacy, and quality standards. Truwex is a web governance and testing solution, all in one product. Web compliance managers can use Truwex to: Define a uniform website standard. Monitor compliance status and automatically generate reports for upper management. Set action items for website owners and web developers. Web develope
Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。 2007年02月09日 装飾およびレイアウト目的の画像の代替テキスト アクセシビリティ・エンジニア 中村 本Blog上でも何度か取り上げておりますが、アクセシビリティ向上のためには画像の代替テキストは必須です。このことについては、JIS X 8341-3やWCAG 1.0、そして策定中のWCAG 2.0の草案でも、それぞれ表現は異なるものの明確に述べられています。例えばJIS X 8341-3の場合、5.4 a)において、以下のように記されています。 画像には、利用者が画像の内容を的確に理解できるようにテキストなどの代替情報を提供しなければならない。 また、HTML 4.01の仕様書でも、img要素のalt属性は必須であることが明記さ
集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか？ 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日本語環境以外
この文書は2つの質問に答えるために書いてみたんだ。 1コ目は、「なんでサイトをアクセシブルにした方がいいのか」。 だから、ここの情報はサイトを持ってない人には向かないかも。 2コ目は、「じゃどうしたらサイトをアクセシブルにできるのか」。 1コ目の答えが納得できるものじゃなかったら、2コ目はどうでもいいってことになるよね。 じゃ行ってみよう。 Dive Into Accessibility（英語版）をダウンロードする HTML（英語版）をダウンロード PDF（英語版）をダウンロード Dive Into Accessibilityを読む 目次 掲載された順序のままにならべてある、すべての情報はこちら。はじめてココ の文を読むときにおすすめの読み方。 人に基づいた情報分類 ここではどんな人に役立つかによって、情報が分けられています。 障碍に基づいた情報分類 ここではどういった障碍があるときに役立
唐突ですが、ブログやWebサイトを更新する際に、よりアクセシビリティが高いコンテンツをどうすれば書くことができるのか、そういったガイドラインを公開します。 といっても、元々は他団体向けにWebサイトを制作している際に、「結構、Webには詳しい」方にコンテンツを書いてもらっていたのですが、時折「概 要」とか、「2007年1月11日（水）」といった記述が見られ、「あー、このままでいくと、更新作業を今後やってもらうのってすごく不安だな」と思いました。そこで、どうすれば音声ブラウザなどがうまく対応できるようにコンテンツを書けばよいのかをガイドラインにまとめてみたのですが、せっかくですので、ウェブ上で公開することにしました。 前提として、 アクセシビリティに詳しい方にとっては、「何を今更」という内容。 デザインやマークアップよりも、コンテンツを書く＝ウェブライティングに特化したガイドライン。 ブロ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
SoftwareRationalEnsure Web site security and complianceIBM Rational Web site security and Web site compliance Web site security and compliance should be a top priority for organizations intent on protecting sensitive company, customer, and employee data, on meeting regulatory and corporate compliance requirements, and on defending against the high cost of a data breach. Web sites and their applica
8月30日、「Webアクセシビリティ中級講座」を受講した。主催の「ハーモニー・アイ」は、ユニバーサル社会形成をモットーに活動しているNPO法人。「アクセシビリティ・ユーザビリティチェック」や、研修・セミナーなどを開催されている。 今回の講座では、実際に視覚障害のある方を招き、ユーザー・テストをライブで行いながら、実際のサイトの手直しを行い、さらにその結果をレビューするという試みが行われた。 一概にアクセシブルといっても、視覚障害だけでなく、高齢者対応という点では実際のところ、かなり身近な問題だ。私自身、それなりに取り組んではいるものの、今回のセミナーを受講して、たくさんの「気づき」を得られた。 タイトルとh1がほぼ同じ内容の場合、音声ブラウザでは、ナビゲーションスキップでh1すると、同じ内容が二回読まれることになる。ジャンプ先の位置を要検討。 たとえ、その画像を見ることができなくても、プリ
コミュニケーションの優れたウェブサイトを表彰する、日本ウェブ協会主催アックゼロヨン・アワード2007のご案内です。応募方法、審査員紹介、結果発表等。私たちは、広く多様な世界の中で変化する人々の意識やルールに対応して豊かな社会を築いていくには、コミュニケーションが重要であると考えています。 IT技術は急速に進化していますが、広く普遍的なものとなるためにもユニバーサル・コミュニケーションの浸透が急務となっています。 官公庁と企業が一体となった取り組みもはじまり、個人や団体での活動も活発になってきています。 アックゼロヨンは2004年より、誰にとっても「ウェブは使いやすいものであるべきだ」と考え、それが当たり前の価値観となるための活動をおこなって参りました。 アクセシビリティやクリエイティビティの両立といったウェブサイト自体のあり方だけでなく、そのうえで実際に成り立つコミュニケーションというもの
A Single Article Read it, comment, and share it with your friends Let’s talk about bad ideas. Not the bad ideas we all know about, like using Flash for navigation, making sites Javascript-dependent or using inaccessible techniques like layout tables and captchas. I’m talking about the bad ideas that get in the minds of standards-based developers. These are things that even popular galleries like S
Description The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast "when viewed by someone having color deficits or when viewed on a black and white screen"[W3C]. The tool will indicate that the colours pass the test if both the colour difference and the brightness difference exceed their threshold. It will indicate
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
E-mailｼ嗹ebmaster@zspc.com Copyright © 1996-2000 ZSPC. All Rights Reserved. All pages except color chart are written in Japanese. g src="/static/zspc.com-vcss.gif" alt="Valid CSS! | " height="31" width="88" border="0"> g height="31" width="88" src="" alt="Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0" border="0">
What’s GrayBit Do? GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast. More Info » How’s GrayBit Work? In the supplied GrayBit form, enter the URL of a page you wish to test. Submit the form. Wait for results.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
