👨🏼‍🏭 👨‍🎨 🍸 視覚障害を持つ人々のための州下院ウェブサイトの特別バージョンの開発について 🏟️ 🎱 〰️

州下院のウェブサイト上の新しいアイテムに関する一連の記事から。 前： first 、 secondおよびthird 。

12月上旬に、視覚障害を持つ人々のためにState DumaのWebサイトの特別バージョンが開始されました。そのようなサイトの開発の特徴に関する情報を共有したいと思います。

特別なバージョンのアドレス： spec.duma.gov.ru

特別バージョンの開発全体は、論理的に4つの段階に分けることができます。

現在の標準とGOSTの分析。
既存のソリューションの分析。
分析されたデータの一般化。
ウェブサイトの開発。

しかし、最初に、ロシアと世界のビジョンの問題に関するいくつかの数字を示します。

いくつかの統計

世界保健機関によると、

3900万人の盲人と2億4600万人の視覚障害者。 [7]

ロシアで登録されている視覚障害者の数は218千人で、そのうち完全に盲目な人は10万3千人です（2009年のデータ）。この金額のうち、22％が労働年齢の若者です。すべての視覚障害者のほぼ5人に1人。 [9]

視覚障害のある人には別のカテゴリーがあります-色覚異常です。色覚異常または色覚異常は、1つまたは複数の色を3つの原色（赤、緑、青）から区別できないことからなる、人の視覚の遺伝的（あまり一般的ではない）特徴です。そのような人々は総人口の4〜8％を占め、弱い半分の疾患の割合は1％以下です[4] 。

現在の標準とGOSTの分析

実際、このトピックにはGOSTが1つだけあります-GOST R 52872-2007「インターネットリソース。視覚障害者のためのアクセシビリティ要件。」彼の主なポイントは次のとおりです[8] ：

視覚障害者がインターネットリソースに完全にアクセスするには、情報をテキスト形式で提示する必要があります。
画像には、説明テキストを添付する必要があります。ほとんどの場合、目の不自由なユーザーのグラフィックファイルへのアクセスは不可能または非常に困難です。
テーブルに大きなネストを設定しないでください。テーブルに提示された情報へのアクセスは、テーブルのセルに従って順番に実行されます。
1つのテーブルには15個以下のセルが必要です。 1つのテーブルの別のテーブルの入れ子レベルは3以下でなければなりません。
1つのテーブルには15個以下のセルが必要です。 1つのテーブルの別のテーブルのネストレベルは3以下でなければなりません

本当に完全で詳細なものは、W3 Webコンテンツアクセシビリティガイドライン（WCAG）2.0、またはロシア語ではWebコンテンツアクセシビリティガイドラインです。

この標準は、4つの基本原則[6]に基づいています。

知覚。ユーザーインターフェイスの情報とコンポーネントは、ユーザーが知覚できるような形式でユーザーに提示する必要があります。
操作性 。ユーザーは、ユーザーインターフェイスとナビゲーションのすべてのコンポーネントで操作できる必要があります。
明快さ 。ユーザーインターフェイスの操作と情報は、ユーザーが理解できるものでなければなりません。
信頼性 コンテンツは、障害のある人向けの特別なブラウザなど、幅広いWebブラウザで同様に適切に解釈される必要があります。

それらのそれぞれに主要なポイントを与えます。

知覚

テキスト（または図のテキスト）の視覚的表現には、少なくとも4.5：1のコントラストレベルが必要です。
テキストのサイズ（見出しと画像としてのテキストを除く）は、特別な支援技術を使用せずに少なくとも2倍に増やすことができますが、機能が失われることはなく、ユーザーはテキストの行を読むために水平スクロールに頼る必要はありません。
ユーザーは背景色とテキスト色を選択できる必要があります。
テキストブロックの幅は80文字を超えてはなりません

使用される書体。
テキストの幅の整列は許可されていません。
少なくとも1.5行の行間

テキストの段落間の距離は、行間隔の少なくとも1.5倍です。

操作性

Webサイトのすべての機能はキーボードでアクセスできる必要があります。
ユーザーには、便利なナビゲーション、コンテンツの簡単な検索、およびサイトのメインページに対するページの現在の位置の簡単な決定が提供される必要があります。
各ページで重複するブロックをスキップすることが可能であるべきです

ページのメインコンテンツに移動する機能。
現在のフォーカスは、キーボードで制御されると表示されるはずです。

明瞭さ

コンテンツは読みやすく、理解できるものでなければなりません。
ページテキストの言語はプログラムで設定する必要があります（ <html lang="fr">

）;
テキストまたはテキストの後の用語集で、定義を与える必要があります

まれな単語、単語の異常な組み合わせ、略語、略語など

（ <acronym> <abbr>

）;
Webページが形成され、予測どおりに「動作」する必要があります。
ユーザーは、データ入力の支援を受ける必要があります：検証と

エラーメッセージ、署名、フィールドへの入力手順、コンテキストヘルプ。

信頼性

開発中のウェブサイトは、障害者向けの特別な支援技術やツールなど、現在および将来性のあるさまざまなブラウザおよびプラットフォームと互換性がある必要があります。

視覚障害のある人がインターネットを使用する方法

完全に盲目のユーザーは、ページのテキストから音声合成を行う特別なプログラム、いわゆるスクリーンリーダーを使用します。これは、Webページのコンテンツをユーザーに「読み取り」、htmlマークアップを分析し、読む必要があるものとそうでないものを除外します。そのようなプログラムの別の種類は、リーダープログラムと特別なデバイスで構成される点字ディスプレイです（下図）。本体には、コンピューターのスクリーンリーダーからコマンドを送受信するための一定数の点字レリーフドットセルがあります。

視覚障害のあるユーザーは、画面の一部を拡大するプログラムと組み合わせて通常のブラウザーを使用するか、ブラウザーのズームツールまたはWebサイト開発者が提供するメカニズムを使用します。また、そのようなユーザーは、Webサイトのコンテンツをテキスト形式で表すいわゆるテキストブラウザーをよく使用します。

色覚異常（色覚異常）のユーザーは通常のブラウザーを使用しますが、特定のシステム色設定を使用して、標準色を独自に再定義して、スペクトルの欠落色を補正できます。しかし、多くの場合、ユーザーはそのような設定を適用できることを知りません。

既存のソリューションの分析

私たちは、世界のインターネットとロシア語圏の両方で視覚障害のある人のためのサイトバージョンの実装と同様に、方法と実践を研究しました。

政治のように、私たちの場合、ロシアには独自の道があります。

海外では、原則として、次のスキームが動作します。サイトは最初に従って開発されます

すべての標準と推奨事項、および障害を持つ人々のための顕著なリンク「アクセシビリティ」を配置します。クリックすると、ユーザーは互換性の標準、より良い対話のための特別なプログラムなどについて通知されます。

このスキームには利点があります。サイトのサポートが簡素化され、一般に標準で作成されたサイトはユーザーと検索エンジンの両方に常に適しています。

しかし、間違いなく、このようなスキームには欠点もあります。ユーザーにとって明確で理解可能な設定はありません。サイト構造は単純化されていないため、視覚障害のあるユーザーがサイトを操作するのが困難になります。

ロシアでは、別のスキームが定着しています。サイトの通常バージョンとともに、障害者向けの「特別な」バージョンが開発されています。メインサイトのメインページには、「特別な」バージョンへのリンクがあります。

このアプローチの利点：ユーザーは、ページ上で直接自分の手でサイトの特別なバージョンのコンテンツの表示をカスタマイズできます。サイトナビゲーションの「特別な」バージョンでは、大幅に簡素化されています。メインコンテンツは1つの列に表示されます。これにより、さまざまな健康上の制限があるユーザーがアクセスしやすくなります。

このアプローチには欠点もあります。サイトのサポートは、サイトの2つのバージョンに同行する必要がありますが、サイトのアーキテクチャが適切であれば、この欠点は回避できます。追加の開発コストがあります。「特別な」バージョンは二次的にサポートされているというユーザーの意見があり、このバージョンのコンテンツは常に関連するとは限りません。

特別なバージョンのサイトを作成するという形で2番目の方法を選択しましたが、State Duma Webサイトの「メイン」バージョンはW3C XHTML 1.0 Strict標準に完全に準拠していることに注意してください。

さらに、視覚障害のあるユーザー向けのバージョンの実装に関するいくつかの技術的な詳細。

分析されたデータとWebサイト開発の要約

「メイン」サイトのページの構造が大幅に簡素化されました。補助情報ブロックが削除され、メインコンテンツがワークスペースの中央の1列に配置されました。

メインメニューも簡素化されました。メインポイントは目立つ場所に配置されます。なぜならメニューはすべてのページで繰り返され、サイトの最初のリンクは「メインコンテンツに移動」であるため、スクリーンリーダープログラムのユーザーはナビゲーションブロックをスキップして、すぐにページのコンテンツに移動できます。

ユーザーの便宜のために、設定メニューから選択できる3つのフォントサイズオプションが形成されました。さらに、ユーザーはブラウザを使用してテキストサイズをスケーリングできます。すべてのテキストサイズは相対単位（％またはem）で示されます。

CSSは、サイトの配色に3つのオプションを提供します。 2つの標準的な配色：「白の背景に黒のテキスト」と最大のコントラストレベルを持つ「黒の背景に白のテスト」、および色覚異常のある人向けの配色：「濃い青の背景に明るい黄色のテキスト」。コントラストレベル。この機能の制御ボタンも設定パネルにあります。

将来的には、他の高コントラストの配色を追加することができます。これは下の図に示されています。この表には、2色のスキームが示されています（左側-正常な視力の人が見る方法、右側-色覚異常のある人が見る方法） [4] 。

画像の表示を有効/無効にする機能、およびフォントの種類（セリフの有無）および文字のペアの間隔（カーニング）を選択する機能を追加しました。これにより、特に大きなフォントサイズでテキストの "読みやすさ"に大きく影響します。

上記に、いくつかの一般的なヒントを追加できます。

スクリーンリーダーのページの「音声」が再び開始されるため、不必要なページのリロードを避けます。
サイトの構造を簡素化し、1列にコンテンツを表示することにより、専用デバイスからのアクセスを簡素化します。
一部のスクリーンリーダーはタイトルからタイトルまでテキストを読み取るため（ユーザーはこのパラメーターを独自に構成できます）、ヘッダーと太字をより積極的に使用する必要があります。これにより、ユーザーによるコンテンツの理解が簡単になります[3] 。
スクリーンリーダーのほとんどのユーザーはマウスを使用せず、キーボードコントロールに完全に依存しているため、それを使用してサイトナビゲーションを完全に制御することが非常に重要です[3] [6] 。

使用材料

スクリーンリーダーの互換性のための設計webaim.org/techniques/screenreader
ジョー・クラーク。ビッグ、スターク、チャンキーwww.alistapart.com/articles/lowvision
メアリーフランシステオファノ、ジャニス（ジニー）レディス。アクセシブルで使用可能なWebサイトのガイドライン：スクリーンリーダーを使用するユーザーの観察www.redish.net/images/stories/PDF/InteractionsPaperAuthorsVer.pdf
パビニガブリエルプチ色覚障害のある人のアクセシビリティを確保するwww.uxmatters.com/mt/archives/2007/02/ensuring-accessibility-for-people-with-color-deficient-vision.php
トレントン・モス。 Webアクセシビリティとは何ですか？ www.alistapart.com/articles/wiwa
Web Content Accessibility Guidelines（WCAG）2.0 www.w3.org/TR/WCAG
世界保健機関。視覚障害および失明www.who.int mediacentre / factsheets / fs282 / ja / index.html
GOST R 52872-2007「インターネットリソース。視覚障害者のためのアクセシビリティ要件。」 www.web-canape.ru/img/file/GOST-52872-2007.pdf
MedNews。毎年45,000人のロシア人が視覚障害を抱えているmedportal.ru/mednovosti/news/2009/10/07/blind

視覚障害を持つ人々のための州下院ウェブサイトの特別バージョンの開発について