サイトについて | 8091.info

サイトの目的

8091.infoは、すべての人が情報に平等にアクセスできるWebを実現するために立ち上げられました。アクセシビリティは「特別な対応」ではなく、デザインの基本原則であるという信念のもと、以下の目標を掲げています：

🌏 誰もが使える: 視覚・聴覚・運動機能の有無に関わらず、すべてのユーザーが快適に利用できる
🇯🇵 日本語最適化: 日本語特有の課題（縦書き、ルビ、スクリーンリーダー読み上げ）に対応
📐 WCAG準拠: Web Content Accessibility Guidelines 2.1 レベルAA以上を達成
🚀 高パフォーマンス: アクセシビリティとパフォーマンスを両立

技術スタック

フロントエンド

Astro.js 5.13.10: 静的サイト生成、パフォーマンス最適化
Tailwind CSS: ユーティリティファーストCSS、OKLCHカラー
TypeScript: 型安全なコード、開発効率向上

インフラストラクチャ

Cloudflare Pages: エッジデプロイ、グローバルCDN
Cloudflare Workers: サーバーレス関数、フォーム処理
Cloudflare D1: SQLiteベースのデータベース（問い合わせフォーム用）

アクセシビリティ対応

スクリーンリーダー最適化: ARIA属性、セマンティックHTML
キーボードナビゲーション: タブ順序、フォーカス管理
コントラスト比: WCAG AA準拠（最低4.5:1）
レスポンシブデザイン: モバイル・タブレット・デスクトップ対応

主な機能

1. アクセシブルなコンポーネント

JapaneseScreenReader: スクリーンリーダー最適化コンポーネント
JapaneseCodeBlock: 日本語コメント読み上げ対応のコードブロック
JapaneseCallout: 重要情報を強調するコールアウト
JapaneseContactForm: Turnstile認証付きお問い合わせフォーム

2. 商品比較デモ

Amazon PA-API 5.0と楽天APIを統合した商品検索・比較システム：

リアルタイム価格取得
アクセシブルな表示切替（詳細/コンパクト/比較）
キーボード操作対応
スクリーンリーダー最適化

3. デザインシステム

OKLCH色空間: 知覚的に均一な色表現
季節カラーパレット: 春/夏/秋/冬テーマ
タイポグラフィ: 日本語フォント最適化
Origamiアニメーション: 和をテーマにした視覚効果

アクセシビリティへの取り組み

WCAG 2.1 準拠状況

✅ 知覚可能 (Perceivable): テキスト代替、時間ベースメディア対応
✅ 操作可能 (Operable): キーボードアクセス、十分な時間提供
✅ 理解可能 (Understandable): 読みやすさ、予測可能性
✅ 堅牢 (Robust): 支援技術との互換性

スクリーンリーダー対応

NVDA (Windows): 完全対応
JAWS (Windows): 対応済み
VoiceOver (macOS/iOS): 対応済み
TalkBack (Android): 基本対応

日本語固有の対応

漢字の読み仮名: <ruby> タグ対応
縦書きレイアウト: writing-mode: vertical-rl
日本語フォント: Hiragino Sans、Noto Sans JP
助詞の読み上げ: スクリーンリーダー最適化

パフォーマンス目標

Core Web Vitals

LCP (Largest Contentful Paint): < 2.5秒
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

Lighthouse スコア

Performance: > 90点
Accessibility: > 95点
Best Practices: > 90点
SEO: > 90点

オープンソース

本サイトのソースコードはGitHubで公開されています。

ライセンス

コンテンツ: CC BY 4.0
コード: MIT License

貢献を歓迎します！詳細はLicenseページをご覧ください。

お問い合わせ

ご質問・ご要望・バグ報告は、お問い合わせフォームからお願いいたします。

アクセシビリティに関する問題を発見された場合は、優先的に対応いたします。

最終更新日: 2025年9月30日 バージョン: 1.0.0