AI はフロントエンドコードを生成できますか?

この号で共有されているのは、AIGC の用途の 1 つは、フロントエンドコードの作成または生成を支援することであるということです。 AIGC を使用してフロントエンド開発を支援することには多くの利点があります。たとえば、1 回限りのプロトタイプをすばやく作成したり、なじみのない概念を含むコードの生成を支援したりすることができます。たとえば、ベジェ曲線を理解していなくても、AI はスムーズなアニメーション効果を作成することもできます。

これまでの多くの発明と同様に、AIGC (生成型人工知能) はフロントエンド開発の方法を変えていますが、AIGC は諸刃の剣でもあります。

AIGC を使用して、アクセス可能なフロントエンドコードの生成を支援することができます。 AI は私たちのニーズに対して一見信頼できる回答を提供しますが、AI も間違いを犯すことがあります。実装方法がわからない要件を提示した場合、AI の回答の正確性と信頼性を検証できないため、AI は大胆にコピーして慎重に貼り付けるよう警告します。

3 つの無料 AIGC ツールに対して、フロントエンドのアクセス可能なコードに関するいくつかの一般的な質問をしました。これらのツールは、Google の Gemini と OpenAI の ChatGPT であり、どちらも一般的なデータでトレーニングされた AI ツールの代表的なものです。

ファンの皆さん、AIGC は同じ質問をしても毎回同じ答えを返すわけではないことに注意してください。言い換えれば、AIGC は「純粋な関数」ではなく、同じ入力で必ずしも同じ出力が生成されるわけではありません。自分で評価する際には、あまりこだわりすぎないようにしてください。「純粋関数」が何であるかわからない場合は、AIGC に問い合わせてください。

質問1

制作チームは、自社の製品やサービスを WCAG (Web コンテンツアクセシビリティガイドライン) に準拠させるために定期的に作業しているため、フロントエンド開発者は、自分が作成したコードがアクセシブルかどうかを判断するために AIGC を利用することがあります。 Google の Gemini と OpenAI の ChatGPT を参考にして評価しました。

質問は、次のフロントエンドコードは WCAG 2.2 レベル AA に準拠しているかどうかです。

 <p>我家的猫吃了我的代码。 <a href="news.html" aria-label="猫吃了我的代码">一键三连</a> </p>

この場合、上記のコードは WCAG に準拠していません。具体的には、次の SC (成功基準) 2.5.3 名前タグに準拠していません。

テキストまたはテキストの画像を含むラベルを持つ UI コンポーネントの場合、名前にはテキストの視覚的表現が含まれます。

上記のコードでは、表示されるリンクテキストは「ワンクリックで 3 つのリンク」です。しかし、そのリンクのラベルまたは名前は「猫が私のコードを食べました」です。つまり、リンクの名前には表示テキストが含まれていないため、コードは SC 2.5.3 名前タグに違反します。

Google Gemini レビュー

上記の質問に対する Gemini の回答は、提供された情報に基づいて、コードスニペットが WCAG 2.2 レベル AA に準拠しているかどうかを明確に判断することはできないというものです。 WCAG の合法性を判断するには、コンテンツとコードのあらゆる側面を徹底的に評価する必要があります。これには以下が含まれますが、これらに限定されません。

写真

Gemini は、この問題は範囲外であり、CPU が焼損するだろうと明言しました。次に、AI は一般的だが確かなガイダンスを提供し、その後にトピックを理解するのに役立ついくつかの追加リソースを推奨します。

OpenAI ChatGPT レビュー

上記の質問に対する ChatGPT の回答は、提供された HTML コードスニペットが WCAG 2.2 AA レベルのアクセシビリティ標準に完全に準拠していないというものです。いくつかのアクセシビリティ機能が含まれていますが、いくつか問題があります。

写真

B サイト方言では、ChatGPT は正しく実行しましたが、完全ではありませんでした... ChatGPT は、コードスニペットが SC 2.5.3 の名前タグに合格しなかったという事実を無視してエラーの理由を提供し、代わりにラベルとリンクテキストの品質に焦点を当てました。質問が WCAG レベル AA ではなくレベル AAA に関するものである場合、ChatGPT のリンクテキストに関する記述はそれほど問題ではありません。これは、レベル AAA SC 2.4.9 リンクの目的により、リンクの目的が「リンクテキストのみから識別できる」ことが要求されているためです。レベル A SC 2.4.4 では、コンテキストにおけるリンクの目的についてより幅広い範囲が規定されていますが、リンクの目的は「リンクテキストのみから、またはプログラムによって決定されたリンクコンテキストと組み合わせて決定できる」ことが求められます。

エラーメッセージにもかかわらず、ChatGPT によって提供される改善されたコードスニペットは、元のコードスニペットよりもアクセスしやすくなっています。 SC 2.4.4 だけでなく SC 2.4.9 にも準拠しています。興味深いことに、これは意図的ではありませんが、SC 2.5.3 にも準拠しています。 -aria-label 属性にリンクテキストと同じ値を設定すると、表示されるリンクテキストがリンク名に含まれます。

ファンの皆さんは、表示されるリンクテキストと aria-label 属性に同じ値を設定すると、aria-label 属性が冗長になるため、一般的な ARIA のベストプラクティスとして削除するのが理想的であることに注意してください。

質問2

一般的なコンポーネントのほとんどにはアクセシビリティパターンが文書化されていますが、正しく使用するのは依然として難しいことで知られています。もちろん、これは AIGC ツールの支援が必要になる可能性があるという要件でもあります。私たちは再び Gemini と ChatGPT に相談しました。

私たちの要件は、当社の Web サイトにアクセス可能なタブのセットを作成するために必要なコードを提供することです。

アクセス可能なタブのセットの最終的なパターンは、W3C ARIA Authoring Practices からのものです。タブセットに期待されるすべてのセマンティック情報と機能を備えており、マウス、キーボード (スクリーンリーダーの有無にかかわらず)、およびタッチをサポートします。

ジェミニレビュー

上記の要件に対する Gemini の回答は、HTML、CSS、JS を含む、Web サイトのアクセス可能なタブを作成するために必要なコードは次のとおりです。

写真

Gemini が提供するコードにはいくつかの欠陥があります。最も注目すべきは、期待されるキーボードサポートがないことです。上/下/左/右の矢印キーを使用して各タブを循環できることが期待されます。ジェミニが言及したフォーカス管理も欠けています。

Gemini のコードには、期待される ARIA の役割と属性がすでに含まれていますが、必ずしも正しく含まれているわけではありません。例えば：

各タブは、内部に <button> 要素を含む <li> で構成されます。 ARIA 属性 role=tab、aria-controls、aria-selected が <li> 要素に適用されていますが、<button> 要素に適用し、<li> に role="none" を適用する必要があります。
新しいタブが選択されると、各 <li> の aria-selected 属性の値は更新されません。つまり、現在選択されているタブではない場合でも、スクリーンリーダーは常に「タブ 1」が選択されていると通知します。
role="tabpanel" を持つ各 <div> 要素の aria-labelledby 属性は存在しない ID を指しています。つまり、タブパネルにはスクリーンリーダーによって読み上げられるアクセス可能な名前がありません。

OpenAI ChatGPT レビュー

ChatGPT は、上記のニーズに対して、Web サイトのアクセス可能なタブを作成するには HTML、CSS、および JS コードが必要であると答えています。以下は、アクセス可能なタブを作成する方法の簡単な例です。

写真

ChatGPT によって提供されるコードには ARIA が含まれていません。つまり、タブのように見えるようにスタイル設定されていても、スクリーンリーダーのユーザーにはこれがタブのセットであることが通知されません。

同様に、スクリーンリーダーのユーザーは、現在どのタブが選択されているかを判断できず、コンテンツを参照してのみタブを見つけることができます。目が見える人は、表示されているコンテンツから現在どのタブが選択されているかを識別できるかもしれませんが、現在選択されているタブボタンは他のタブと区別できないように設計されています。これは、画面拡大機能や小さな画面のデバイスを使用する人にとっては問題になる可能性があります。

タブの構造とタブ間の関係は視覚的には明らかですが、画面上でタブを見ることができないユーザーを支援するプログラム的な構造や関係はありません。