アクセシビリティに準拠したカレンダーデザインを設定する方法

この投稿をシェアする

自律的AI Timely、視覚的に魅力的でアクセスしやすいカレンダーを作成し、ウェブサイトの使いやすさを向上させることができます。WCAGとADAのガイドラインに従うことで、ウェブサイトのアクセシビリティとユーザーエクスペリエンスに大きな影響を与える小さな変更を加えることができます。この記事では、カレンダーを構成する方法を学びます。 Timely アクセシビリティ準拠のカレンダー。

1. Web アクセシビリティとは何ですか?

ウェブアクセシビリティとは、ウェブサイト、ツール、テクノロジーが、障害のある人々でも利用できるように設計・開発されていることを保証するものです。これには、多様な形式でのコンテンツ提供、容易なナビゲーションの実現、支援技術との互換性の確保などが含まれます。

デジタル アクセシビリティは、認識可能、操作可能、理解可能、堅牢という 4 つの原則に基づいています。各原則は独自の機能を果たし、さまざまな障害を持つ人々が問題なく Web をナビゲートできるようにします。 

デジタル アクセシビリティは、認識可能、操作可能、理解可能、堅牢という 4 つの原則に基づいて構築されます。

ウェブアクセシビリティは、 WCAG、ADA、セクション508などのアクセシビリティ基準を遵守することで、能力に関係なく誰もがデジタルコンテンツに効果的にアクセスし、操作できる、包括的なオンライン環境の構築を目指しています。

2. アクセシビリティ ガイドラインに準拠する理由

アクセシビリティ ガイドラインに準拠すると、Web サイトにさまざまなメリットがもたらされます。デジタル アクセシビリティの主な目的は、障害を持つ人々に平等なアクセスを提供することですが、より幅広いユーザーのユーザー エクスペリエンスも向上します。情報が明確に提示され、操作しやすい Web サイトは、ユーザーの再訪を促します。

さらに、ウェブサイトとカレンダーをアクセシビリティに合わせて最適化すると、検索エンジンのクローラーがウェブサイトをより効率的に読み取ることができるようになり、検索エンジンの結果におけるコンテンツのランキングが向上します。

3. Time.lyアクセシビリティに対する の取り組み

At Timely当社は、障がいのある方々のデジタルアクセシビリティを確保することに尽力しており、 ウェブアクセシビリティステートメント当社では、ウェブサイトやウェブベースのソフトウェア アプリケーションに関連するアクセシビリティ標準を適用することで、すべてのユーザーのユーザー エクスペリエンスを継続的に向上させています。

たとえば、あなたの Timely カレンダーはキーボード ナビゲーションでアクセスできます。つまり、ユーザーはマウスを使わずに、Tab キーやその他のキーストロークを使用して、リンク、ボタン、フォーム、その他のコントロール間を移動できます。

Timely カレンダーの公開ビュー。

もう一つの例は、 Timely プラットフォームには、Alt テキスト (代替テキスト) の説明を含めることができます。Alt テキストは、視覚障害のあるユーザーが使用するスクリーン リーダーによって読み上げられ、画像が読み込まれなかった場合に画像の代わりに表示され、検索エンジンによってインデックス化されます。

新しい画像をアップロードする例 Timely メディア ライブラリ。

みんな Timely ソフトウェアソリューションはアクセシビリティ標準に準拠するように設計されていますが、カレンダーの設定方法は準拠に影響を与える可能性があります。アップロードされたすべての画像に代替テキストが含まれていることを確認することに加えて、カレンダーのデザインも重要です。 Timely カレンダーは、アクセシビリティの向上と全体的なユーザー エクスペリエンスの強化に重要な役割を果たします。 

4. デザイン設定を構成する方法 Timely アクセシビリティコンプライアンスカレンダー

あなたを最適化するには Time.ly アクセシビリティに準拠したカレンダーのデザインを始めるには、まず次の簡単な手順に従ってください。

  1. あなたにログイン Timely アカウント.
  2. 左側のメインメニューで、 設定を行います。
  3. 次に、をクリックします。 設計新しいデザイン タブが開き、デザイン機能を変更してカレンダーの外観を変更できます。

以下は、特定のデザイン機能を設定する方法に関する貴重なヒントです。 Timely アクセシビリティ基準を効果的に満たすカレンダー。

4.1 アクセシビリティのためのカレンダーテーマ

現在、ウェブサイトのデフォルト テーマを 13 種類から選択できます。これらのテーマでは、標準フォントとフォント サイズが変更されるだけでなく、アクセス可能なカレンダーに新しい色も導入されます。

当社では、最適なコントラストを提供するカラーデザインを優先し、中~大サイズのフォントを使用して、読みやすさと視認性を高めています。ただし、カレンダーのプレゼンテーションの各要素を好みに応じて柔軟にカスタマイズし、ブランドカラーに合わせることもできます。

例として、 Timely カレンダーの「夜」テーマ。暗い色のパターンにもかかわらず、このテーマはフォントの色を効果的に強調し、印象的なコントラストを生み出します。これにより読みやすさが向上し、ユーザーはイベントのタイトルや日付などの重要な情報をすばやく識別できるようになります。

カレンダーテーマの例。

画像の代替テキスト: 「夜」テーマのプリントスクリーン Timely ダッシュボード

4.2 イベント詳細レイアウト

カレンダーの使いやすさを最適化するために、 Timely 4 つの異なるイベント詳細レイアウト オプションを提供します。

  • デフォルト
  • ナオス(太字)
  • コンパクト 
  • 広い 

各レイアウトは、イベント ランディング ページのデザインと、ユーザーがナビゲートして必要な情報を見つけやすいかどうかに影響します。レイアウトを選択するときは、イベントの種類と対象ユーザーを考慮することをお勧めします。 

イベント詳細レイアウトの例。

ダッシュボードから直接、好みのレイアウトを選択できます。カレンダーにどのように表示されるかプレビューするには、レイアウトを選択した後、イベントをクリックするだけです。

4.3 カレンダーフォント

ととも​​に Timely アカウントをお持ちの場合は、Google Fonts または Typekit フォントから直接カレンダーのフォントを選択できます。アクセシビリティを考慮して、標準フォント (Times New Roman、Arial など) など、読みやすいフォントをカレンダーで使用することをお勧めします。また、提供されているツールを使用してフォントのスタイルとサイズをカスタマイズすることもできます。これについては後で詳しく説明します。

フォントを追加するには、フォントのURLをコピーし、以下の図のように、デフォルトのフォントを上書きする名前を該当のボックスに入力するだけです。また、Google FontsまたはAdobe/Typekitフォントのいずれかを選択することもできます。

Timely カスタム カラーのソフトウェア デザイン設定。

4.4 アクセシビリティ準拠のためのカスタムカレンダーカラー

前述のように、あなたの Timely カレンダーは完全にカスタマイズ可能です。ブランドの美観に合わせて色とフォントを柔軟に変更し、カレンダーのアクセシビリティを向上させることができます。高度な技術スキルは必要ありません。

ブランドのカラーパレットを使用してカスタマイズできるさまざまなカレンダーとウィジェットのビューを次に示します。

  • 全般
  • ボタン
  • イベントの詳細
  • ポスターボードビュー
  • タイルビュー
  • ストリームビュー
  • モダンなリストビュー
  • モダンな行ビュー
  • アジェンダビュー
  • 年のビュー
  • 月表示
  • 週ビュー
  • スライダービュー
  • カルーセルビュー
  • マップビュー

これらのビューのいずれかをクリックすると、各項目に異なる色を選択するオプションが表示されます。たとえば、背景、境界線、タイトル、テキストなどです。

カレンダーのアクセシビリティをさらに向上させるには、要素間の色のコントラストを良好に保つことをお勧めします。例えば、明るい背景に暗い文字を使用するなどです。これにより、ページが読みやすくなり、アクセシビリティの重要な要素が満たされます。

より具体的には、WCAG 2.0 レベル AAでは、視覚障害のある人がテキストを読みやすくするために、通常のテキストのコントラスト比を 4.5:1 以上、大きなテキストのコントラスト比を 3:1 以上とすることを義務付けています。WCAG 2.1 では、これらの要件をグラフィック オブジェクトとユーザー インターフェイス コンポーネントにも拡張し、識別できるように最小コントラスト比を 3:1 に設定しています。カレンダーのアクセシビリティを最高レベルにするには、WCAG レベル AAA では、通常のテキストのコントラスト比を 7:1 以上、大きなテキストのコントラスト比を 4.5:1 以上とする必要があります。なお、大きなテキストとは、14 ポイント (約 18.66 ピクセル) で太字、または 18 ポイント (約 24 ピクセル) 以上と定義されています。

4.5 高度なカレンダーカスタマイズツール

コーディングスキルがある場合は、カスタム メタデータ、カスタム セクション、カスタム スタイルシートを使用して、イベントのタイトル、ヘッダー、フッターを強化できます。

高度なカレンダーカスタマイズ ツール。

これらの変更をカレンダーに適用するには、コードを貼り付けてから、「保存」ボタンをクリックして設定を保存してください。

これらの機能を使用することで、カレンダーへのアクセスが容易になり、カスタマイズ内容が正確に反映されます。さらに、高度なコーディングスキルを必要とせずに、好みの色、フォント、その他の設定を選択できるため、時間の節約にもなります。

追加のヘルプが必要ですか?

さらに詳しいガイダンスとサポートについては、当社のウェブサイトをご覧ください。 ヘルプセンター。ご質問がある場合やサポートが必要な場合は、お気軽にサポート チケットを開いてカスタマー サクセス チームにお問い合わせください。 Timely アカウントのダッシュボード.

導入と使用に関して追加の支援が必要な場合 Timely イベント管理システム喜んでお手伝いさせていただきます。すべてを探索してください プロフェッショナルサービス 私たちはあなたに提供できます、そして 私たちと連絡を取る して、高成長のクロスチャネル戦略の構築を始めましょう!