Zenn
Closed41

アクセシビリティの話題を3～4行ほどで定期的にまとめる

#
accessibility
#
a11y
アクセシビリティ
ピン留めされたアイテム
kuboshokubosho

アクセシビリティに関して興味がひかれた記事を短文でまとめていくスクラップです。

kuboshokubosho

kintoneのアクセシビリティ改善とESLintルールの整備

kintoneのアクセシビリティ改善とESLintルールの整備 - Cybozu Inside Out | サイボウズエンジニアのブログ

「Mantleチーム」に参画する「Poca11yチーム」がkintoneの開発チームと協力してESLintルールの整備を実施したという記事。

使われているプラグインはeslint-plugin-jsx-a11yで、eslint-plugin-jsx-a11yの全ルールの意味や効果をスプレッドシートにまとめて、適用するルールを決めたようです。

適用したルールはサイボウズとして外部公開しているESLint configにまとまっています。

kuboshokubosho

GitHubがフォーカス時のスタイルを改善

Improved focus indicators for keyboard navigation | GitHub Changelog

リンクやボタンなどにキーボードなどでフォーカスをした場合のアウトライン表示や、フォーム要素にフォーカスをした場合に高コントラストのアウトラインが表示されるようになったことを紹介した記事。

記事には実際どのように改善したのかが、GIFアニメで表現されています。

kuboshokubosho

メタバースとアクセシビリティについて

なぜメタバースはアクセシビリティを最も必要とするのか – Audio Metaverse

メタバースにおけるアクセシビリティ向上は、メタバースに注力している会社にアクセシビリティ向上について目を向けさせることが鍵という主張をしている記事。

合わせてインターネットにおけるアクセシビリティの失敗についても書かれています。

kuboshokubosho

WorkPress 6.0でのアクセシビリティ向上

WordPress 6.0 Accessibility Improvements – Make WordPress Core

2022年5月24日にリリース予定のWordPress 6.0でアクセシビリティ向上した点がまとめられた記事。

アクセシビリティ向上した点が次の7カテゴリーでまとめられています。

  • General improvements
  • Navigation block
  • Block improvements
  • List View・Media
  • Quick/Bulk Edit
  • Login and Registration
  • Themes
kuboshokubosho

Windows 11のアクセシビリティ関連の新機能

Windows 11 のアクセシビリティ関連新機能 - News Center Japan

Windows 11で導入されたアクセシビリティ関連の新機能について解説している記事。

「フォーカス セッション」は共通で対応しているようで、アメリカ英語のみ対応している機能もあります。

アメリカ英語のみ対応

  • ライブキャプション
  • 音声によるPC操作
  • 最先端の音声合成技術を使ったナレーターの自然な音声
kuboshokubosho

Xboxのアクセシビリティガイドライン

Xbox アクセシビリティ ガイドライン - Game Stack | Microsoft Docs

Xbox上のゲームにおけるアクセシビリティガイドライン。

「ゲーム中のユーザー エクスペリエンスが、すべてのユーザーにとって楽しく再生できるものになること」という目的で作られていて、実際のゲーム画面なども交えながらどのようにすればアクセシビリティ向上できるかがまとまっています。

kuboshokubosho

iOSネイティブアプリのフッターメニューの振る舞いとアクセシビリティ

iOSネイティブアプリのフッターメニューの振る舞いとアクセシビリティ

iOSアプリのフッターメニューにおけるメニューボタンのARIAロールやランドマークリージョン、フォーカスの移動先を調べた記事。

ガイドラインの記述も踏まえつつ、なぜそのように設計・実装されているかがまとまっています。

kuboshokubosho

今年後半にリリースされるAppleのアクセシビリティ機能について

Apple previews innovative accessibility features - Apple

Appleが今年後半にリリースするアクセシビリティ機能を発表しました。

  • 弱視や全盲ユーザーのためのドア検知機能
  • ペアリングしたiPhoneからApple Watchを操作できる機能
  • VoiceOverの言語追加や機能追加

などが主に紹介されています。

またGAAD(Global Accessibility Awareness Day)に合わせてApp Storeでアクセシビリティに配慮したゲームの紹介がおこなわれたり、Appleのトップページでアクセシビリティ機能の紹介ページへのリンクが掲載されています。

kuboshokubosho

障害者情報アクセシビリティー・コミュニケーション施策推進法が衆院本会議で可決、成立

障害者の情報格差解消を目指す新法成立　衆院本会議 | 毎日新聞

すべての国民が、情報アクセス及びコミュニケーションの困難の有無によって分け隔てられることがない社会を実現するための法案である「障害者情報アクセシビリティー・コミュニケーション施策推進法」が衆議院本会議で可決されました。

PDFかつ少し古そうですが、「障害者情報アクセシビリティ・コミュニケーション保障法案」2018/3/2 版からどういった法案なのか見られそうです。

事業者向けの記述を抜粋すると、まず「社会のあらゆる分野において、情報アクセシビリティ及びコミュニケーションを保障し、障害のない者と同等の利便を図らなければならない。」ことが書かれています。

また障害者雇用に関する記述があったり、国や地方公共団体が「情報アクセス及びコミュニケーションに困難のある障害当事者、コミュニケーション支援者を中心とする独立した委員会」を置いて、必要に応じて国・地方公共団体及び事業者に対し、報告を求めたり、助言や指導もしくは勧告をしたりできることが書かれています。

参考情報: 【衆院厚労委】「障害者情報アクセシビリティ・コミュニケーション施策推進法」が成立 - 立憲民主党

kuboshokubosho

Yahoo! Japanなどにおけるアクセシビリティ向上の取り組み

ウェブはすべての人が使えるべきもの 障がい者の力でアクセシビリティ改善 #accfes | ドクセル

Yahoo! JAPANやZホールディングスにおけるアクセシビリティ向上の事例をまとめたスライド資料。

アクセシビリティガイドラインの策定や障害当事者などと共にテストをして課題の発見を実施し、ガイドラインとユーザーテストをどのように使い分けるかが書かれています。

kuboshokubosho

自社サービスにおけるアクセシビリティ向上のグッド・アンチパターン集

自社サービスのアクセシビリティ向上、良いパターンとアンチパターン（GAAD 2022）

freee・note・Ubie・STUDIO・東京都新型コロナ対策サイトなどでアクセシビリティ向上活動を実施している発表者が、活動を踏まえて見えてきたアクセシビリティ向上の進捗が良くなるやり方・足踏みしてしまうやり方をまとめたスライド資料。

グッドパターンとして、大まかには「1人ではなく複数人・複数職種でやる」「オーナーを明示する」「実際に当事者が操作している様子を見る」「発信する」「成功体験を小さいところから積み重ねる」「成功体験を積み重ねたあとに仕組み化する」といったことがまとめられています。

kuboshokubosho

アクセシビリティとゲームデザインの違い

【ACADEMY】Elden Ring：アクセシビリティとゲームデザインの違いについての考察 - GamesIndustry.biz Japan Edition

フロム・ソフトウェア代表取締役社長の宮崎英高氏へのインタビューが元となって議論が起こったゲームのイージモードとアクセシビリティの違いについて書かれた記事。

障害当事者のゲーマー向けにゲームを簡単にするのではなく、早い段階から個々人の特性に合わせたカスタマイズオプションをゲームシステムに組み込むことが大事ということが書かれています。

kuboshokubosho

ARIA Authoring Practices Guideが読みやすく

WAI at W3CさんはTwitterを使っています: 「Want to use #ARIA to make your web apps more #accessible, yet tired of slogging through a LONG doc? Good news: ARIA Authoring Practices Guide (APG) is redesigned as shorter pages! https://t.co/neSeim7H6U (related email: https://t.co/Atk57TK8l0) #a11y #ARIAapg #GAAD #WebApps」 / Twitter

GAADに合わせてW3Cが公開しているARIA Authoring Practices Guide | APGが使いやすくなったというツイート。

大きくPatterns・Practices・Indexという3カテゴリーに分かれています。

kuboshokubosho

noteのエディタのアクセシビリティ向上とnote社内での文化

「つくった人、天才ですやん」 - リサーチと開発のサイクルによるエディタの大幅なアクセシビリティ向上｜note社エンジニアの開発note

noteのエディタにおける開発サイクルとユーザーリサーチで得られたことや、社内の文化について書いている記事。

ユーザーリサーチやそこからの機能改善を実施して、インタビューなどを通じて熱量が上がった結果、アクセシビリティ向上がnote社内に文化として根付きつつあることが書かれています。

kuboshokubosho

アクセシビリティオーバーレイについて

アクセシビリティオーバーレイのとりとめもない話 | アクセシビリティBlog | ミツエーリンクス

政府広報オンラインにアクセシビリティオーバーレイツールのFACIL'itiが導入されました。

参考: ウェブアクセシビリティ閲覧支援ツール「FACIL'iti（ファシリティ）」 | 政府広報オンライン

しかしアクセシビリティオーバーレイツールはツールにもよりますが、元々ブラウザーなどが持っている機能を改めて提供しているだけだったり、障害の情報が収集されることによるプライバシー的なリスクなどさまざまな問題が指摘されています。

参考: Overlay Fact Sheet

しかしアクセシビリティオーバーレイを導入しないという判断材料をWebアクセシビリティの専門家が提供できていると言い切れないことがあったり、Webアクセシビリティに関する情報提供がまだ足りない部分もあるといったことが書かれています。

Webサイト制作者やユーザー、OSや支援技術・ブラウザーなどさまざまなところが進化していく必要があり、そういった底上げをした上でアクセシビリティオーバーレイはいらないよねという合意形成がなされていくかもしれない旨も書かれています。

kuboshokubosho

視覚障害者とプラネタリウム

全盲の彼女は、なぜ星空の魅力を | NHK | WEB特集

明るい場所でも光をわずかに感じられる程度という視覚障害者がプラネタリウムのガイド役になった経緯を取材した記事。

元々のきっかけが 「遠足でやってきた保育園児たちの中に目の不自由な子が1人いて、その子がじっと静かにしていたことで、プラネタリウムを楽しむことができたのかずっと頭から離れなかった」という児童館の所長の思いがあり、そこに視力を失ってからも誰かの役に立ちたいと強く願った人との出会いによって、ガイド役のオファーを出したというきっかけが心に残りました。

kuboshokubosho

アクセシビリティについて解説された記事

アクセシビリティとは？Webにおけるポイントも含めて具体例を交えて解説 | NIJIBOX BLOG

Webアクセシビリティについての説明とWebアクセシビリティが重要な理由、またいくつかアクセシビリティ向上の方法が書かれています。

記事内にある「アクセシビリティはWeb制作の足かせではない」は自分もそうだと思っています。

kuboshokubosho

アクセシビリティの基礎と最近の動きまとめ

2022/06/02 アクセシビリティを基礎から学ぶ + 最近の動きをキャッチアップ

WCAGを振り返りや、GAAD JAPAN 2022やアクセシビリティの祭典 2022の発表などをまとめたスライド。

情報が読みやすい分量でまとまっているので、このスライドに書かれている内容で気になった内容があれば深掘りしてみると良さそうです。

kuboshokubosho

障害者雇用のあり方について

「障害者雇用」の現状と目指すこと　〜freeeさん＆サイボウズさんと情報交換会を実施〜｜株式会社SmartHR

障害者雇用についてSmartHR・freee・サイボウズの三者間で議論をおこなったという記事。

SmartHRの現状を踏まえた上で、各社がどのようなきっかけで障害者雇用を取り組み始め、また障害者がどんな仕事をしているかといった現状を共有したということです。

kuboshokubosho

ChromeのFull page accessibility treeを使ったアクセシビリティ向上とテストの改善

a11yとテストを同時に改善する話

DevTools の新機能 (Chrome 98) - Chrome Developersで書かれている通り、Chrome 98からdevtoolsのElementsでDOMツリービューとアクセシビリティツリービューを切り替えられるようになりました。

このアクセシビリティツリービューを使ってコンポーネントをよりアクセシブルな形に修正することで、テストコードも意味のあるものに変更できることが書かれています。

kuboshokubosho

ユビーがスクリーンリーダーを使った状態でも使えるように改善

【アクセシビリティ向上に向けた課題発見と取り組み】症状検索エンジン 「ユビー」がスクリーンリーダーで利用可能に｜Ubie (ユビー)｜note

ユビーが全盲の視覚障害者にスクリーンリーダーを使った検証を実施し、問題なく使えることが確認できたことを発表している記事。

元々は、ボタン・リンク・チェックボックスが正しく読み上げられない、開閉する箇所の状態が不明、確認のダイアログ表示に気付けないなどといった問題を抱えていたということでした。

そこからメイン機能部分をアクセシビリティガイドラインや専門家の知見に基づき改善を進めた上で、シナリオとタスクを決めて視覚障害者にテストしてもらいさらなる改善につなげたということです。

kuboshokubosho

ゴッド・オブ・ウォー ラグナロクに搭載されているアクセシビリティ機能の紹介

God of War Ragnarök accessibility features revealed – PlayStation.Blog

ゴッド・オブ・ウォー ラグナロクに搭載されているアクセシビリティ機能について書かれている記事。

字幕改善・重要な音源はどこから音が出ているか方向を目視できる・文字やアイコンサイズの調整など複数のオプションが紹介されています。

これらのアクセシビリティ機能は決してゲームの難易度を下げるものではなく、より多種多様な人たちがゲームを楽しめるように組み込まれたものだと感じます。

kuboshokubosho

アクセシビリティに配慮されたNintendo Switch用のコントローラー

Nintendo Switch/Android向けアクセシビリティ対応コントローラー「Lite SE」発売へ

側面に配置されているLやRも含めて表面に全てのボタンが搭載されているコントローラーが発表されたという記事。

開発元の8BitDoのチーフデザイナーが製品化を提案し、脊髄性筋萎縮症の当事者がフィードバックをして、それを元に作られたコントローラーということです。

ボタンの配置上遊ぶのが難しいゲームもありそう（例: スプラトゥーン2など）ですが、選択肢が広がるコントローラーになりそうです。

kuboshokubosho

Neumorphismの盛衰

The rise and fall of neumorphism

SkeumorphicやFlat designの歴史を書きつつ、Neumorphismが台頭した経緯や問題点が書かれた記事。

  • 低いコントラスト比の要素が多く表示されていると、要素を区別することが難しくなる
  • ボタンやスライダーなどの要素の状態などが変化したときに影や光だけでそれを表現すると操作できたか分からなくなる
  • 要素の重要性が分かりにくくなり、操作方法が分かりづらくなる

といった問題点が挙げられています。

ただNeumorphismはピンポイントで使う分にはNeumorphismが持つリアルな感覚などが効力を発揮するので、ピンポイントで使われ続けそうという締めになっています。

kuboshokubosho

富士通のアクセシビリティに対する取り組み

サステナビリティ、ダイバーシティ＆インクルージョン・・・富士通での「アクセシビリティ」実践論｜モリサワ　note編集部

富士通のアクセシビリティに対する取り組みを書いた記事。

  • 色のコントラスト比を確保できるPowerPoint用のアドインの作成
  • スライドのテンプレートに色名を入れる
  • 項目名を文字として記載する

といったスライド資料向けの配慮だったり、動画に対して字幕の追加を実施したり、障害当事者も交えて製品開発をしたりといった取り組みが紹介されています。

kuboshokubosho

Visually Hiddenのスタイル比較

Visually Hidden スタイル比較

視覚的には確認できないが、スクリーンリーダーなどの支援技術では確認できるVisually Hiddenという手法について、各デザインシステムやライブラリーはどのようなスタイルを定義しているかをまとめた記事。

同じようなスタイル定義になるかと思いきや、思っていたより差異があることが分かります。

kuboshokubosho

SmartHR社のアクセシビリティの取り組み

従業員サーベイの簡易ウェブアクセシビリティ試験を実施しました！ - SmartHR Tech Blog

SmartHR社のアクセシビリティに対する取り組みとして「アクセシビリティマスター養成講座」と「ウェブアクセシビリティ簡易チェックリストを元にした従業員サーベイのアクセシビリティチェック」を紹介した記事。

アクセシビリティ試験の流れや、どのような点に気をつけたか、また結果を受けてどう改善していくのかがまとまっています。

kuboshokubosho

「ゼルダの伝説 ブレス オブ ザ ワイルド」のアクセシビリティについて

The Accessibility Features In Breath Of The Wild Seriously Suck

「ゼルダの伝説 ブレス オブ ザ ワイルド」には最小限のアクセシビリティ機能しかなく、記事の著者のように片腕のみ使える人にとってはゲームを遊ぶことを指摘するとともに、Nintendo Entertainment System（ファミリーコンピューターの海外版）ではハンズフリーコントローラーを売っていた時代があったのに、そこからなぜ今のような流れにいってしまったか指摘する記事。

PlayStationやXboxではアクセシビリティ機能の紹介があります。Nitendo Switchはアクセシビリティ機能の紹介はなく、非公式にまとまっているのみとなります。

kuboshokubosho

pxとremどちらを使えばいいのか？

The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

px, em, remといった単位の特性を説明しつつ、どういった場面でpxとremの使い分けをすればいいのかを解説している記事。

  • em や rem といった相対的な単位を使うことで、ユーザーの文字サイズの拡大率変更に準拠できる
  • ただ padding や border に相対的な単位を使うと、1行に収まる文字数がより減ってしまうため、絶対的な単位(px など)を使うのが良い
  • メディアクエリーで相対的な単位を使うと、表示領域に合わせてコンテンツ表示が最適化されることになる。ディスプレイが広くてもモバイル並の表示領域しかない場合もある
  • 見出しのように文字サイズが各要素ごとに変わるような部分では、margin などに em を使うことで margin のスタイル定義を共通化できる
  • ボタンの横幅についてはケースバイケース。絶対的な単位を使ったほうが良い場面、相対的な単位を使ったほうが良い場面のそれぞれがある
kuboshokubosho

WCAG 2.1におけるコントラスト比の定義の罠について

【WCAG2.1 アクセシビリティ対応】 コントラスト比の罠｜やまもと｜note

背景がオレンジ色で文字色が白色というボタンは、WCAG 2.1のAA基準であるコントラスト比4.5:1(大きい文字の場合は3:1)を満たすことが難しい問題に対して、Orange You Accessible? A Mini Case Study on Color Ratio | BounteousやThe Myths of Color Contrast Accessibilityを参考にしながら、決着をつけた記事。

kuboshokubosho

アクセシビリティオーバーレイの是非

アクセシビリティ オーバーレイの是非 | ドクセル

アクセシビリティオーバーレイについてLT形式でどのように向き合うと良いかを提案している資料。

次に挙げる内容が提案されています。

  • 他人の言葉を鵜呑みにせず調査して事実を正確に掴む
  • オーバーレイに頼らないアクセシビリティ向上に取り組む
  • Webの便利な使い方をユーザーにもっと知ってもらう
  • ブラウザーのUIに進化を促し協力する
  • アクセシビリティは「みんなで」高めていく認識を共有する
このスクラップは2023/09/06にクローズされました