フロントエンドid属性管理戦略
アクセシビリティのチェックなどを行っているとよく発見される問題にIDの重複がある。HTMLではid属性はグローバル属性でありすべての要素に指定できるが、その値は一意である必要があり、ドキュメント内において重複があってはならないことになっている。 ただ実際に実装してみたり開発経験のある人ならご存知のとおり、滅多なことでこの重複が問題になることは少ない。HTMLのパースは中断することなくブラウザは要素を描画するし、CSSのセレクタは期待通り要素を特定してスタイルを適用する。なのでこの重複に対してそこまで気を使ってこなかった人も多いだろうし、先のアクセシビリティチェックでよく発見されるのもそういった背景があるのだろうと思う。 しかし表面的に問題が起きていなくとも、実際には重大な構文エラーであり、潜在的に多くの問題を抱えている。IDの重複が引き起こす問題は単純で、そのIDを参照する処理はひとつめの
早い時期からDXを進めている企業から、顧客向けのサービスを作ってリリースしたはいいものの、流入がない、ユーザーが定着しない、ログインIDが別々なのでクロスセルに繋がらない。といった課題を耳にします。 これからウェブサービスを作り自社商品の価値を効果的に外に伝えるなら、そういった過去の事例から学び、より品質の良いサービスを目指すと良いでしょう。 そこで今回は、顧客むけの新規サービスを開発するうえで考慮が漏れがちな「ログイン体験」にクローズアップして考えていきたいと思います。 ログイン体験が企業に与える影響 ウェブサービスを媒体として商品の購入に結びつけるためには、ID登録・ログインは避けては通れないステップです。 とはいえログインはビジネスのコアではないため、まずは付け焼き刃な作りでリリースしてしまうのが従来のやり方です。 そして同企業の別の事業部が新たなサービスを作る際、再度ID登録・ログ
この記事は『デザイニングWebアクセシビリティ』の第8章 ビジュアルデザイン を図解・要約したものになります。より詳しく知りたい方はこの本を読んでください。この8章についてはお試し版という形で無料公開されています。 8章の内容：視覚的な見せ方、ビジュアルについて多くの人は視覚から情報を得ているので、ビジュアルデザインを工夫すればアクセシビリティの向上が見込める。とはいえ視覚情報のほとんどはマシンリーダブルになっていないため、視覚情報の見せ方によっては伝わりにくくなってしまう（機械翻訳ができないなど）。 ビジュアルデザインの方針と流れ1. サイトの目的に沿ってデザインの方向性を決める 2. 基本ルールを決める カラースキーム：サイト全体で使う色を定義。この段階でアクセシビリティに配慮した設計をしておくと良い。 グリッドシステム：コンテンツ幅の変化に柔軟に対応できるのが望ましい。 - リキッド
You are here: Creative Juiz › User Experience › There is no “Myths of Color Contrast Accessibility” Also available in: Français When you need to work on interfaces, color contrast is a real thing you have to take into account to make it accessible. You have the right to be afraid of losing part of the aesthetics of your beautifully well designed interface, and you are right if you are used to poor
CSS System Colors
In another episode of “I’ve been a web designer for how long and am only now learning about this?” let’s talk about CSS system colors. Background On my blog, I support light and dark mode which is all controlled by prefers-color-scheme in my stylesheet. However, the implementation might not be what you imagine. A common pattern for doing light/dark mode is to use CSS custom properties for color va
花王のウェブアクセシビリティ、4年で700サイトの品質基準達成をめざす“全社プロジェクト”の進め方 | Webサイトリニューアル特集
花王グループでは、誰にとってもアクセスしやすいデジタル情報発信を目指して2021年12月、ウェブアクセシビリティ向上・確保に全社で取り組むと発表した。 そして2022年3月には、World Wide Web Consortium（ワールドワイドウェブコンソーシアム、W3C）が公表しているWeb Content Accessibility Guidelines（ウェブコンテンツアクセシビリティガイドライン、WCAG）2.1レベルAAを目標とした具体的なアクセシビリティ方針を定め、自社サイトで公表している。 2024年までに主要ウェブサイトを、2025年までに花王グループ国内外の全約700サイトの品質基準達成を目標としており、目下対応中だ。制作を委託する制作会社も含めると、関係者は約1200名にのぼる。 足かけ4年の一大プロジェクトはどのように始まり、どんなプロセスで進行しているのか。同プロジ
Node.js で動作する CUI Web アクセシビリティチェックツール 「Pa11y」 ベースの CI ツール 「Pa11y CI」 の導入から、複数 URL に対するアクセシビリティテストを一括で実行し、最終的に日本語のレポートを HTML 形式で生成するまでを解説します。 かなり前 （2016年だった） に Node.js で動作する CUI Web アクセシビリティチェックツール 「Pa11y のレポートを日本語で出力する方法に関して記事を書きました。 参考 pa11y のレポートを日本語で表示したかったので HTML_CodeSniffer の日本語版作った Pa11y のアップデートによって上記記事の内容は古くなっていて、今は使えない状態になっているわけですけども、Pa11y 自体はずっと使わせて頂いているのと、今は Pa11y ベースの CI ツールとして 「Pa11y C
富本ディレクター／フロントエンドエンジニア（ビジネス・アーキテクツ）地元・愛知の印刷会社や広告会社にてWeb制作に携わる。2014年頃、フロントエンドエンジニアとしてBAに入社。現在、ディレクターとして開発・運用の進行管理やWebサイトのガイドライン作成やコンポーネントの設計・作成を担当しています。好きなキャラクターはリラックマ。イタリアとスイスに行きたい。 2021年5月に障害者差別解消法が改正され、2024年4月に施行されることを知っていますか？ 改正法施行後は、民間企業に対しても「合理的配慮の提供」が義務化されます。また、その合理的配慮を的確に行うための「環境の整備」が努力義務となっています。ウェブサイトにおいては、この環境の整備がアクセシビリティを確保することとされています。そのため多くの企業でもさまざまな取り組みがすすめられています。 本記事では、アクセシビリティ確保の指標となる
アクセシビリティ要件「色だけに依存しない」をスマートフォンで手軽に検証する | Accessible & Usable
公開日 : 2020年2月22日 (2021年7月17日 更新) カテゴリー : アクセシビリティ ウェブコンテンツのデザインにおいては、ユーザーに情報を識別させる手段として、色だけに依存しないことが重要です。W3C が勧告している WCAG (Web Content Accessibility Guidelines) (日本語訳) でも下記のとおり達成基準が設けられています。 色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 出典 : WCAG 2.1 達成基準 1.4.1 「色の使用 (レベル A)」 言い換えれば、グレースケール (色を排除した状態) で表示しても、情報が十分に識別できる必要があります。そうすることで、様々な色覚特性を持ったユーザーや、モノクロの印刷または画面表示 (電子ペーパーなど) を介して閲覧するユーザ
フォーカスアピアランスの達成基準についての考察
2.4.7 では基本的に「フォーカスインジケータが見えること」で適合となります。失敗例もインジケータを視覚的に完全に消していることのみとなっており、「十分な達成方法」や「さらに対応が望まれる達成方法」として『目立つ』という言葉をつかっているものの、その具体的な閾値は示されていませんでした。それが今回の 2.7.11 と 2.7.12 では、具体的な数値や計算方法が『面積』や『カラーコントラスト』で規定されることになります。 面積とコントラスト まずは原文を読み解いてみます。 Success Criterion 2.4.11 Focus Appearance (Minimum) (Level AA): When user interface components receive keyboard focus, an area of the focus indicator meets the
Pedagogical Best Practices: Residential, Blended, and Online
This section provides principles and tips to help you teach, regardless of whether your class is fully in person, fully online, or a little bit of both. Below you’ll see general advice, a variety of course types, and tips on encouraging student engagement. To keep things simple, we're focusing on the most common and most effective online teaching practices. Reminders that are equally relevant to i
あかるいブランドカラーとコントラストの話〈テキスト版〉
2020年12月23日に開催された Accessibility Step Vol.07 オンライン で「今年取り組んだアクセシビリティ」としてライトニングトークを行いました。使用したスライドはこちらです。 自己紹介 高知在住フリーランスデザイナー印刷物とウェブのデザイン地域の小規模案件と東京の案件 半々くらいアクセシビリティが要件に入ってきたことは今のところない勉強して、できるところから取り入れている 今年取り組んだもうひとつのお話として「アイコンと用途・代替テキスト対応表を作った話」という記事を書いています。 コントラストについて コントラスト比とは、色同士の明るさ（相対輝度）の比率のことをいいます。コントラスト比が最大になるのは黒と白の組み合わせで 21：1。明度の差が小さいと、コントラスト比も小さくなり、文字や形が分かりづらくなります。 デザインする環境では見えていても、見る人の状況
達成方法に関する重要な情報この達成方法 (参考) の使用法と、この達成方法が WCAG 2.0 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.0 を満たすコンテンツを作成するために使用できることを意味するものではない。 この文書は、単語を視覚的にフォーマットするために、単語の中でスペース、タブ文字、改行文字又はキャリッジリターンのような空白文字を用いると、それらを意味のある並びとして適切に提示するのが困難になるという失敗例について解説する。文字間を制御するために空白文字を挿入すると、単語の解釈を変えてしまうかもしれないし、それが一つの単語であるとプログラムで解釈でき
CCCが指定管理者として運営を行う施設では、それぞれが独自に運営しているウェブサイトがあり、誰にとってもわかりやすい情報発信を続けていくために、アクセシビリティを高いレベルで担保できるようになることを目指していました。 そこで、アクセシビリティを向上するためのガイドラインの作成と、併せてスタッフの啓発を行いました。 まずは各サイトの現状を調査し、課題を洗い出しました。ウェブアクセシビリティの国際規格であるWCAG2.1の達成基準を満たしているかどうかの目視調査に加え、全盲のアクセシビリティエンジニアがスクリーンリーダー*での音声読み上げと操作確認を実施。マークアップ、視覚表現、テキストライティングの3つの観点から、視覚障害の有無によって情報の取得に差異がないかどうかを調査しました。 ＊スクリーンリーダーとは、画面に表示されるテキスト情報を音声で読み上げ、点字としても出力するソフトウェア。そ
公開日 : 2022年2月1日 (2022年7月23日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) 各種デバイスの主要 OS で、いわゆるダークモードが標準装備されている現在 (†)、既に多くのアプリが、ダークモードに対応したビジュアルデザインを併せ持つようになっています。 † macOS 10.14 Mojave 以降、iOS 13 以降、iPadOS 13 以降、Android 10 以降、Windows 10 以降で、ユーザーの任意によるダークモード (ダークテーマ) への切替が可能になっています。 ウェブコンテンツにおいて、ダークモードに対応したビジュアルデザイン (スタイル) を併せ持つことは、必ずしも必須というわけではありません。アクセシビリティの観点で見た場合、たしかにロービジョンのユーザーの中には (画面の背景色が明るいと眩しすぎるため) 暗い背景色と
ブロックエディターではじめるアクセシビリティ
この記事は、2021年1月29日に開催された WordPress のオンライン勉強会 WP Zoom UP #57 新春LT大会2021！ で発表した内容に、もう少しお話したかった補足︎を加えたものです。 使用したスライドはこちら（Speaker Deck）です。 自由と可能性 WordPress 5.0 からコンテンツのエディターが「ブロックエディター」へと刷新されました。 ブロックエディターの登場で、WordPress を使った発信はさらに自由にパワフルになりました。これまで HTML や CSS の知識がないとできなかったような表現が、ブロックを組み立てるように、誰でも簡単にできるようになりました。 この記事もブロックエディターを使って書いていますし、新規でサイトを制作する時はブロックエディターをデフォルトにしています。 そこでひとつ質問です。 サイトの目的はそれぞれだと思いますが、
The Web Content Accessibility Guidelines (WCAG), an organization that defines standards for web content accessibility, does not specify a minimum font size for the web. But we know there’s such a thing as text that is too small to be legible, just as text that can be too large to consume. So, how can we make sure our font sizes are accessible? What sort of best practices can we rely on to make for
サービスのカラーパレットをバージョンアップさせるべく、デザインシステム「カラーパレット」を調べることになりました。 開発チームからの要望としては「どうせ新しくするなら、漏れのない状態を目指したいね」ということで、iOS/Androidのガイドラインから始めて、話題になっていたAmebaスピンドル、さらに他社のデザインシステムも含めて徹底的に調査しました。 先に調査結果ですが、大枠でまとめるとこのような形となりました。 ・色は、明度差も含めたトーンをパレットとして持っておく ・テキスト表示コントラスト比 4.5 : 1 を準拠させる ・ダークテーマには法則性が多数ある、あらかじめ抑えるべきポイントを抑えてから設計を開始するとはいえ、どのカラーパレット / デザインシステムも非常によくできいます。細部までみると、様々な分岐が見られ全て取り入れたいぐらいです。 それでは調査内容を発表させていただ
動画のアクセシビリティ
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。アクセシビリティの第11代黒帯（ヤフー内のスキル任命制度）の中野 信です。 昨年に続いての登板ですが、今回は「動画のアクセシビリティ」について話をします。 昨年から今年にかけて、新型コロナウィルスの影響で自宅にいる時間が増えたかと思います。 GYAO!やNetflixといった動画サービスを見る時間も増えましたし、会社のミーティングもオンライン会議に変わりました。セミナーやイベントもオンライン開催が多くなったかと思います。また、動画を撮影・公開することもスマホで簡単にできるようになりましたし、動画編集や動画配信の情報と機材もここ2年ほどで充実してきました。一方で、動画で情報提供を行うときに、音が聞こえないとまったく情報が
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
Accessible Palette: stop using HSL for color systems | Wildbit
Recently, I set out on a mission to reconstruct a color system in Postmark. This project addressed several problems with our design system, involved a lot of research, and even required building a few custom tools. Now that this project is finished, I want to share the most important lessons I learned about color and present a new design and accessibility tool Accessible Palette born out of this w
Anatomy of Dynamic color | DroidKaigi 2022 - inSmartBank
こんにちは、株式会社スマートバンクでアプリエンジニアをしているロクネムです。 みなさんはDynamic colorという機能をご存知でしょうか？ Dynamic colorとは、ユーザーの設定した壁紙における優位な色を元にパーソナライズされた配色を生成してアプリへ適用することができる、Android 12から提供を開始した機能です。 色という非常に主観的な要素をカスタマイズ可能にすることによって、ユーザーの嗜好をより尊重するデザインの提供を実現しています。 https://material.io/blog/start-building-with-material-you 本記事では、このDynamic colorという機能について、どのようなアルゴリズムをもとに優位な色を抽出し、そこからいかにして調和の取れたカラースキームを生成するのか、内部の仕組みを徹底解剖しながら説明していきます。 そ
散らかってる上に、読み返してないのでおかしな文章になってるかもですが。 さておき、少し前ですけどなんかのイベントで雑談する機会があって、地方自治体の仕様書が斜め上でアレって話を聞いた記憶があるんですけども。例えば公共系の巷によくある文字サイズを変更するボタンとか、あれぶっちゃけ仕様書に入っちゃってるんで、どうしようもない的な怨嗟の声とか聞いたことがあった気がするんですけども、結局もっと上のレイヤーでそういう文言が入っちゃってるからそうなると考えるわけで。 たとえば、平成29年（2017年）3月に発行されている国土交通省所管事業における障害を理由とする差別の解消の推進に関する対応指針というのがありまして、これはまあ障害者差別解消法で定めるところの基本方針に基づいて、事業者が適切に対応するために必要な指針というものが出されるわけです（法第11条） その中には【航空運送業関係】として （２）合理
株式会社アジケでUIデザイナーをしているやまもとです。 唐突ですが皆さんオレンジ色についてどのようなイメージをお持ちですか？ オレンジは様々な企業のコーポレートカラーやアクセントカラーとしても使用されていますね オレンジをコーポレートカラーとしている会社私が担当しているPJにもオレンジ色のボタンパーツが使用されています。 担当しているPJで使用されているオレンジボタン（ダミー）現在アクセシビリティ強化に伴い、デザインシステムガイドラインアップデートを行っており、コントラスト比の見直しを行うことになりました。 見直しにあたり、このオレンジ色のコントラスト比に大いに悩まされることになります。 今回はアクセシビリティコントラスト比と戦った記録を書いていきたいと思います。 課題使いやすく取り入れやすいオレンジには、1点の大きな課題があります。 それは背景オレンジ、テキスト白のデザインにおいてコント
この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基本スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎
16 little UI design rules that make a big impact - Adham Dannaway
A UI design case study to redesign an example user interface using logical rules or guidelines User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder. Luckily, UI design doesn’t have to be so hard. Over nea
HTML, CSS, JavaScript, Python, PHP, C++, Dart — there are so many programming languages out there and you may even be totally fluent in several of them! But as we aim to write more and better code, the way we write and communicate in everyday language becomes more and more important… and perhaps even overlooked. The way we write about and around code is arguably as important as the code itself. An
Colour Contrast Analyser (WCAG 2.1 対応) の UI の日本語化 | Accessible & Usable
公開日 : 2019年11月10日 カテゴリー : アクセシビリティ The Paciello Group が公開している配色コントラストチェックツール Colour Contrast Analyser (以下、CCA) の UI が、このほど日本語化されました。@motchie さんによる実装です。 UI が日本語表示された Colour Contrast Analyser (V1.2.0) WCAG 2.1 対応版の CCA がリリースされた直後から、日本語ローカライズの issue (インフォアクシアの植木さんによる) が立っていたので楽しみにしていましたが、私自身 UI 改善でコントリビュートさせていただいた CCA がこのように日本語化されて、とても嬉しいです。 ウェブアクセシビリティ委員会 (WAIC) が翻訳公開している WCAG 2.1 日本語版 の用語と一貫性がありますの
This article is Day 21 of the Web Accessibility Advent Calendar 2019. This is about web accessibility support in Vue.js development. (Japanese Version) This article has been published for more than a year. Some parts of the content are outdated. Profile My name is Okuto Oyama. On the Internet, I am active under the names of Oyama Michinoku and yamanoku. I started out as a web designer for a web pr
先日APCA何もわからないという記事を書きました。 WCAG 3.0において、コントラスト比に関する新しい基準として提唱されているアルゴリズムについて、欧文フォントを基準にフォントサイズとウェイトの基準値が定められているので、日本語のフォントでどうなるのだろう？という問題提起の雑文でした（そうだったのか）。 まぁ、まだAPCAは開発中でもあり、WCAG 3.0が正式にリリースされるまでも結構かかりそうなので焦ることはない気はしますが、気になったものはしょうがないので、日本語フォントでシミュレーションできるツールを作成してみました。 APCAコントラスト日本語フォント検証 https://apca-ja.studio-ito.net/ 使いかた まずテキストカラーとバックグラウンドカラーを設定します。 すると、初期設定されているフォント（Noto Sans JP）とフォントサイズ（18px）
お金になるアクセシビリティ - uknmr
こんにちは、SmartHR の @uknmr です。今年入社した SmartHR におけるアクセシビリティの取り組みについて紹介します。 まず断りを入れておきますが、私は決して拝金主義ではありませんし、お金になる話も特にしません。 ちょっと煽ったタイトルを正すなら「BtoB SaaS プロダクト導入の決め手になり得るアクセシビリティ」といった感じです。もっとアクセシビリティが日の目を見てもいいと思うし、アクセシビリティに取り組むことがもっと当たり前になれとは思っているので、「お金になれ! アクセシビリティィィッ!!」みたいな気持ちはあります。 私のアクセシビリティに対する理解 もう散々言われていますが改めて、アクセシビリティは高齢者や障害者のためだけの対応ではありません。ウェブアプリケーションを作る上で TypeScript が書けても、HTML / CSS の理解やそもそも HTTP と
2019年09月26日 更新 PDF版 WCAG 2.1 (レベルA & AA) 早見表です。読み上げのチェックはまだしていません（近いうちにやります）。 PDF版 WCAG 2.1 (レベルA & AA) 早見表 (174KB) 印刷版では、おもて面が日本語、裏面がグレースケールの英語としています。PDF版ではおまけでカラーの英語版を一緒にしています。 権利等 どなたでもご利用いただけます。 改変いただいても構いませんが、改変なさった時には、「制作 時代工房」を取り去ってもらった方がよいでしょう。 再配布も自由です。弊社への許諾申請も不要です。 この作品（有限会社 時代工房）によるPDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表は著作権法上の制約が知られている限り存在していません。 問い合わせ・間違いの指摘 有限会社時代工房までご連絡ください。 Amazo
2020年12月版（2020年12月25日公開） 作成者：情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会 目次 1. ガイドラインの目的 2. JIS X 8341-3:2016「JB.1 適合試験の要件」に対する補足事項 2.1 ウェブページ単位での試験 2.2 ウェブページ一式単位での試験 a) 全てのウェブページを選択する場合 b) ランダムに選択する場合 c) ウェブページ一式を代表するウェブページを選択する場合 d) ウェブページ一式を代表するウェブページとランダムに選択したウェブページとを併せて選択する場合 3. JIS X 8341-3:2016「JB.2 試験の手順」に対する補足事項 3.1 「達成方法及びその検証方法を特定できる技術的根拠」を示す方法の例 3.1.1 実装チェックリストの例 3.1.2 実装チェックリストのカスタマイズ方法 a) 適合レベルに合わ
セミナー「改正障害者差別解消法とWebアクセシビリティ」でお寄せいただいたご質問への回答 | アクセシビリティBlog | ミツエーリンクス
昨日オンラインで開催したWeb担当者のためのピンポイント講座、改正障害者差別解消法とWebアクセシビリティには大変多くの方々にご参加いただきました。この場を借りて厚く御礼申し上げます。また、質疑応答の時間ではすべてのご質問に回答することができず、申し訳ございませんでした。 本記事では、開催後にアンケートへのご回答を通じてお寄せいただいたものを含め、いただいたご質問にお答えさせていただきます（セミナーの時間中に回答できたものについては割愛しております、あらかじめご了承ください）。字数の兼ね合いから、回答にご満足・ご納得いただけない場合もあるかと思いますが、その場合には是非お気軽にお問い合わせをいただければ幸いです。 アクセシビリティに対する意識の高さを鑑みると、日本国内サイトよりグローバルサイトを優先的に着手すべきでしょうか？ おっしゃる通り、そのような考え方で優先順位を定義することには、一
ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている参考 画像の代替テキスト - SmartHR Design System非テキストコンテンツ - WCAG 2.0 解説書1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines動画・音声 動画の音声に字幕が付与されている 動画の内容を解説した音声、またはコンテンツがあるか 音声や動画が自動で再生される場合、一時停止できるか 画面内に1秒に3回以上の点滅や閃光を起こすも
テスト・パフォーマンス・アクセシビリティ・セキュリティの4大品質に取り組むメルペイのフロントエンドチーム #TeamInterview | メルカリエンジニアリング
テスト・パフォーマンス・アクセシビリティ・セキュリティの4大品質に取り組むメルペイのフロントエンドチーム #TeamInterview このインタビューではメルペイのフロントエンド開発を支える @ryotah 、 @yutapon 、@tokuda109 、 @dwj の4人に今取り組んでいることや、技術スタック、今後の展望などを聞いています。メルペイのフロントエンドがどういったテクノロジーによって開発されているか気になる方はぜひご覧ください。 インタビューアーはEngineering Officeの@afroscriptにてお届けします。 自己紹介 – まずは皆さんの自己紹介からお願いします @ryotah: 私は2018年8月にメルペイに入社しました。それまでは飲食店の予約・顧客管理サービスやゲーム開発におけるフロントエンドエンジニアでした。入社後は加盟店様が利用する管理画面の開発であ
2021年2月18日紙版発売 2021年2月16日電子版発売 野田陽平，門脇恒平，山田敬美，高橋和樹，藤川淳史，韓徹 著 B5変形判／224ページ 定価2,508円（本体2,280円＋税10%） ISBN 978-4-297-11902-7 Gihyo Direct Amazon 楽天ブックス ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto この本の概要 本書は，日本国内で爆発的な人気を誇るVue.jsの最新ノウハウ・アイデアを1つにまとめた新しい「Vue本」です。アプリケーション開発のためのルーティング・レンダリングから，CSS設計，状態管理，コンポーネント開発，パフォーマンス改善まで，Vue.jsをプロジェクトで使用するうえのさまざまな開発上の観点をまとめつつ，現場のエンジニアによる解決方法
こんにちは。はじめまして。note以外（Creators' Note）をご覧いただいたことのある方々には、ご無沙汰しております。デザイナーの守谷（@emim）です。 普段noteにはエンタメの感想しかアウトプットしていないので……おっと、わたしのアカウントは掘らないでくださいね😌 この投稿は、アクセシビリティ Advent Calendar 2022とChatwork Advent Calendar 2022の2つのアドベントカレンダーにクロスポストしている記事です。ぜひ別の記事も御覧ください。 今回は首題の件についてご紹介していきます。 Chatworkのデザイナーの役割Chatworkには、2分野のデザイナーがいます（noteでもデザイン関連マガジンが2つ存在しています）。 Chatwork BX（ブランドエクスペリエンス） Chatwork プロダクトデザイン 端的には、ウェブサイ
Have you ever tried to click or tap on an element (e.g.: button, link) and you realize that it doesn’t respond until you click on a specific area of it? This happens because the clickable area is not applied to the whole element. To make it more clear, see the below figure. I made some examples of how the clickable area should and shouldn’t be. For this article, I will go through different example
Published on September 25, 2018 (↻ July 14, 2023), filed under Web Development (RSS feed for all categories). There’s an art and even a bit of magic around simple frontend code. I love researching such code, and keeping code simple. Well beyond the point of understandable-simple, then, instead not-so-understandable-simple but rather minimal-simple. For that reason have I enjoyed writing about “bes
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たかがIDされどID… 企業の価値を最大限社会に提供するため統合ログイン体験 | TC3株式会社｜GIG INNOVATED.
アクセシビリティに配慮したビジュアルデザイン｜akatsuki174
There is no “Myths of Color Contrast Accessibility”
Pa11y CI でアクセシビリティテストを自動化し日本語のレポートを HTML 形式で生成する
アクセシビリティ確保の指標となる文書「WCAG」と企業の「アクセシビリティ方針」を紹介 | BAsixs（ベーシックス）
F32: 達成基準 1.3.2 の失敗例 － 単語内の間隔を制御するために、空白文字を使用している | WCAG 2.0 達成方法集
カルチュア・コンビニエンス・クラブ アクセシブルなウェブコンテンツ作成ガイドライン
ウェブコンテンツのダークモード対応 | Accessible & Usable
Accessible Font Sizing, Explained | CSS-Tricks
【永久保存版】 デザインシステム「カラーパレット」を徹底調査しました｜Akinosuke
公共系のウェブアクセシビリティの要件定義を考えるみたいな話から行政への働きかけ云々 - 水底の血
【WCAG2.1 アクセシビリティ対応】 コントラスト比の罠｜Kotoko Yamamoto
使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】
Technical Writing for Developers | CSS-Tricks
About accessibility with Vue.js - 2019
APCAコントラスト日本語フォント検証 - Qiita
PDF版 WCAG 2.1 (レベルA & AA) 早見表 - 有限会社時代工房
JIS X 8341-3:2016 試験実施ガイドライン
ウェブアクセシビリティ簡易チェックリスト | アクセシビリティ | SmartHR Design System
みんなのVue.js
デザイナーが難解なガイドライン（WCAG）を乗り越える方法（提案）｜emim
Enhancing The Clickable Area Size
“nofollow” still considered harmful - Jens Meiert