freee社内のアクセシビリティのいい話 2020年8月号 - freee Developers Hub
どうも、20新卒の全盲のコード書き、野澤です。社内では cat と呼ばれています。猫好きなのでこの名前です。もう猫になりたいぐらい猫好きです。 私が正社員として入社してから4か月が経過しました。そのなかで、freee社内でアクセシビリティのいい話がたくさんありましたので、そのうちのいくつかを共有したいと思います。「アクセシビリティ」という言葉を聞いたことがない方や、アクセシビリティについてもっと知りたいという方は、以下のエントリーもぜひご覧ください。 jobs.freee.co.jp developers.freee.co.jp developers.freee.co.jp 全盲なのにコードは書けるのか？ はい。このような疑問を抱く方も、当然いらっしゃるのではないでしょうか？ 全盲ということは、まったく目が見えないということです。画面が見えないわけなので、コードも見えないし、termina
はじめに わたしは普段フロントエンジニアとして働いており、WebアプリケーションのUIを設計・実装したりするような人間です。 UIを設計・実装していく時に、どういう考えをもとに取り組めばいいかというのをこの記事で整理してみたいと思います。 アプリケーション全体のUIを言語化すると壮大な話になり難しそうなので、今回はコンポーネントの設計・実装に絞って整理します。 コンポーネントとは、UIを構成する部品(ボタン、テキストフィールド、カードなど)のことを指しています。 さっそくですが、Webアプリケーションのコンポーネントを設計・実装していくにあたって重要なことは次の3点だと思っています。 Web標準に沿って設計・実装する どういう状態を取りうるかを明確にし、その状態を適切に表現する UIの文脈に応じて、十分なバリエーションを揃える 以降でそれぞれ詳しく書き出してみたいと思います。 1. Web
Vue.jsでWebの多様なユーザー/利用シーンに対応していくための公開素振り - BASEプロダクトチームブログ
この記事はBASE Advent Calendar 2019の15日目の記事です。 こんにちは。フロントエンドグループの加藤です。 私達は、「Payment to the People,Power to the People.」というミッションを掲げ、日々サービスづくりを頑張っています。 Peopleとは誰か このミッションにある、Peopleとは誰のことを指すのでしょうか？ 自分の周りの環境を想像しても、実に多様な人がいることがわかります。 また、日々ショップオーナーさんや購入者さんからいただく様々なお問い合わせの内容を見ていると、ほんとに様々な背景を持った方々に使っていただいているんだなと思います。 Webフロントエンド開発者としては、自分の力で出来ることがあれば、出来る限り多様な使われ方に対応できるプロダクトにしていきたいという思いがあります。 何を指針とするか では、まず何をどうす
ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話｜Mercari Design Blog
ルールではなく補助線 ─ユーザー数2,000万人超のサービスにおける、Design Systemを立ち上げた話 こんにちは、メルカリDesign Systemの立ち上げと運用を担当したデザイナーのtottieです。 この記事では、メルカリの抱えていたデザイン上の課題をDesign Systemの導入で改善したお話をご紹介いたします。 なぜDesign Systemを導入したの？Design Systemを導入した理由は、大きく分けて２つあります。 １つめは、開発における課題です。 導入を決定した当時（2018年）、メルカリはスタートアップから急成長したサービスだったため、開発チームは様々な課題を抱えていました。 サービスを改修したくても、複雑に絡み合ったコードのためアップデートが難しい状況になってきた。 急激なチームメンバーの増加にあたり、分担して作業するための土台の整備が間に合わなくなっ
UIデザイナーは要チェック！ 新しくなったMaterial Design 3は可変フォントやアイコン、アクセシブルで使いやすいカラーに
5/11,12に開催されたGoogle I/O 2022に伴い、Material Design 3のガイドラインが大幅アップデートされたので紹介します。 注目すべきキーワードは、アクセシビリティとパーソナライズ。 アクセシブルなコントラストを備えたダイナミックカラー、可変フォントRoboto FlexとRoboto Serif、可変アイコンフォントを使用したマテリアルシンボル、スイッチをはじめUI要素のデザインも変更されています。 Material Design 3 Material Design 3の大きな特徴は、表現力豊かなパーソナライズ機能とアクセシビリティ機能です。ダイナミックカラーのサポートに加えて、いくつかのマテリアルコンポーネントもアップデートされました。新機能は、オンラインやFigmaやGoogle Fontsなどで提供されており、すぐに利用できます。 Dynamic co
私は普段、家の脱衣所で仕事をしているのだが、デスクの隣にある縦型洗濯機がちょうどいい高さということもあり、そこにいつも仕事中に参照する本を積んでいる。洗濯機の蓋もまさか、漬物石みたいに本が置かれることになるなんて思ってもみなかっただろう。それらの本は主に、その時々の仕事に関係するものとか、読みかけのものだったりするから、頻繁に入れ替わっていくのだけど、ずっと置いているお気に入りが、いくつかある。そのうちの一つが、OOUI 本こと『オブジェクト指向 UI デザイン 使いやすいソフトウェアの原理』- ソシオメディア株式会社、上野 学、藤井 幸多（著） 上野 学（監修）だ。 出版されてから 3 年以上たっても、私は時折この本をふと、開いてみてはいつの間にか没頭し、そういえば私は仕事をしていたんだっけな、みたいになってしまう。端的に言って大好きだ。この 3 年間で読書会も 2 度主催したことがある
「HTMLの前提についてはざっと知った、ステップアップできるHTMLの勉強がしたい」「人に勧められるHTMLにまつわる書籍はあるだろうか」「令和でHTMLを学ぶならこの1冊、というものがほしい」―――そうした人々のニーズを叶えてくれる書籍が販売された。 その名も「HTML解体新書」だ。 本ブログ記事は、レビュアーとして関わり本書を読んだ＠okuto_oyamaによる感想と、HTMLのこれからについて考えていることをまとめたものである。 本の内容については、著者によるブログ記事にまとまってあるのでそちらを参考にしてもらいたい。 creators.bengo4.com まだまだHTMLについて知らないことがあった 私がHTMLについて始めて触れたのは、とあるブログサービスのHTML編集機能からだ。その頃は HTMLの仕様というものを知る由もなく、どういったタグを使うと画面上にどのように表示され
「政府統一Webサイト構築に向けたサービス基盤及び デザインシステム等の実証に関する調査業務」 の公告に係る説明会 2021年8月12日 内閣官房IT総合戦略室 はじめに 2 本日は説明会へのご参加ありがとうございます。 ・15:00-15:30 仕様書内容のご説明（IT室） ・15:30-16:00 質疑応答 ※最大16:30まで 【お願い】 ・ご説明中は音声はミュート、ビデオはオフに設定をお願いします。 ・ご質問いただく際は、はじめに社名とお名前をお知らせください。 ・説明会は録画させていただきますのでご了承ください。 公告概要 3 ・案件名 政府統一Webサイト構築に向けたサービス基盤及びデザインシステム等 の実証に関する調査業務 ・競争の方法 一般競争入札（総合評価落札方式） 価格点70点＋技術点140点＝合計210点 ・今後のスケジュール 8月23日（月）12時 技術等提案書等の
2022年、Figmaで特にお勧めしたいプラグインのまとめ
Figmaにはプラグインがたくさんあります、その中から特に便利なプラグインを紹介します。WebサイトやスマホアプリのUIを作成するワークフローに役立つ便利なプラグインばかりです。 20 Awesome Figma Plugins to improve your Workflow by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 特にお勧めしたいFigmaのプラグイン 終わりに はじめに 私はここ数年の間、Figmaの多くのプラグインを実際に試し、定期的に使用してきました。Figmaコミュニティで提供されるプラグインは改善され続け、その勢いは衰える気配がありません。 私がこれまでに使用してきたプラグインの中で、特にお勧めできる20個のプラグインと、現在も更新されているプラグインをまとめるのに良
ウェブアクセシビリティハンドブック｜ましじめ株式会社
本ハンドブックは、WCAG 2.0（JIS X 8341-3:2016）の達成基準をもとに すべての利用者がウェブサイト利用できるようにするためのアクセシビリティ向上の具体的な指針と実践的なアドバイスを提供します。 はじめに ウェブアクセシビリティとは 運用時のウェブアクセシビリティの取り組み 開発時のウェブアクセシビリティの取り組み ウェブアクセシビリティ試験 ウェブアクセシビリティ試験の流れ ウェブアクセシビリティ方針（サンプル） ウェブアクセシビリティ検証結果（サンプル） ウェブアクセシビリティ検証試験実施ページリスト（サンプル） 参考 実装の参考 ツールの参考 達成基準（適合レベルA,AAを解説） 1. 知覚可能の原則 代替テキストのガイドライン 【A】非テキストコンテンツの達成基準 時間依存メディアのガイドライン 【A】音声だけまたは映像だけ（収録済み）の達成基準 【A】キャプシ
大量のブログ記事を書くことなく、オーガニックトラフィックを増加させる方法 - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
オーガニックトラフィックを増加させることは、いつの時代もSEO担当者の命題と言えるでしょう。既存のキーワードの順位を上げるための施策や、まだ上位表示されていないキーワードの発掘などは、定番の手法と言えます。しかし、今回の記事は、Webサイト自体の新しい機能を開発することでオーガニックトラフィックの増加につなげよう、という内容になります。単純に新機能を開発する、という話ではなく、ニーズの発掘や検索エンジンへの伝え方などのポイントもまとめられており、非常に興味深い内容となっています。 インハウスのSEO担当にせよ、SEOコンサルタントにせよ、オーガニックトラフィックを増加させる機会を探すことは、大きな課題と言えよう。しかし、新しいキーワードを調査し、自身のドメインの強さに合致した記事を作成するという従来の方法が、全てのWebサイトで通用するわけではない。 Quoraを例に挙げてみよう。Quor
Apple・Google・Microsoftが自社ブラウザよりもFirefoxを冷遇するために設けている技術的問題点をまとめたページ「Platform Tilt」をMozillaが公開
MicrosoftはWindows、AppleはiOSやmacOS、GoogleはAndroidやChromeOSといったPC・スマートフォン向けのOSを開発しており、Windows搭載PCではEdge、iPhoneやMacではSafari、Android端末やChromebookではChromeといった自社製ブラウザがプリインストールされています。こういったメーカーはサードパーティー製ブラウザよりも自社ブラウザを推奨するケースがあるのですが、それだけではなく技術的な問題を残しておくことで競合ブラウザを蹴落とそうとしているとFirefoxの開発元であるMozillaが指摘しており、関連情報をまとめた「Platform Tilt」というページを公開しています。 Platform Tilt - Mozilla https://mozilla.github.io/platform-tilt/ 記
GMOペパボのデザイン部という会社横断組織で（自称）デザインエンジニアをやっているgyugyuです。好きな鮨ネタはスズキです。 この記事は GMOペパボデザイナー Advent Calendar 2022 の13日目の記事です。昨日は たるたるさん の 【2022】minneのアクセシビリティを振り返る でした。 この記事では「短期的には効率が下がるものの、中長期的にはより大きい効用をもたらす社内ツールのデザインをしたこと」と、そこから導き出される「社内ツールでもデザインをすることの重要性」について説明します。 前提 この記事におけるデザインとは この記事において、デザインという言葉で意味しているものは情報設計のことです。リッチなビジュアルの作り方や美しいUIパーツの作り方についてはこの記事では説明していません。それらについてはペパボの他のデザイナーが素晴らしい記事を書いているので、そちら
PaulはUXのデザイナーでありデジタルトランスフォーメーションの専門家です。彼はユーザーを促進するためのウェブやソーシャルメディア、モバイルの活用を、非営利やビジネスの分野で手助けしています。 ユーザーがWebページをすべて読むことは滅多にありません。したがって、Webに文章を書く際には、少し違った書き方をする必要があります。つまり、集中力を欠いたユーザーに対応した書き方です。 もしかしたら、あなたもこの記事の大部分を読まないかもしれません。実際、ユーザーは平均的にWebページの約28％しか読まないのです。人々の記憶に残るような説得的な記事を作る余地はあまり多くありません。 人々の注意が向かないので、Webで文章を書くことは大変な作業です。『優れたWebのコピーライターが気をつけている７つのこと』という記事でも述べたように、どんなに優れたライターであっても、Web上で何かを伝えるのには苦
経済産業省は8月22日、電子書籍のアクセシビリティーを評価するJIS規格（JIS X 23761）を制定したと発表した。視覚障害や発達障害などにより本を読みにくい人、読めない人でも読書できる電子書籍の普及を期待するとしている。 電子書籍のファイル形式である「EPUB」について、対象の書籍がどの程度アクセシブルかを評価する基準になる。日本の提案により2021年に国際規格化した仕様「EPUBアクセシビリティー」（ISO/IEC 23761）との整合性を図るために制定した。 経済産業省は今回の規格制定で、対象の電子書籍がどの程度アクセシブルなのかを出版社、利用者の両方が把握できるようになるとしている。 関連記事 設計書・仕様書のレビュー方法を定めたJIS規格登場 チェック体制を標準化しやすく 経済産業省が、システム開発時に使う設計書・仕様書などの「作業生産物」のレビュー工程についてJIS規格を制
ウェブアクセシビリティを確保・向上させるための簡易チェックリストです。このリストに記載されている項目を満たすと、おおよそSmartHRのウェブアクセシビリティ方針に掲げた品質を達成できます。 チェックする内容によっては例外があることがあります。参考に記載したリンクも参照してください。 わからないことがあれば #accessibility_and_human_rights_aka人権 チャンネルにていつでもお気軽にご相談ください！ 代替テキスト 画像に代替テキストが付与されている 装飾目的の画像が無視できるようになっている 代替テキストが空で設定されている または背景画像として表示されている参考 非テキストコンテンツ - WCAG 2.0 解説書1.1.1 画像に代替テキストを提供する - Ameba Accessibility Guidelines動画・音声 動画の音声に字幕が付与されてい
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Goog
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
プログラミングを強みに生き残れるか？ 焦燥感にとらわれた20代を越えて広がったキャリアの可能性 - Findy Engineer Lab
OSS活動をする中で知った、届かない存在に対する焦燥感。ソフトウェアエンジニアとしてプログラミングが一番の強みだという廣戸裕大（hiroppy）さんですが、IC（Individual Contributor）のキャリアを歩むなかで技術のキャッチアップにもがき、悩んだ時期もあったといいます。その焦燥感をどう解消していったのか、今につながった転機を寄稿いただきました。 △ 留学先のアイルランドにて、セミナーゲストとしてNode.jsを解説（2019年） ずっとプログラミングを強みにして走り続けられるのか 焦燥感と戦ってひたすらキャッチアップした20代の日々 新しくできた数名の組織に参加して広がった視野 シード期のスタートアップでtoBサービス開発に挑戦 視野を広げてキャリアパスの選択肢を増やす この記事を書くにあたって、過去を振り返って自分の強みとは一体何かと考えたときに、やはりプログラミング
今活用しているツールを紹介 古川陽介氏（以下、古川）：今、具体的にいくつかツールや考え方が出てきました。今聞いているみなさんはおそらく、「じゃあ、どれを使ったらいいんだろう？」とか「何をしたらいいんだろう？」となっているかもしれないですが、倉見さんにお聞きします。ずばり私たちは今何をやっているでしょうかというところで。例えば……。 倉見洋輔氏（以下、倉見）：すごく話を誘導されている感もありますが（笑）。 古川：そうですね（笑）。誘導しているんだけど。 例えば、先ほど言っていたHTMLとかそういうのをスナップショットでテストしているとか、もしくは、見た目の部分でテストをしているとか、そういうところでどういうことをやっていますかと聞いてもいいですか？ 倉見：宣伝の場をいただきありがとうございます（笑）。特に見た目に関する層のテストではいくつか活用しているツールがあります。 1つはやはり、「St
AirPods Proを便利に使いこなすための14のコツを、米メディアMacRumorsが動画で公開しているのでご紹介します。 知るとAirPods Proがもっと便利に！ Appleが10月末に発売したAirPods Proは、アクティブノイズキャンセリング機能を搭載し、周囲が騒がしいところでも音楽が聴きやすいのが特徴です。 MacRumorsは、知っておくとAirPods Proをさらに便利に使える14のコツを公開しています。 1. AirPods Proを正しくケースから取り出す AirPods Proをつまんで充電ケースから取り出そうとすると、指が滑って取り出しにくく、落としてしまう原因にもなります。 充電ケースのフタ内側にある窪みに指を入れて、指の腹でAirPods Proを引き出すようにすると、簡単に取り出すことができます。 2. 音質向上のためにノイズキャンセリングを使う A
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。システム統括本部で社内プラットフォームを開発・運用している本田です。普段は大阪オフィスで働いています。（新型コロナウイルスの影響でここ1年はずっと在宅ワークが続いておりますが） 私は2020年度後期の6カ月間、ヤフー大阪オフィスが運営しているオープンコラボイベント「Mix Leap」にスタッフとして初めて参加しました。そこで「フロントエンドのテストに関する勉強会」を企画から入って開催し、結果200人を超える参加応募がありました！ 今回はヤフーでのアソシエイトという働き方と、イベント企画から開催までを通した中での出来事や学んだことをお話しします。 ヤフーの技術コミュニティーとアソシエイト ヤフーでは東京、名古屋、大阪、福
視覚的に情報を伝えられる「アイコン」は、ボタンやナビゲーションなどのUIによく使用されています。なかでもアイコンとテキストを横並びにするレイアウトは実務で組む場面が多くあります。 横並びのレイアウトはさまざまな実装方法が存在し、それぞれに注意すべき点があります。たとえば、Flexboxで横並びのレイアウトを作ると以下のようなレイアウト崩れが発生する場合があります。経験したことのあるHTMLコーダーの方もいるのではないでしょうか？ さらに、アニメーションやアクセシビリティも考慮すると実装方法に向き不向きがあります。この記事では横並びのレイアウトを例に、4つの実装方法とその注意点を紹介します。 ※この記事のサンプルコードでは、CSSクラスの親子関係をわかりやすく、読みやすくするためにSass（SCSS）を使用しています。 レイアウトの実装方法 まずはレイアウトの実装方法から紹介します。以下の条
コンポーネントを配信するシステムについて構想する
はじめに この記事は、Cloudflare が提唱する Fragment Piercing (フラグメント・ピアシング) の記事(Cloudflare Workersによるマイクロフロントエンドの段階的な採用)を読んだ筆者が、そこから得たアイデアとそれをPoC（概念実証）している「コンポーネント配信システム」についてドキュメント化したものである。 この記事で取り上げられているシステムなどは、まだ実用段階に達していないものが多く含まれている。 デザインシステムとコンポーネントの配信 近年、デザインシステムを構築したり公開する企業や組織が増えている。 「デザインシステム」の価値は、Storybookのドキュメントに次のように示されている。 デザインシステムは複数のプロジェクトを横断してチームが複雑で、丈夫で、アクセシビリティの高いユーザーインターフェースを構築するための再利用可能な UI コン
デジタル社会の実現に向けた重点計画｜デジタル庁
2024年6月21日、「デジタル社会の実現に向けた重点計画」が閣議決定されました。 閣議決定された重点計画の資料は、ページ下部の資料をご確認ください。 本ページでは、重点計画の内容を要約してご紹介しています。本ページ掲載内容の紹介資料からもご確認いただけます。ぜひ、ご覧ください。 目次はじめに重点計画とは概要推進体制の強化はじめに誰一人取り残されない、人に優しいデジタル化を 2021年9月1日、日本のデジタル社会実現の司令塔としてデジタル庁が発足しました。 デジタル庁は、この国で暮らす一人ひとりの幸福を何よりも優先に考え、国や地方公共団体、民間事業者など関係者の方々と連携して、社会全体のデジタル化を推進する取組を牽引していきます。 この資料では、これからの日本が目指すデジタル社会の姿と、それを実現するために必要な考え方や取組について紹介します。 重点計画とは目指すべきデジタル社会への羅針盤
Macなら頭でカーソルを動かしてスマイルでクリックできる macOS Catalina 10.5.4新機能「ヘッドポインタ」
3月25日に公開されたmacOS Catalina 10.5.4から、設定＞アクセシビリティ＞ポインターコントロールの代替コントロール方法として「ヘッドポインタ」が追加されている。
DAOに限らず、様々なテック企業や業界の分析をしているメディアですので、ぜひ原文やThe Generalistを購読することをおすすめします。 著者のMario GabrieleさんのTwitter ↓ DAOs are absorbing the internet. This is true across dimensions: • Talent. Home for the internet's most gifted • Capital. Controlling billions in digital assets • Social capital. Where bright minds meet & collab • Culture. Defining cyber culture Gm, and let's begin 🧵 pic.twitter.com/5etEk4S5Y9 —
新年度も始まったということで、去年に引き続き注目トレンドのWebサイトをいっぱい見漁ってきました。 徐々に緩和されつつありますが、移動や外出が制限されていたこともあり、より刺激的な体験をインターネットに求める傾向がありました。また、社外だけではなく社内のコミュニケーションもオンラインが当たり前になっていることから、より効率的なコミュニケーションが模索されてきています。 AIを使ったサービスが爆発的に認知を広げていたりとさまざまな変化があるなかで、Webサイトはどう進化していくのでしょうか。妄想を膨らませながら見ていきましょう。 ※今回こちらの記事を参考にしています。 Top Web Design Trends of 2023 11 engaging web design trends for 2023 9 interactive web design trends for 2023 こんな
“ゲームをイージーモードで遊ぶことへのマウント”に対し、ストリーマーがキレる。ビデオゲームの遊び方に正解はない - AUTOMATON
ある海外ストリーマーが視聴者に対し「激怒」したところ、その主張が大きな共感を呼んでいるようだ。Twitch配信者のAshley Roboto氏は、5万5000人以上のフォロワーを抱える人物。快活な語り口による明るい配信が人気を集めるストリーマーだ。ところがそんな彼女が、配信上にてあることに対し激昂する姿を見せた。それは、先日PC版も発売された『キングダム ハーツIII』配信中の出来事。Roboto氏が怒りをあらわにしたのは、彼女が同作をイージーモードで遊ぶことに対し“マウント”をとってくる視聴者に対してだった。 「どうも、みんな。ちょっと私の目を見てください。私が誰に向かって話しているかわかりますよね。どうも……黙れクソども（Shut the f*** up）。ゲームを遊びたいように遊ばせろ」。らしからぬ激しい言葉で語りかけるRoboto氏。彼女が激情を見せた一幕は、『キングダム ハーツI
Webアクセシビリティーの品質規格として参考になることが多い「JIS X 8341-3:2016」の制定以降に出てきた、比較的新たな課題に対しての対応事例などを掲載。例えば、スマートフォン向け表示への対応例などを紹介している。資料内の事例は、デジタル庁内業務で蓄積してきた実例に基づいて取り上げているという。 デジタル庁は「Webアクセシビリティーを向上させるには、非常に専門的な複数の規格とガイドラインが必要。一方で、適切なやり方が分からないまま、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまう場合がある」と説明。初心者が利用できる行政機関向け研修資料が足りていない現状を指摘した。 そこで広報・サービス開発などを担当し、Webアクセシビリティーの改善に取り組む必要がある事業者向けに、知識ゼロからWebアクセシビリティーを学べる解説資料を作成。調達・受託事業者と適切なコ
はじめに こんにちは、ヌーラボの池です。ビジネスチャットツール Typetalk の開発をしています。 さて、先日 Typetalk はフロントフレームワークを AngularJS から Angular バージョン2 以降(以下、Angular2系という) に完全移行しました。移行作業は数年にわたる長期プロジェクトとなりましたが無事完了させることができました。今回はこのような長期間の移行作業にかかったリソースや、プロジェクトの進める上で行ったこと、得られたことについて紹介したいと思います。具体的に行った移行作業については別記事にまとめていますのでそちらをご参照ください。 AngularJS を Angular に移行する際に必要だった作業 アサイン時の状況 まず、私が移行作業にアサインされた時の状態からお話しします。AngularJS の移行作業は私がアサインされる2年ほど前に開始されてい
(この記事は「LayerXアドベントカレンダー2023春」の1日目の記事です。 今回は、LayerXが大事にしている行動指針である「Trustful Team」をテーマにお送りします。) どうも、すべての経済活動を、デジタル化したいLayerXの福島です。昨日(2023/2/28)は当社の資金調達のニュースが出ました。しっかりサービスの改善を進められるように頑張っていきます。 本日はこの資金調達の背景…という話ではなく、LayerXが大切にしている文化の話です。資金調達後、いよいよスケール期を迎えるLayerXにおいて今後も最も大切にしたい文化である「情報の透明性」についてです。 LayerXでは、毎週ALL Hands Meetingを行っています。その中で代表の二人から、会社の文化に関して大切と考えることを伝える時間をとっています。スケール後もこの文化は維持していきます。今回はそのとき
はじめに フロントエンドエンジニアのみなさん、 要素を非活性にする際、disabled=trueを使っていませんか？ アクセシビリティ的にそのやり方は良くないです。 最近、アクセシビリティに配慮したアプリケーションの開発に携わっています。 その中でシニアエンジニアから頂いたフィードバックについて共有したいと思います。 結論 disabled=true ではなく aria-disabled=true を使う disabledの場合 disabledが付与されている要素はフォーカスができません。 そのため、キーボードを用いて操作しているユーザーにとって、 要素の存在を認知しにくいものにしてしまいます。 （フォーカスできない要素は存在しない要素とほぼ同義だから） ちなみにテキストフィールドをdisabledにすると上記のように、ボタンのフォーカスがスキップされ、スクリーンリーダーでも検知すること
こんにちは。GMOペパボ株式会社でCDO（Chief Design Officer）を務めている小久保浩大郎 a.k.a. kotarok です。CDOというのはまあ役職の話なのですが実務者としてはIAという領域を得意としています。ということでIAの話です。Information Architectureですよ。Artificial Intelligenceの方ではありません。 ペパボでは隔月でデザイナーの社内勉強会「Designer's MTG（通称デザミ）」を行っており、先日はIAをテーマに開催しました。今回から数回に渡ってそこで話された内容をダイジェストでお届けしたいと思います。と言っても実はIAをテーマにしたデザミは今回が2回目だったりします。前回の模様やデザミ自体の取り組みも記事になっております。 そんな2回目のIA回はテーマを具体的に「わかりやすさを作るIA」としました。私自身
“小さな巨人”「Xbox Series S」のテクニカルディテールが明らかに。開発者インタビューもお届け ライター：奥谷海人 Microsoftの次世代ゲーム機「Xbox Series X」の弟分となる「Xbox Series S」。光学ドライブを搭載しない“デジタル版”として，Xbox史上最小となる筐体に次世代要素を盛り込みつつ，価格を3万2980円（税抜き）に抑えたことでゲーマーの注目を集めている。 今回，一部のメディアに対して，「Xbox Series S Tech Deep Dive」と題されたブリーフィングが行われ，MicrosoftのTechフェローであるAndrew Goossen（アンドリュー・グーセン）氏や，Xbox Program ManagementディレクターのJason Ronald（ジェイソン・ロナルド）氏に話を伺う機会を得たので，紹介しよう。 Xbox Ser
行送り（line-height）の世界基準 アクセシビリティのスタンダードであるWCAG「達成基準 1.4.12: テキストの間隔を理解する」では、行送りの最低値を1.5と定めている行送りを1.5にした場合でもデザインが破綻しないように促している（@SaekiTominagaさんのご指摘で解釈を誤っていたことが発覚。修正いたします）。しかし世の中のホームページには、リセットCSSを変更していなかったり（あくまでブラウザ間の差異を無くすためのものであり、スタイルを後付けすることが推奨されているわけだが、そもそもどうしてアクセシビリティ基準を守らないんだろうか？1 ただ、sanitize.cssなど、line-heightがちゃんと1.5と設定されているリセットCSSもちゃんと存在する）、古いBootstrapをそのまま使っていたりして、line-heightが狭いのが割とある。そんな場合でも
デザイナー向けにReactでUIを組んでみるワークショップをやってみた - freee Developers Hub
こんにちは、freeeのUXチームの id:ymrl です。 今日はアウトプット→思考デーということで、デザイナー向けにReactでUIを組むワークショップをいきなりやってみた話を書こうと思います。 私は昨年、エンジニアからデザイナーになりました 。そしてデザイナーの側に立ってみると、いろいろと効率が悪いなと思うところが多く、そこをどうにか打開できないかと思ってやってみたのがこのワークショップです。 しかしまだその状況は打開できていません。この記事はそんな中途半端な状態の話です。 freee のUI開発の現場、私の問題意識 前提として、freeeのUI開発について説明しなければいけません。 私がメインでやっているのはVibesというデザインシステムの開発です。VibesはfreeeのWebアプリケーションのUIを爆速でハイクオリティに開発できる状態を目指しています。それ以外にも、社内のアク
はじめに 2023/4/13に、AWSが新しい生成AIプラットフォームである「Amazon Bedrock」を発表しました。 この「Amazon Bedrock」を通じて、ビジネスやアプリケーションに最適な生成AIモデルを見つけるための幅広いFoundation Model (FM)を提供するとの発表がされています。 この記事では、Amazon Bedrockがどのように機能し、どのようにしてビジネスに価値をもたらす可能性を秘めているのかを解説します。 1. Amazon Bedrockの仕組み 簡単にまとめると、次のような機能や特徴を持つようです。 AIスタートアップやAmazonが開発した幅広いFMから選択できます。 サーバレスでプライベートにカスタマイズでき、独自のデータを使ってFMを調整できます。 AWSの既存サービスや機能（Amazon SageMakerおよびSageMaker
1. デザイン言語「Material You」でインターフェースが刷新まずは、Android 12の最も顕著な変更点である新しいテーマから始めましょう。 Android 12の「Material You」は、Android 11に比べてアイコンが大きく、メニューやウィンドウが丸みを帯び、アニメーションがスムーズになるなど、まったく新しい外観になっています。 また、レイアウトも一新され、新機能がユーザーインターフェースの中核に直接組み込まれています。特に注目される点は次の通りです。 Image: Googleカスタムテーマ：デザインが新しくなった「Material You」により、ユーザーはカスタムテーマを作成できるようになりました。「設定」→「壁紙とスタイル」で、スマホの壁紙を変更したり、フォント、メニュー、ウィジェット、アイコンの色を調整することができます。新しいウィジェットと会話のピン
2024年度リクルート エンジニアコース新人研修の講義資料です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebアプリケーションにおけるUIを構築するときに考える3つのこと - コンポーネント編
『オブジェクト指向 UI デザイン』 に書かれていないもの｜ai
「HTML解体新書」HTMLのこれからと向き合うための本 - クラウドワークス エンジニアブログ
「政府統一Webサイト構築に向けたサービス基盤及びデザインシステム等の実証に関する調査業務」の公告に係る説明会 | 内閣官房IT総合戦略室
使いたくなる社内ツールを作るためにデザインをしよう - Pepabo Tech Portal
集中力を欠くWeb閲覧者に向けたライティングテクニック
「本が読みづらい人」でも読みやすい電子書籍に アクセシビリティーを評価するJIS制定
ウェブアクセシビリティ簡易チェックリスト | アクセシビリティ | SmartHR Design System
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 | POSTD
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-中編 | POSTD
「フロントエンドのテストは“不安定さ・壊れやすさ”との戦い」 和田卓人×倉見洋輔×古川陽介が語る、アクセシビリティの重要性
AirPods Proを使いこなすための14のコツ - iPhone Mania
フロントエンドテストの勉強会を企画から開催まで担当した話
HTML・CSSのおさらい! アイコンとテキストを横並びに配置する方法まとめ - ICS MEDIA
DAO：分散自立型組織の革命とその全貌に迫る｜Go
注目のWebデザイントレンド10選【2023】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
デジタル庁、初心者向け「Webアクセシビリティー」導入ガイド無償公開 非技術者向け、専門用語は少なめに
数年かかるレガシー技術(AngularJS)の移行プロジェクトでやったこと・得られたこと | 株式会社ヌーラボ(Nulab inc.)
情報の透明性はなぜ大事なのか ー情報の秘匿は善意から始まるー｜福島良典 | LayerX
要素を非活性にするのに、まさか disabled を使ってないよね？ - Qiita
わかりやすさを作るIA - Pepabo Tech Portal
“小さな巨人”「Xbox Series S」のテクニカルディテールが明らかに。開発者インタビューもお届け
日本語の文章とline-heightに対する考察 - Qiita
AWSによる生成AIの新サービス「Amazon Bedrock」の可能性を考察する - Qiita
Android 12にアップデートすると使える新機能12選 | ライフハッカー・ジャパン
Webアクセシビリティ入門_2024