全国の中高生を対象にした発明コンクール「自由すぎる研究EXPO」で岡山市の女子高校生が最多となる5つの金賞を受賞しました。考案したのは「納豆を片手で食べられる道具」です。一体なぜそのような道具を？そこに…
“納豆を片手で食べられる道具”を開発し5つの金賞を獲得した女子高校生の願い「あきらめなくていい世界を」【岡山】 | TBS NEWS DIG
全国の中高生を対象にした発明コンクール「自由すぎる研究EXPO」で岡山市の女子高校生が最多となる5つの金賞を受賞しました。考案したのは「納豆を片手で食べられる道具」です。一体なぜそのような道具を？そこに…
とあるサイトに書かれていた”障がい者”ではなく”障害者”という表記を使う理由が話題に→｢寄り添った表記のはずが...｣｢これが当事者の現実に即した本当の配慮｣
リンク universal-manners.jp ユニバーサルマナー検定 ユニバーサルマナー検定とは？ ユニバーサルマナーの実践に必要な「マインド」と「アクション」を学び、身につけるための検定です。 高齢者や障害者、ベビーカー利用者、外国人など、多様な方々を街で見かける現代。私たちにとって、“自分とは違う誰かの視点に立ち行動すること”は、特別な対応ではなく、「こころづかい」の一つです。 11 users 1474
横断歩道の白線の間隔は、これまで45センチから50センチと定められていましたが、塗り直しにかかるコスト削減などを目的に、間隔を90センチまで広げることを可能にする制度改正が、ことし7月に行われました。 しかし「目の不自由な人たちが横断歩道を認識しづらくなる」という意見が事前に寄せられ、警察庁は一部の横断歩道に対象を絞って間隔の変更を進める方針です。 横断歩道は、車のタイヤとの摩擦などで塗料がすり減ることから、交通量の多い場所では2年から3年ごとに塗り直しが必要で、維持管理にかかるコストが課題になっています。 白線の間隔は、標識標示令で45センチから50センチと定められてきましたが、警察庁は塗り直しのコスト削減などを目的に、白線の間隔を90センチまで広げることを可能にする制度改正の方針を打ち出し、ことし6月にかけて意見を募集しました。 これに対し、目の不自由な人たちから「白線の間隔を広げると
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのか - Qiita
role 属性とは、aria-* 属性とは、WAI-ARIA とは、いったい何なのか、いつ使うべきなのかHTMLアクセシビリティWAI-ARIA 最近、いくつかの場面でWebアクセシビリティについて、コーディングに関する技術的な説明をする機会がありました。そのなかで、そもそもWAI-ARIAというものが、どういう立ち位置のものなのかがわかりづらい状態にあるということに気付きました。その結果として、WAI-ARIAの活用を含めたWebアクセシビリティ向上に取り組むことへのネガティブな印象が生まれてしまったり、理解が足りないままWAI-ARIAの属性を使うことでかえって問題が発生しやすくなってしまったりしている現状があるのではないかと思うようになりました。 そこでこの記事では、なるべくわかりやすい形で、WAI-ARIAそのものや、その中で登場する role 属性や、名前に aria- のプレフ
描いててちょっと強度ムチャやろと思ったけど「君は大人だがチャイルドシートに座りなさい」という前になんかこういうのできひんか？
田丸浩史 @hiroshiofsteel 自分で描いててちょっと強度ムチャやろ、と思ったけど「きみは大人だがチャイルドシートに座りなさい」とか言う前になんかこういうのできひんか pic.x.com/vvauevkose
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありませんHTMLアクセシビリティWAI-ARIA 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、本当にそうなのでしょうか？ disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要素や input 要素、 select 要素、 textarea 要素は、Tabキーによるフォーカスはでき
他社事例から考える、利用しやすいデザインシステムのためのガイドライン作り - enechain Tech Blog
はじめに enechainデザインシステムについて デジタル庁デザインシステム 特徴 Figmaファイル Webサイト GitHub Primer 特徴 Figmaファイル Webサイト Ameba Spindle 特徴 Figmaファイル Webサイト 各デザインシステムの構成まとめ enechainへの反映 Notionでのガイドライン まとめ はじめに こんにちは、デザイナーの渡邉と申します。私はenechainの業務委託メンバーとして、enechainの複数プロダクトを支えるデザインシステムの改善に携わっています。 この記事では、利用しやすいデザインシステムへと改善していく上でデザインチームが取り組んでいたことをまとめます。 enechainデザインシステムについて enechainでは10個以上のマルチプロダクトを開発・運用しており、デザイナーは各プロダクトでUIデザインを担当し
サーバーレスで負荷試験！Step Functions + Lambdaを使ったk6の分散実行
References - Running Large Tests with k6 https://k6.io/docs/testing-guides/running-large-tests/ - k6 Operator on GitHub] https://github.com/graf…
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
フロントエンドカンファレンス北海道2024 (2024/08/24) でのスポンサー LT 資料 https://fortee.jp/frontend-conf-hokkaido-2024
September 7, 2024 Hacker News Reddit Lobsters RussianI want to provide a smooth experience to my site visitors, so I work on accessibility and ensure it works without JavaScript enabled. I care about page load time because some pages contain large illustrations, so I minify my HTML. But one thing makes turning my blog light as a feather a pain in the ass. The hurdleSee, a major win in traffic redu
俺なりの最速[要出典]アクセシビリティチェック
最速[要出典]アクセシビリティチェック ナイスなアンサーソング！みなさんもぜひ「俺のアクセシビリティチェック」を書いていただけたら嬉しいです Rikiya Ihara / magi (@magi1125) https://twitter.com/magi1125/status/1832473908928507936 ということで、「俺なりのアクセシビリティチェック」について書いてみます。実はこの「最速アクセシビリティチェックRTA」についてはmagiさんと以前にも話をしていて、お互いの目的や手法の違いを確認していて、それをちゃんと表に出すという意味もあります。 チェックの目的や重視するもの magiさんのチェック手法がWCAGやJISの一定の基準を満たしているかを網羅的に確認してレポートすることを目的としている（ように見える）のと比較すると、私のチェックの目的は開発チームにいち早くどんな問
![俺なりの最速[要出典]アクセシビリティチェック](https://cdn-ak-scissors.b.st-hatena.com/image/square/057a8ecb61ee27ff8ff331de75755aa899b6cda3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--__-75Kxk--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E4%2525BF%2525BA%2525E3%252581%2525AA%2525E3%252582%25258A%2525E3%252581%2525AE%2525E6%25259C%252580%2525E9%252580%25259F%25255B%2525E8%2525A6%252581%2525E5%252587%2525BA%2525E5%252585%2525B8%25255D%2525E3%252582%2525A2%2525E3%252582%2525AF%2525E3%252582%2525BB%2525E3%252582%2525B7%2525E3%252583%252593%2525E3%252583%2525AA%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252581%2525E3%252582%2525A7%2525E3%252583%252583%2525E3%252582%2525AF%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aymrl%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2cxMEtvem5ETXNrSFdYVkN4dkxvYUdhaGxLNmdOVlB4cnV5eG1YNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
公開日 : 2024年8月27日 (2024年8月29日 更新) カテゴリー : アクセシビリティ / ユーザビリティ 「ダークパターン – 人を欺くデザインの手口と対策」を読みました。 本書は、ダークパターン (またの名を「ディセプティブパターン (deceptive patterns : 人を欺くデザインパターン)」) の専門家であり、ウェブサイト「Deceptive Patterns (旧 darkpatterns.org)」の創設者としても知られている Harry Brignull (ハリー・ブリヌル) 氏による著書です。 ダークパターン (ディセプティブパターン) とは、「Deceptive Patterns」のホームページの冒頭で以下のように定義されています。 Deceptive patterns (also known as “dark patterns”) are tric
この発表はすでにアクセシビリティに興味を持っていて、ソフトウェア開発の現場にアクセシビリティを取り入れたい人を対象としています。 開発チーム全体でアクセシビリティに意識を持つ状態が理想ですが、全員が詳細な実装を行うのは実際には難しいでしょう。そこで、特に意識をせずともある程度のアクセシビリティを保…
Web Developer Conference 2024 (2024/09/07) での発表資料 https://web-study.connpass.com/event/321711/
デジタル庁のプロフェッショナルが答える、「ウェブアクセシビリティ」10の質問｜デジタル庁ニュース
インターネットの普及とともに、耳にする機会が増えつつある「ウェブアクセシビリティ」。しかし、言葉は聞いたことがあっても、具体的にどういうものなのか、あるいはどのような点に配慮すべきなのかまではわからな...
「Xbox Adaptive Joystick」は，Xboxのアクセシビリティへの考えが詰まったコントローラ用アクセサリ。ドイツで実機をお試し［gamescom］
「Xbox Adaptive Joystick」は，Xboxのアクセシビリティへの考えが詰まったコントローラ用アクセサリ。ドイツで実機をお試し［gamescom］ 編集部：Junpoco Microsoftが2024年8月21日（海外時間）に発表した新プロダクト「Xbox Adaptive Joystick」は，身体の動きに制約のあるゲーマーのニーズに応える形で設計されたジョイスティックだ。 本製品は，Xbox用コントローラやXbox Adaptive Controller向けに作られた有線接続のアクセサリで，扱いやすい形状や重さ，Xboxアクセサリアプリでのボタンの再マッピングなど，さまざまなプレイ環境を想定したデザインやカスタマイズ性の高さが特徴となっている。 この新製品について，ドイツで開催中のgamescom 2024のMicrosoftビジネスブースで，8月22日に行われたプレゼ
アクセシビリティを考慮したマークアップをした経験がある方は、aria-labelやaria-labelledbyについてご存じでしょう。これらは、要素にラベル付けするためのWAI-ARIAプロパティです。多くの場合、要素のアクセシブルな名前 (accessible name) を決めるために使われます。 aria-labelはラベルを直接文字列として指定するプロパティで、aria-labelledbyはIDを通じて他の要素をラベルとして指定するプロパティです。その使い分けについては、仕様書[1]で以下のように説明されています。つまり、可能な場合はaria-labelledbyに寄せるべきだということです。 If the label text is available in the DOM (i.e. typically visible text content), authors SHOU
裾野市ウェブアクセシビリティ方針|裾野市 #WCAG2_0 #レベルAA #一部準拠 #地方自治体 2024年9月10日の情報 大分県ホームページ ウェブアクセシビリティ方針 - 大分県ホームページ #WCAG2_0 #レベルAA #準拠 #地方自治体 #試験の公開 2024年9月10日の情報
HCD-Net主催 UIデザインプロセスの課題と対策 ～UIデザインをリードするための実践的アプローチ～(2024年9月17日開催) https://peatix.com/event/4070934/ 上記イベントの講演④にて使用したスライドを公開用に編集したものです。 作者：森田 雄 / 株…
WebKit Features in Safari 18.0
Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolved issues land in WebKit, the rendering engine driving Safari. New in Safari 18 Distraction Control Distraction Control lets you hide distracting items as you browse the web, such as sign-in banners, cookie preference popups, n
Lighthouse CIでデータを蓄積し、Looker Studioで日々のスコアを可視化した話 - ZOZO TECH BLOG
はじめに こんにちは、WEARフロントエンド部Webブロックの新です。普段はWEARのWebサイトのリプレイス開発を担当しています。リプレイスを進める中で、不具合やリプレイス前後での変化にいち早く気づくため、Lighthouse CIによる日々の記録を可視化し定期的に通知する仕組みを作りました。本記事ではその取り組みについて詳しくご紹介します。 目次 はじめに 目次 背景・課題 Lighthouse CI とは やったこと 1. GitHub Actionsでページ毎にLighthouse CIを実行し、結果をGoogleスプレッドシートに保存 2. GoogleスプレッドシートをデータソースとしてLooker Studioでグラフ化 3. Looker StudioからGoogle Apps Scriptを使用するアカウントへメール配信 4. Google Apps ScriptでLoo
ESLint v8のEOLなど: Cybozu Frontend Weekly (2024-09-10号)
こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2024/9/10 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Paragraphs | scottohara.me HTML における「段落（paragraph）」の概念と、その適切な使用について解説した記事です。 HTML の paragraph は、<p> 要素だけでなく他の要素も含む広い概念で、スクリーンリーダーは <p> 要素だけでなく、<span>, <div>,<li> なども段落として認識します。そのため role=paragraph のような ARIA ロールは、
こんにちは、DevRelブロックのikkouです。2024年8月22日の夕方から24日の3日間にわたり「iOSDC Japan 2024」が開催されました。ZOZOは昨年同様プラチナスポンサーとして協賛し、スポンサーブースを出展しました。 technote.zozo.com 本記事では、前半は「iOSエンジニアの視点」から、ZOZOから登壇したセッションとiOSエンジニアが気になったセッションを紹介します。そして後半は「DevRelの視点」から、ZOZOの協賛ブースの様子と各社のブースコーデのまとめを写真多めでお伝えします。 登壇内容の紹介 LT: 全力の跳躍を捉える計測アプリを作る ポスターセッション: Haptic Feedbackでクセになるユーザー体験を提供しよう！ ZOZOのiOSエンジニアが気になったセッションの紹介 Server-Driven UI入門: 画面のStateを直
Cursor Directory
Python8TypeScript7React6Next.js4React Native4Vite3C#3Meta-Prompt3Expo3JavaScript2FastAPI2Unity2Game Development2API2Function2Tailwind2Astro1Viem v21Wagmi v21Standard.js1SwiftUI1Swift1Laravel1PHP1Ruby1Rails1Microservices1Serverless1Flask1Django1Web Development1Vue.js1Node.js1Critique1Reflection1Trajectory Analysis1WebShop1Acting1Tailwind CSS1three.js1React three fiber1Julia1DataScience1Data Analyst
JSer.info #706 - Vue 3.5がリリースされました。 Announcing Vue 3.5 | The Vue Point パフォーマンス改善、definePropsの返り値をDestructureできるようになっています。 また、useId()の追加、data-allow-mismatch属性の追加、defineCustomElement() APIを追加しCustom Elementの対応を改善、useTemplateRef()、onWatcherCleanup()の追加なども行われています。 JavaScriptの入門書であるjsprimer v6.0.0がリリースされました。 JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新 | Web Scratch ES2024の対応とNode.jsのユースケー
モーダルダイアログのアクセシビリティについて
はじめに Web で利用されるモーダルダイアログについて、その実装やアクセシビリティについて掘り下げ、それらの実装などについてまとめます。内容は著者の理解に基づいており、正確性を保証するものではありません。 詳しくは ARIA-APG を参照ください。 Modal Dialog Examplehttps://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/ 細かい実装については次の記事がとても参考になります。 アクセシブルなモーダルダイアログの実装について考えるhttps://zenn.dev/yend724/articles/20220511-pc51v32llyzu8kws また、dialog要素はすでに baseline 2020 に含まれているためdialog要素も使うことができますが、その構造や挙動につい
DIY, for the makers: Crafting your espresso experience Discover the world's first DIY espresso machine. With our easy to understand step-by-step manual, all you need is a screwdriver and a wrench to assemble your very own espresso maker. Dive into the process of building your own diyPresso and on the go, learn how everything works. → Learn more Be in control: Brew the perfect espresso All settings
A JavaScript snippet that sets all Lighthouse scores to 100%
Metrics. Metrics is something that we all use to measure (flex) the success of our websites. One of the ways to benchmark the success of a website, these days, is to use Lighthouse, a tool that helps us to audit the performance of our websites. It benchmarks the overall performance based on four main metrics: Performance, Accessibility, Best Practices, and SEO. If your website can score 100 in all
With 10x growth since 2023, Llama is the leading engine of AI innovation
With 10x growth since 2023, Llama is the leading engine of AI innovation Llama models are approaching 350 million downloads to date (more than 10x the downloads compared to this time last year), and they were downloaded more than 20 million times in the last month alone, making Llama the leading open source model family.Llama usage by token volume across our major cloud service provider partners h
Request for developer feedback: customizable select | Blog | Chrome for Developers
Styling form controls like the <select> element has been reported as a top developer pain point for years, and we've been working on a solution. While this work is complex and has taken a long time to get right, we're getting very close to landing this feature. A customizable version of the select element is officially in Stage 2 in the WHATWG, with strong cross-browser interest and a prototype fo
Mastering Typography In Logo Design — Smashing Magazine
Finding the right typeface for a logo is a challenge and can be a very time-consuming process that requires both creativity and a practical approach. Levi Honing provides the essential background and tools to enhance your typography journey and apply this knowledge to your logo design. Let’s dive deep to learn how to create a logo that is not only expressive but also purposeful and well-thought-ou
iOS 18／iPadOS 18／macOS 15／tvOS 18／watchOS 11／visionOS 2／iOS 17.7／iPadOS 17.7 RCがリリース【更新】 - こぼねみ
Appleは日本時間9月10日、「iOS 18」「iPadOS 18」「macOS 15 Sequoia」「tvOS 18」「watchOS 11」「visionOS 2」「iOS 17.7」「iPadOS 17.7」のRC（release candidate／リリース候補）版を開発者およびパブリックテスター向けにリリースしました。 正式版の一般公開は9月16日（月）です。 新たにリリースされたバージョン 今回確認された新機能や変更点 リリースノート iOS 18 iOS 17.7 これまでに確認されているバージョン：iOS 18.x これまでに確認されているバージョン：iOS 17.x 各プレビューを確認 パブリックベータについて デベロッパベータ版も無料で利用可能に iOS 18 新たにリリースされたバージョン iOS 18 RC (22A3354) iPadOS 18 RC (22A
Version 1.93 is now available! Read about the new features and fixes from August. August 2024 (version 1.93) Update 1.93.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the August 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlig
What's new in DevTools, Chrome 129 | Blog | Chrome for Developers
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
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
Progressive Web Applications (PWA)Progressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. With Next.js, you can create PWAs that provide a seamless, app-like experience across all platforms without the need for multiple codebases or app store approvals. PWAs allow you to: Deploy updates instantl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
横断歩道の白線 コスト削減などで90cm間隔も“認識しづらく” | NHK
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
5分で分かる React Aria の 良いところ・これからなところ
WebP: The WebPage compression format
ダークパターン – 人を欺くデザインの手口と対策 | Accessible & Usable
チームで開発する際にアクセシビリティを保つ施策
React Aria で実現する次世代のアクセシビリティ
aria-labelとaria-labelledbyを併用する場合とは
ウェブアクセシビリティ方針まとめ | 福岡・北九州のウェブアクセシビリティ専門web制作会社
情報設計からのデザインアプローチ ～ユーザーの声を聞くよりも、もっとデータの声を聞け～
iOSDC Japan 2024 協賛&参加レポート - ZOZO TECH BLOG
2024-09-09のJS: Vue 3.5、jsprimer v6、a11y-visualizer
diyPresso - World’s first DIY espresso machine
Visual Studio Code August 2024
Chromium Docs - How Chrome Accessibility Works
Configuring: Progressive Web Applications (PWA) | Next.js