オープンソースのWindows向けスクリーンリーダーであるNVDAを使用して、アクセシビリティー チェックの手順を解説しています
一般にウェブアクセシビリティは、合理的配慮の事前的改善措置となる、環境の整備に分類されます。総務省のみんなの公共サイト運用ガイドライン(2016年版)によれば、 障害者差別解消法(平成 28 年 4 月 1 日施行)において、ウェブアクセシビリティを含む情報アクセシビリティは、合理的配慮を的確に行うための環境の整備と位置づけられており、事前的改善措置として計画的に推進することが求められています。 とあり…などと自信満々に答えられてたのですが、政府広報オンラインのウェブアクセシビリティとは?分かりやすくゼロから解説!という記事(下記スクリーンショット中の下線は筆者によります。*1)によると、 障害者のある人への合理的配慮とは、(中略)ウェブサイトの場合ではJIS X 8341-3:2016に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することがこれに当たります。 とあるわけで、J
Why Not? If it's too good to be true, then it probably is. The consensus of many people with disabilities, the web design and development community, and legal voices in this space, are that accessibility overlays are not useful on a website for the following reasons: They reinforce discrimination. Site owners, lulled into a false sense of security, then do nothing else to improve access, which is
Webフォームに対して、人間のアクセスとロボットのアクセスを見分ける技術として、CAPTCHAやパズル認証などが持ちいられてきました。 これらは主に、歪められて模様が追加された画像化文字を目で読んでキーボード入力させたり、マウスクリックでパズルを完成させるなど、いずれも視覚に依存した操作をユーザーに強いる点で、アクセシビリティ上の問題が指摘されてきました。 先日発表されたCloudflare Turnstileは、CAPTCHAの代替をコンセプトとするサービスで、エンドユーザーに操作を求める場面が少ない印象がありました。これを使えば、アクセシビリティの問題は起きないのか、確認してみました。 概要 Webフォームに対して、人間のアクセスとロボットのアクセスを見分ける技術として、CAPTCHAやパズル認証などが持ちいられてきました。 これらは主に、歪められて模様が追加された画像化文字を目で読ん
Sir Anthony van Dyck, Marchesa Elena Grimaldi Cattaneo, 1623, oil on canvas, Widener Collection, 1942.9.92 Mark Rothko, Untitled, 1949, pigmented hide glue and oil on canvas, Gift of The Mark Rothko Foundation, Inc., 1986.43.138 Claude Monet, The Japanese Footbridge, 1899, oil on canvas, Gift of Victoria Nebeker Coberly, in memory of her son John W. Mudd, and Walter H. and Leonore Annenberg, 1992.
視覚障害者の助けとなるか。薬袋や薬品パッケージをImage inputs for ChatGPT(GPT-4V)を使って確認してみた OpenAIのImage inputs for ChatGPT(GPT-4V)を使って薬袋、薬の添付文書、英語のドキュメントを解析させて結果を確認しました。正確性には課題があるため、この結果を用いて実際の服薬管理には利用しないでください。 最初に この記事では、OpenAIのImage inputs for ChatGPT(GPT-4V)を使って薬品の情報を解析させた結果について記載していますが、正確性には課題があるため、この結果を用いて実際の服薬管理には利用しないでください。 Image inputs for ChatGPT - FAQには以下のような記載があります。 If you're using ChatGPT's new image input fe
障害のある人たちの声を受け止め、話し合いを通じて困りごとを解決する「合理的配慮」。2024年4月から、民間の事業者にもその提供が義務化されます。 合理的配慮について、皆さんの体験や願い、悩みなどの声を受け止め番組で一緒に考えます。 ▼「合理的配慮」について、モヤモヤ感じたこと、嬉しく感じたこと、期待すること ▼外出先、公共交通機関、職場や学校…合理的配慮が必要な場面やタイミング、実体験 ▼当事者の立場から、合理的配慮について知ってほしいこと、考えてほしいこと ▼事業者や雇用者の立場から、悩んでいることや、上手くいったケース など、どんな内容でも構いません。皆さんの声をお寄せください。 お寄せいただいた内容は、今後の番組でご紹介させていただく可能性があります。
こんにちは。エキサイト株式会社のあはれんです。 エキサイトホールディングス2023アドベントカレンダー 22日目をお届けします。 qiita.com 「法律が改正されるから、サイトのウェブアクセシビリティを気にしたほうがいい」というのを風の便りに聞きました。 私はこれまで「ウェブアクセシビリティ」という言葉を耳にしたことはある程度でしたが、具体的な内容については理解が不十分でした。 そこで調査を行いました。 以下にウェブアクセシビリティに関する知見を共有いたします。 ウェブアクセシビリティてなに? ウェブアクセシビリティとは、利用者の属性(障がいの有無、年齢、利用環境)に関わらず、すべての人がウェブサイトを利用できることを意味しています。 ウェブアクセシビリティは、障がい者の方向けの対応だけではありません。 荷物を持っており手が塞がっている状態でもウェブサイトを利用可能にすることも含まれま
Selecting the right fonts for a design project is always a tricky business. For a start, your client will likely require a particular typeface (or even a bespoke one) be used. But the last thing you want is to take your designs out to user research only to discover that the text is illegible (or at least difficult to read) for many users. Bear in mind that: 1 in 30 people in the UK is visually imp
Accessible Rich Internet Applications (WAI-ARIA) 1.2 日本語訳 W3C Recommendation 06 June 2023 More details about this document This version: https://www.w3.org/TR/2023/REC-wai-aria-1.2-20230606/ Latest published version: https://www.w3.org/TR/wai-aria-1.2/ Latest editor's draft:https://w3c.github.io/aria/ History: https://www.w3.org/standards/history/wai-aria-1.2 Commit history Implementation report:
What is this all about? So you want to dig into the topic of (web) accessibility? Wonderful! But you’re not sure where to start? Don’t worry - you're not alone. Getting going can be overwhelming, but it doesn't have to be. That's what this site is for - to introduce you to accessibility. This page doesn’t claim to be an "in-depth" source. It's here to give you a few ideas on how to start making yo
美術館や劇場・ホールを訪れるとき、みなさんは事前にどんな情報を調べるだろう。 展覧会や公演の内容はもちろん、開館日や駅からのルート、人によっては車椅子用のスロープや鑑賞サポートの有無を調べることもある。さらに、その情報を目ではなく耳で探す人もいる。一人一人の身体的・心理的な特性によって、必要な情報や調べ方はじつに多様だ。しかし、多様な人たちが必要とする情報を十分に伝えられていない現状がある。 「だれもが文化につながる」ことを目指すプロジェクト「Creative Well-being Tokyo /クリエイティブ・ウェルビーイング・トーキョー」(以下「CWT」)は、さまざまな特性を持つ障害当事者と意見を交わしながら、都立美術館・博物館のウェブサイトのアクセシビリティ向上に取り組んでいる。この取り組みは、CWTにとってどのような意義を持ち、どのようなプロセスで進行しているのだろうか。 今回、C
自己紹介 こんにちは! エイチームライフデザインでハナユメというサービスの開発を行っている @shamokit_y2323です。 Hatena Blogに記事を投稿するのは初めてです。よろしくお願いします。 Svelteとねことアクセシビリティがすきです。 一組でも多くのカップルに"理想の結婚式"のきっかけを ハナユメでは「一組でも多くのカップルに"理想の結婚式"のきっかけを」という理念を掲げています。 さて、「一組でも多くのカップルに」ハナユメというサービスを届けるため、何ができるでしょうか? 私は、今までアプローチできていなかったユーザーにも価値を届けられるという点でアクセシビリティの向上がこれを達成するのにぴったりだと考えました。 (もともとアクセシビリティに関心があったので、キタキタコレコレ!という気持ちでした。) 問題点の洗い出し じゃあやっていくぞということになりましたが、いき
およそ10億の人々が、何らかの形の身体的、精神的もしくは感覚的な障害に苦しんでいる。それは世界人口のおよそ15パーセントにあたる。障害者のおよそ80パーセンの人々は開発途上国に住んでいる。彼らはしばしば社会の主流から取り残される。差別はいろいろな形態を取り、教育や働く機会を拒否することから、もっと巧妙な差別、たとえば物理的、社会的障害を作って隔離と孤立をはかることまでさまざまである。障害についての認識や概念を変えるには、社会のあらゆるレベルで価値観を変え、理解を深めなければならない。 国連はその創設期から障害を持つ人々の地位を向上させ、彼らの生活を改善することに努めてきた(www.un.org/development/desa/disabilities)。障害を持つ人々の福祉と権利に対する国連の関心は、すべての人間の人権、基本的自由、平等という国連創設の原則に由来する。 1970年代、障害
Photo by Franck on UnsplashStep right up, everyone! Have you ever wanted to make your product fully accessible in just a single line of code? Worried about a lawsuit, but you just don’t have the time? Check out this extremely fast and cost-effective way that we can use AI-powered processes to transform your site! (Oooo, AI!) Accessibility in an instant? It almost sounds too good to be true! …becau
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/keyboard-focusable-elements. We hope to fix this soon!). If you create JavaScript widgets, one of the key parts to accessibility is managing focus. To manage focus, you need to find keyboard-focusable elements. When you know t
フジドリームエアラインズ(FDA/JH)は12月24日から、車いすに対応したエレベーター付きのタラップ車を導入した。三菱重工業(7011)の子会社、MHIエアロスペースプロダクション(MAP、名古屋市)と共同開発したもので、拠点とする県営名古屋空港(小牧)で運用を開始した。両社によると、エレベーター付きタラップ車は日本初導入だという。 タラップ車(パッセンジャーステップ車)は、航空機に搭乗・降機する際に使用する階段がついた専用車両で、搭乗橋のない駐機場で導入している。タラップ車にエレベーターを付けることでバリアフリー化し、車いす利用者などが搭乗しやすくなった。エレベーター耐荷重は270キロで、車いすを含め3人程度が同時に利用できる。 FDAによると、搭乗橋のない駐機場で車いす利用客が搭乗する際、従来はタラップ車に備え付けられた昇降用リフトを利用していたという。
こんにちは、エンジニアの中島です。 この記事は2023年10月から翌年1月までのLIFULL社でのアクセシビリティ改善およびやっていき活動の報告です。 この活動報告は月次で出すかもしれないし出さないかもしれないくらいの温度感で運用されていく予定です。 目次 目次 サービス改善 トップページのエリア選択UIのフォーカス管理 地域・路線から探す検索フロー中にあるエリア選択リンクにアクセシブルな名前を設定 路線から探す・地域から探す検索フロー中にある送信ボタンのバリデーション設定 フッタ近くにある物件の種類から選び直すことができる機能の「もっと見る」ボタンのフォーカス関連の不具合を修正 物件一覧ページの見出し順番の不整合を修正 物件一覧の「もっと見る」ボタンを押した後にフォーカスが失われる不具合の修正 おすすめ物件一覧の「もっと見る」ボタンを押した後にフォーカスが失われる不具合の修正 ページトッ
ISO規格でアクセシビリティに関する規格がいくつもあるようなので、ふとISOのサイト で“accessibility”をキーワード と“accessible”をキーワードで規格類を検索したところ、2019年11月4日時点で前者で88件、後者で103件もヒットしました。 とりあえず一覧を作りながら確認してみようかとリストの作成作業をはじめてすぐに後悔し始めましたが、とりあえず両者の重複を機械的に取り除いた169件を以下に一覧しました。[WITHDRAWN]もあるし、アクセシビリティに関係のないもの(あるいは「アクセシビリティ」の意味が違う)も混ざっている気が確実にしましたが、考えるのをやめました。 ISO GUIDE 35:2006 REFERENCE MATERIALS — GENERAL AND STATISTICAL PRINCIPLES FOR CERTIFICATION [WITH
How to create a screen reader accessible graph like Apple's with D3.js After previously writing about the accessibility of Apple Health’s data visualizations, I felt inspired to recreate one of them with D3.js. I already covered some of the basics in the form of a bar chart, so this time I decided to go for a different type of graph: the activity rings. Before we start While we will build the grap
ゆうてん🖖 @cloud10designs アジェンダ 1. 基礎 2. スクリーンリーダー(アクセシビリティ・サポーテッド) 3. オーサリング・プラクティス 4. 自動テスト 5. 仕様ディープダイブ twitter.com/cloud10designs… 2022-01-07 16:44:01 ゆうてん🖖 @cloud10designs WAI-ARIA勉強会、2月のどこか平日夜開催予定。 つよつよの人たちを召喚しているので、おそらく日本で一番くわしいWAI-ARIAの情報が聞けるはずだよ。オンラインでアーカイブもするつもりだから、忙しい人も安心してね。 twitter.com/cloud10designs… 2022-01-11 11:15:53 リンク connpass WAI-ARIA勉強会 (2022/02/17 19:30〜) アクセシビリティの向上に取り組む企業が増え
記事の背景 HTML 要素の中でももっとも基本的かつ最重要と言える見出し要素。社内でもそのセマンティクスや適切な内容について議論されることが少なくないのですが、ふと振り返ってみるとつまみ食いのような Tips の積み重ねばかりで体系的な理解を怠っていたな…という反省があります。自分自身の理解やチームへの説明のため、改めてしっかり見出しについてまとめておきたいと考えて本記事を作成しました。 公開時点で書いていないこと スクリーンリーダーでの動作 スクリーンリーダーの使用時に見出しがどのように機能するのかについては後日追記する予定です。 見出し要素の HTML 仕様 まずは HTML の仕様を確認してみます。 4.3.6 h1、h2、h3、h4、h5、h6要素によれば、見出し要素を使用できるコンテキストは以下の2つとされています。 hgroup 要素の子として ヘディングコンテンツが期待される
Be Wary of doc-subtitle In early March, Steve Faulkner shared this nugget for making sub-headings: 👉If you want to semantically identify a heading subtitle, look no further than role="doc-subtitle" w3.org/TR/dpub-aria-1.0/#doc-subtitle #HTML #ARIA #WebDev pic.twitter.com/uaHcVRp6oz On its surface it looks pretty handy. Handy enough that Chris Ferdinandi wrote about it in his July 23 post How to c
ARIA の画像 (img) ロールは、単一の画像とみなすべきページコンテンツ内の複数の要素を識別するために使用できます。 これらの要素は、組み合わせることで視覚的な方法で情報を伝達できる、画像、コードスニペット、テキスト、絵文字、またはその他のコンテンツである可能性があります。 <div role="img" aria-label="全体的な画像の説明"> <img src="graphic1.png" alt=""> <img src="graphic2.png"> </div> 単一の画像として消費されるべきコンテンツの集合 (画像、動画、音声、コードスニペット、絵文字、その他のコンテンツを含む) は、画像ロール (role="img") を使用して識別できます。 支援技術にコンテキストを伝えるために、個々の画像要素の代替テキストを当てにするべきではありません。 ほとんどのスクリーン
キカガク プラットフォーム部 エンジニアの岸です。 私は Web という技術が好きで、中でも アクセシビリティ に関心があります。 アクセシビリティ とは、システムやサービスがどれだけ幅広い状況で利用できるかを示す言葉です。Web アプリケーションのアクセシビリティの向上に取り組むことで、障害の有無や利用している環境、デバイスの違いによらず、誰もがそのサービスを使えるようにできます。 私が入社した時点では、プラットフォーム部にはアクセシビリティに関する知識はほとんどありませんでした。 そこで昨年 10 月に中途入社してからの約 4 ヶ月(執筆時点)でアクセシビリティを組織へ浸透させていくために行った取り組みを紹介します。 取り組んだ内容のほとんどは、私の愛読書である 『Web アプリケーションアクセシビリティ――今日から始める現場からの改善』 の第 7 章、「アクセシビリティの組織導入」の
What we do The ACT Rules Community Group is an open forum set up to document and harmonize the interpretation of W3C accessibility standards, such as WCAG and WAI-ARIA, for testing purposes. The ACT Rules Community Group (ACT-R) achieves this by bringing together the people developing, implementing and using various accessibility testing tools and methodologies to document interpretations as test
WebAIM is actively involved in various projects to improve the accessibility of the web. Current Projects Screen Reader User Surveys Survey #10 Survey #9 Survey #8 Survey #7 Survey #6 Survey #5 Survey #4 Survey #3 Survey #2 Survey #1 The WebAIM Million: An accessibility analysis of the top 1,000,000 home pages Survey of Web Accessibility Practitioners Survey #3 Survey #2 Survey #1 Four Years of Ac
各要素の挙動の差をを考慮してHTMLを組み立てることが重要です。 例えば、アンカーリンク(<a>)同士を相互リンクする場合は、次のようにリンク先を別の子要素に肩代わりさせることで対処します。 <a href="#link-b"><span id="link-a">LINK A</span></a> <a href="#link-a"><span id="link-b">LINK B</span></a><aside>などlandmarkやブロック要素へVOフォーカスすると、最初の子要素を読み上げます。(最初の子要素がVOフォーカス可能な場合のみ) また、リンク先がlandmarkの最初の子要素の場合は、asideに設定したaria-labelの値も読み上げられます。 <!-- Link to span --> <aside aria-label="StarTrek"> <span id="
アクセシビリティに関するイベントである「アクセシビリティの祭典2023」に「障害当事者の困りごとと受託開発をどう繋げるか」で登壇しました。その内容をご紹介しています。 はじめに アクセシビリティの祭典は、チームアイコラボが2015年から主催するイベントで、2023年は9回目の開催になるそうです。 クラスメソッドとしては、2021年からスポンサーとして応援させていただいています。 今年は「アクセシビリティ・サイクル ~人の繋がりが世界を変え続ける~」がテーマとのことで、これに合わせて「障害当事者の困りごとと受託開発をどう繋げるか」というテーマでスポンサーセッションに登壇させていただきました。 登壇内容 (一部省略があります) 障害当事者の困りごとと受託開発をどう繋げるか クラスメソッドからは『障害当事者の困りごとと受託開発をどうつなげるか』というテーマでお話しさせていただきます。 背景(1)
今年で4回目の「アクセシビリティ Advent Calendar 2020」ですが、皆様のご尽力のおかげをもちまして、今年も素晴らしい記事が揃いました。空きの日が出ていますが、これからも肩の力を抜いて、このカレンダーを必要とされている方々にお届けできたらよいのかと思っております。今後ともカレンダーの提供を続けていこうと考えておりますので、何卒よろしくお願いいたします。 今回は、「ダイバーシティ」という言葉が現在持つ意味と、システム開発ベンダにとっての発展的な考え方について、ご紹介していきます。 ダイバーシティの現在位置 今日「ダイバーシティ」という言葉は、企業の人材戦略の文脈で語られることが多いと感じています。例えば、経済産業省の政策であるダイバーシティ経営の推進において、「ダイバーシティ2.0」は以下のように定義されています。 多様な属性の違いを活かし、個々の人材の能力を最大限引き出すこ
こんにちは、RAKSULでデザインインターンをしている川村です。 今回はウェブアクセシビリティに対応したプロダクトをつくるために、デザインする上で達成すべきことについてまとめてみました。 また、自分がウェブアクセシビリティを勉強する上で参考にしているサイトもご紹介します。 ウェブアクセシビリティについて知りたいけど、何から手をつけたらいいかわからない方へ、ぜひ参考になれば幸いです。 ウェブアクセシビリティって何?ウェブアクセシビリティとは何か。デジタル庁が提供している「ウェブアクセシビリティ導入ガイドブック」より引用いたします。 ウェブアクセシビリティは、利用者の障害の有無やその程度、年齢や利用環境にかかわらず、ウェブで提供されている情報やサービスを利用できること、またはその到達度を意味しています。 デジタル庁「ウェブアクセシビリティ導入ガイドブック」アクセシビリティと聞くと、身体障害や知
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く