【書き起こし】Merpay Tech Talk〜Monorepo開発におけるツール選定〜 #merpay_techtalk | メルカリエンジニアリング
【書き起こし】Merpay Tech Talk〜Monorepo開発におけるツール選定〜 #merpay_techtalk 2022年4月21日に、メルペイ・メルコインのエンジニアたちによる「Merpay Tech Talk〜Monorepo開発におけるツール選定〜」を開催しました。 Monorepo開発を進めるにあたって、メルコインではNx、メルペイではTurborepoを利用しています。Monorepo開発を導入した背景やツール選定の理由、実際に導入した所感などをご紹介します。 アーカイブはこちら！ https://www.youtube.com/watch?v=I0Wxr1JCvhs 登壇者紹介 @tokuda109 / 株式会社メルペイ Frontend Engineer 2019年10月に入社し、クーポン機能のフロントエンド開発を担当後、パフォーマンスやテスト等のフロントエンドの
EPUBのアクセシビリティ要件をまとめたJIS X 23761:2022がISO/IEC 23761:2021に対応する規格として8月22日に制定されました。 日本産業規格（JIS）を制定・改正しました（2022年8月分） （METI/経済産業省） JIS X 23761:2022 EPUBアクセシビリティ― EPUB出版物の適合性及び発見可能性の要求事項 | 日本規格協会 JSA Group Webdesk JIS X 23761:2022は、 上のJSAサイトで購入できるほか、閲覧のみであれば、日本産業標準調査会（JISC）で可能です（なぜ日本規格協会のHPでは部分的にしか見られないのか・・）。 JIS X 23761は、2017年に策定されたIDPFのEPUB Accessibility 1.0 に由来しています。このEPUB Accessibility 1.0がベースとなり、国際規
UI Testing Playbook
UI testing workflows often spiral into maintenance nightmares. Your tests break whenever there’s an implementation tweak. You duplicate test cases for every tool. It’s easy to find tools that test different parts of the UI. But knowing how to combine them into a productive workflow is tricky. If you get it wrong, the UI development process feels like a slog. I interviewed ten teams from companies
2023年5月、Vivaldiの日本先行でのiOS版プレビューリリース発表のためヨンが来日したことをきっかけに、インターネットの将来やアクセシビリティについて語る対談の機会が設けられました。 Vivaldiブラウザの創業者ヨン・フォン・テッツナーは、'90年代から長きにわたりWebブラウザ開発に携わってきた、ブラウザ業界のキーパーソンの一人です。彼のブラウザ開発のコアには、ユーザ一人ひとりのニーズに合わせた非常に柔軟なカスタマイズ性や、プライバシー保護があります。また、一部ビックテック企業によるユーザ行動の監視から逃れ、インターネットの安全性を高めるためのオープン標準規格やルール作りなどに貢献する活動も行っています。 聞き手は、ミツエーリンクス社でWeb標準技術の策定やアクセシビリティの啓発に携わってきた木達一仁氏です。 左から木達氏、ヨン、冨田 2023年のホットトピックから～生成系AI
高知こどもの図書館サイトとアクセシビリティ
2022年5月5日こどもの日に、デザイナーとして関わった 高知こどもの図書館のウェブサイト がリニューアル公開されました。 この記事では、高知こどもの図書館ウェブサイトの制作時にアクセシビリティに関して取り組んだことを紹介します。 プロジェクトの背景 行けなくても訪ねられる図書館！ こどもの本の世界を拓くWebサイト 「高知こどもの図書館」は、NPOで運営されているこどもの本の専門図書館です。今回のプロジェクトでは、クラウドファンディングで全国から200名以上の方の支援を得てウェブサイトの全面リニューアルが行われました。 来館することが前提の従来の形から、図書館に来られない方々に対して「もう一つの扉」を開きたい。インターネットツールを活用することで、より多くのこどもたちに、本の世界の入り口への道先案内ができないだろうか。 高知こどもの図書館クラウドファンディングページより コロナ禍で図書館
スケーラブルで保守性の高いモジュラーディレクトリ構成へのフロントエンドリポジトリ移行 | メルカリエンジニアリング
Merpay Advent Calendar 2022 の9日目は、メルペイ フロントエンドエンジニアの @tokuda109 がお届けします。 この記事は、メルペイ フロントエンドチームで保守しているリポジトリを複数のディレクトリに分割し、スケーラブルで保守性の高いコードベースに再構築する方法を紹介します。 記事の内容は『Merpay Tech Talk 〜Monorepo開発におけるツール選定〜』のイベントで一度紹介したものになりますが、この記事ではさらに詳しく説明します。 フロントエンドチームは今後 Nuxt 3 への移行作業を控えていて、今回紹介するリポジトリ移行が Nuxt 3 への移行に与える効果についても紹介します。 抱えていた課題 フロントエンドチームは、メルペイのサービスリリース時からカスタマーサポート業務を行う社内向け管理画面や加盟店さま向け管理画面など、様々なマイクロ
2019年、サイバーエージェントのアクセシビリティを振り返る | CyberAgent Developers Blog
こんにちは、サイバーエージェントの@masuP9（ますぴー）こと桝田です。CATSという組織でウェブフロントエンド開発と「でもやるんだよ勢」として社内外でウェブアクセシビリティ推進啓蒙をしています。 この記事は「2019年、freeeのアクセシビリティを振り返る」の記事にインスパイアされ、主に当社メディア事業部でのアクセシビリティ関連の出来事を振り返ります。 ※アクセシビリティの向上とは、障害者高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 こえのブログリリース 今年最初の大きな話としては、「こえのブログ」のリリースでした。こえのブログは、「喋るだけでブログになる」ということで、喋った内容が音声で聞けるだけでなく自動で書き起こしされテキストでも提供されるというサービスです。 アクセシビリティの観点から企画がスタートしたわけではありませんが、サ
Storybook 5.1
Summer is upon us and the Storybook team is excited to bring UI developers new worksaving features. Storybook is the world’s most popular UI component explorer, and 5.1 includes: 📱 Mobile: Standalone package architecture for React Native🎟 A11y addon: Realtime accessibility checks and visual feedback🛠 Context addon: New UI for themes, internationalization, & more🎛 Presets: One-line configuratio
こんにちは。フロントエンド開発センター(UIT) 岡﨑です。"IU Web"というLINEが保有する膨大なデータを安全かつ効率的に利活用できるデータポータルのデザインとフロントエンド開発を担当しています。その傍らでUIT Accessibility TF(タスクフォース)に所属し、社内にアクセシビリティを啓蒙する活動を行っています。 Tech-Verse 2022とは？ LINEとヤフーが合同で開催する技術カンファレンスです。これまで両社がそれぞれ開催していたLINE DEVELOPER DAYとYahoo! JAPAN Tech Conferenceが1つになりました。3カ国語(日本語、英語、韓国)で合計88のセッションをLINE LIVEによるライブストリーミング配信を通じ、これまで各社の開発・研究が積み重ねてきた挑戦や得られた知見、そして現在活用している最先端の技術などを伝えることを
Register now for a full day of community, learning, and all things Visual Studio Code April 2022 (version 1.67) Update 1.67.1: The update addresses this security issue. Update 1.67.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the April 2022 release of Visual Studio Code. There are many updates in thi
W3Cからアナウンスがあるように、ARIA in HTML仕様（参考日本語訳）が勧告候補（Candidate Recommendation）になりました（W3C Invites Implementations of ARIA in HTML）。 ARIA in HTMLは、WAI-ARIAをHTMLで使用するにあたっての適合要件を定めるものです。 ご存じの方も多いとは思いますが、内容に関して具体的な例を通して簡単に見てみましょう。 例えばmain要素の場合、3章のテーブルをたどっていくと、2列目の暗黙のARIAセマンティクス（Implicit ARIA semantics）としてrole=mainが規定されていることがわかります。これは、HTML Standardのmain要素の冒頭の要素定義で、Accessibility considerationsのFor authorsのリンクからも
最近、Boshen さんが開発している Oxc に注目しています。 社内で Oxc の近況を slack に投稿していたところ、「Oxc は Rome で話題になっていますか？」や「Oxc はうまくいくと思いますか？」と聞かれたことで Rome の現状を整理するいいきっかけになったので、記事に残しておこうかなと思います。 Rome と Oxc の違い Rome と Oxc はどちらも linter、formatter、transpiler などを提供するつもりではあるので、ユーザーからみた違いは分かりにくいかなとは思います。現時点での大きな違いは、次の２点だと思っています。 プロジェクトのスコープ Rome: JS/TS に限らず Web 開発に関連する言語全般にツールを提供することを試みている Oxc: JS/TS に関するツールにフォーカスしている 提供するツールの拡張性に対する考え方
The SYZBOT CTF
目次 第０章 概要 0.1 syzbot とは？ 0.2 主な登場人物紹介？ 0.3 自己紹介：熊猫の Linux との関わりについて 0.4 今日のお話「バグハンティング」 第１章 Linux カーネルについて 1.1 Linux カーネルの規模について 1.2 Linux カーネルの制約事項について 1.3 Linux カーネルのデバッグ支援機能について 第２章 カーネルメッセージを読めるようにするための試行錯誤について 2.1 printk() に求められているものとは？ 2.2 複数行分のメッセージをバッファリングする試み（２０１７年４月～） 2.3 メッセージ本文中にコンテキスト情報を埋め込む試み（２０１８年４月～） 2.4 １行分のメッセージをバッファリングする試み（２０１８年６月～） 2.5 再び１行分のメッセージをバッファリングする試み（２０１８年９月～） 2.6 再挑戦（
Welcome Yari: MDN Web Docs has a new platform – Mozilla Hacks - the Web developer blog
After several intense months of work on such a significant change, the day is finally upon us: MDN Web Docs’ new platform (codenamed Yari) is finally launched! Between November 2 and December 14, we ran a beta period in which a number of our fabulous community members tested out the new platform, submitted content changes, allowed us to try out the new contribution workflow, and suggested improvem
コンポーネントをアクセシブルに保つ技術
アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番オーソドックスなものとして、アクセシビリティ向けLintツールを導入しています。 Ubieではeslint-plugin-jsx-a11yとMarkuplintを導入しています。 両者は重複する部分もありますが、eslint-plugin-jsx-a11yはよりReactでの実装を考慮したチェック、Markuplintは純粋なマークアップのチェックに強みがあるので、両方のツールを使用することでより網羅的にチェックができます。 上記Lintはコンポ
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能
静的サイトジェネレータ「Astro 4.5」正式版、コードの問題点などを実際のWebブラウザ上で指摘してくれる「Dev Audit UI」など新機能 オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 4.5」が正式にリリースされました。 Astro 4.5 is here! Introducing the new Dev Audit UI — Catch real-world a11y & perf issues during development, right in your browser. Available today in the Astro Dev Toolbar! Plus: View Transition improvements, Multi-CDN, Shiki 1.0, and more.https://t.co/
2019 年 8 月末、HTML LS で、autofocus 属性がグローバル属性となった。 ブラウザの対応が進めば、全ての要素で autofocus を使用できる。 autofocus属性とは autofocus 属性は、ページの読み込み時に自動的にフォーカスする要素を指定するもの。 これまで autofocus は、button, input など、フォーカス可能な要素でしか使用できなかった。 一方で、全ての要素は、tabindex または contenteditable 属性を追加することでフォーカスが可能である。 したがって、autofocus は全ての HTML 要素で使用できるべき、という内容の Issue が 4 月に上がってた。 Move autofocus content attribute to HTMLElement · Issue #4563 · whatwg/h
こんにちは、freeeのUXチームというところでデザイナーとエンジニアの狭間の生活をしている id:ymrl です。このブログの編集長（自称）でもあります。 はやいもので2020年も終わりが近付いてきました。今年は感染症の流行、オリンピック延期、リモートワークやDXブームなど、振り返ってみれば激動の一年でした。そして年のおわりの12月ということで、今年もfreee Developers Advent Calendarとして、12月25日まで毎日いろいろなメンバーがブログを書いていきます。 あらためまして、ymrlです。昨年は デザインシステムをやるためにエンジニアからUXへ異動した話を書きました。今年はもうちょっと具体的にどんなことをやっているのか、去年からのアップデートを含めて書いてみようと思います。 内容は先日Webアクセシビリティの学校 オンライン特別授業 というイベントで発表したも
東京都 covid-19 対策サイトにアクセシビリティ視点でコントリビュートしてみた - クラウドワークス エンジニアブログ
腹筋ローラーしろよ。 はじめまして。2019年10月に中途入社したフロントエンドエンジニアの yamanoku と申します。 デザインシステムの開発チームとして入社して、現在はマーケティングチームと連携したフロントエンド開発をメインに行っております。個人的に社内や外部勉強会などでアクセシビリティ*1にまつわる啓蒙活動なども行ったりしています。 2020年3月現在、新型コロナウィルスの脅威は依然続いており、弊社でも一時的に全拠点在宅勤務（テレワーク）が行われる*2など対策を講じていたり、個人でも社会でも常に身の回りの危険を配慮しなければならない予断を許さない状況です。 色々と自粛が続き苦しい状況ですが、今回はそんな新型コロナウィルスに関連するOSSプロジェクトに、私がアクセシビリティの観点でコントリビュートしたことについて紹介させていただきます。 東京都 新型コロナウイルス対策サイトとは 東
アクセシビリティを普段の開発に定着させるためにやったこと #STORESアドカレ - STORES Product Blog
STORES Advent Calendar 2022 の 24日目の記事です。 こんにちは。業務委託で STORES の開発をしている @inouetakuya です。 昨年のアドベントカレンダーでも アクセシビリティについての記事 を投稿し、そのなかで、 hey もアクセシビリティの取り組みはまだ始まったばかりで、目標としている「普段の開発に定着させる」というところまでの道のりは遠いですが、2022年も前に進めていく所存です。 と書きました。 今回は続編として、今年 2022年に、アクセシビリティを普段の開発に定着させるために行った取り組みを紹介します。 2021年のおさらい - 学習と実践 2022年のスタート地点がどのような感じだったかをお伝えするために、2021年の取り組みにも触れておきます。 2021年は STORES にとってアクセシビリティ元年とも呼べる年で、アクセシビリテ
サマーインターン生がアクセシビリティの改善に取り組んだお話 - freee Developers Hub
はじめに こんにちは。 freeeサマーインターン2020に参加させていただきました ganariyaと申します。 2022新卒予定の修士1年で、群知能と呼ばれる生物の群れの行動をシミュレーションして最適化を行う研究をしています。 普段は競技プログラミングを趣味で行っています。 さて、そんなganariyaは、freeeのプロダクトの一つであるプロジェクト管理フリーチームで、2週間のインターンに参加させていただきました。 具体的な業務内容は、プロジェクト管理フリーのアクセシビリティの改善です。 ganariyaにとってアクセシビリティとは初めての概念です。 最近重要視されているアクセシビリティとは一体何でしょうか。 アクセシビリティ (Accessibility) アクセシビリティの定義はいくつか公式な定義があります。 そのうち、freeeアクセシビリティー・ガイドラインを一般公開しました
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo 拡張性と一貫性を兼ね備えたデザインシステムを構築したければ、デザイントークンは欠かせないツールです。この記事は、デザイントークンが重要な理由とその活用方法を紹介します。 ほどんどのデザイナーはデザインをつくり終えた後の、実装のフェーズも重要であることを理解しています。特に、デザインを複数のOSやデバイスに展開する段階では多くの問題が起こりがちです。そうした潜在的な問題を最小化するために、デザインシステムに頼る開発チームが増えています。 そして、デザインシステムの一部として広く使われるようにになったのがデザイントークンです。この記事では、デザイントークンとは何で、どのように利用できるものなのかを紹介します。 デザイントークンとは何か？ デザインシステムにおけるトークンは、UI要素のスタイル、た
新型コロナウイルス、情報が届きにくい方(子ども・外国語話者・視覚/聴覚障害等)のサポート・不安のケア(鈴木悠平) - 個人 - Yahoo!ニュース
新型コロナウイルスに関する日本国内の状況が変化していくなか、日々多くの方による感染症対応、情報発信が行われています。 新型コロナウイルスは、誰にとっても感染する可能性はゼロではありません。ただ、感染の広がりから可能な限り自分を守る方法、また、自分を守ることにより集団への感染の広がりを少しでも緩やかにする方法があります。 しかし、様々な情報が飛び交う中で、言語や特性、生活環境等のちがいにより、必要な情報が届きにくい方、個別のサポートが必要な方もおられます。 以下では、2月末時点で新型コロナウイルスについてわかっていること、一人ひとりができる感染対策について簡潔にまとめました。加えて、情報が届きにくい方々や個別のサポートが必要な方々に向けたサポート方法や社会資源についても、専門家・支援者の監修・執筆協力のもとご紹介します。 本記事は、必要な方にシェアしていただいたり、ホームページ等に出典明記の
React vs. Blazor: Minimize JavaScript in your SPAs - LogRocket Blog
Ejiro Asiuwhu Software engineer with a drive for building highly scalable and performant web applications. Heavily interested in module federation, micro frontends, state machines, TDD, and system designs. Big on web performance and optimization, advanced component design patterns, a11y, SSR, SSG, ISR, and state management. Expert at crafting highly reusable TypeScript-heavy component libraries. E
We're thrilled to announce that oxlint is now generally available! This milestone signifies our team's ability to promptly address and triage issues. Oxlint is a JavaScript linter designed to catch erroneous or useless code without requiring any configurations by default. How to Use At this stage, oxlint is not intended to fully replace ESLint; it serves as an enhancement when ESLint's slowness b
freeeアクセシビリティー・ガイドラインVer. 202101.0を公開しました - freee Developers Hub
こんにちは、freeeのアクセシビリティーおじさん、中根です。今年もこのブログとアクセシビリティー・ガイドラインをよろしくお願いします。 では早速、freeeアクセシビリティー・ガイドラインVer. 202101.0の更新内容を紹介します。 freeeアクセシビリティー・ガイドライン Ver. 202101.0リリース・ノート 参考情報の更新 と言っても、今回の更新内容は非常に少なく、参考情報を1箇所更新したのみです。（他に誤字の修正はありますが。） 具体的には、Tab/Shift+Tabキーを用いたチェックに、キーボードのみで操作できるコンテンツかどうかを確認する際に活用できるブックマークレットを追加しました。 以下にも掲載したこのブックマークレットを実行すると、マウス・ポインターが消えます。 一部では極悪なブックマークレットと呼ばれているこのブックマークレット、ぜひクリックして何が起き
本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』を補うものです。紙幅の都合で同書に収められなかった原稿を再構成しました。 同書の第7章「アクセシビリティの組織導入」の続編にあたります。同書第7章は、会社内でたった一人でアクセシビリティの取り組みを始めてから、正式なチームを立ち上げるまでのノウハウを紹介しました。本連載はそこからさらに取り組みを広げていくためのノウハウをまとめます。 アクセシビリティに取り組む人を一定以上に増やすためには、開発プロジェクトでコツコツと取り組むだけでなく、「その組織においてアクセシビリティが重視されている」ことが伝わるしくみを整えていくことが必要です。以下のように整えていくと「その組織においてアクセシビリティは当たり前のこと」、つまりカルチャーとして定着していきます。 従業員採用の募集要項にアクセシビリティを入れる 入社
情報アクセシビリティの推進
2019年11月24日 著 冷たい雨が降り続いた11月23日の覚え書き。日中は引きこもっていたのだけど、暗くなってからミッドタウン・タワーへお出かけ。SFC Open Research Forum 2019のセッション、情報アクセシビリティの推進を聞きに行きました。使用されたスライドは後日公開されるのだろうか？ 来場者との質疑が最後に設けられたけど、基本的にはパネリストが順に講演をする、議論というよりは普通の講演会に近いスタイル。とりま、箇条書きでメモをまとめます。 石川氏の講演 障害者権利条約 締約国は180、ほとんどの国が批准 ただしアメリカは批准していない 障害の社会モデル 機能的障害×社会的障壁＝社会的障害 掛け算なので、社会的障壁を減らせばその分、社会的障害は減らせる 3つのPDCAサイクル 国連のサイクル：障害者権利委員会が回す 日本政府のサイクル：障害者政策委員会が回す 個別
JSer.info #439 - 数値計算ライブラリのMath.js v6がリリースされました。 mathjs v6: a monolith turned modular - Jos de Jong Math.jsは全体で200個以上の機能がありファイルサイズが137kB(gzip)もありました。 そのため、v6では必要なものだけをモジュールとして使えるようにするための構造的な変更が含まれています。 次のように書いた場合に、必要なもの以外を削除したりTree Shakingができるように"module" fieldに対応しています。 また、グローバルな設定ではなくcreate関数で依存と設定から特定の機能を作れるようになっています。 その他にも、BigNumberの対応などを取り除いた軽量版のmathjs/numberも利用できるようになっています。 併せてパッケージ配布について書かれたE
そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという
《この記事は約 34 分で読めます》 新年あけましておめでとうございます。 2023年も HON.jp News Blog をどうぞよろしくお願いいたします。 毎年恒例、編集長 鷹野凌による出版関連の動向予想です。 2022年の予想と検証 2022年の予想は、以下の5つでした1 2022年出版関連の動向予想〈HON.jp News Blog（2022年1月10日）〉 https://hon.jp/news/1.0/0/32010。自己採点の結果を右端に付けておきます。 メディアビジネスの転換を進めよう（提案） → ○ 埋もれていた名著の再発見と復刻が進む → △ 縦読み含めメディアミックス展開が拡大する → ○ 電子図書館の普及でコンテンツ供給が急増する → ○ 映像を活用したマーケティング活動が広がる → △ まず、ロシアのウクライナ侵略という暴挙が大きな予想外でした。その影響は国際関係
個人的に驚いたところを太字にしておきます。 AndroidのエンジニアなのでAndroidに関するものが多めです。専門領域外のものはかなり素人目線のただの感想が多いです。なにか大きな間違などがあればご指摘お願いします。修正いたします。 またまだ見ていきますが、一旦、 Keynote Developer Keynote What's new in Android What's new in Jetpack What's new in Development tool Lazy layouts in Compose Fragments: The good (non-deprecated) parts を見たメモを書いています。 まだまだ、ここに追加していく予定です。 セッション: Keynote 今までは2言語の比較を見ながら機械学習をしていたが、翻訳を見ずに学習ができるようになった。これによ
Svelteのコミュニティによるイベント「Svelte Summit」が2021/4/25(日)に開催されました。 前回は2020/10だったのでおよそ半年ぶりの開催となります。 イントロからはじまり、発表は5分〜30分と長短合わせて16セッション、間にパペットショーやクイズレクリエーションを挟み、最後はFAQ、およそ6時間超でした。 Youtubeでアーカイブを視聴することができます。 日本時間22:00開始だったので中々しんどかったですが、Svelte日本のDiscordでみんなで実況しながら楽しく見れました(それでも眠くて途中で離脱しましたが)。Svelte日本のDiscordに、Svelte-NodeGUIをテーマに発表されたJamie Birchさんご本人が登場されて解説してくださるサプライズがあったりとても刺激的でした。 他の方に興味を持ってもらえるように、改めてYoutube
Ubie アクセシビリティ改善の振り返り 2022
Ubie株式会社でデザインエンジニアをしているtakanoripです。 年の瀬なので今年取り組んだアクセシビリティ向上の施策について振り返りつつ来年の展望を考えようかなと思います。12月19日に公開された @3284 の記事もあわせて読んでみてください。 アクセシビリティ向上にむけた実装の改善 去年からアクセシビリティ向上のための実装改善を進めていたのですが、今年の前半で一旦完了となりました。全ての不具合を修正できてはいませんが、プロダクトを利用する上でクリティカルな問題は全て解消できました。 Lintの導入 toCプロダクトにeslint-plugin-jsx-a11yとmarkuplintを導入しました。 Ubieはフロントエンドが得意でないエンジニアがUIを実装することが多いので、Lintでエラーや警告を出すことで最低限のアクセシビリティ品質を担保するためにLintを導入しました。け
インデントにタブを使うアクセシビリティ上の利点
この記事には誰かを攻撃したり差別したりする意図はありません。もし不適切な表現を見つけた場合は修正しますのでご連絡ください。 「インデントにタブとスペースのどちらを使うのか」というのは昔から何度も議論されてきた問題です。 最初に明確にしておきますが、私個人としてはタブを使おうがスペースを使おうが、プロジェクト内で統一されていれば構いません。 しかしタブには、スペースにはないアクセシビリティ上の利点が存在します。 タブの最大の特徴は、表示幅を自由に設定できることです。 ご存知のとおり、一つのタブに対して実際の見た目としてどのくらいの幅が確保されるかは、テキストエディタなどのコードを閲覧する環境の設定次第です。 たとえば、GitHub は一つのタブをデフォルトではスペース 8 個分の幅で表示しますが、 https://github.com/settings/appearance から自由に変更で
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
Rome v12.1.0
Stage 3 decorators, VCS support, new lint rules and more. Rome v12.1.0 brings support for the new Stage 3 decorators, VCS support and new lint rules! You can upgrade Rome by running the following command: npm install --save-dev --save-exact rome@12.1.0 pnpm update --save-exact rome@12.1.0 yarn upgrade --exact rome@12.1.0Or install the VS Code extension to integrate Rome into your editor. Stage 3 d
アクセシビリティ – React
なぜアクセシビリティが必要なのか？ Web アクセシビリティ（a11y とも呼ばれます）とは、誰にでも使えるようウェブサイトを設計・構築することです。ユーザ補助技術がウェブページを解釈できるようにするためには、サイトでアクセシビリティをサポートする必要があります。 React はアクセシビリティを備えたウェブサイトの構築を全面的にサポートしており、大抵は標準の HTML の技術が用いられます。 標準およびガイドライン WCAG Web Content Accessibility Guidelines はアクセシビリティを備えたウェブサイトを構築するためのガイドラインを提供しています。 以下の WCAG のチェックリストはその概要を示します。 WCAG checklist from Wuhcag WCAG checklist from WebAIM Checklist from The A1
🤝 Works with your existing toolsLadle is compatible with the Component Story Format and Controls. It supports links, themes, right-to-left, source code, a11y (axe), typescript and flow out of the box. ⚡ Fast, Accessible and SmallPowered by Vite, using esbuild, embracing ES modules and code-splitting with HMR/Fast Refresh for each story. 🛠️ Zero ConfigurationNo configuration needed but still cust
はじめまして。AmebaでAndroidエンジニアとして働いています、20新卒の小野歩（@airagu950）です。社内では「あゆむ」の「あゆ」をとって魚アイコンで生活をしています🐟 早速ですが僕はアクセシビリティ分野がとても好きです。 これは僕のエンジニアとしての根幹に理由があります。僕のエンジニアとしての生活は祖母がうまくスマートフォンを使用できなかったことから始まりました。そのため、うまく使えなかったことにはどのような理由があるのだろう、どのような人でもスマートフォンが使えるようになるためにはどうすればいいのだろうと考え始めたのが始まりでした。 その後、大学ではHCI（Human Computer interaction）についての研究を行い、この思いを人生の軸にしたいと考え、アクセシビリティに非常に前向きであり、すでにたくさんの実績のあったCyberAgentのAmebaに入社す
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JIS X 23761:2022（EPUBアクセシビリティ）が制定 | kzakza
AI時代のWebブラウザから考えるWebアクセシビリティの本質 ――Vivaldiのアプローチから | gihyo.jp
"Tech-Verse 2022"ウェブにおけるアクセシビリティ改善の取り組み
Visual Studio Code April 2022
ARIA in HTML仕様が勧告候補に | アクセシビリティBlog | ミツエーリンクス
Rome の contributor からみた Oxc の印象
autofocusがグローバル属性になったのでなんか書く | きるこの日記帳
デザインシステム “Vibes” の育てかた - freee Developers Hub
デザイナーと開発者の連携を効率化するデザイントークンとは何か？ | アドビUX道場 #UXDojo
The JavaScript Oxidation Compiler
第6回 アクセシビリティを必須スキルとし、採用・研修・スキルアップをする | gihyo.jp
2019-06-10のJS: mathjs v6、Modern JavaScriptパッケージの配布、Audits in Web Inspector
aria-labelで始める、アクセシビリティ改善活動
2023年出版関連の動向予想 | HON.jp News Blog
Google I/O 2022で驚いたところ - Qiita
Svelte Summit Spring 2021 簡易まとめ
Ladle | Ladle
Amebaアプリのアクセシビリティに関する取り組み