…. あっ、この問題、アクセシビリティ相談で見たやつだ！！（gamochan さん） 6. 負荷試験基盤（n9te9 さん） 7. 猫でもできるプロンプト改善（icchan さん） 8. Google ADKでDeep Researchを自作してみた（kubotaka さん） 9. 確率的データ構造という選択肢 〜正しさを捨てれば、世界は軽くなる〜（murakami さん） 10. SLOはこわくないよ（higuchi さん） 11. AI から没頭を取り戻す（yamo さん）…

…実装することが重要 アクセシビリティやパフォーマンスの観点でもHTMLの構造は重要 まとめ ここまでを読んでいただき「なんだ、あまりにも基本的なことじゃないか」と思った方、正しいと思います。「LLMの使い方が悪い」と思った方も正しいと思います。例えばHTMLの構造なんかはFigma MCPを使えば改善できる可能性もあります。 今回この記事で書きたいのはLLMを使った実装が悪いのではなく、理想形を伝えきれていない自分を疑おうというものです。 どの問題も人間が担当すべきコンテキス…

…じめに こんにちは。アクセシビリティエンジニアの tajiman です。 先日、プロダクトエンジニアの morisy さんが「React Hook Form と dnd-kit を使った並び替え可能なフォームの開発」という実践的な記事を公開しました。 dnd-kit は高機能で自由度が高いライブラリですが、さらにアクセシビリティの観点を取り入れることで、より「誰もが使いやすい」状態へと進化させることができます。 本記事では、先日の記事で紹介された実装をベースに、アクセシビリテ…

…ュール化されており、アクセシビリティへの対応やカスタマイズ性に優れているのが特徴です。 今回実装したいUIイメージ 以下は開発したUIを解説用に簡易化したものです。今回はこちらのUIイメージで解説をします。 UIイメージ 入力フォームが含まれる各要素（アイテム）を、ユーザーがドラッグ＆ドロップで並び替えられます。また、各ボタンをクリックすると新しくアイテムを挿入したり、アイテムを削除できます。 実装の構成 今回は以下の構成で実装を行います。 useSampleForm.ts …

…をしていました。 「アクセシビリティを担保するためにESLintの独自ルールを作っている話」 「弊社のheading levelがめちゃくちゃだった件と 解決のためにしたことの話」 たまには違う話をしようかな、とも思いましたが今回も最終的にESLintの話です。 そもそもスプレッド構文と残余引数って何？ スプレッド構文と残余引数の詳しい説明はMDNの スプレッド構文、残余引数 を参照していただくとして簡単に説明すると、 ...hoge のように記述することで複数の値・属性をま…

…タイトルで、「ウェブアクセシビリティ」というものに対して情熱を持っておられる間嶋さんからのお話でした。 印刷物やウェブデザインなどのクライアントワークのかたわら、アクセシビリティやユニバーサルデザインに関する情報発信を続けています。ポスター付きライトニングトークから始まり、ブログやSNSでの発信、勉強会の開催、セミナー出演からの書籍化、書籍の内容を体験できる展示…….これらの活動で意識しているのは、情報の伝え方を考えるためのエッセンスを身近に持ち帰ってもらうことです。 「自分…

…ストしてもらえる？ アクセシビリティツリーで読み解く、AIの『視点』」です。 Browser Useの内部プロンプトやPlaywright MCPの内部実装について解説されており、「昨今のAIがどのようにブラウザの画面表示を認識するか」のイメージを捉えられました。 プロダクトのアクセシビリティを向上させることがAIフレンドリーにも繋がり、ひいては開発生産性の向上にも繋がっていく……そんな雰囲気を感じられてとても胸が躍りました。 アクセシビリティに強くなりたい。 ブースもすべて…

…いと考えています。 アクセシビリティの改善 タイトルのストリーミングによって発生した読み上げ機能の問題解消に取り組んでいます。現状、メタデータが動的に決定されるため、スクリーンリーダーでのタイトル読み上げができなくなっています。改善前の実装ではメタデータをブロッキングして取得していたため読み上げが可能でした。 この問題に対して、aria-live属性を使用した解決を検討しています。タイトルが更新されたタイミングでスクリーンリーダーに通知できるようにしたいと考えています。 まと…

…は！SmartHRでアクセシビリティエンジニアをしているtajimanです！ SmartHRは、2025年5月23日〜24日に開催された「TSKaigi 2025」にBronzeスポンサーとして協賛し、7名が参加し、2名が登壇しました。 この記事では、イベントの模様と合わせて、プロポーザル活動から登壇までの経験をお届けします！ TSKaigi 2025とは TSKaigi 2025は、TypeScriptに関する技術カンファレンスです。今年のミッションは「学び、繋がり、型を破…

…ントの実装において、アクセシビリティの確保は難しい課題の1つです。 この記事では、smarthr-ui で提供している階層構造のフォーム UI コンポーネントについて、アクセシビリティを考慮しながら、どのように複雑なUIを実現したのか、その実装アプローチとアクセシビリティへの取り組みをご紹介します。 目次 目次 smarthr-ui で提供している階層構造のフォーム UI 階層表現を実現するための実装の説明 利用例 アクセシビリティのこだわりポイント デスクトップアプリのよう…

…ーム横断の情報共有とアクセシビリティへの取り組み フロントエンド定例会と「フロントエンドこれだけはやっておけリスト」 アクセシビリティへの取り組み 開発体験 SmartHR UI ESLint ボイラープレート まとめ 多様なチームとフロントエンドエンジニアの役割 SmartHR におけるチーム構成やフロントエンドエンジニアの役割について解説します。 チームの構成 SmartHR では、プロダクトや機能ごとにチームが編成され、各チームに 1 名～ 2 名程度のフロントエンドエ…

…してパフォーマンスとアクセシビリティを改善することができたので、その内容を簡単に紹介します。 SWRのプリフェッチ機能 SWRとは、キャッシュベースの状態管理ライブラリです。 swr.vercel.app SWRを利用することで、フェッチ結果のレスポンスの状態管理を簡単に行うことができます。 同じような並びのライブラリとして、TanStack QueryやGraphQL向けのApollo Clientなどがあります。 SWRには、プリフェッチ機能が備わっています。 プリフェッ…

…は！SmartHRでアクセシビリティエンジニアをしているhassyです。 アクセシビリティエンジニアとして、開発チームと協力しながらプロダクトのアクセシビリティ向上に取り組み、誰もが使いやすい製品づくりを目指しています。ひとりでも多くのユーザーが快適に使えるよう、日々改善を進めています！ SmartHRでのアクセシビリティエンジニアの仕事については、「SmartHRアクセシビリティ月報 2024年8月号」と「SmartHRアクセシビリティ月報 2024年11月号」で詳しく紹介…

…対応できます。また、アクセシビリティに配慮されており、キーボード操作やスクリーンリーダーもサポートしています。 (ChatGPT に説明していただきました。) 実現したい UI 以下の図は、今回開発した UI を簡略化したものです。 実現したいUI 入力フォームが含まれている要素があり、ユーザーはマウスのドラッグ&ドロップもしくはキーボード操作で要素を並べ替えることができます。 この UI を実現するためのコードは長いため割愛しますが、ベースは「Sortable | @dnd…

…動ができています。 アクセシビリティ ESLint 新たな取組として SmartHR 独自の ESLint ルールを作成し始めました。 アクセシビリティを担保するためにESLintの独自ルールを作っている話 アクセシビリティに関するルールは16, それ以外は19、合わせて35のルールが作られました。 大半のルールはプロダクト開始時点で エラー状態で導入されており、既存のプロダクトも順次対応されています。 独自ルール導入により、マークアップの知見が薄くとも、修正すべき箇所・方法…

本記事は、SmartHR Advent Calendar 2024 シリーズ 1 の 19 日目の記事です。 こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 この記事では、SmartHR が共通で利用する ESLint の設定パッケージを、ESLint v9 と Flat Config に対応させた取り組みを紹介します。 ESLint とは ESLint は、JavaScript や TypeScript を中心に幅…

こんにちは！アクセシビリティテスターのgamochanです。 アクセシビリティテスターとは、障害のある従業員がプロダクトを試験し、障害当事者という立場を活かしながら開発側にフィードバックをすることでプロダクトのアクセシビリティ向上を目指す仕事です。詳しくは アクセシビリティテスタープロジェクト | SmartHR ACCESSIBILITYをご覧ください。 私自身も弱視（ロービジョン）で常に拡大鏡（ズーム機能）を使用しています。 拡大鏡を使用した際の見え方については次の記事で…

…、デザインユニット、アクセシビリティユニット、多言語対応ユニットなど、複数のステークホルダーへのヒアリングを実施しました。 その結果明らかになった課題の中から2つを紹介します。 開発スピードが落ちる レガシー画面の多くはjQueryをベースに作られていて、コードがかなり複雑になっています。そのせいで、機能を追加したり改修したりするだけでも、React化された画面と比べてかなり手間がかかるのが実情です。特に、古いコードを読み解いたり、当時どんな意図で設計されたのかを理解するのに…

…当しています。 先日アクセシビリティ本部のメンバーのサポートを受けながらWCAG達成基準の検証を実施したので、その様子や試験の結果を紹介します！ SmartHRならではのエンジニアがスペシャリストのサポートを受けながらアクセシビリティに積極的に取り組める環境を知っていただければ幸いです。 WCAGとは WCAG（Web Content Accessibility Guidelines）はWebアクセシビリティを実現するための国際基準です。 検証を行うことで、視覚や聴覚、認知な…

…ラリでしたが、今ではアクセシビリティなどがしっかりと考慮されたデザインシステムにまで広がっていますね。 koba04：React が広く使われるようになり、他社でも同様のコンポーネント共通化が進む中、SmartHR UI はうまく浸透しましたね。 nabeliwo：SmartHR UI が浸透した理由は、やはり新しいプロダクトが次々と生まれ、その中で必要性が高まっていったからだと思います。また、エンジニアとデザイナーが協力して、デザインシステムとして成長させていったことも大き…

こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use se…

…た要素取得ではなく、アクセシビリティに基づくセレクターを使用する アクセシビリティに基づくセレクターを使用することで、実際のユーザーが操作する方法に近い形でテストを行うことができる アクセシビリティ属性（roleなど）は、UIの見た目が変わっても比較的一貫しているため、UIのデザイン変更によるテストの失敗を防ぐことにも繋がる SmartHRのプロダクトはアクセシビリティ改善に日々取り組んでいるため、大部分の要素特定が可能になっている。また、アクセシビリティに基づくテストを行う…

…ニア、UXライター、アクセシビリティスペシャリストなど、様々な職種の方から利用いただいています。 長期実践型スクラムマスター SmartHRでは開発者がスクラムマスターを兼任しているケースが多いです。 長期実践型スクラムマスターは、その開発者兼スクラムマスターに対して、1on1コーチング＆メンタリングでスクラムマスター活動をサポートする取り組みです。 課題発見力の向上、長期的な目線でチームを良くしていく取り組みなどを促し、スクラムマスタースキルの向上を狙います。 現在3名に対…

…クトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事ではSmartHR独自のESLintのルールを作っている話をしたいと思います。 SmartHRでは アクセシビリティ（以降a11y） を考慮したアプリの開発・改善を行っており、過去記事でその様子をご確認いただけます。 SmartHR Tech Blog: アクセシビリティ の検索結果 ただ普段の開発中、a11yを意識しつつ開発を行うことは、エンジニアにかなりの負荷がかかります。 フロ…

…えで気をつけることをアクセシビリティ観点で説明されていました。 チャレンジする話 発表者は nomuson さん。 チャレンジ内容は「会場参加しているPdE全員の顔を見て名前(Slack name)を当てる」というものでした。 会場にいる人の名前を当てていく nomuson さん ほとんどの参加者の名前を見事に当てた(すごい！)後は、複数の書籍からの引用をもとに記憶に関するメカニズムや包括的理解について紹介していました 長期記憶から情報を取り出すメカニズムについて説明する n…

…はプレースホルダーのアクセシビリティとユーザビリティについての課題と、その解決手段についての話を書きます。 プレースホルダーって何？ Webアプリでよく見る、フォームコントロールに値が無いときに表示するテキストのことです。 主な用途としては、フォームの入力例や入力内容の説明テキストが設定されることが多いです。 HTML Standardでは The placeholder attribute represents a short hint (a word or short p…

…R は特に Web アクセシビリティに力を入れた開発を行っているのに、それも活用しづらい状況になっています。 E2Eテストに開発チームがオーナーシップを持ちづらい リポジトリがプロダクトから分離され、QAチームによってメンテナンスされていることはありがたいことですが、どうしてもE2Eテストに対して他人事になってしまい、開発プロセス内で軽視されてしまう傾向がありました。 E2Eテストを最大限活用するためには、実行基盤まで含めたE2Eテストのオーナーシップを開発チームが持ち、自発…

…用される太字文字を、アクセシビリティの観点から解説された発表でした。 アクセシブルな強調表現 文字ときどきRuby tommy さんによる発表です。Ruby による文字の扱い(フォントや文字コード、コードポイントなど)をクイズ形式で基本から解説した発表でした。 文字ときどきRuby こちらはスライドが公開されています。 tmtms.net バックエンドPdEだけど毎日泣きながらNext.js開発してる shinoku さんによる発表です。バックエンドエンジニアがフロントエン…

…は以下の通りです。 アクセシビリティへの取り組み 恥ずかしながら、SmartHRに入社する前までの開発経験ではアクセシビリティを意識した開発を十分に行えていませんでした。SmartHR UIではアクセシビリティを重要視しており、実践を通じてアクセシブルなUI作りを学びたいと考えています。 SmartHRプロダクト全体への貢献 これまでの経験では、主に特定の一つのプロダクトに割り当てられ、そのプロダクトへの貢献にのみ焦点を当ててきました。しかし、SmartHR UIに関わること…

…、この人事評価機能のアクセシビリティ試験を行い、いくつかの改善点を見つけました。改善点の内容と今後の対応について共有したいと思います！ アクセシビリティ試験の概要 Web Content Accessibility Guidelines（以下 WCAG） 2.1 を参考に試験しました。 WCAG 2.1 はウェブコンテンツをよりアクセシブルにするためのガイドラインです。ウェブコンテンツをアクセシブルにするための推奨事項が策定されています。 このガイドラインに従うことで、全盲又…