アクセシビリティを担保するためにESLintの独自ルールを作っている話 - SmartHR Tech Blog
こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善
アクセシビリティとか生成UIとかVivaldiとか（Re: Accessibility Has Failed: Try Generative UI = Individualized UX）
アクセシビリティとか生成UIとかVivaldiとか（Re: Accessibility Has Failed: Try Generative UI = Individualized UX） 2024年3月4日 著 ヤコブ・ニールセン氏といえば、ユーザビリティやUXの分野では大家として知られており、Web業界歴の長い方ほど、その名前に馴染みがあるのではと思います。私もいち時期、氏の著書で勉強させていただきました。そんなニールセン氏が最近になって書いたAccessibility Has Failed: Try Generative UI = Individualized UXという記事は、長年デジタルアクセシビリティに携わってきた立場からすると、ちょっと看過できない内容。 もちろん、デジタルアクセシビリティがいまだ道半ばであることは認めますけど、私の狭い観測範囲においても「やっぱりな」という感
WCAG 2.2 日本語訳 公開のお知らせ
2024年3月1日 更新 WCAG 2.2 の日本語訳を公開しました。 Web Content Accessibility Guidelines (WCAG) 2.2 (日本語訳) 2023年10月にW3C勧告となったWeb Content Accessibility Guidelines (WCAG) 2.2を日本語に翻訳したものです。 WCAG 2.2は、WCAG 2.0、WCAG 2.1の後続となる仕様です。基本的な枠組みは変わっていませんが、9つの達成基準が追加されており、1つの達成基準が削除されています。 現時点での日本産業規格 JIS X 8341-3:2016 は、国際規格 ISO/IEC 40500:2012 との一致規格であり、WCAG 2.0 と同一の内容となっていますが、今回、WCAG 2.2 が勧告となったことを受け、ISO/IEC 40500 を更新しようという動
freee、アクセシビリティをはじめフロントエンド開発のノウハウが詰まったデザインシステム「vibes」公開
CreatorZineニュース freee、アクセシビリティをはじめフロントエンド開発のノウハウが詰まったデザインシステム「vibes」公開 freeeは、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開した。同デザインシステムを公開することで、社会全体にアクセシビリティ向上に向けた取り組みが広がることを目指す。 なぜ、今freeeが「アクセシビリティ」に取り組むのか（開発責任者：山本伶氏） freeeは、「スモールビジネスを、世界の主役に。」というミッションのもと、「アイデアやパッションやスキルがあればだれでも、ビジネスを強くスマートに育てられるプラットフォーム」の構築を目指しています。スモールビジネスのオーナー、従業員、取引先などいろいろな立場でスモールジネスに関わる方には様々な方
ウェブコンテンツアクセシビリティガイドライン（WCAG）は何が難しいのか、あるいは難しさに立ち向かう方法 - 水底の血
LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱら、Web Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）というW3Cの発行する技術文書を指すわけですけども、現時点でよく参照されるのがウェブアクセシビリティ基盤委員会（WAIC）が公開している日本語訳のWCAG 2.1でしょう。ちなみに本家のW3Cは、WAICが現時点で公開しているWCAG 2.1の改訂版を今年9月に公開し、さらにバージョンの進んだWCAG 2.2を先月に発行したばかりだったりします。 WCAG 2
WCAG 2.2の勧告とWCAG 2.1の更新 | アクセシビリティBlog | ミツエーリンクス
W3Cからアナウンスされたように、WCAG 2.2が2023年10月5日付けで勧告（Recommendation）となりました。 WCAG 2.1の最初の勧告が2018年ですから、そこから5年が経って達成基準（Success Criterion）が追加されたことになります。 WCAG 2.1の勧告について「最初の」とわざわざ言っているのは、WCAG 2.1が先月に更新されたことによります（W3Cのアナウンス）。 WCAG 2.1の更新の内容はもっぱらエラッタの適用ですが（WCAG 2.1のChange Logも参照）、その中でも達成基準4.1.1について注記が追加されたのが目立った変更点と言えます。 この追記は、端的にはWCAG 2.2では達成基準 4.1.1が削除されているように、達成基準 4.1.1についての評価は別の達成基準で行うようにするという内容です。 さて、WCAG 2.2の話
ウェブアクセシビリティ検証ツール「Stark」 | Accessible & Usable
公開日 : 2023年9月22日 カテゴリー : アクセシビリティ 「Stark」というウェブアクセシビリティ検証ツールがあります。各種ブラウザ (Chrome、Firefox、Safari、Edge) の拡張機能として、あるいは各種デザインツール (Figma、Sketch、Adobe XD) のプラグインとして、色覚シミュレーションや色のコントラスト比のチェックができるツールとして以前から知られていましたが、現在は、それ以外にもアクセシビリティに関する様々なチェックができるようになっています。 この記事では、Stark で可能なウェブアクセシビリティ検証について、Chrome 拡張機能を例に、無料プランで使える機能をご紹介します。 Chrome 拡張機能で Stark を開いたところ。 機能一覧 (Contrast、Typography、Alt-Text、Touch Targets、F
アップル、アクセシビリティー機能を強化へ--機械学習などを活用
Appleは米国時間5月16日、Global Accessibility Awareness Dayを前に、認知、視覚、聴覚、身体機能のアクセシビリティーを高めることを目的に設計された、「iPhone」「iPad」「Mac」向けの複数の新機能をプレビューした。これらの機能は、2023年後半に提供される予定だ。 そのうちの1つである「Live Speech」は、言葉を発せない人やさまざまな言語パターンや障害を持つ人を対象とした機能で、ユーザーが言いたいことを文字で入力すると、それを音声で伝えてくれるというもの。この機能は、対面での会話のほか、電話や「FaceTime」での通話でも使用できる。iPhone、iPad、Macで動作し、端末に内蔵されている任意の音声（「Siri」など）を使用する。例えば、「はじめまして。私は...です」のように自己紹介でき、「ブラックコーヒーをいただけますか」など
mablの”品質エンジニアリングジャーニー”で見落としがちなアクセシビリティテストも実現しよう!
本セッションでは、昨今注目されているテストの自動化やQAについてお話するだけでなく、手動でのテストが困難なアクセシビリティのテストについてもデモを交えながら解説します。さらに製品のfeature updateについて最新情報をお届けする予定です！ 本記事は、TechFeed Experts Night#15 〜 ソフトウェアテスト最前線 〜 自動化サービスの波は本物か？のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 こんばんは。1週間前にJaSSTという大きなカンファレンスで、今日と同じメンバーでテスト自動化や未来を語ろうみたいな話をして、1週間後に2回戦というか延長戦という感じのイベントがこのTechFeedで開催されることになって非常に嬉
サイトやアプリのUIデザインをする時に知っておくと良いアクセシビリティのこと - Qiita
はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント
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 を生成する必要があります。前者は面倒なので、
Apple WatchがiPhoneから操作可能に。アップルが今秋公開の「アクセシビリティ」新機能を発表 - Phile-web
iOSにiPadOS、watchOSなどアップル製品のOSには「アクセシビリティ」と呼ばれる機能が搭載されている。障がいを持つ方々がデジタルデバイスをよりスムーズに使えるようにするため組み込まれた機能だが、デジタル機器の操作に不慣れな方など、一般ユーザーにも役立つものが多く揃っている。 今年の後半に、アップルが各OSのソフトウェアアップデートにより、アクセシビリティが一段と便利になる新機能を追加する。詳しい内容を解説しよう。 なお、iOS/iPadOSの場合「設定」アプリに入り、「アクセシビリティ」を選択すると現在利用可能な機能のリストが参照できる。 ■拡大鏡が「ドアの検出」に対応 最初はiPhone/iPadに搭載されている「拡大鏡」の機能拡充だ。 拡大鏡には、カメラをかざした対象を画面に拡大表示したり、目の前にいる人物を検知して、互いの距離を計測できる「人の検出」機能がある。拡大鏡はコ
kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ
実装しながら理解するモーダルのアクセシビリティ 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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Announcing a new Web Accessibility Annotation Kit from Inclusive Design
Improve the accessibility of your Next.js site – Vercel
WCAG (Web Content Accessibility Guidelines) | Level Access
Accessibility in JavaScript Frameworks Part 2: Comparing Each Framework