…クトを開発する傍ら、アクセシビリティを高めるための改善や仕組みづくりを進めています。 この記事では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 はウェブコンテンツをよりアクセシブルにするためのガイドラインです。ウェブコンテンツをアクセシブルにするための推奨事項が策定されています。 このガイドラインに従うことで、全盲又…

…サーベイ機能で行ったアクセシビリティ改善内容を紹介します。 対象読者 アクセシビリティに興味がある人 SmartHRに興味がある人 従業員サーベイ機能とは 従業員サーベイ機能とは、従業員のエンゲージメントやキャリア希望、ハラスメントの有無など組織や従業員の状態を可視化する機能です。 2023年上期に行ったアクセシビリティの改善について 2023年上期は以下の改善を行いました。 従業員サーベイ機能全体 FlashMessage（アクセシビリティの課題があるコンポーネント）の置き…

…ができます。 また、アクセシビリティにも配慮されており、幅広いユーザー層に対して使いやすいインターフェースを提供しています。 まとめ 以上、配置シミュレーション機能のフロントエンドの技術選定についてでした。 技術選定時はNext.jsを使うか悩んでいましたが、最近のReactを見ているとServer Componentsなどを自分たちで考えて使っていくのは難しいと感じていて、将来的な開発体験を考えるとNext.jsのようなフレームワークを使うという意思決定は良かったなあと思っ…

…、協賛しています。 アクセシビリティ アクセシビリティは、SmartHRのプロダクトにおいて強く意識している問題です。すべての従業員に使いやすいプロダクトを目指すために、アクセシビリティに関する活動にも協賛をしています。 アクセシビリティの祭典2022 accfes.com 障害のある方を支援する技術に関するカンファレンスです。Webに関するアクセシビリティの話題も活発で、SmartHRも2020年からアクセシビリティを世に普及させるためにスポンサーを続けています。また、プロ…

…プですが、これは主にアクセシビリティ対応や多言語化対応を行うメンバーが集まったグループです。元々プロダクトデザイングループを中心にアクセシビリティ対応を進めていたのですが、それをさらに加速させることを意図して作られました。特定のプロダクトを対象として活動するわけではなく、SmartHR の組織全体に対して働きかけるような活動をしています。詳しくは VP of ProductDesign である ouji san の以下の記事をご覧ください。 「やさしさ」禁止！SmartHRの…

…大きく伸びています。アクセシビリティ改善やPropsの拡張、レンダリングの改善など、頻繁なリファクタリングが行なわれています。 また、今まではBREAKING CHANGEをある程度まとめてリリースする方針でしたが、方針を改定して都度リリースする方針に切り替えた結果、メジャーバージョンが8から24へと跳ね上がりました。 2020/05/21 2022/12/13 バージョン v8.2.0 v24.3.0 コンポーネント数*1 66 63 ソースコード規模*2 12230 28…

…弊社内で実施しているアクセシビリティマスター養成講座のご紹介と、SmartHRの従業員サーベイというプロダクトで実施しているアクセシビリティ改善の取り組みについてお話しできればと思います。 SmartHRにおけるアクセシビリティの取り組み SmartHRでは、アクセシビリティの専門スキルを持つ@masuP9さんと@maverickさんを中心にアクセシビリティ改善の取り組みが行なわれています。 お二人のアクセシビリティに関する取り組みに関しては、以下の記事をご参照いただければと…

…年のSmartHRのアクセシビリティの取り組みを振り返り、2022年の進め方についてチラっとご紹介していきます。 SmartHRにとっての2021年はアクセシビリティの専門家が入社し、その取り組みが加速した年でした。ほとんどのプロダクトでアクセシビリティの改善が行われただけでなく、継続的にアクセシビリティの品質を担保する仕組みづくり、多言語対応、またプロダクト以外でもアクセシビリティの改善が行われました。 目次 アクセシビリティの専門スキルを持つ人の入社 プロダクトはもちろん…

…ポーネント集でした。アクセシビリティの確保などの様々な観点からもそのようなコンポーネント集になることは仕方なかったのですが、親要素の中にループで回した子要素を作る場合などに、Rails側のViewでループ処理を入れたりすることが難しく、またstyled-componentsとガッチリ結合している点からCSSの管理もCSS in JSで管理する他なく、最終的にほとんどページの構成要素をReactのコンポーネントで作ることになりました。結果として、ViewにはReactを呼び出す…

…こうという趣です。 アクセシビリティ(a11y)の話 最後に SmartHR では 4 月より SmartHR のアクセシビリティ改善における技術顧問として @masuP9 を迎えています。 SmartHR では「社会の非合理をハックする」というミッションを掲げていますが、 SmartHR が利用できないことが原因で労働にアクセスできないとしたら SmartHR 自体が働く上での非合理な仕組みになりえます。 PR のレビューの雰囲気 いつの間にやらダークサイドに堕ちているとい…

こんにちは、エンジニアのkinoppydです。 先日、SmartHRでのメタプログラミングRuby読書会と、その成果物というエントリを公開した直後に、毎週水曜日に開催されている社の全エンジニアが参加するテック定例というイベントの中で、CTOから「テックブログ最近更新されてないね、どうする？」という言葉を投げかけられました。POSTしたばかりの私としては「いや、更新しとるやん」と思ったのですが、客観的にここ数ヶ月の更新を見ていると、以前ほどの活発感もなく、またエンジニアリングの…

…インシステムの構築やアクセシビリティ対応もやっていくぞというところです。 ここまでが現状の SmartHR のフロントエンドです。 プラスアプリのバックエンドは API 化されフロントエンドは Rails から切り離され、改善サイクルを早く回すことができる状態になりました。 しかし、プラスアプリが綺麗かつ快適になったことで、ユーザ目線でも開発者目線でも「本体」の負債が目に見えて浮き彫りとなってきました。 これからのフロントエンド プラスアプリを土台としてスモールスタートがうま…