Let’s talk about disabled buttons. Specifically, let’s get into why we use them and how we can do better than the traditional disabled attribute in HTML (e.g. <button disabled> ) to mark a button as disabled. There are lots of use cases where a disabled button makes a lot of sense, and we’ll get to those reasons in just a moment. But throughout this article, we’ll be looking at a form that allows
こんにちは！アルプのデザイナーの大澤 (@Tadaki) です。 サブスクリプションの契約や請求の管理を SaaS として提供する Scalebase というプロダクトのデザイナーをしています。 先日、Scalebase のデザインシステムについて記事を書きました。実は最近このデザインシステムの視認性に関わる部分を大きくアップデートしています。 今回のデザインシステムのアップデートでは、主に「色の選択基準の明確化」「アイコンの視認性の向上」「情報の階層化」をしています。それぞれについて実際の画面をお見せしながら解説します。 1. 視認性を向上させる色の選び方 開発初期は特に問題なかったのですが、開発を進めていくうちにページの情報量や構造が複雑になり、色の選択基準が曖昧な部分が出たり、場所によってはかなり視認性が悪い色を選択してしまうことがありました。そこで WCAG 2.1 の Contr
Web: How to document the screen reader user experience - Accessibility, Your Team and You
User experience designers guide, How to document the screen reader user experience User experience designers are responsible for designing the user experience. Period. A visual is not enough. This doesn't ensure a good user experience (UX) for all users. Accessible design process includes documenting the non-visual UX, for screen reader users. This also helps in achieving a good user experience fo
アクセシビリティ対応 Web サイトの構築に関するリソース - Microsoft Edge Developer documentation
Web には、HTML、CSS、JavaScript の組み合わせを使用して構築された動的で複雑な Web サイト、アプリケーション、およびユーザー インターフェイスが用意されています。 ただし、アクセシビリティを念頭に置いて設計および構築する場合、これらの複雑な Web サイトは、 支援技術 に依存して Web を閲覧するユーザーが使用するのが困難です。 障穣のあるユーザーがアクセスできる Web サイトを構築するには、ユーザー インターフェイスに関するセマンティック情報が必要です。 アクセシビリティ対応の Web サイトを使用すると、スクリーン リーダーなどの支援技術が、さまざまな能力を持つユーザーが Web サイトを使用するのに役立つ必要な情報を伝えることができるようになります。 Microsoft Edge でサポートされている新しい HTML5 機能については、 HTML5Acc
概要 まずはじめに、私はWebサービス屋さんです。 Webサービスを提供し続ける以上、誰もが使えるものを提供するというのは自然なことであり一定の条件を満たさないと使うことができないサービスを提供するのは本意ではないと考えています。 しかしながら、多くの場合Webアクセシビリティを意識してサービスを作る場合には、デザインであったり、デザインを実装するためのマークアップであったりが意識されがちです。 そのためサーバーサイドには無縁であると感じる人も少なくはないのではないかなと私自身は考えています。実際にサーバーサイドに出来ることがどこかに明確に書かれている項目も多くはありません。 そんな中で、サーバーサイドが、Webが、どこまで現在のWebアクセシビリティに取り組むという基礎知識になっているか、またサーバーサイドエンジニアとして出来る何かがないのかということを模索していきたいと思います。 We
こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。 今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。 この記事では、デザイン要素のうち、カラーに焦点を絞りご紹介させて頂きます。 デザイントークンとは？ なぜデザイントークンは必要なのか 今回デザイントークンを定義する上で意識したこと カラーのデザイントークンを定義してみる デザイントークンの手法 今回のお題に沿ってデザイントークンを定義してみる プリミティブトークン セマンティックトークン Figmaで実装する マークアップで使用できるように環境を整備する おまけ：カラー定義で参考になるサイト Tailwind CSS Color Generator Primer Prism さいごに デザイントークンとは？
こんにちは、SmartHR の人事評価機能を開発しているエンジニアの takata と nakano です。 SmartHR の人事評価機能は、評価テンプレートと評価プロジェクトを用いて、柔軟な人事評価が可能なウェブアプリケーションです。人事評価の担当者は、評価テンプレートで評価の流れと項目を設計し、評価プロジェクトで評価業務を実施します。評価対象者や評価者は、評価シートの入力や提出などができます。 先日、この人事評価機能のアクセシビリティ試験を行い、いくつかの改善点を見つけました。改善点の内容と今後の対応について共有したいと思います！ アクセシビリティ試験の概要 Web Content Accessibility Guidelines（以下 WCAG） 2.1 を参考に試験しました。 WCAG 2.1 はウェブコンテンツをよりアクセシブルにするためのガイドラインです。ウェブコンテンツをア
Stop Using ‘Pop-up’
Stop Using ‘Pop-up’ TL;DR: Stop using the word pop-up. Instead choose a term that accurately describes the control you want. I encourage you to read my post Stop Using ‘Drop-down’, which provides the set-up for this post. Along with another term I would prefer everyone stopped using. As you embark on a design, build, or specification, it is important you, the stakeholders, and the team understand
この記事は2022年5月11日に開催されたFigmaのカンファレンス『Config 2022』のセッション内容を記事として再編集した内容ものです 私は医療系テックスタートアップのUbie株式会社でデザインエンジニアをしている谷（@hiloki）です。 この記事では「デザイン業務を少し楽にしたい」そのために自らFigmaプラグインを作ってみたいと考えてもらえるような話をします。 Figmaの特長FigmaにはAuto LayoutやコンポーネントのVariants、チームでコンポーネントやスタイルを共有するTeam Libraryなどパワフルな機能がたくさんあります。 それら以外で私がFigmaで好きなのは、Figma Communityというコミュニティ機能と、そこに展開されるたくさんのFigma Pluginです。 Unsplashから直接Figma上に写真を読み込めるプラグインや、色の
この記事はミツエーリンクスアドベントカレンダー2019 - Qiitaの17日目の記事です。 Webサイトにはアクセシビリティ対応が必要である、ということが浸透するにつれて、サイトに掲載されているPDFをアクセシブルにするにはどうしたらよいでしょうか？というお問い合わせをいただくことが増えてきました。 そこで「WebサイトにおけるPDFとは何か」をあらためて考えつつ、PDFのアクセシビリティ対応について、基本的な内容を簡単に説明したいと思います。 PDFとは そもそも、PDFとは何を伝えるためのフォーマットでしょうか。 画像であればPNGやSVG、音声であればMP3やAAC、動画であればAVIやMP4などのように、サイトで表現したいコンテンツにはそれぞれ適切なフォーマットが存在します。 PDF（Portable Document Format）は、電子文書のためのフォーマットです。 OSや
WCAG に準拠した色の組み合わせを簡単に作成できるWebアプリ・「Accessible color palette generator」
Accessible color palette generatorはWCAG（Web Content Accessibility Guidelines）に準拠した色の組み合わせを簡単に作成できるWebアプリです。 非デザイナーでもインフォグラフィックを作成出来るVenngageが提供しているサービスで、任意のカラーコードを入力すると、そのカラーと相性の良い色で且つアクセシビリティに配慮した色を提案してくれる、というもの。 配慮された色は、具体的にはコントラスト比4.5:1に基づくWCAG2.1のAAに準拠したものとなっています。提案されたパレットはプレーンテキストでDL可能です。無料、ユーザー登録不要で利用できます。 Accessible color palette generator
デザインシステムの定義 デザインシステムとは、企業のビジョンやブランドアイデンティティなどから「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネントなどを備えた一連のリソースのことを指します。 デザインシステムを作る目的としては、複数のデジタルプロダクト・サービスを展開する際にブランドの一貫性やデザイン品質を担保したり、運用を効率化させるという点が挙げられます。 デザインシステムの構成要素 デザインシステムを構成する3つの要素 デザインシステムの構成要素を3つに分けると、以下のようになります。 デザイン原則 原則に基づいたルール(スタイルガイド) 原則に基づいたツール(コンポーネントライブラリ) それでは、各要素について詳しく解説していきます。 デザイン原則 プロダクトに関わるステークホルダーがプロダクトを作っていく上
この記事の要約 webページのアクセシビリティを向上する観点とその方法を紹介しています。本稿では特にデザイン段階に注目し、テキストのサイズやコントラスト比の適切な出し方をまとめました。ちょっとした工夫の積み重ねで誰もが使いやすいwebサイトを作れるようになりましょう！ 本文 こんにちは。アイレットデザイン事業部のマークアップ/フロントエンドエンジニアの工藤です。アイレットデザイン事業部ではINSIDE UI/UXと題して、所属デザイナーとエンジニアがデザイン・SEO・アクセシビリティ・UI/UXなどそれぞれスペシャリティのある領域に対する知見を幅広く発信しています。 前回記事に引き続き今回は2021年1月に行ったiretコーポレートサイトのリニューアルによって、Lighthouseのアクセシビリティ監査項目で100点を取ることができたので、どのようにアクセシビリティを向上したかを記事にした
A Guide To Accessible Form Validation — Smashing Magazine
Each time we build a field validation from scratch, accessibility doesn’t come out of the box. In this guide, Sandrina breaks down what we need to take into consideration, so that nobody gets stuck on an inaccessible invalid field. When it comes to form validation, we can explore it from two perspectives: usability and accessibility. “What’s the difference between usability and accessibility?” you
指定したWebページ内にあるリンクやボタン等のデフォルト時、ホバー時、フォーカス時のアクセシビリティチェックをしてくれる・「Button Contrast Checker」
Button Contrast Checkerは任意のWebサイトのURLを指定すると、そのページ内にあるリンクやボタンなどのデフォルトの状態、マウスホバー時、フォーカス状態におけるカラーアクセシビリティをチェックしてくれるWebツールです。 テキストの色や背景色、周りの色などを解析し、WCAG 2.1に準拠した十分なコントラストがあるかどうかをチェック、評価と指摘をしてくれます。 提供しているのは依頼を受けたWebサイトのアクセシビリティをチェックし、改善レポートを提供するサービスを展開しているAditusによるもの。こちらはボタンのみを自動チェックしてくれるツールを公開したようです。 雑感自分のブログでもチェックしてみましたが、16要素のうち、問題があるのは13か所と、テストなら赤点の採点でした。なんのチェックもせず適当に作りたいように作ったWebサイトならまぁこんなもんじゃないでしょ
筆者の個人的な予測としては、WCAG 2.2の策定にはまだまだ時間がかかるのではと思っていましたが、2023年7月20日付けでWCAG 2.2の勧告案（Proposed Recommendation）が発行されました（W3Cのアナウンス）。 前回の勧告候補（前回の記事WCAG 2.2の勧告候補が更新（2023年5月版）もあわせて参照してください）からの変更点については、編集上の変更にとどまっています。不安定な機能（at risk）とされていたSC (Success Criteria) 2.4.13 Focus Appearanceと2.5.8 Target Size (Minimum)については残留する格好となりました。 現時点でのWhat's New in WCAG 2.2でも言及されているように、W3Cの文書プロセス上問題がなければ8月下旬にはW3C勧告（Recommendation）
本記事は、デジタル庁が作成した「ウェブアクセシビリティ導入ガイドブック」の内容コピーライトポリシーに準じて転載をしています。 「ウェブアクセシビリティとは何か？」からはじめて学ぶ人にとって、非常に有益な情報となっています。手元に置きたい場合は、ぜひデジタル庁のサイトで、「ウェブアクセシビリティ導入ガイドブック」を、ダウンロードして振り返りながら活用してください（Web担編集部）。 ウェブアクセシビリティ導入ガイドブックとはウェブサイトで発信される情報、情報システムで提供されるサービスは、インターネットとブラウザがあれば時間と場所を問わず利用することができ便利です。また、利用者が、見やすい・使いやすい方法を選んで使うことができる、柔軟性の高いメディアでもあります。 インターネットを使った情報発信ができるようになったことで、情報へのアクセスのしやすさ、つまりアクセシビリティは格段に高まりました
WCAG 3.0 (W3C Working Draft 2023年7月24日版) | Accessible & Usable
公開日 : 2023年8月21日 カテゴリー : アクセシビリティ W3C にて策定作業が進んでいる WCAG 3.0 (W3C Accessibility Guidelines) の Working Draft が、2023年7月24日付で更新されました。先のドラフトが2021年12月7日付なので、1年7か月ぶりの更新になります。 ドラフト原文 : W3C Accessibility Guidelines (WCAG) 3.0 - W3C Working Draft 24 July 2023 前回ご紹介した2021年12月7日版から大きく構成などが変わっており、WCAG 3.0 はまだまだ探索的な段階であると言えます。ですのでこの記事では、以前のドラフトからの差分を追うことはせずに、今回のドラフトをもとに改めて WCAG 3.0 の大まかなアウトラインを捉え直すことを主眼に、まとめてみた
皆さんはアクセシビリティに配慮してデザインするとき、どのようなことを工夫していますか？ 社内にアクセシビリティの専門部署があるところ、すでに深掘って取り組まれているところもあれば、アクセシビリティまで提案できる機会が中々ない、という声も聞くので、まだ取り組み具合には大きく差があるのかなと感じています。 カイエンでは近年、大手企業や国や自治体の案件に携わることも増え、アクセシビリティの需要を強く感じるようになってきました。 都合よく社内にアクセシビリティの専門家がいるわけではなかったので、コツコツとインプットをし知見を積み上げて、社内共有会などで全体の意識を上げようとしています。 そこで、同じような境遇の制作会社の方やデザイナーの方が何から始めたら良いか？がイメージできるように、初歩的なところになりますが整理してまとめてみます。 アクセシビリティとは情報が伝わり操作できること視覚、聴覚障害や
A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors — Smashing Magazine
The CSS Working Group Editor’s Draft for Selectors Level 4 includes several pseudo-class selectors that already have proposal candidates in most modern browsers. This guide will cover ones that currently have the best support along with examples to demonstrate how you can start using them today! Pseudo-class selectors are the ones that begin with the colon character “:” and match based on a state
Migrating to v5
Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5. Dependencies Dropped jQuery. Upgraded from Popper v1.x to Popper v2.x. Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated. Migrated from Jekyll to Hugo for building our documentation Browser support Dropped Internet Explorer 10 and 11 Dropped Micro
:focus-visibleについて | EvoLab.
こんにちはミズノです。 2021年からモダンなブラウザのUA style sheet(ユーザーエージェントスタイルシート)に:focus-visibleが使用されるようになってきました。ChromeのUA style sheetを見ると全ての:focusが:focus-visibleになっています！ 今回は:focus-visible擬似クラスの紹介をしていこうと思います。 :focus-visibleとはキーボード操作時にフォーカスされた要素のスタイルを指定することができるキーボード入力をサポートする要素はマウス操作時でもフォーカスが表示される(input要素、またはフォーカスが当たると仮想キーボードが表示されるような要素など):focus-visibleが実装された経緯は開発者がマウスユーザーのためにoutline:0を指定してフォーカスリング(フォーカスインジケータ)を消し、キーボー
Many forms of assistive technology use keyboard navigation to understand and take action on screen content. One way of navigating is via the Tab key. You may already be familiar with this way of navigating if you use it to quickly jump from input to input on a form without having to reach for your mouse or trackpad. Tab will jump to interactive elements in the order they show up in the DOM. This i
A Complete Guide To Accessibility Tooling — Smashing Magazine
In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we’ve covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don’t miss the next one. Learning to build accessible websites can be a daunting task for those who are just starting to im
この一連の記事では、W3C ウェブコンテンツ・アクセシビリティガイドライン 2.0 または 2.1（WCAG、Web Content Accessibility Guidelines）で概説されている推奨事項に準拠するために必要な手順を理解するのに役立つ簡単な説明を提供します。 WCAG 2.0 と 2.1 は、さまざまな障碍を持つ人々にとってウェブコンテンツをよりアクセスしやすくするための詳細なガイドラインを提供しています。 それは包括的ですが信じられないほど詳細であり、そして迅速な理解を得ることは非常に困難です。 このため、さまざまな推奨事項を満たすために必要な実際的な手順をまとめ、必要に応じて詳細へのリンクを追加しました。 WCAG は大きく 4 つの原則に分割されます — ウェブコンテンツがアクセス可能であるように熟慮しなければならない主要な事柄（WCAG 定義のためのアクセシビリ
米国で急増するウェブアクセシビリティ訴訟 グローバル展開するなら、知っておきたい海外情報 | いますぐ始める！ ウェブアクセシビリティの基本
障害者の権利を守り、差別を解消することを目的とする法律が日本でも動き始めていますが、海外の多くの国・地域では日本よりも法整備が進んでいます。法整備が進んでいる国ではどのようなことが起きているのでしょうか。 米国ではアクセシビリティ関連の問題で企業が訴えられるケースが年々増えています。EU各国でも罰金が科せられるケースもあります。日本企業がアクセシビリティ対応をしないまま海外に事業展開するのはリスクがあり、実際に大企業に対し訴状が送られた例もあります。 グローバル展開を目指す企業では、より一層ウェブアクセシビリティ対応を実施する必要があります。今回はそんな海外のウェブアクセシビリティの現状について解説します。 海外のウェブアクセシビリティ事情前回の記事では、簡単に日米のウェブアクセシビリティに関する法律の違いについて触れました。今回はさらに欧米の状況も踏まえながらウェブアクセシビリティ事情を
HTMLをPDFに変換するやり方 - Qiita
はじめに 業務上HTMLの画面をPDFにしてダウンロードしたい場合があります。 利用者は手動でツール、コマンドなどを使ってPDFに変換する場面があるし、 プログラムでPDF作成してダウンロードする場面もあります。 やり方を簡単にまとめてみます。 1. 利用者手動でPDF生成 1.1 ブラウザの機能を使ってPDFとして保存 Chromeの場合は、印刷の画面の送信先を「PDFに保存」選択し、保存ボタンを押すとPDFファイルとして作成できます。 1.2 Chromeの拡張機能の利用 いくつかありますが、例えば：Print Friendly & PDF https://chrome.google.com/webstore/detail/print-friendly-pdf/ohlencieiipommannpdfcmfdpjjmeolj?hl=ja 1.3 コマンドでPDF生成 1.3.1 wkh
A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH — Smashing Magazine
Did you know that your chosen color palette can have an impact on how much energy your website uses? Even a more environmentally friendly choice of colors can reduce the impact on the battery life of mobile devices. In this article, Michelle Barker shares advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today. There’s more to color on the web than meets the
Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria. They are informative, not part of the "normative" WCAG standard. For information, see About WCAG Understanding Documents. Date: Updated 20 June 2023. Developed by Accessibility Guidelines Working Group (AG WG) Participants (Co-Chairs: Alastair Campbell, Charles Ada
2018年6月5日付けでWCAG (Web Content Accessibility Guidelines) の最新バージョンである、「Web Content Accessibility Guidelines (WCAG) 2.1」がW3Cより正式に勧告されました。2008年12月に「WCAG 2.0」が勧告されて以来、約9年半ぶりにアップデートされたことになります。 今回の改定によって、2008年の「WCAG 2.0」勧告時に十分にカバーできず、対応が不十分とされていたスマートフォンやタブレット端末をはじめとした「モバイル対応」さらに「弱視（ロービジョン）」や「認知・学習障害」への対応強化を目的に、新たに「17」の達成基準が追加されています。 なお、各適合レベルごとの達成基準数の変動（WCAG 2.0 → WCAG 2.1）は下記の通りです。 適合レベル A： 25 → 30（+5）
W3Cからアナウンスされたように、WCAG 2.2が2023年10月5日付けで勧告（Recommendation）となりました。 WCAG 2.1の最初の勧告が2018年ですから、そこから5年が経って達成基準（Success Criterion）が追加されたことになります。 WCAG 2.1の勧告について「最初の」とわざわざ言っているのは、WCAG 2.1が先月に更新されたことによります（W3Cのアナウンス）。 WCAG 2.1の更新の内容はもっぱらエラッタの適用ですが（WCAG 2.1のChange Logも参照）、その中でも達成基準4.1.1について注記が追加されたのが目立った変更点と言えます。 この追記は、端的にはWCAG 2.2では達成基準 4.1.1が削除されているように、達成基準 4.1.1についての評価は別の達成基準で行うようにするという内容です。 さて、WCAG 2.2の話
サイト運営者必見！ 2024年の障害者差別解消法の改正法施行に備える “Webアクセシビリティ” に対応したサイトを作るために必要なこと
「合理的配慮」の留意事項 「合理的配慮」は、事務・事業の目的・内容・機能に照らし、以下の3つを満たすものであることに留意する必要があると記載されています。 ① 必要とされる範囲で本来の業務に付随するものに限られること ② 障害者でない者との比較において同等の機会の提供を受けるためのものであること ③ 事務・事業の目的・内容・機能の本質的な変更には及ばないこと 引用：内閣府 リーフレット「令和６年４月１日から合理的配慮の提供が義務化されます！」 合理的配慮の提供における留意点として、上記リーフレットには「障害のある人もそうでない人も同じようにできる状況を整えることが目的」と記載されています。 Webアクセシビリティについて記載がされているわけではありませんが、「障害のある人もそうでない人も同じようにWebサイトを利用できる状況を整える」とも捉えられるため、トランスコスモスでは、今回の障害者差
Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label. Rows & Columns #FFFFFF, White #F2F2F2 #DDDDDD #CCCCCC #888888 #404040, Charcoal #000000, Black #2F78C5, Effective on Extremes #0F60B6, Effective on Lights #398EEA, Ineffective Use distinct rows & columns values Use the same rows & colum
A Step-By-Step Guide To Building Accessible Carousels — Smashing Magazine
Most carousels come along with usability and accessibility issues. To avoid these issues, this article addresses step-by-step design considerations as well as semantic requirements for carousels to be accessible. It is intended to create an in-depth understanding of the implementation and its impact on users. You can spot them on every other homepage: carousel widgets with auto-rotating content. T
Unlocking inclusive design: how Primer's color system is making GitHub.com more inclusive
CompanyProductUnlocking inclusive design: how Primer’s color system is making GitHub.com more inclusiveHow Primer’s updated light and dark theme color contrast strategy resolved hundreds of color-contrast-related accessibility issues over one thousand use cases. Over 100 million developers around the world come to GitHub to build software. Primer, GitHub’s open source design system, is responsible
COVID-19でリアルイベントを干されたラブライバーがオンラインフラワースタンドサービスを作った話 - Qiita
背景 ライブイベントの楽しみのひとつに、ファンが贈るフラワースタンドがあります。簡素なものから豪華なものまで様々な趣向の凝らされた花が会場のロビーや特設フラスタ置き場に並ぶ様は壮観です。僕自身もフラスタを贈ったことがあります。 まずはじめに、フラスタと言われてよく新規オープンした飲食店の前に置いてあるような形式的な花を想像している方向けに、我々オタクがイベントに出す花というのがどういうものか、ちょっと例示して認識を合わせておきます。 さて、2020年末の世の中はCOVID-19全盛です。様々なイベントが中止やオンライン開催を余儀なくされたり、集客開催できるイベントでも人の密集を避けるべく祝花の受付・掲出を行っていないケースが多いようです。確かにフラスタコーナー、みんな写真撮りに来るので密もいいところですからね。 悲しい話ではありますが、ただ悲しんでいるだけでなく何かできることはないだろうか
Color contrast checker, analyser and color suggestions | Polypane
How does the color contrast checker work?The Polypane color contrast checker checks against values defined by the WCAG 2 (Web Content Accessibility Guidelines) or APCA (the Accessible Perceptual Contrast Algorithm). WCAG give a formula to calculate the contrast, ranging from 1 (no contrast) to 21 (black on white). APCA has a range from minus ~106 to plus ~106. The Polypane contrast checker takes o
アクセシビリティ Advent Calendar 2021、ありがとうございました！ この記事はアクセシビリティ Advent Calendar 2021の最終日の記事です。 今までは、2013年開始！という歴史と伝統ある Webアクセシビリティ Advent Calendarと、2016年に開始され、休憩を挟んで以降は僕が作成させていただいているWebじゃないアクセシビリティ Advent Calendar 2018、Webも含むアクセシビリティ Advent Calendar 2019という、大きくは2本立ての時代がありました。 2021年の今年は、毎年「Webアクセシビリティ Advent Calendar」を作成されている木達さんから、「今年はWebアクセシビリティのカレンダーを作るつもりはないので、あとはよろしく！」とご指名をいただきました。 昨年の集まり具合を踏まえ、今年は A
iOSアプリのアクセシビリティを向上させるために、必要なこと - Fenrir Engineers
唐突ですが、この記事をご覧になっている皆様が開発に携わっているアプリは、Accessibleでしょうか。アクセシビリティと一口に言っても、VoiceOverのような視覚に頼らないアプリの操作方法をサポートすることであったり、前景色（文字色など）と背景色とのコントラスト比を十分に持たせて視認しやすい色使いにしたり、ボタンのタッチ領域を十分に広くしてボタン操作を容易にするなど、様々なことが関係してきます。 この記事をご覧になっているということは、少なからずアクセシビリティに対する興味・関心を持っていらっしゃると思います。 弊社には、デザイナ・エンジニアを中心にアクセシビリティに強い関心を持つメンバーがいます。さらに、とてもありがたいことに、会社としてもAccessibleなアプリを作れるということを強みの一つにしていこうよ！ということで、業務の一環として、iOSアプリを開発するにあたってアクセ
この記事は先日リリースした個人開発アプリ『3 Good Things!』を作る中でUI/UXについて考え、 講師もやっているWebデザイナーさんを含む周囲の意見を聞いてそれを改善していった過程についてをまとめた記事です この記事で紹介するユーザー心理はこちら👇 基本スクロールとタップしかしたくない 開いて即何をすれば良いか分からないとサヨナラ 少しでも「難しそう/面倒くさそう」と思わせたら負け 信用できないアプリに個人情報は渡せない 「徒労感」は絶対にNG 期待した通りの動作で動かないとストレス 「使ってて」嬉しい・キモチイイが欲しい 他者のとの繋がりで持続するモチベーション 最終イメージ 👇アプリの紹介/使用技術等についてはこちら⚛️ このアプリはポジティブ心理学の創設者セリグマン教授が提唱し、長年の実験で効果が実証されている “Three Good Things”メソッドを使い、毎
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Making Disabled Buttons More Inclusive | CSS-Tricks
視認性を意識したデザインシステムのアップデート｜Tadaki
Webアクセシビリティを支えるための技術 - 気まぐれPHPerの頭の中
デザインの仕組み化としてデザイントークンを考えてみる（カラー編） - エキサイト TechBlog.
アクセシビリティ試験で見つかった人事評価機能の伸びしろ - SmartHR Tech Blog
FigmaプラグインによるFigmaのハックとワークフローの強化｜Hiroki Tani
PDFのアクセシビリティ対応：入門編 | アクセシビリティBlog | ミツエーリンクス
デザインシステムとは？内容や作り方、運用方法を解説します | in-Pocket インポケット
Lighthouseアクセシビリティ監査項目で100点を取るデザインと実装 vol.1 | iret.media
WCAG 2.2の勧告案が発行、8月にも勧告へ | アクセシビリティBlog | ミツエーリンクス
ウェブアクセシビリティ：よくある6つの質問に回答 | ウェブアクセシビリティ導入ガイドブック
できるところから始めてみた アクセシビリティに対するデザイン提案｜CAYENNE
Focus management and inert | CSS-Tricks
ウェブコンテンツ・アクセシビリティガイドラインを理解する - アクセシビリティ | MDN
Understanding WCAG 2.1 | WAI | W3C
勧告された「WCAG 2.1」において「WCAG 2.0」から新たに追加された達成基準の解説
WCAG 2.2の勧告とWCAG 2.1の更新 | アクセシビリティBlog | ミツエーリンクス
EightShapes Contrast Grid
2021年のクラスメソッドでのアクセシビリティ活動のふりかえり | DevelopersIO
使い続けてもらえるアプリUX開発で気を付けた8つのユーザー心理【個人開発】 - Qiita