第1回 アクセシビリティを経営方針とつなげ、プロダクトマネージャーと合意する | gihyo.jp
本連載は『Webアプリケーションアクセシビリティ──今日から始める現場からの改善』を補うものです。紙幅の都合で同書に収められなかった原稿を再構成しました。 同書の第7章「アクセシビリティの組織導入」の続編にあたります。同書第7章は、会社内でたった一人でアクセシビリティの取り組みを始めてから、正式なチームを立ち上げるまでのノウハウを紹介しました。本連載はそこからさらに取り組みを広げていくためのノウハウをまとめます。 取り組みを進めると、社内関係者への説明、社外広報、イベント登壇など、ことあるごとに「この会社がアクセシビリティに取り組んでいる理由」を説明する場面が訪れます。これを言語化するには「会社の経営方針とアクセシビリティの関係性」を考えることが有効です。さらに、経営方針をもとにプロダクトビジョンやロードマップを意思決定するプロダクトマネージャー（PM）とも、この関係性について合意するこ
アコーディオンUIのアクセシビリティを改善してみよう！｜bonji810
この記事は STUDIO アクセシビリティ委員会のマガジンvol.8 です。 こんにちは！STUDIO株式会社 フロントエンドエンジニアのjimbouです。 私からはSTUDIO アクセシビリティ委員会マガジンにて、主にエンジニア/デザイナーさん向けに技術的な記事を発信しています。 STUDIOに限らずWebサイト、Webアプリに携わる全ての方々に読んでいただければと思います🌟 今回は「アコーディオンUI」についての記事になります💡 Webサイト、WebアプリでアコーディオンUIをデザイン/実装する方に向けて、少しでも役に立つ記事になれば幸いです☺️ 何のためにアクセシビリティを向上させるのか？ではこのアコーディオンUIを実装する上で、アクセシビリティを向上させるとどんな良いことが起こるのでしょうか。 例として、アクセシビリティを特に意識せず主にdivタグを用いてマークアップしたアコー
アクセシビリティチェック機能を強化・動画ストリーミングに対応した PowerCMS X ver.3.1の提供を開始
アクセシビリティチェック機能を強化・動画ストリーミングに対応した PowerCMS X ver.3.1の提供を開始アクセシビリティチェック機能を強化・動画ストリーミングファイル変換機能を追加した PowerCMS X 3.1を提供開始。PHP8.2に正式対応、HTMLデータ移行機能が大幅に強化されました。 PDFファイル・画像ファイルのアクセシビリティチェック機能を強化 アセットにアップロードするだけで、PDFファイル・画像ファイル・HTMLファイルのアクセシビリティ・チェックを自動的に行います。さらに、一覧画面に結果を表示するようにしました。以下の項目をチェックします。 ■ PDFファイル タイトルが指定されているかどうか テキストの抽出ができるかどうか 暗号化されていないか(コピーや印刷への制限を含む) 1ページ目の背景色と文字色のコントラスト比(自動計算) ■ 画像ファイル 画像が写
iOS文字の拡大率(ダイナミックフォント)を考慮したUIデザイン｜Nviveto
iOSのアクセシビリティではフォントサイズや画面の拡大などが可能です。 通常のアプリだと考慮しなくても大した問題にならないかもしれませんが、高齢者向けのサービスなどだと、利用ユーザーがフォントや画面の拡大率を設定している可能性があり、UIの崩れの原因となってしまいます。 逆に、フォントを大きくしたい大きく表示させたいユーザーに対して、その機能を制限してしまう場合もあります。 今回、この問題の仕様や対応策を考える機会があったので記事にまとめました。 フォントサイズの拡大とは？まずはフォントサイズの拡大機能についてです。 iOSの 設定 ＞ 画面表示と明るさ ＞ 文字サイズを変更 をタップすると出てくる端末のフォントサイズを全体的に拡縮できる機能のことです。 Apple公式のガイドさらに詳しく設定画面を見ていきましょう。 こちらはiOS15のアクセシビリティのフォント拡大メニューです。 7段階
テクノロジーの発展を加速してきたインクルーシブな試み【Microsoft編】
テクノロジーの発展を加速してきたインクルーシブな試み【Microsoft編】：林信行の「テクノロジーが変える未来への歩み」（1/4 ページ） ソニーグループ傘下のソニーが1月19日、2025年度までに原則全ての商品やサービスを、障害者や高齢者に配慮した仕様にすることを発表し話題となった。テクノロジーを用いて肉体的な格差を埋めようとする試みは、これが初めてではない。テクノロジーはしばしば弱者の味方をする。そしてそんな弱者のためのテクノロジーが、しばしばテクノロジーの新たな発展をもたらす。 テクノロジーの進化と新たな発展に結びつく取り組み 今日、PCで日々触れているキーボードは、元はタイプライターという機械の一部だったことは皆が知るところだろう。諸説あるが、タイプライターは16世紀にイタリアで原理が生み出され、1808年に同じイタリアで今日のタイプライターと近い形の機械が誕生した。アゴスティー
気づいてもらえるUIとは～上手くいかなかった事例から考える、わかりやすいUI～｜ニッセイアセットマネジメント公式note
仕事や買い物などで、エレベーターを日常的に利用されている方は多いと思います。 ところで、エレベーターが到着するときに、音がするものがあることをご存じですか？ 実はこれ、「到着音」といって、「上に行くのか」「下に行くのか」を耳でも判断できるように工夫されているそうです（※1）。 ※1エレベーターのメーカーによって異なる場合もあります。 しかし、相変わらず乗ってしまってから「あっ、上（下）でしたね」と間違いに気づく方は自分も含めてよく見かけます。 以前、同僚数人に「エレベーターに乗るとき、音がするよね。何の意味か知ってる？」と聞いたことがあります。正解を答えられた人はおらず、音が鳴っていることにすら気づいていない人もいました。 せっかく工夫しても、気づいてもらえないのは残念ですよね。 ユーザーに気づかれなければ、いくら工夫しても意味がない筆者は、インハウスのUI（画面デザイン）・UX（顧客体験
Contrast Ratio - WCAG Color Contrast Checker
Contrast Ratio A contrast ratio checker to easily calculate color contrast ratios and pass Web Content Accessibility Guidelines (WCAG). ? ⇋ Swap colors How to use As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the dif
Contrast | Figma
Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If ...
「HTML解体新書」リフロー版電子書籍を作りました - 弁護士ドットコム株式会社 Creators’ blog
4月に発売された書籍「HTML解体新書」。その電子版は今までPDF版しかありませんでしたが、このたびリフロー版が発売となり、Amazonでも購入できるようになりました。 この記事では、HTML解体新書のリフロー版電子書籍を実際に作成した際の流れについて、なぜ作成したのか、どうやって作成したのか、どのようなトラブルがあったか、といった点をご紹介します。リフロー版の電子書籍の作成、出版を検討されている方の参考になれば幸いです。 リフロー版の電子書籍を作った理由 リフロー型と固定レイアウト型 リフロー型とアクセシビリティ リフロー版の電子書籍を作るには 電書協 EPUB 3 制作ガイド 実際の制作の流れ テキスト原稿を用意する XHTMLを作る その他EPUBに必要なファイルを準備する OCFコンテナのメタデータを用意する mimetype container.xml OPFパッケージのデータを
Swiperアクセシビリティ改善のススメ - Qiita
『un-T factory! XA Advent Calendar 2022』 15日目です。 どうぞよろしくお願いします。 はじめに カルーセルを実装する際、アクセシビリティの設定はしていますか？ Swiperでは、デフォルトでaria属性・role属性がスライドやprev・nextボタン、ページネーションに付与されます。 ですが、それらは全て英語で設定されています。 日本人向けのサイトを制作するのであれば日本語で設定してあげるほうが親切ですよね。 意外と簡単に実装できますので、まだやったことがないという方はぜひ取り組んでみてください。 Swiperはv8.4.5を使用します。 アクセシビリティに関するオプション Swiperにはアクセシビリティに関するオプションが用意されています。 a11y オプション名 初期値 説明
アクセシビリティを追い求める木達一仁さんが #Vivaldiを使うワケ | Vivaldi Browser
「#Vivaldiを使うワケ」第10回目に登場していただくのは、株式会社ミツエーリンクス CTOの木達一仁さん。ブラウザの仕様やアクセシビリティに深い造詣を持ち、さまざまなメディアに寄稿しています。今回は、Vivaldiのアクセシビリティについていろいろと伺いました。 「#Vivaldiを使うワケ」では、Vivaldiの事例記事として、Vivaldiのヘビーユーザーに取材をさせていただき、Vivaldiへのこだわりや活用法などをご紹介します。 第10回目に登場していただくのは、株式会社ミツエーリンクス CTOの木達一仁さん。クライアントワークとしては、主にフロントエンドの設計や実装、関連ガイドラインの策定に従事しています。ブラウザの仕様やアクセシビリティに深い造詣を持ち、さまざまなメディアに寄稿しています。今回は、ブラウザのアクセシビリティ、そしてVivaldiのアクセシビリティについてい
2023年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2022年のWebアクセシビリティに関連する出来事を振り返りつつ、2023年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2 2022年9月版のWCAG 2.2で、文書のステータスとしてはようやく勧告候補（Candidate Recommendation）にまでたどり着き、仕様文書として完成する勧告（Recommendation）が見えてきた…と思っていたところですが、12月になって達成基準4.1.1構文解析を削除するという話が急浮上してきました。 達成基準4.1.1がどういったものなのか、改めて振り返ってみましょう。この達成基準については、もとはWCAG 2.1（原文、参考日本語訳）と同じものであり、WCAG 2.0とも同一です。達成基準4.1.1は、マークアップ言語
Payment and address form best practices | Articles | web.dev
Payment and address form best practices Stay organized with collections Save and categorize content based on your preferences. Maximize conversions by helping your users complete address and payment forms as quickly and easily as possible. Well-designed forms help users and increase conversion rates. One small fix can make a big difference! Here is an example of a simple payment form that demonstr
2022年の超私的デジタルアクセシビリティ関連10大ニュース
2022年12月24日 著 ポエムしか書けない身となって久しいですが（苦笑）、今年もアクセシビリティ Advent Calendar 2022に参加させていただいてまして、その24日目の記事です。タイトル通り超個人的な目線から、今年のデジタルアクセシビリティ関連のニュースを10個選び、適当に紹介してお茶を濁そうと思います。ちなみに10個のあいだに順位とかないですし、紹介順は時系列でもありません、悪しからず。 WCAG 2.2の策定、遅れまくる いくらなんでも2022年中には勧告されるだろう。そんなふうに考えていた時期が俺にもありました（棒）。しかし本日時点では勧告案より手前の勧告候補（9月6日付の発行）という状態であり、それどころか達成基準4.1.1が削除されそうなんていう今さらジローな話まで出てきてさぁ大変。ちなみにその件を含めオープンなイシューは58個も残っています......果たして
ティム・クック氏が車いすラグビーを見学。そこで語った「Appleの究極の理想像」 | ライフハッカー・ジャパン
記録を可視化し、トレーニングの自己分析に活用車いすラグビーは、通称「ラグ車」と呼ばれる頑丈な構造の競技用車いすが激しくぶつかり合う迫力が魅力の競技です。池崎選手と島川選手は、東京パラリンピック日本代表として銅メダルを獲得。現在は2024年のパリパラリンピックに向けてトレーニングを重ねています。 コート上を激しく動きまわり、大きな音を立ててぶつかり合う練習のようすを見学したクック氏は「とてもエキサイティングで見ていて楽しかった」と拍手を送りました。 クック氏が池崎選手のApple Watchの画面をのぞき込むと、「これだけで心拍数が上がりそうです」と笑う池崎選手。 両選手が使用するのは、Appleのアクセシビリティ機能として用意されている「車椅子」設定。歩数の代わりにプッシュ数（こいだ回数）や、プッシュのタイプ、速度、地形といった情報が記録されます。 Photo: 酒井麻里子また、トレーニン
2022年、freeeのアクセシビリティを振り返る｜magi1125
この記事はfreee Designers Advent Calendar 2022の12日目です。 こんにちは、freeeの@magi1125こと伊原です。デザインチームのマネジャーをしています。また、自称「アクセシビリティで一発当て太郎」でもあり、アクセシビリティ向上によるビジネスへの貢献を模索しています。 この記事ではタイトル通り、2022年のfreeeにおけるアクセシビリティ関連の出来事をご紹介します。なお、2021年以前の活動については「2021年、freeeのアクセシビリティを振り返る」をご覧ください。 今年はトピックが多いのと、私は話が長くなりがちなので、シンプルな報告を心がけて書いていきます！ ※ アクセシビリティの向上とは、障害者・高齢者を含めた幅広いユーザーに利用方法の選択肢を提供し、使える状況を広げる取り組みを指します。 モバイルアプリとガイドラインの相互改善まず挙げら
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
デザイナーのためのWCAGの歩き方｜Goodpatch Blog グッドパッチブログ
近年、日本国内でのアクセシビリティの取り組みは官民の組織区分にかかわらず活発なものとなっています。特に昨今ではデジタル庁がアクセシビリティの確保・維持・向上に取り組んでいる事例を耳にしてアクセシビリティにさらなる関心を寄せている人は多いのではないでしょうか。 そんなアクセシビリティへの理解を深める上で欠かせないのがウェブコンテンツのためのアクセシビリティガイドラインである「WCAG」です。WCAGはウェブエンジニアにとっては一般的に活用されるものになってきていますが、ボリュームの多さや内容の複雑さから、エンジニアと比べるとデザイナーに対しての普及は途上中という現状があります。 一方でアクセシビリティ対応はエンジニアだけの力で取り組むことは難しく、取り組みのためにはデザイナーの力が必須です。デザイナーがアクセシビリティに取り組むことによってユーザーをより理解できるようになる他、特に視覚表現に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ついに登場、Shiftall/パナソニックのHMD「MeganeX」が狙うもの【西田宗千佳のRandomTracking】
Accessible Color Palette Generator | WCAG Compliant
