並び順

ブックマーク数

期間指定

  • から
  • まで

41 - 80 件 / 148件

新着順 人気順

a11yの検索結果41 - 80 件 / 148件

  • メディアクエリに依存した要素の表示切り替えを `display: contents` でユーティリティコンポーネント化

    画面幅、メディアクエリに依存した要素の表示切り替え React + CSS Modules を使っている前提イメージ JSX 上で表示・非表示の分岐が明示されてほしい CSS を掘らないと分からないのは見通しが悪く感じる matchMedia() ベースの Hooks にすると SSR で難儀する 一貫性のためにサーバーサイドコードで頑張るのも億劫である 表示・非表示だけなら純粋な CSS で実現したい display: contents を使ってみた メディアクエリで display: none と block を切り替えれば良いという単純な話ではなく、親要素が Flexbox や Grid だった場合を想定する必要があるので、表示されている状態ではボックスモデル的に虚無になってほしい。 contents これらの要素は自身のために特定のボックスを生成しません。擬似ボックスやその子ボック

      メディアクエリに依存した要素の表示切り替えを `display: contents` でユーティリティコンポーネント化
    • vim-jp ラジオ オフィシャルサイト制作の舞台裏!

      この記事はVim 駅伝の 7/22 の記事です。 また、この記事は デザインを担当した 輪ごむ さんとの共同執筆記事です。 はじめに 2024年7月8日月曜12時、ポッドキャストラジオ番組「 エンジニアの楽園vim-jpラジオ 」がAuDee(TOKYO FM)公式番組として配信開始されました。 本記事では、この vim-jp ラジオの Landing Page(LP) 制作の舞台裏を紹介します! デザインや技術的なポイントなど、様々な視点から制作のポイントを紹介します。 デザインについて (by 輪ごむ) コンセプト ロゴから以下のようなイメージを膨らませてデザインを考えました。 夜 バーみたい わいわいとした雰囲気 ネオン調 これらのイメージを頭の片隅に置いて大量の web サイトや LP を大量にインプットしてなんとかひねり出したのが今回完成した LP になります。 デザインのレビュ

        vim-jp ラジオ オフィシャルサイト制作の舞台裏!
      • 5 tips for making your GitHub profile page accessible

        Community5 tips for making your GitHub profile page accessibleYour profile’s README invites the world to know you and your work, so it’s important that everyone can read and understand it. In this post, we share some tips for making your README more accessible. The README on your GitHub profile acts like a front door to your work, skills, and professional self, so it’s important that everyone who

          5 tips for making your GitHub profile page accessible
        • React Testing LibraryでのWAI-ARIAロールの活用事例

          こんにちは!サイボウズ様で業務委託でフロントエンドエンジニアをしている Nokogiri です。 このたびはCybozu Summer Blog Fes'24にて執筆の機会をいただきましたので、僭越ながら寄稿させていただきます。 今回はReact Testing LibraryでのWAI-ARIAロールの活用事例について紹介させていただきます。 前提 Reactで書かれたUIをテストする方法の一つとしてTesting Library があります。 Testing Libraryでは要素取得にWAI-ARIA ロールを利用することを推奨しています。(ロールは視覚/マウス ユーザーだけでなく、支援技術を使用するユーザーのエクスペリエンスを反映するため) 実はWAI-ARIA ロールには66個のロールがありますが、実際によくWeb開発で使われるUIにどのようなロールが付与されているのかを知りたく

            React Testing LibraryでのWAI-ARIAロールの活用事例
          • v-tokyo 20 に参加した | blog.kzhrk.com

            2024 年 5 月 28 日に東銀座の PLAID さんで開催された v-tokyo 20 に参加してきた。 v-tokyo は Vue.js 日本ユーザーグループが不定期(3 ヶ月に 1 回?)に開催している Vue の Meetup イベントだ。 頭がフレッシュなうちに参加レポートを残す。 headless な UI ライブラリを選択するアンカーリンク会場スポンサーの PLAID さんのセッション。 Headless UI ライブラリの説明からはじまって、Vue 向けの Headless UI ライブラリの Radix Vue を使って社内で Vue 版のデザインシステムを作成しているという話だった。 PLAID さんの社内には Sour というデザインシステムがあって、それの Vue 版を Radix Vue で実装しているらしい。 Sour のことは検索してもあまりアウトプットさ

              v-tokyo 20 に参加した | blog.kzhrk.com
            • Linterからはじめるa11y

              Webアクセシビリティについて注目が集まる中で、幅広い知識が必要になることや本質的な目的が捉えにくい側面もあり、何からはじめるといいのか分からない人も多くいると感じています。 ここでは、Webアクセシビリティの概要についてお話しした後、Webアクセシビリティ向上のための第一歩としてeslint-p…

                Linterからはじめるa11y
              • DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから

                DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから はい、DOMDOMタイムスです。知ってるよって?この挨拶は、まあ準備体操みたいなものなので。いつだって欠かさずやっていきます👶 さて、今日はcanvas-based renderingとa11yの話です。この前のJSConfセッションの最後のあたりで話したことと重複が大きいですが、面白がってくれる方が多かったので文章にしておこうと思いました。 (一応JSConfセッションの資料へのリンクも載せておきますね) canvas-based renderingの波 canvas-based renderingという言葉は、この記事では「canvasをゴリゴリに使ってwebコンテンツをレンダリングすること」ってくらいの意味で使います。通常のform要素やdiv要素ではなくて、canvas要素

                  DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから
                • 登壇にあたり発表資料をどのように作っているか | yamanoku Advent Calendar 2023

                  登壇に​あたり発表資料を​どのように​作っているか この記事はyamanoku Advent Calendar 2023の10日目の記事になります。 私はここ数年ありがたいことに国内のフロントエンドにまつわるカンファレンスにてCFP(Call for papers)が当選し、登壇・発表すること機会をいただけております。登壇するにあたり発表資料を作っていくわけなのですが、どのように作っているかについては特に触れられていないと思いました。 そこで今回は、今年10月に開催されたVue Fes Japan 2023での発表資料を例に、発表するまでどういった流れで行っていたのかを紹介していきます。 今後登壇や発表してみたいと考えている人たちの参考になれば幸いです。 発表資料の作り方 CFPを提出するための内容を考える まずそもそもですがカンファレンスにCFPを提出しないことには発表する機会もいただけ

                    登壇にあたり発表資料をどのように作っているか | yamanoku Advent Calendar 2023
                  • eslint-plugin-vuejs-accessibility入門

                    eslint-plugin-vuejs-accessibilityとは何か eslint-plugin-vuejs-accessibilityは、Vue.jsのコンポーネントにおけるアクセシビリティの問題点を検出するためのESLintプラグインです。 類似するものとしてeslint-plugin-jsx-a11yがあります。これはReactのJSXにおけるアクセシビリティの問題を検出するためのESLintプラグインです。今あるルールはこのプラグインから参考になっている部分がいくつかあります。 eslint-plugin-vue-a11yとの違い 元々は個人で開発していたeslint-plugin-vue-a11yというものがあります。 こちらのeslint-plugin-vue-a11yは現在メンテナンスがされておりません。今回紹介するeslint-plugin-vuejs-accessi

                      eslint-plugin-vuejs-accessibility入門
                    • Nuxt: Looking forward · Nuxt Blog

                      A lot of things have happened for Nuxt over the last year. Sébastien and Daniel share their thoughts on what we've achieved, and where we're going next. A Review of 2023 - SébastienIn January 2023, Daniel set out Nuxt: A vision for 2023. We achieved most of the goals we set out to accomplish. Some of them are missing and we will tackle them this year! It was a productive year and the team shipped

                        Nuxt: Looking forward · Nuxt Blog
                      • 持続可能なフロントエンドのテストコードを書くために大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ

                        こんにちは、kintone フロントエンドリアーキテクチャプロジェクト(フロリア)でエンジニアをしているはた丸です。 昨今は何かとSDGsが話題になる世の中なので、フロントエンドのテストコードも持続可能なものを作っていきたいと考えています。 この記事ではフロリアのチームの1つであるMiraチームがテストを自動化するうえで意識していることをお伝えします。 自分のチームに自動テストを導入できるか不安な方、導入後に継続できるか心配な方に寄り添えると嬉しいです。 はじめに、Miraチームの概要やテスト手法の全体像について知りたい方は、次の記事をご覧ください。 目次 📝 前提 ♻️ Integrationテストをがんばる a11yを意識した実装をしておく ヘルパー関数を用意する QAとエンジニアで協調する ♻️ E2Eテストをがんばりすぎない おわりに サイボウズではフロントエンドエンジニアを募集

                          持続可能なフロントエンドのテストコードを書くために大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
                        • 次世代 Web カンファレンス 2023 開催後記 | blog.jxck.io

                          Intro 2023/12/16(土) に、以下で告知した「次世代 Web カンファレンス」を開催した。 次世代 Web カンファレンス 2023 開催告知 | blog.jxck.io https://blog.jxck.io/entries/2023-11-16/next-web-conf-2023.html 次世代 Web カンファレンス 2023 - connpass https://nextwebconf.connpass.com/event/300174/ 録画 ベストエフォートでの録画なため、一部途切れいているが、サイボウズさんの協力で録画を残すことができたため、以下に公開している。 Conference https://youtu.be/nmnsuqlcvfM Bar https://youtu.be/JSxwRcfJoYU Factory https://youtu.be

                            次世代 Web カンファレンス 2023 開催後記 | blog.jxck.io
                          • Closure Library is in Maintenance Mode · Issue #1214 · google/closure-library

                            TL;DR: Closure Library will be sunset over the next 9 months, from November 1, 2023, to August 1, 2024. We no longer see it as meeting the needs of modern JavaScript development, and we recommend that users look for alternative solutions. Feel free to skip the background and go straight to the FAQ. In the nearly 14 years since Closure Library was first made public, it's broken a lot of ground and

                              Closure Library is in Maintenance Mode · Issue #1214 · google/closure-library
                            • Interop 2024に見るアクセシビリティ | アクセシビリティBlog | ミツエーリンクス

                              フロントエンドBlogにInterop 2024がスタートという記事が先日掲載されましたが、ここでは重点分野として加わったアクセシビリティに関して深掘りしてみたいと思います。 アクセシビリティに関しては、WebKitが詳細に、Bocoupが端的に、Mozillaが軽く触れています。もちろんInterop 2024のREADMEにも記載されていますが、これらをまとめ直してみるとおおよそ次のようになります。 アクセシビリティは、既にInterop 2023では調査分野として取り上げられていました。以前のアクセシビリティBlogの記事ARIAを取り巻く2つの自動テストでも触れていましたが、Appleのアクセシビリティチームが主導して、執筆現在では1300を超えるアクセシビリティテストが作成されており、Interop 2024では重点分野としても組み込まれるに至っています。 細かくは3つの領域が挙

                                Interop 2024に見るアクセシビリティ | アクセシビリティBlog | ミツエーリンクス
                              • Chrome 127 betaの公開など: Cybozu Frontend Weekly (2024-07-09号)

                                こんにちは!サイボウズ株式会社フロントエンドエンジニアのdaiki(@k1tikurisu)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/07/09のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 React & Codemod Announcement React 19への移行を支援するツール(codemod)が公開されました。例えば、次の移行作業を自動化してくれます。 Context.ProviderをContextに置き換え forwardRefの削除 useContextをuseに置き換え next-cache-toolbar Next.jsのData Cacheの中身を視覚的に見れるツールです。 Diving

                                  Chrome 127 betaの公開など: Cybozu Frontend Weekly (2024-07-09号)
                                • Chromium Docs - How Chrome Accessibility Works

                                  This document explains the technical details behind Chrome accessibility code by starting at a high level and progressively adding more levels of detail. Please read the accessibility overview first. Accessibility for a simple (non-browser) applicationAs described in the overview, every platform has its own accessibility APIs that are used by both assistive technology and sometimes by automation s

                                  • remixのESLintの設定をFlat Configで記述し直す - Qiita

                                    /** * This is intended to be a basic starting point for linting in your app. * It relies on recommended configs out of the box for simplicity, but you can * and should modify this configuration to best suit your team's needs. */ /** @type {import('eslint').Linter.Config} */ module.exports = { root: true, parserOptions: { ecmaVersion: "latest", sourceType: "module", ecmaFeatures: { jsx: true, }, },

                                      remixのESLintの設定をFlat Configで記述し直す - Qiita
                                    • セミナー「改正障害者差別解消法とWebアクセシビリティ」の録画を公開 | アクセシビリティBlog | ミツエーリンクス

                                      あらかじめセミナーレポートで予告していましたが、本日付けで発行したニュースリリースにありますように、1月18日に開催したセミナー「改正障害者差別解消法とWebアクセシビリティ」の録画を公開しました。 ミツエーリンクスでは通例、セミナー開催後に実施するアンケートにご回答いただいた皆様に限り、期間限定でセミナー録画を振り返り視聴していただく機会をご提供しています。 本セミナーについては、2024年4月1日に施行が迫る改正障害者差別解消法への興味・関心の高まりを受け、特別にその録画(質疑応答を除く約40分)を公開するものです。

                                        セミナー「改正障害者差別解消法とWebアクセシビリティ」の録画を公開 | アクセシビリティBlog | ミツエーリンクス
                                      • My approach to HTML web components

                                        My approach to HTML web components April 29th, 2024 I’ve been deep-diving into HTML web components over the past few weeks. I decided to refactor the JavaScript on The Session to use custom elements wherever it made sense. I really enjoyed doing this, even though the end result for users is exactly the same as before. This was one of those refactors that was for me, and also for future me. The fro

                                          My approach to HTML web components
                                        • Release v8.0.0 · redwoodjs/redwood

                                          Upgrade Guide https://redwoodjs.com/upgrade/v8 Changelog 🚨 Breaking deps(react): 18.3.1 (#10885) by @Tobbe Please see #10885 for more details fix(template): Set scripts/ module resolution to match api/ (#11366) by @Tobbe Make the module resolution for scripts/ be more predictable/stable, and match that of api/ See also #11170 fix(tsconfig): set "module" to "ESNext" for web/tsconfig.json (#11368)

                                            Release v8.0.0 · redwoodjs/redwood
                                          • 「みんなの公共サイト運用ガイドライン」が2024年版に改訂 | アクセシビリティBlog | ミツエーリンクス

                                            総務省の公開する「みんなの公共サイト運用ガイドライン」が、2024年版に改訂されました。2016年版との違いについては、以下のような説明がなされています。 2024年版となる本書は、(1)近い将来のJIS改正に向けた動向、求められる取組を解説、(2)公的機関取組事例の刷新、(3)関係法令、参照文書等の最新化を行ったものです。 残念ながら、上記より細かい粒度の差分が提供されていないため、2016年版と2024年版のPDFファイルをAdobe Acrobatの「ファイルを比較」機能で比較したところ、503件の置換、185件の挿入、128件の削除の都合816件の変更があったようです。 両者の目次を比較しますと、構造的に大きく変更されているのは、まず「1. 運用ガイドラインの目的と活用方法」です。1.4.以降の内容が、以下のように変更されています(タイトルが「JIS X 8341-3:2016」の

                                              「みんなの公共サイト運用ガイドライン」が2024年版に改訂 | アクセシビリティBlog | ミツエーリンクス
                                            • 自覚を求めないアクセシビリティ | kzakza

                                              アクセシビリティ Advent Calendar 2023の18日目の記事です。このブログ自体、ものすごく久しぶりの更新になってしまいました 汗。 極私的な話になりますが、ここ数ヶ月、「老眼」の傾向がでてきたりしまして、「おや?」という感じで書籍の小さな文字がやや見づらくなってきました(コミックのルビはとくに厳しい・・。)。今回はそれに絡めて少しポエム書きます。 「老眼」に近い感覚を覚えるようになったのは、振り返るとかなり前で、半年以上前、もしかすると1年以上前くらい前だったかもしれません。しかし、「老眼になってきた。眼鏡も合わなくなってきたので眼科行かねば」と自身の視力を「老眼」というカテゴリで自覚するようになったのは、先月くらいでした。「老眼」という名前の付いた区分で自身の状態を自覚することのハードルの高さを感じました。高齢になると身体機能が徐々に衰えてくるので、その身体機能の変化に慣

                                              • 当社の開発方法:Cloudflare Radar 2.0を支える技術

                                                Radar 2.0 Radar 1.0の学習に基づいて構築され、先月のCloudflareのバースデーウィークに完全な製品刷新として発表されました。当社は、ユーザーがインサイトの発見やデータをナビゲートをより簡単できるようにし、また、全体においてこれまで以上に質が高く高速になったユーザー体験を提供したいと考えていました。 当社は目下のところSupercloudの構築に取り組んでいます。Cloudflareの製品は現在、ネットワーキング、セキュリティ、アクセスコントロール、コンピューティング、ストレージなどにおいて数百もの機能を備えています。 本記事では新しいRadarの構築プロセスをエンジニアリングの観点から説明しようと思います。Radarの構築は、厳しい要件と複数のアーキテクチャレイヤーを含む多少複雑なウェブサイトの構築を当社のスタック上に行うことが、誰にでもできてしかも簡単であることを

                                                • GitHub Universe Recap レポート ~「Keynote & Product Announcement recap」より | gihyo.jp

                                                  GitHub Universe Recap レポート ~「Keynote & Product Announcement recap」より 12月5日、「⁠GitHub Universe Recap」が東京で開催されました。セッションの模様はオンライン配信も行われました。イベントでは11月にサンフランシスコにて開催されたGitHub Universeの基調講演で発表された最新情報を改めて取り上げたり、今年のGitHubの変化や実際にGitHub Copilotを採用した国内の会社の導入事例を紹介したりしました。 本稿ではオープニングと「Keynote & Product Announcement recap」の模様をレポートします。なお、全セッションの録画についてはイベントサイトにて公開されていますので、詳しくはそちらをご覧ください。 オープニング 最初に、APACにおけるVice Pres

                                                    GitHub Universe Recap レポート ~「Keynote & Product Announcement recap」より | gihyo.jp
                                                  • 【2024年】フロントエンド設定集(ESLint、Prettier、EditorConfig、tsconfig.json……)

                                                    ‘You gave me hyacinths first a year ago; ‘They called me the hyacinth girl.’ The Waste Land By T. S. Eliot 個人開発するときに、ESLint の設定など、毎回、見直しているので、結構時間がかかっている。 時間短縮のために、最近、Remix のチュートリアルを写経したときに使った設定を Zenn の記事にメモしておこうと思う。 設定は、厳しめにしている。 理由は、個人で作っていても、一定の質を担保するため。 ESLint .eslintrc.cjs /** @type {import('eslint').Linter.Config} */ module.exports = { root: true, parserOptions: { ecmaVersion: "latest", sour

                                                      【2024年】フロントエンド設定集(ESLint、Prettier、EditorConfig、tsconfig.json……)
                                                    • 「アクセシビリティやるぞ!LT祭り #3」を開催しました|SmartHRアクセシビリティテスター

                                                      こんにちは。先日「アクセシビリティやるぞ!LT祭り」というLTイベントの第3回目を開催しました。登壇者・参加者のみなさま、ありがとうございました! 全ての発表者さんが発表資料を公開しています。

                                                        「アクセシビリティやるぞ!LT祭り #3」を開催しました|SmartHRアクセシビリティテスター
                                                      • Dungeons & Dragons taught me how to write alt text

                                                        I played a lot of the pen-and-paper roleplaying game in high school and college. I’m now conceptually more into Dungeon World’s approach, but I digress. Unlike Tom Hanks, I avoided turning into a delusional murderer. Instead, I deepened some friendships, had a lot of big laughs, learned some cool vocabulary, and had an indirect introduction to systems design. Importantly, I also annoyed the hell o

                                                          Dungeons & Dragons taught me how to write alt text
                                                        • How-to: Use the tabindex attribute - The A11Y Project

                                                          Use the tabindex attributeBy: Eric Bailey. Published: January 28, 2021. tabindex is a global attribute that allows an HTML element to receive focus. It needs a value of zero or a negative number in order to work in an accessible way. When tabindex’s value is set to zero or a positive number, the element can be navigated to via the keyboard’s Tab key. When it is set to a negative number, its elemen

                                                            How-to: Use the tabindex attribute - The A11Y Project
                                                          • State of HTML 2023にみるアクセシビリティの現状 | アクセシビリティBlog | ミツエーリンクス

                                                            先月の話になりますが、State of HTML 2023の結果が公開されました。フロントエンド開発者の方であれば、State of JavascriptやState of CSSをご存じの方もいると思いますが、これらのHTML版ということになります(アクセシビリティBlogでは過去にState of CSS 2023に見るアクセシビリティ関連機能という記事もあります)。State of HTMLのもう少し詳しい説明については、アンケートの設計を主導したLea Verou氏のBlog記事Help Design the Inaugural State of HTML Survey!を参照してください。 さて、内容の方を見ていきたいと思いますが、この記事では特にアクセシビリティの側面から調査結果を眺めていくことにします。(正面からの話題については、当社のUI開発者がフロントエンドBlogあるい

                                                              State of HTML 2023にみるアクセシビリティの現状 | アクセシビリティBlog | ミツエーリンクス
                                                            • Home - Sa11y, the accessibility quality assurance assistant - Toronto Metropolitan University

                                                              Made for content authors Sa11y visually highlights content issues at the source with a simple tooltip on how to fix them. Sa11y is not a comprehensive code analysis tool, nor is it a web accessibility overlay. Overview Developers and a11y experts Sa11y is a customizable, framework-agnostic JavaScript plugin. Over 50 checks that encourage quality accessibility.Automatic: checks content on page load

                                                                Home - Sa11y, the accessibility quality assurance assistant - Toronto Metropolitan University
                                                              • Automating a11y testing: Part 1 — Axe

                                                                Earlier this year I gave a talk at the John Lewis Partnership Tech Profession Conference 2023 on the topic of automating web accessibility (a11y) testing. In this series I will cover the contents of this talk, kicking off with insights into the Axe suite of tools, followed by articles covering the wider a11y testing landscape: from visual regression testing for magnification and visual deficiencie

                                                                  Automating a11y testing: Part 1 — Axe
                                                                • Accessible Forms With Pseudo Classes | CSS-Tricks

                                                                  DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Hey all you wonderful developers out there! In this post, I am going to take you through creating a simple contact form using semantic HTML and an awesome CSS pseudo class known as :focus-within. The :focus-within class allows for great control over focus and letting your user know this is e

                                                                    Accessible Forms With Pseudo Classes | CSS-Tricks
                                                                  • The “Other” C In CSS | CSS-Tricks

                                                                    I think it’s worth listening to anything Sara Soueidan has to say. That’s especially true if she’s speaking at an event for the first time in four years, which was the case when she took the stage at CSS Day 2024 in Amsterdam. What I enjoy most about Sara is how she not only explains the why behind everything she presents but offers it in a way that makes me go “a-ha!” instead of “oh crap, I’m doi

                                                                      The “Other” C In CSS | CSS-Tricks
                                                                    • アクセシビリティ導入の第一歩やってみた - キカガク プラットフォームブログ

                                                                      キカガク プラットフォーム部 エンジニアの岸です。 私は Web という技術が好きで、中でも アクセシビリティ に関心があります。 アクセシビリティ とは、システムやサービスがどれだけ幅広い状況で利用できるかを示す言葉です。Web アプリケーションのアクセシビリティの向上に取り組むことで、障害の有無や利用している環境、デバイスの違いによらず、誰もがそのサービスを使えるようにできます。 私が入社した時点では、プラットフォーム部にはアクセシビリティに関する知識はほとんどありませんでした。 そこで昨年 10 月に中途入社してからの約 4 ヶ月(執筆時点)でアクセシビリティを組織へ浸透させていくために行った取り組みを紹介します。 取り組んだ内容のほとんどは、私の愛読書である 『Web アプリケーションアクセシビリティ――今日から始める現場からの改善』 の第 7 章、「アクセシビリティの組織導入」の

                                                                        アクセシビリティ導入の第一歩やってみた - キカガク プラットフォームブログ
                                                                      • GitHub - lilopkins/test-by-a11y: Write tests for UIs through the accessibility interface.

                                                                        You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

                                                                          GitHub - lilopkins/test-by-a11y: Write tests for UIs through the accessibility interface.
                                                                        • 画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法

                                                                          画面遷移から考えるNuxtアプリケーションをアクセシブルにする方法 翻訳記事一覧 日本語ページ / English page はじめに はじめに自己紹介です。 やまのくと申します。 株式会社クラウドワークスにて、フロントエンドエンジニアとして施策の開発やデザインシステムの開発にも携わっておりました。現在は技術的負債解消をリードするチームに所属し、レガシーフロントエンド環境の刷新に関わっております。 ウェブの仕様についてやウェブアクセシビリティにまつわることに興味があります。 また、一児の父でゴールデン・レトリバーと3匹の猫の飼い主をやっております。 本題に入る前に今回のテーマに関わるウェブアクセシビリティとはなにかを説明します。 アクセシビリティとはアクセスと能力の単語を組み合わせたもので、情報や製品、サービスが利用できるようにする意味で使われる言葉です。略してA11yとも書かれていること

                                                                          • WAI-ARIA 1.3の初回公開作業草案が発行 | アクセシビリティBlog | ミツエーリンクス

                                                                            個人的にはもっと先になるのではと思っていたのですが、W3Cのニュースにあるように、WAI-ARIA 1.3のFirst Public Working Draft(初回公開作業草案)が発行されました。 さっそくですが、WAI-ARIA 1.2からの変更点を眺めていきましょう。 Change LogのMajor feature in this releaseのセクションでは、comment、mark、suggestionという3つのロールが追加されたことがわかります。また、aria-*属性はaria-braillelabel、aria-brailleroledescription、aria-descriptionという3つが追加されているのがわかります。さらに、aria-details属性が複数の要素と関連付けることが可能になったとあります。 追加された3つのロールは、ARIA annotat

                                                                              WAI-ARIA 1.3の初回公開作業草案が発行 | アクセシビリティBlog | ミツエーリンクス
                                                                            • なんでもSPAにするんじゃねぇ!という主張のその先 | Memory ice cubes

                                                                              Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel. — Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈(少なくとも自分の観測範囲)では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第

                                                                                なんでもSPAにするんじゃねぇ!という主張のその先 | Memory ice cubes
                                                                              • Ubieアクセシビリティ振り返り2023

                                                                                こんにちは。Ubie株式会社でデザインエンジニアをしているtakanoripです。 今回は2023年のUbieでのアクセシビリティ活動を振り返っていきたいと思います。今年はあまり活動できてないなあと思ったんですが、意外と色々やってました。 障害を持つ方へのユーザビリティテストの実施 これは去年の年末から進めていたものですが、課題探索のためのユーザビリティテストを実施しました。視覚障害の方だけでなく、身体に何らかの障害をお持ちの方にインタビューさせていただき、ユビーをより使いやすくするためのヒントを得ることができました。(プライバシーの観点から具体的な内容を書くことは控えます。) アクセシビリティというと視覚障害やスクリーンリーダー関連の話題になることが多いですが、それ以外にも改善できる部分は多くあるなという気付きが得られてとても良かったです。インクルーシブデザインっぽい取り組みだったのかな

                                                                                  Ubieアクセシビリティ振り返り2023
                                                                                • Accessibility in Design Systems: A Comprehensive Approach Through Documentation and Assets – Blog – Supernova.io

                                                                                  Accessibility in Design Systems: A Comprehensive Approach Through Documentation and AssetsGet inspired by Gestalt's documentation approach to help you develop an accessibility mindset that can be scaled effectively through your design system. ‍Cintia Romero is a Sr. Product Designer at Gestalt, which is Pinterest's design system. In addition to creating components and writing documentation, she de

                                                                                    Accessibility in Design Systems: A Comprehensive Approach Through Documentation and Assets – Blog – Supernova.io