VS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれる拡張・「A11y Lint」 - かちびと.net
A11y Lint A11y LintはVS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれるVS Code拡張です。いわゆるアクセシビリティのlinterになります。 インストールすると、アクセシビリティに問題のあるコードに波下線を引き、マウスホバーで何が問題なのかを表示してくれる、というもの。 コードを書けばすぐにチェックされるようになっているのでその場ですぐ直せます。Axeと比べてメリット沢山だよ！との事でした。アクセシビリティチェックのタスクで苦労している開発者の方は試されてみては如何でしょうか。 A11y Lint The post VS CodeでHTML、React、CSSのコードのアクセシビリティチェックをしてくれる拡張・「A11y Lint」 first appeared on かちびと.net.
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
React18 の useId で a11y対応する
aria-controlsやaria-errormessage・aria-labelledbyは、一意の ID 属性で 2 つの異なる要素を紐づける必要があります。 エラー文言付き Textbox 例として、以下の様な「errorMessageを与えた時にエラー表示する」Textbox コンポーネントを見ていきます。 <Textbox title="お名前" inputProps={...register("name")} errorMessage="正しく入力してください" /> 対象となるのは「input 要素・エラー文言要素」です。この 2 者を紐づけるためには、エラー文言要素を指す ID 属性が必要です（aria-errormessageとして input 要素に指定）これを達成するには、props で ID 指定するか、内部的に ID を生成する必要があります。前者は面倒なので、
実装しながら理解するモーダルのアクセシビリティ with React
はじめに この記事では以下のアクセシビリティ要件を満たすモーダルを実装します。 モーダル要素に role 属性、aria-modal 属性、aria-labelledby 属性、aria-describedby 属性が付与されている モーダルを開くと、モーダル内の最初の focusable な要素に自動でフォーカスされる モーダルが開いている間、モーダル以外の要素に aria-hidden 属性が付与される モーダルが開いている間、モーダル以外の要素のスクロールが無効化される モーダルが開いている間、モーダル内でフォーカスがトラップされる Esc キーを押下すると、モーダルが閉じる モーダルの外側をクリックすると、モーダルが閉じる モーダルを閉じると、モーダルが開く前にフォーカスされていた要素にフォーカスが戻る
Accessibility in React
Accessibility is the ability for applications to be used by everyone, including those with disabilities.As a devloper its your responsibility to make sure that everyone get the right experience in your app. For making your react app Accessible you should know what is accessibility exactly is?? so let's get started What is Accessibility and Why it is needed? Web accessibility is also referred to as
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
アクセシビリティ – React
なぜアクセシビリティが必要なのか？ Web アクセシビリティ（a11y とも呼ばれます）とは、誰にでも使えるようウェブサイトを設計・構築することです。ユーザ補助技術がウェブページを解釈できるようにするためには、サイトでアクセシビリティをサポートする必要があります。 React はアクセシビリティを備えたウェブサイトの構築を全面的にサポートしており、大抵は標準の HTML の技術が用いられます。 標準およびガイドライン WCAG Web Content Accessibility Guidelines はアクセシビリティを備えたウェブサイトを構築するためのガイドラインを提供しています。 以下の WCAG のチェックリストはその概要を示します。 WCAG checklist from Wuhcag WCAG checklist from WebAIM Checklist from The A1
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Improve the accessibility of your Next.js site - Vercel