コンテンツをポータブルでアクセスしやすくするための10の優れた方法

コンテンツ

• アクセシビリティは「機能」ではありません
• プラットフォームの定義
• コンテンツをポータブルでアクセスしやすい状態に保つ
• 1.HTML5から始めます
• 2.ワイアリア
• 3.doctypeを使用する
• 4.HTML5ドキュメントタグ
• 5.悪いリンク
• 6.画像–ALT対タイトル
• 人々に知らせる
• 概要
• 謝辞
• リソース

ケリーがiPhoneでタイプすると、フルートを吹いているように見えます。彼女はそれを顔に近づけ、指は信じられないほどのペースで動きます。彼女は書き終えて、入力したばかりのメッセージを読むために電話を私に渡します。完璧なスペルと文法があり、iPhoneのタッチキーボードを使用しているときよりもはるかに速く入力されました。

Kerieは、Fleksyというアプリを使用して、言葉に変わるパターンで電話の顔を指で横切るのを助けます。彼女はまた、ニュースを読んだり、ラジオアプリを聴いたり、Twitterをチェックしたり、電話で電車の時刻を検索したりします。彼女は完全に盲目です。

「公開」とは、人によって意味が異なります。一部の人々にとって、それは印刷された物理的な量の作品を制作することを意味します。他の人々は、出版をデバイスやアプリを介して書かれた作品を配布する機能と関連付けています。記事をブログにプッシュすることを意味するか、Google Plusの投稿を更新することを意味するかにかかわらず、人々はますます頻繁に、コンテンツをあらゆる形式で楽しむことができるようにすることとして公開を考えています。

現実には、期待はユーザー間で異なり、これらの期待は時間とともに変化します。かつてブログの最新の投稿を貪欲に消費した読者は、今では、都合のよいときにいつでも、そのブログの投稿、または任意の記事や本を読むことができると期待しています。今日のコンテンツは、ブログから電話でのReeder、iPadでのInstapaper、Whispernet経由でKindleに送信される電子メールバージョンに至るまで私たちをフォローしています。

読書のワークフローは人によって異なります。スクリーンリーダー、高コントラスト、拡大テキストなどのユーザー補助機能が必要な場合、作成者や出版社がマイナーではあるが必要な書式設定の詳細を考慮しないと、ワークフローが壊れてしまうことがあります。これを「ユーザー補助ボックスをオンにしない」とは考えないでください。代わりに、コンテンツを多くの潜在的な顧客にとって効果的にブラックボックスに変えていることを認識してください。

アクセシビリティは「機能」ではありません

聴覚と視力が低下している個人がアクセシブルなコントロールを使用しているのは事実ですが、他にも多くの人々がその恩恵を受けています。視力の弱い人は、フォントサイズを調整して、画面上のコンテンツをより簡単に読むことができます。色覚異常の人は、赤い警告テキストなどが実際に目立つようにカラーパレットを調整できることを高く評価しています。通勤時間が長い人は、スクリーンリーダーを使用して、読んでいる記事を聞きます。非ネイティブスピーカーは、キャプション付きのビデオとオーディオを使用して、新しい言語を理解しやすくします。これらのシナリオはすべて、コンテンツの範囲が広がり、ユーザーエクスペリエンスと共感が向上し、場合によってはさらに多くの収益が得られます。

アクセシビリティの意味の概要については、IanHamiltonの記事を参照してください。

プラットフォームの定義

コンテンツを読みやすくするために焦点を当てることができるフォーマットについてのいくつかの定義から始めましょう。

• HTML： HTML5を使用すると、Webは、ライターやパブリッシャーが自分の作品を紹介するのにさらに適した場所になります。のような新しいタグ 論文, セクション, ヘッダ そして フッター 現在、多くのブラウザに実装されており、半信頼性の高い方法で使用して、文章にセマンティックコンテキストを追加できます。さらに、今後のCSS3ページモジュールは、より固定されたページの読書体験を可能にすることを探している人にとっても興味深いかもしれません。
• EPUB： EPUBは、国際電子出版フォーラム（IDPF）の公式標準です。 EPUB3は2011年10月に承認され、以前のより静的なガイドラインではなく、HTML / CSSで可能なものに近い、よりスタイル設定されたカスタマイズ可能なコンテンツをパブリケーションに含めることができます。
• MOBI： Mobipocketの略であるMOBIは、Kindleやその他のデジタルリーダーで使用される形式です。 EPUBよりもカスタマイズ性は低くなりますが、必要に応じてAmazonへのコンテンツの公開に使用できるため、ここで説明します。 AbilityNetのRobinChristophersonによると、Kindleの一部のモデルは視覚障害者が利用できます。ただし、iOSのKindleアプリはそうではありません。 Kindleの新しいフォーマットであるKF8は、現在Kindle Fireでサポートされており、まもなく最新世代のKindlee-inkデバイスとKindle読書アプリに展開されます。
• PDF： PDFは、Web上でユビキタスなエンティティになりました。ほとんどのタブレットには、PDFを読み取り、それらを使用して支援技術を有効にするための優れた組み込み技術があるため、ここに含めます。 PDFの場合、決定要因はそれがどのように作成されたかです。アイルランド国立障害者局のアクセシビリティ開発アドバイザーであるAlanDalton氏は、「PDFをアクセシブルにすることはできますが、多くの人はそうしません。彼らは自分たちのツールが悪い製品を生み出していることに気づいていません。 HTMLになりなさい。」ナビゲーションとアクセシビリティはさておき、PDFもさまざまなサイズにうまく適応しません。スマートフォンでPDFを読み込もうとした人は誰でも、そのために必要な厄介なピンチ、ズーム、パンに慣れています。

このカテゴリに分類されないのは、コンテンツを取得して大きな画像に変換するアプリです。これにより、プラットフォーム間で外観とスタイルが同じになる可能性がありますが、非常に大量のダウンロードを作成しながら、多くのオーディエンスをブロックします。この問題は、Retinaディスプレイと2倍のサイズの画像について話し始めると悪化します。読みたいものが拒否された場合の感触をつかむには（それでも、とにかくお金を払う必要があります）、iOSのVoiceOverを介してほとんどアクセスできないNewsstandアプリに関するコメントを参照してください。

アクセシブルな技術ユーザーにとってこれらのタイプの雑誌がどのように見えるかを確認するには、私のビデオ埋め込みを参照してください。
VoiceOverなどのアクセシビリティツール：

コンテンツをポータブルでアクセスしやすい状態に保つ

ポータブルフォーマットに焦点を当てることで、コンテンツを処理して、より多くのブラウザー、電話、デジタルリーダーデバイス、および読書アプリケーションで幸せに暮らせるようになります。カスタムスタイルと優れたエクスペリエンスを維持しながら、これらの異なる形式間でコンテンツを適切に翻訳できるようにするには、コンテンツに対して何をする必要がありますか？

視聴者をできるだけ広くしたい、多くのユーザーのブラックボックスにコンテンツを閉じ込めたくないという人々のために、以下のガイドラインをまとめました。これらの手法は、ブログの投稿から、長い形式のジャーナリズム、自費出版を検討しているその他の作品まで、あらゆるものに適用できます。

1.HTML5から始めます

最初にHTML5でドキュメントを作成することにより、将来の心配が少なくなります。 HTML5マークアップは、ドキュメントを簡単にナビゲートし、他の形式に翻訳するのに役立ちます。最初からセマンティック情報が含まれていると、他の形式へのパブリケーションの「レトロフィット」が大幅に少なくなります。

2.ワイアリア

WAI-ARIAは、Web AccessibilityInitiative-Accessible Rich InternetApplicationsスイートです。これは、のプロトコルおよびフォーマットワーキンググループ（PFWG）によって作成された一連のガイドラインです。
W3C。 WAI-ARIAは、障害を持つ人々がWebコンテンツとアプリケーションにアクセスしやすくする方法を定義し、Ajax、HTML、JavaScript、および関連テクノロジーで開発された動的コンテンツと高度なユーザーインターフェイスコントロールを支援します。この記事のテクニックの一部はWAI-ARIAガイドラインに基づいています。この記事はすべての仕様を網羅するのに十分な長さではありませんが、これらが推奨される理由とベストプラクティスの詳細についてはチェックすることをお勧めします。それらを実装します。

3.doctypeを使用する

特定のDoctype自体を使用しても、関連するHTMLコードのアクセシビリティには影響しませんが、Doctypeを使用する重要な理由は、ブラウザの癖モードがトリガーされないようにすることです。単に使用する ！DOCTYPE html> それが起こらないようにするためです。

4.HTML5ドキュメントタグ

ドキュメントの適切なナビゲーションは、そのアクセシビリティインデックスに大きく影響します。私がインタビューしたアクセシブルテクノロジーの多くのユーザーは、コンテンツプロバイダーや開発者が、ナビゲーション機能のためにドキュメントに適切なマークを付けていないことに不満を表明しました。これらのタグは、多くのdivを使用するよりも、ドキュメントのセクションにより多くのコンテキストを提供します。

• ヘッダ そして フッター 両方とも1ページで複数回使用できます。これらは、ドキュメントのそれぞれのメインヘッダーまたはフッターを示すことも、記事またはセクション内のヘッダー/フッター情報に使用することもできます。
• さておき は、本のサイドバーなど、ドキュメントを補完するが、その理解にとって絶対的に重要ではないセクションに使用するのに適したタグです。
• セクション アイデアを分割したり、コンテンツをグループ化したりする方法であり、それは理にかなっています。
• 記事 は、残りのコンテンツなしで存在する可能性のある独立したスタンドアロンの部分です。これらのタグを適切に使用すると、コンテンツの構造が正しく解釈されるようになります。

5.悪いリンク

CSSを使用すると、リンクやボタンに背景画像を使用できます。これは、タイポグラフィをより細かく制御できるため、Webデザイナーにとって素晴らしい効果です。しかし、それは人々がテキストの説明を含めることを忘れることにつながりました。画像内でテキストを使用している場合でも、アクセス可能な状態を維持するようにしてください。これは、SEOや
国際化。

例：

a href = "/ contact"> / a>

これは悪いです。

a href = "/ contact">お問い合わせ/ a>

ずっといい。

6.画像–ALT対タイトル

人々はしばしばどちらかを含みます alt または 題名 画像内の属性ですが、誤解されることが多く、冗長であるように見えるため、両方ではありません。混乱を解消するために、 題名 ツールチップに表示される可能性のある情報など、アドバイザリ情報を表すことができます。これにより、多くの人がブログで使用している手法である画像の上にマウスを置くと、追加情報が得られます。ただし、タッチデバイスの成長に伴い、この種の情報は役に立たなくなります。

Alt 一方、支援技術によって使用され、要素にコンテキストを提供します。あなたは使用する必要があります alt あなたの画像にそれが有用な情報であることを確認してください。使用する img alt = "" src = "1348.webp">

人々に知らせる

コンテンツが複数の形式で利用できる場合は、サイトでこれを発見する方法があることを確認してください。 「このメールの表示に問題がある場合は、オンラインでお読みください
多くのメールニュースレターの上部にある「バージョン」メッセージ。コンテンツに対しても同じことを行うようにしてください。アクセス可能なPDFまたはオーディオバージョンとePubがある場合は、ユーザーがその情報を見つけられるようにしてください。コンテンツが検索可能で読み取り可能であることを確認するためのテスト。