accessibility-audit

アクセシビリティ監査

Webflow ページを対象とした包括的な WCAG 2.1 アクセシビリティ監査です。詳細な問題検出と、実行可能な修正方法を提供します。

重要な注意事項

すべての操作には、必ず Webflow MCP ツールを使用してください。

• 開始前にベストプラクティスを確認するには、Webflow MCP の webflow_guide_tool を使用してください
• 利用可能なサイトを特定するには、Webflow MCP の data_sites_tool でアクション list_sites を使用してください
• サイトの詳細を取得するには、Webflow MCP の data_sites_tool でアクション get_site を使用してください
• すべてのページを取得するには、Webflow MCP の data_pages_tool でアクション list_pages を使用してください
• 詳細な要素情報を取得するには、Webflow MCP の element_tool でアクション get_all_elements を使用してください（Designer が必要です）
• アクセシビリティの問題を修正するには、Webflow MCP の element_tool でアクション add_or_update_attribute を使用してください（Designer が必要です）
• 要素のビジュアルプレビューを取得するには、Webflow MCP の element_snapshot_tool を使用してください
• Webflow の操作には、ほかのツールや方法を使用しないでください
• すべてのツール呼び出しには、必須の context パラメーター（第三者視点で15～25語）を含めてください
• Designer への接続が必要です — このスキルでは、要素の属性やスタイルにアクセスするために Designer が必要です

手順

フェーズ 1：サイトとページの選択

1. サイト情報を取得する：対象サイトを特定するには、Webflow MCP の data_sites_tool でアクション list_sites を使用します
2. ページを選択してもらう：
   • ユーザーがページ ID を指定した場合は、その ID を直接使用します
   • 指定がない場合は、data_pages_tool でアクション list_pages を使用して利用可能なページを表示します
   • 監査するページをユーザーに選択してもらいます
3. 監査の範囲を確認する：確認対象をユーザーに尋ねます。
   • 完全な監査（すべてのアクセシビリティチェック）
   • 重大な問題のみ（WCAG レベル A）
   • 特定のカテゴリ（フォーム、ボタン、ナビゲーションなど）

フェーズ 2：要素の抽出と分析

4. Designer が接続されていることを確認する：続行する前に、Webflow Designer が開いていて接続されていることを確認します
   • 接続されていない場合は、Designer を開いて接続するようユーザーに案内します
   • 要素の属性やスタイルにアクセスするには、これが必要です
5. 対象ページに切り替える：監査対象のページに移動するには、de_page_tool でアクション switch_page を使用します
6. すべての要素を抽出する：詳細な分析には、element_tool でアクション get_all_elements を使用します
   • フォーカススタイルを確認するには、include_style_properties: true に設定します
   • データ量を最小限に抑えるには、include_all_breakpoint_styles: false に設定します
7. 要素データを解析する：インタラクティブ要素とコンテンツ要素を特定します。
   • ボタン（Button、ボタンの role を持つ LinkBlock）
   • リンク（TextLink、Link、LinkBlock）
   • フォーム入力（Input、Select、Textarea）
   • 見出し（レベル付きの Heading 要素）
   • インタラクティブな div／span（onClick またはインタラクティブな role を確認）
   • 画像（Image 要素）— この監査では対象外
8. 各要素の属性を抽出する：
   • ARIA 属性（aria-label、aria-describedby、role、tabIndex）
   • DOM 属性（id、domId、href、type、placeholder）
   • テキストコンテンツ
   • スタイルプロパティ（フォーカス状態の outline、border）
   • 要素のメタデータ（canHaveAttributes、タグ名）

フェーズ 3：アクセシビリティチェック

重大な問題（必ず修正 — WCAG レベル A）

9. ラベルのないアイコンのみのボタン（WCAG 4.1.2）

   • 検出対象：テキストコンテンツのないボタン要素
   • 確認事項：aria-label または aria-labelledby がない
   • 影響：スクリーンリーダーでボタンの目的を識別できません
   • 修正方法：説明的なテキストを含む aria-label 属性を追加します

10. ラベルのないフォーム入力欄（WCAG 1.3.1）

    • 検出対象：Input、Select、Textarea 要素
    • 確認事項：関連付けられたラベルまたは aria-label がない
    • 影響：ユーザーが入力欄の用途を把握できません
    • 修正方法：aria-label を追加するか、id を使って <label> と関連付けます

11. セマンティクスに準拠しないクリックハンドラー（WCAG 2.1.1）

    • 検出対象：Div または Span 要素（要素の種類で判別）
    • 確認事項：適切なロールやキーボード対応がないインタラクティブな動作
    • 影響：キーボードで操作できず、スクリーンリーダーが操作可能であることを認識できません
    • 修正方法：role="button" と tabIndex="0" を追加します。実際の <button> の使用を推奨します

12. 遷移先のないリンク（WCAG 2.1.1）

    • 検出対象：href 属性のないリンク要素
    • 確認事項：href を指定せず、onClick のみを使用しているリンク
    • 影響：キーボードで操作できず、ブラウザーの機能が損なわれます
    • 修正方法：適切な href を追加するか、ボタンに変更します

深刻な問題（修正を推奨 — WCAG レベル AA）

13. 代替手段なしでフォーカスアウトラインを削除（WCAG 2.4.7）

    • 検出対象：outline: none スタイルが適用された要素
    • 確認事項：視認可能な代替フォーカスインジケーターがない
    • 影響：キーボードを使うユーザーがフォーカス位置を確認できません
    • 修正方法：視認可能なフォーカススタイル（境界線、ボックスシャドウ、背景色の変更）を追加します

14. キーボードハンドラーの不足（WCAG 2.1.1）

    • 検出対象：onClick ハンドラーが設定された要素
    • 確認事項：Enter キーまたは Space キーに対する onKeyDown がない
    • 影響：キーボードだけでは操作できません
    • 修正方法：キーボードイベントハンドラーを追加します

15. タッチターゲットが小さすぎる（WCAG 2.5.5）

    • 検出対象：クリック可能な要素（ボタン、リンク）
    • 確認事項：幅または高さが 44px 未満
    • 影響：モバイルデバイスでタップしにくくなります
    • 修正方法：パディングを増やすか、min-width/min-height を 44px に設定します

中程度の問題（修正を検討）

16. 見出し階層の問題（WCAG 1.3.1）

    • 検出対象：見出し要素（h1-h6）
    • 確認事項：階層が飛ばされている（h1 → h3 のように、h2 を飛ばしている）
    • 影響：文書構造がわかりにくくなります
    • 修正方法：見出しレベルを適切な順序で使用します

17. 正の tabIndex（WCAG 2.4.3）

    • 検出対象：tabIndex > 0 の要素
    • 確認事項：自然なタブ順序が乱れる
    • 影響：キーボード操作がわかりにくくなります
    • 修正方法：tabIndex="0" または "-1" のみを使用し、自然な DOM 順序に従います

18. 必須属性のないロール（WCAG 4.1.2）

    • 検出対象：ARIA ロールが指定された要素
    • 確認事項：必須の ARIA 属性がない（例：tabIndex のない role="button"）
    • 影響：アクセシビリティのセマンティクスが不完全になります
    • 修正方法：ロールに必要な属性を追加します

フェーズ 4：問題の分類とスコアリング

19. 検出した問題をすべて分類する：

    • 重大：必ず修正（アクセスを妨げる）
    • 深刻：修正を推奨（ユーザビリティに大きな影響がある）
    • 中程度：修正を検討（ユーザー体験を向上させる）

20. アクセシビリティスコアを算出する（0～100）：

    • 100 点から開始
    • 重大な問題：1 件につき -10 点
    • 深刻な問題：1 件につき -5 点
    • 中程度の問題：1 件につき -2 点
    • 最低スコア：0 点

21. 深刻度の概要を作成する：

    • 検出された問題の合計数
    • 深刻度別の内訳
    • 最も多い問題の種類
    • 影響が最も大きいページ／セクション

フェーズ 5：レポートの生成

22. 指定の形式で詳細なレポートを作成します：

    ═══════════════════════════════════════════════════
    アクセシビリティ監査：[ページ名]
    ═══════════════════════════════════════════════════
    
    重大（X 件）
    ───────────────────
    [A11Y] 要素：ボタン「送信」
      問題：ボタンにアクセシブルな名前がありません
      場所：フォームセクション、要素 ID：{component: "abc", element: "xyz"}
      現在：<button><CloseIcon /></button>
      修正：aria-label="Close" を追加します
      WCAG：4.1.2 名前、役割、値
    
    [A11Y] 要素：入力フィールド
      問題：フォーム入力にラベルがありません
      場所：お問い合わせフォーム、要素 ID：{component: "def", element: "uvw"}
      現在：<input type="email" />
      修正：aria-label="Email address" を追加するか、<label> と関連付けます
      WCAG：1.3.1 情報と関係性
    
    深刻（X 件）
    ──────────────────
    [A11Y] 要素：リンク「続きを読む」
      問題：フォーカスアウトラインが、視覚的に確認できる代替手段なしで削除されています
      場所：ブログセクション
      現在：outline: none
      修正：視認できるフォーカススタイルを追加します（例：border: 2px solid blue）
      WCAG：2.4.7 フォーカスの可視化
    
    中程度（X 件）
    ───────────────────
    [A11Y] 要素：見出し
      問題：見出し階層が飛ばされています（h1 → h3）
      場所：記事セクション
      現在：<h1>タイトル</h1> の後に <h3>サブセクション</h3>
      修正：<h2> に変更するか、中間に h2 を追加します
      WCAG：1.3.1 情報と関係性
    
    ═══════════════════════════════════════════════════
    概要
    ───────────────────────────────────────────────────
    問題の合計：X
    - 重大：X 件
    - 深刻：X 件
    - 中程度：X 件
    
    アクセシビリティスコア：XX/100
    
    最も多い問題：
    1. ［問題の種類］- X 件
    2. ［問題の種類］- X 件
    3. ［問題の種類］- X 件
    ═══════════════════════════════════════════════════
    

23. 実行可能なインサイトを提示します：

    • 優先順位を付けた修正リスト（重大なものを最初に）
    • クイックウィン（簡単な修正で大きな効果が得られるもの）
    • デザインパターンの推奨事項
    • さらに学ぶためのリソース

フェーズ 6：修正の提案と承認（任意）

24. 問題の自動修正を提案します：デザイナーはすでに接続されているため、自動修正を提案します

25. 修正のプレビューを表示します：

    どの問題を修正しますか？
    
    [1] ✓ 送信ボタンに aria-label を追加
        要素：お問い合わせフォームのボタン
        修正：aria-label="Submit contact form" を追加
        安全：はい（属性の追加のみ）
    
    [2] ✓ メール入力欄に aria-label を追加
        要素：お問い合わせフォームの入力欄
        修正：aria-label="Email address" を追加
        安全：はい
    
    [3] ⚠️ 見出し階層を修正
        要素：記事セクションの h3
        修正：見出しレベルを h3 から h2 に変更
        安全：視覚スタイルに影響する可能性があります
    
    スキップする番号（例：「3」）、「all」ですべて、「none」でキャンセルと入力してください
    

26. 承認された修正を適用します：element_tool をアクション add_or_update_attribute とともに使用します

    • バッチ処理します
    • 修正件数が多い場合は進行状況を表示します
    • それぞれの成功または失敗を報告します

27. 修正後のレポートを生成します：

    • 修正された問題：X
    • 残っている問題：Y
    • 新しいアクセシビリティスコア：XX/100（YY/100 から改善）

フェーズ 7：エクスポートとリソース（任意）

28. エクスポート形式を提示します：

    • Markdown（読みやすいドキュメント）
    • JSON（追跡用の機械可読形式）
    • CSV（チームレビュー用のスプレッドシート）

29. リソースを提供します：

    • WCAG 2.1 クイックリファレンスへのリンク
    • Webflow のアクセシビリティに関するベストプラクティス
    • 推奨テストツール（ブラウザー拡張機能、スクリーンリーダー）

重要な考慮事項

このスキルでチェックする項目

✅ ボタンのアクセシビリティ（ラベル、役割） ✅ フォーム入力のラベルと関連付け ✅ リンクのセマンティクスとキーボード操作 ✅ フォーカスの視認性とキーボードナビゲーション ✅ 見出しの階層と構造 ✅ ARIA の役割と属性 ✅ タッチターゲットのサイズ ✅ インタラクティブ要素のセマンティクス

このスキルでチェックしない項目

❌ 画像の代替テキスト（代わりに asset-audit スキルを使用してください） ❌ 色のコントラスト比（視覚的な分析が必要です） ❌ アニメーション／動きに関する設定 ❌ スクリーンリーダーのテスト（手動での確認が必要です） ❌ コンテンツの読みやすさ（言語レベル、明瞭さ）

制限事項

• 視覚的な問題（色のコントラスト、小さな文字など）は検出できません
• 実際のスクリーンリーダーの動作はテストできません
• コンテンツの品質や明瞭さは検証できません
• 要素の属性と構造のみを対象とします

例

例 1：ページ全体の監査

ユーザープロンプト：

Run an accessibility audit on my homepage

ステップ 1：サイトとページの選択

🔍 Accessibility Audit: Page Selection

I'll help you audit your homepage for accessibility issues.

First, let me get your site information...

Available sites:
1. Company Website
2. Portfolio Site

Which site? (1/2)

ユーザーの応答： 1

ステップ 2：ページの選択

Available pages in Company Website:
1. Home (/)
2. About (/about)
3. Contact (/contact)
4. Blog (/blog)

Which page would you like to audit? (1 for Home)

ユーザーの応答： 1

ステップ 3：監査範囲

What level of audit would you like?

1. Full audit (all WCAG checks) - Recommended
2. Critical issues only (Level A compliance)
3. Specific categories (buttons, forms, navigation)

Your choice: (1/2/3)

ユーザーの応答： 1

ステップ 4：監査の進捗

🔄 Running Accessibility Audit...

Progress:
✅ Extracted page content (45 elements)
✅ Analyzing buttons and interactive elements
✅ Checking form inputs and labels
✅ Validating heading hierarchy
✅ Checking keyboard navigation
🔄 Analyzing focus states...

Analysis complete!

ステップ 5：レポート

═══════════════════════════════════════════════════
ACCESSIBILITY AUDIT: Home
═══════════════════════════════════════════════════

CRITICAL (3 issues)
───────────────────
[A11Y] Element: Button (navigation toggle)
  Issue: Icon-only button missing accessible name
  Location: Header navigation
  Element ID: {component: "nav-01", element: "btn-menu"}
  Current: <button><MenuIcon /></button>
  Fix: Add aria-label="Open navigation menu"
  WCAG: 4.1.2 Name, Role, Value

[A11Y] Element: Input (email subscription)
  Issue: Form input without label
  Location: Footer, newsletter signup
  Element ID: {component: "footer-01", element: "email-input"}
  Current: <input type="email" placeholder="Enter email" />
  Fix: Add aria-label="Email address for newsletter"
  WCAG: 1.3.1 Info and Relationships

[A11Y] Element: Div (clickable card)
  Issue: Non-semantic interactive element
  Location: Services section, card 2
  Element ID: {component: "services-01", element: "card-02"}
  Current: <div onClick={...}>Service card</div>
  Fix: Convert to <button> or add role="button" + tabIndex="0"
  WCAG: 2.1.1 Keyboard

SERIOUS (5 issues)
──────────────────
[A11Y] Element: Link "Learn more"
  Issue: Focus outline removed without visible alternative
  Location: Hero section
  Element ID: {component: "hero-01", element: "cta-link"}
  Current: outline: none
  Fix: Add focus style - border: 2px solid #0066cc or box-shadow
  WCAG: 2.4.7 Focus Visible

[A11Y] Element: Button "Subscribe"
  Issue: Touch target too small (30px × 36px)
  Location: Footer newsletter form
  Element ID: {component: "footer-01", element: "submit-btn"}
  Current: Small button
  Fix: Increase padding or set min-height: 44px
  WCAG: 2.5.5 Target Size

[continues with 3 more serious issues...]

MODERATE (4 issues)
───────────────────
[A11Y] Element: Heading "Our Services"
  Issue: Heading hierarchy skipped (h1 → h3)
  Location: Services section
  Element ID: {component: "services-01", element: "heading"}
  Current: <h3>Our Services</h3> follows <h1>Welcome</h1>
  Fix: Change to <h2> to maintain proper hierarchy
  WCAG: 1.3.1 Info and Relationships

[continues with 3 more moderate issues...]

═══════════════════════════════════════════════════
SUMMARY
───────────────────────────────────────────────────
Total Issues: 12
- Critical: 3 issues (must fix)
- Serious: 5 issues (should fix)
- Moderate: 4 issues (consider fixing)

Accessibility Score: 64/100

Most Common Issues:
1. Missing button labels - 2 occurrences
2. Focus styles removed - 3 occurrences
3. Heading hierarchy problems - 2 occurrences

Quick Wins (Easy + High Impact):
✨ Add aria-label to icon buttons (2 min, +20 score points)
✨ Add input labels (5 min, +10 score points)
✨ Add focus styles (10 min, +15 score points)

═══════════════════════════════════════════════════

💡 Next Steps:
1. Fix critical issues first (blocks access for some users)
2. Add visible focus styles for keyboard users
3. Test with keyboard navigation (Tab, Enter, Space keys)
4. Consider testing with screen reader (NVDA/JAWS/VoiceOver)

Would you like me to help fix these issues? (requires Designer connection)

例 2：複数ページの監査

ユーザープロンプト：

Audit accessibility across my entire site

エージェントの応答：

🔍 Multi-Page Accessibility Audit

I'll audit all pages on your site for accessibility issues.

Found 8 pages:
1. Home
2. About
3. Services
4. Team
5. Blog
6. Blog Post Template (CMS)
7. Contact
8. Privacy Policy

This will take approximately 2-3 minutes.

Proceed with full site audit? (yes/no)

ユーザー： yes

進捗：

🔄 Auditing Site Accessibility...

Progress: ████████████░░░░░░░░ 60% (5/8 pages)

✅ Home - Score: 64/100 (12 issues)
✅ About - Score: 78/100 (6 issues)
✅ Services - Score: 71/100 (9 issues)
✅ Team - Score: 85/100 (4 issues)
✅ Blog - Score: 82/100 (5 issues)
🔄 Analyzing Blog Post Template...

最終レポート：

═══════════════════════════════════════════════════
SITE-WIDE ACCESSIBILITY AUDIT
═══════════════════════════════════════════════════

OVERALL SCORE: 73/100

Pages Audited: 8
Total Issues: 48
- Critical: 11 issues
- Serious: 21 issues
- Moderate: 16 issues

═══════════════════════════════════════════════════
ISSUES BY PAGE
═══════════════════════════════════════════════════

🔴 Lowest Scores (Need Attention):
1. Home - 64/100 (12 issues: 3 critical, 5 serious, 4 moderate)
2. Services - 71/100 (9 issues: 2 critical, 5 serious, 2 moderate)
3. About - 78/100 (6 issues: 1 critical, 3 serious, 2 moderate)

🟢 Highest Scores:
1. Team - 85/100 (4 issues: 0 critical, 2 serious, 2 moderate)
2. Blog - 82/100 (5 issues: 1 critical, 2 serious, 2 moderate)

═══════════════════════════════════════════════════
SITE-WIDE PATTERNS
═══════════════════════════════════════════════════

Most Common Issues Across Site:
1. Missing button labels (icon buttons) - 8 occurrences
   Pages affected: Home, Services, Blog, Contact

2. Focus outline removed - 12 occurrences
   Pages affected: All pages (site-wide CSS issue)

3. Form inputs without labels - 5 occurrences
   Pages affected: Home, Contact

4. Small touch targets (<44px) - 9 occurrences
   Pages affected: Home, About, Services, Contact

═══════════════════════════════════════════════════
RECOMMENDATIONS
═══════════════════════════════════════════════════

🎯 Site-Wide Fixes (Fix Once, Helps Everywhere):
1. Add focus styles to global CSS (affects 12 issues across all pages)
2. Update button component to require aria-label (affects 8 issues)
3. Increase minimum touch target size in design system (affects 9 issues)

📋 Page-Specific Priorities:
1. Home page: Fix navigation menu button and newsletter form
2. Services page: Add labels to service card interactions
3. Contact page: Add proper labels to all form inputs

💡 Design System Improvements:
- Create accessible button component with required aria-label
- Add focus state variants to all interactive components
- Set minimum touch target size standard (44px)

Would you like:
1. Detailed report for specific page
2. Export findings to file (Markdown/JSON/CSV)
3. Help fixing site-wide issues (requires Designer)

例 3：重大な問題のみ

ユーザープロンプト：

Check my contact page for critical accessibility issues only

エージェントの応答：

🔍 Critical Issues Audit: Contact Page

Running quick scan for blocking accessibility issues...

✅ Page analyzed

═══════════════════════════════════════════════════
CRITICAL ISSUES: Contact Page
═══════════════════════════════════════════════════

Found: 4 critical issues

[1] Form Input Missing Label
    Element: Email input field
    Location: Contact form, top
    Issue: No accessible name for screen readers
    Fix: Add aria-label="Your email address"
    WCAG: 1.3.1 (Level A)

[2] Form Input Missing Label
    Element: Message textarea
    Location: Contact form, bottom
    Issue: No accessible name for screen readers
    Fix: Add aria-label="Your message"
    WCAG: 1.3.1 (Level A)

[3] Button Missing Label
    Element: Submit button
    Location: Contact form, bottom
    Issue: Icon-only button with no text
    Fix: Add aria-label="Submit contact form"
    WCAG: 4.1.2 (Level A)

[4] Non-Semantic Interactive Element
    Element: Social media link (Instagram)
    Location: Footer
    Issue: Div with onClick instead of proper link
    Fix: Convert to <a href="..."> with aria-label="Instagram"
    WCAG: 2.1.1 (Level A)

═══════════════════════════════════════════════════

⚠️ Impact: These issues prevent screen reader users from using your contact form.

🔧 Estimated fix time: 5 minutes

Would you like me to:
1. Run full audit (includes serious and moderate issues)
2. Fix these 4 critical issues now (requires Designer)
3. Export this report (Markdown/JSON/CSV)

安全に関するルール

プレビューと確認

• 修正を提案する前に、問題の詳細な一覧を必ず表示します
• 重大度（重大／深刻／中程度）を明確に示します
• 各問題が及ぼす影響を、ユーザーにわかりやすく説明します
• 各検出項目について、該当する WCAG の参照先を提示します

修正ごとの個別承認

• 修正する問題をユーザーが選べるようにします
• 視覚的なデザインに影響する可能性のある修正について警告します
• 進捗を示しながら、修正をまとめて処理します
• 修正の試行ごとに、成功または失敗を報告します

エラー処理

• ページにアクセスできない場合は、その理由を明確に説明します
• Designer が接続されていない場合は、制限事項を一覧表示します
• 要素を変更できない場合は、手動での修正方法を提案します
• 自動修正と手動確認が必要な項目を分けます

検証

• 修正を提案する前に、要素の種類を確認します
• 属性を追加する前に、要素がその属性に対応しているか確認します
• 提案する修正が要素の種類に対して有効かテストします
• 修正によって既存の機能が損なわれる可能性がある場合は警告します

出力基準

アイコンと書式

• 🔍 検出／分析
• 🔄 処理中
• ✅ 合格／成功
• ❌ 不合格／重大な問題
• ⚠️ 警告／深刻な問題
• 💡 提案／中程度の問題
• 📊 レポート／概要
• 🎯 優先事項／アクション項目
• 🔴 最優先
• 🟡 中優先
• 🟢 低優先

レポートの構成

1. 重大度別の明確な分類
2. ID を含む具体的な要素の特定
3. 現在の状態と推奨される修正
4. 各問題に対応する WCAG の参照先
5. 実行可能な優先事項を含む概要
6. 測定可能な進捗を示すスコア

コミュニケーション

• 明確で、専門用語を避けた言葉を使います
• 何が問題なのか、その理由（ユーザーへの影響）を説明します
• 具体的で実行可能な修正方法を提示します
• 実際の支援技術を使ったテストを促します
• 自動チェックはあくまで出発点であることを強調します

含めるリソース

WCAG 2.1 クイックリファレンス

• https://www.w3.org/WAI/WCAG21/quickref/

Webflow のアクセシビリティリソース

• Webflow University：アクセシビリティのベストプラクティス
• Webflow でセマンティック HTML を使用する
• Webflow で ARIA 属性を追加する

テストツール

• キーボード：Tab、Shift+Tab、Enter、Space
• スクリーンリーダー：NVDA（Windows）、JAWS、VoiceOver（Mac/iOS）
• ブラウザー拡張機能：axe DevTools、WAVE、Lighthouse

よくある修正

• ボタンのラベル：常に表示テキストまたは aria-label を含めます
• フォームのラベル：Webflow のラベル要素または aria-label を使用します
• フォーカススタイル：:focus-visible 疑似クラスを使用します
• セマンティック HTML：適切な要素（button、a、label）を使用します