はじめまして！ shikakun といいます。freeeのデザインシステムの開発に携わっている、ソフトウェアデザイナーです。2024年1月に中途採用で入社しました。 freeeで働くことを決めた理由のひとつは、freeeがアクセシビリティの向上に積極的に取り組んでいる印象を持っていたからでした。アクセシビリティとは、「（製品やサービスを）利用できること、またはその到達度」という意味で使われる言葉です。障害の有無に関わらず、さまざまな性質を持つ誰もが、どのような環境であっても利用できるインターフェースをつくることは、ソフトウェアの開発者として任意ではなく必須の責務だと考えます。さらに、「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げるfreeeなら、アクセシビリティの向上がビジネスのゴールと繋がっていると思えたからです。 では、実際に入社して1年間働いてみて、その印象に

role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのかHTMLアクセシビリティWAI-ARIA 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべくわかりやすい形で、WAI-ARIAそのものや、その中で登場する role 属性や、名前に aria- のプレフ

@axe-core/playwright によるアクセシビリティテストの自動化 2024.08.18 axe-core は axe というアクセシビリティテストツールのコアエンジンで、オープンソースとして提供されています。この記事では、E2E テストフレームワークの Playwright と axe-core を組み合わせて使用して、アクセシビリティテストを自動化する方法について紹介します。 今書いているコードがアクセシビリティ上の問題を持っていないかどうかを確認するために、Lint ツールによる機械チェックが有効です。eslint-plugin-jsx-a11y や Markuplint といったツールを導入することで、コンポーネント単位で静的にコードを解析してアクセシビリティの問題を検出できます。このような Lint ツールは、code を書いている最中に即座にフィードバックを受けるこ

こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM

こんにちは。プロダクトエンジニアのatsushimと言います。 社内ではプロダクトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロントエンドの経験が少なく基本的なマークアップの知識が足りていない アクセシビリティを意識してね！といわれても何をすればいいのかわからない そのため、SmartHRでは独自のESLint ルールを作成し、CIに組み込むことでa11yを担保、改善

アクセシビリティとか生成UIとかVivaldiとか（Re: Accessibility Has Failed: Try Generative UI = Individualized UX） 2024年3月4日 著 ヤコブ・ニールセン氏といえば、ユーザビリティやUXの分野では大家として知られており、Web業界歴の長い方ほど、その名前に馴染みがあるのではと思います。私もいち時期、氏の著書で勉強させていただきました。そんなニールセン氏が最近になって書いたAccessibility Has Failed: Try Generative UI = Individualized UXという記事は、長年デジタルアクセシビリティに携わってきた立場からすると、ちょっと看過できない内容。 もちろん、デジタルアクセシビリティがいまだ道半ばであることは認めますけど、私の狭い観測範囲においても「やっぱりな」という感

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 を更新しようという動

CreatorZineニュース freee、アクセシビリティをはじめフロントエンド開発のノウハウが詰まったデザインシステム「vibes」公開 freeeは、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開した。同デザインシステムを公開することで、社会全体にアクセシビリティ向上に向けた取り組みが広がることを目指す。 なぜ、今freeeが「アクセシビリティ」に取り組むのか（開発責任者：山本伶氏） freeeは、「スモールビジネスを、世界の主役に。」というミッションのもと、「アイデアやパッションやスキルがあればだれでも、ビジネスを強くスマートに育てられるプラットフォーム」の構築を目指しています。スモールビジネスのオーナー、従業員、取引先などいろいろな立場でスモールジネスに関わる方には様々な方

LINEヤフーにおけるこれからのアクセシビリティというスライドで「WCAGはハードルが高い」という文言を見かけました。どうしてハードルが高い、言いかえるならば難しいとされるのか、その難しさはどこから来るのかをちょっと深掘りしてみようと思います。 WCAGという言葉について、改めて見ておきましょう。WCAGはもっぱら、Web Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン）というW3Cの発行する技術文書を指すわけですけども、現時点でよく参照されるのがウェブアクセシビリティ基盤委員会（WAIC）が公開している日本語訳のWCAG 2.1でしょう。ちなみに本家のW3Cは、WAICが現時点で公開しているWCAG 2.1の改訂版を今年9月に公開し、さらにバージョンの進んだWCAG 2.2を先月に発行したばかりだったりします。 WCAG 2

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の話

公開日 : 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」など）を使用する。例えば、「はじめまして。私は...です」のように自己紹介でき、「ブラックコーヒーをいただけますか」など

本セッションでは、昨今注目されているテストの自動化やQAについてお話するだけでなく、手動でのテストが困難なアクセシビリティのテストについてもデモを交えながら解説します。さらに製品のfeature updateについて最新情報をお届けする予定です！ 本記事は、TechFeed Experts Night#15 〜 ソフトウェアテスト最前線 〜 自動化サービスの波は本物か？のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 こんばんは。1週間前にJaSSTという大きなカンファレンスで、今日と同じメンバーでテスト自動化や未来を語ろうみたいな話をして、1週間後に2回戦というか延長戦という感じのイベントがこのTechFeedで開催されることになって非常に嬉

はじめに デザイナー以外の方でも、サイトやアプリを作るためにUIを作成することはよくあると思います。 そんな時に最低限知っておくと良さそうな、アクセシビリティに関するTipsをまとめてみました。 この記事で紹介する以外にも色々とあるとは思うので、是非コメントなどで「これも追加した方がいいんじゃないか」など提案いただけると助かります！ この記事ではFigmaなどのデザインツールでUIをデザインする段階を想定しています。 そのため、「ボタンはdivでなくbuttonで実装する」「アイコンフォントにaria-labelをつける」「音声を勝手に再生しない」といった実装段階のポイントは扱いません。 読みやすい文字のサイズや色、フォントを使う 文字サイズ Webサイトやアプリで使われている本文のフォントサイズは14~18pxが多いです。 また、W3Cでは英文の場合18ポイント以上もしくは、14ポイント

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 を生成する必要があります。前者は面倒なので、

iOSにiPadOS、watchOSなどアップル製品のOSには「アクセシビリティ」と呼ばれる機能が搭載されている。障がいを持つ方々がデジタルデバイスをよりスムーズに使えるようにするため組み込まれた機能だが、デジタル機器の操作に不慣れな方など、一般ユーザーにも役立つものが多く揃っている。 今年の後半に、アップルが各OSのソフトウェアアップデートにより、アクセシビリティが一段と便利になる新機能を追加する。詳しい内容を解説しよう。 なお、iOS/iPadOSの場合「設定」アプリに入り、「アクセシビリティ」を選択すると現在利用可能な機能のリストが参照できる。 ■拡大鏡が「ドアの検出」に対応 最初はiPhone/iPadに搭載されている「拡大鏡」の機能拡充だ。 拡大鏡には、カメラをかざした対象を画面に拡大表示したり、目の前にいる人物を検知して、互いの距離を計測できる「人の検出」機能がある。拡大鏡はコ

こんにちは。Poca11y（ポカリ）チームのSUGI(@blindsoup2p1)と小林(@sukoyakarizumu)です。 わたしたちPoca11yチームは「kintone」のアクセシビリティ改善活動に参加しています。この記事ではkintoneのアクセシビリティを改善するチーム体制について解説します。さらにPoca11yチームとkintone開発チームが協力して整備したアクセシビリティを強化するためのESLintルールについても解説します。 Poca11y（アクセシビリティ）チームとkintoneのアクセシビリティ改善 Poca11yチームとは Poca11yチームはサイボウズ全体の「アクセシビリティ」向上を目的としたチームです。Poca11yチームでは主に以下3種類の活動を行なっています。 社内啓発：アクセシビリティの社内研修・勉強会・ガイドライン作成などを行います。 製品改善：サ