The BBC Mobile Accessibility Guidelines are a set of technology agnostic best practices for mobile web content, hybrid and native apps. The Guidelines are based on the requirements of bbc.co.uk content developed for UK audiences and for use with the technology commonly available in the UK. They are intended as a standard for BBC employees and suppliers to follow, however, they can also be referenc
視覚障害がある人々にビジネス参画チャンスを freeeがアクセシビリティを意識して得た気づきとは | クラウド会計ソフト freee
2019-03-26 「freee人事労務」の従業員向けモバイルアプリiOS版がアクセシビリティへの対応をスタートさせた。これは、iOSに標準で搭載されている画面読み上げ機能（VoiceOver）の活用により、視覚に障害がある方でも「打刻」「勤怠入力」「給与明細の確認」といった、「freee人事労務」の基本機能を利用できるようにするもの。 障害によって業務への関わりを制限することなく、ビジネス参画のチャンス、そして働き方の幅を広げるために――アクセシビリティ対応に注力するようになった背景、そして今なお続行中のアクセシビリティ対応について聞いた。 なぜ今、アクセシビリティに注目するのか？ ――まず、freeeがアクセシビリティにフォーカスした経緯をお聞かせください。 伊原 私は「freee人事労務」のプロダクトマネジャーを務めていますが、2017年の入社前はUXデザインに携わり、アクセシビリ
Webアクセシビリティについてのアドベントカレンダーです。ご参考までに、過去のカレンダー： Webアクセシビリティ Advent Calendar 2017 Webアクセシビリティ Advent Calendar 2016 Webアクセシビリティ Advent Calendar 2015 Webアクセシビリティ Advent Calendar 2014 Webアクセシビリティ Advent Calendar 2013 Webアクセシビリティに関する内容であれば、ガチネタでもポエムでも構いません。ご自身のBlogで無くとも、TwitterやFacebookでつぶやいてリンクするのも大歓迎です。 ぜひ、お気軽にご参加ください。
甲府市
甲府市法人番号：1000020192015 〒400-8585 山梨県甲府市丸の内一丁目18番1号電話番号：055-237-1161(代表) 開庁時間：月曜日～金曜日 午前8時30分～午後5時15分（祝日・年末年始を除く）
わたしは「Webアクセシビリティ」というものに、ライフワーク的に取り組んでいる。 と、言い切っていいはず。少し気恥ずかしいけれども、これまでそんなことを触れ回ったことはないので、そろそろ改めて記録するべきだと思って書いている。 これはポートフォリオの一部のようなものでもある。 というのも、イベントやセミナーにお呼びいただいて登壇などの機会が、ありがたいことに増えてきている（後述）。あるいは、何らかの場でコメントを求められたり、Twitterでイベント中のリアルタイムレポートを（偉そうに！）したり。 そんな時にふと、「出自のわからないヤツが四の五の言ってて、周りの人はどう思うのだろう……」と考えてしまうからだ。 更に今まで、個人事業主などでもないことをいいことに「自分の情報」をまとめることを避けてきた。 そろそろきちんと考え方などまとめる時期ではないかと、画面に向かっている。 わたしにとって
Spot the difference….You can’t! To a sighted user it appears we have two identical button elements. A user interface control not only needs to look like a certain control, it must be described as that control too. Take for example a button, one of the simplest of controls. There are many ways you can create something that looks like a button, but unless you use the actual button tag (or button rol
iOSDC Japan 2019 すべての人のためのアクセシビリティ対応【省略版】
年末に【独自】障害者配慮、民間も義務化へ...スロープ設置や手話対応 : 社会 : ニュース : 読売新聞オンラインという報道を目にした方も中にはいるかと思いますが、障害者差別解消法でこれまで民間では努力義務であった「合理的配慮」が義務化される公算が出てきました。 実際に、昨年12月に開催された第53回障害者政策委員会の議事次第での資料8 障害者差別解消法の改正に盛り込む事項（案）では、「事業者による合理的配慮の提供を義務化」が挙げられていることが確認できます。 ここでWebアクセシビリティと「合理的配慮」にはどのような関係があるのかおさらいをしてみたいと思います。総務省が公開しているみんなの公共サイト運用ガイドライン（2016年版）では、「障害者差別解消法を踏まえて求められる対応」として、以下のような記述があります。 2.2.2. 障害者差別解消法を踏まえて求められる対応 障害者差別解消
WebAIM: CSS in Action - Invisible Content Just for Screen Reader Users
CSS in Action Invisible Content Just for Screen Reader Users You are here: Home > Articles > CSS in Action: Invisible Content Just for Screen Reader Users Introduction There are occasional instances where content should be made available to screen reader users but hidden from sighted users. In the vast majority cases, content that is available visually should be available to screen reader users, a
セマンティクスの作り方、これまで、今、そして未来
私たち @masuP9(わかり手) 株式会社サイバーエージェント @o_ti(キレ手) 株式会社まぼろし 今日のお話 広義のセマンティクスと今回のセマンティクス 今日はいくつかある未来の中からある一つの未来の話をします 目次 セマンティクスの恩恵 HTML WAI-ARIA Accessibility Object Model セマンティクスの恩恵 ウェブがよりアクセシブルになる。 アクセシブルとは？ 近寄りやすいこと 利用しやすいこと HTML HTMLというだけで得られるアクセシビリティ どこにいてもページが見られる 様々なOS、ブラウザで閲覧できる テキストがコピーできる 画像が保存できる ※電源とWi-Fiがあれば HTML5のセマンティクスは HTML4.01の要素の廃止と刷新 「セクショニング」という概念の導入により、見出しの及ぶ範囲が規定された フレージングが強化されて、強調
The following tables show which elements individual browsers consider focusable or tabbable (keyboard focusable). The tables are based on the focusable test document. Note that touch devices (without a physical keyboard) only show elements as tabbable (keyboard focusable), that can be navigated to through the on-screen keyboard (or "virtual keyboard"). Document Elements Element Expected Chrome Mic
8月2日、サイボウズはkintoneのUI/UXの改善に関する技術説明会を開催した。事業部門の支持が厚いkintoneが目指すデザインのコンセプトや、1年かかったkintoneのアプリ作成画面開発の舞台裏などが披露された。 参加型のシステム開発にはデザインが重要 冒頭、登壇したサイボウズ kintoneプロダクトマネージャーの伊佐政隆氏は、kintoneビジネスの概況やデザインへの投資の重要性について説明した。 創業以来、20年近くに渡ってチームワークの向上に寄与するグループウェアを追求してきたサイボウズ。「チームあるところにサイボウズあり」をテーマに売り上げや利益ではなく、利用者数にこだわり、グローバルで使われる製品・サービスを目指している。こうしたサイボウズの戦略製品であるkintoneにおいて、デザインを重視するのはなぜか？ これはひとえにkintoneのメインのユーザーが専門知識を
普段、飛び入りで入るお店には バリアフリーは敢えて期待しません。 だって、期待してもガッカリするだけですから^^; ちょっと不便があっても、 それはそれで仕方ないさ～ どうにかなるさ～ と割り切っています。 ところが！ このお店では、入口の空席案内板に、 何と車椅子マークがあったのです！ 光っているところが空席です。 車椅子マーク！ 嬉しくなって、 超テンション上がっちゃいました♡ その時は既に席が埋まっていて、 「他の席にしましょうか？」と言われたのですが、 待ちます！と、張り切って答えてしまいました(笑) どんな車椅子席があるんだろ～？ ワクワク。 バッチリバリアフリーのお店なんだね～
To be accessible, UI components need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, components should be usable by the broadest group of users, including those with disabilities. When designing for accessibility, there are four key areas of disability to consider: visual, hearing, mobility and cognition. Visual issues can range from an inability t
Don't disable buttons
One of the most common accessibility issues I find (and fix) on client projects is dynamically disabled form buttons when a form is being submitted. Today I want to talk about why developers do it, why it’s bad, and what you can do instead. Let’s dig in! Why developers disable buttons Typically, I see the pattern used to prevent a form from being submitted a second time while waiting for the form
UXデザインが果たす役割とは？～HCD-Net認定 人間中心設計専門家インタビュー：株式会社ビジネス・アーキテクツ 伊原 力也さん UX（ユーザエクスペリエンス）デザインや、人間中心設計（HCD）が広まるにつれ、システム開発や、Web制作のプロジェクトで、全面的な取り組みがされる事例も増えてきました。 UXデザインは、そのような場において、どのような役割を果たすのでしょうか。 株式会社ビジネス・アーキテクツで、UXデザインの推進をする伊原 力也さん（HCD-Net認定人間中心設計専門家）に聞きました。 伊原 力也さん（HCD-Net認定人間中心設計専門家） ――ビジネス・アーキテクツ（以下BA）は、大企業を中心に、多くのWeb制作の案件を手がけている、Web業界の老舗ですね。 BAは、コミュニケーションデザインの会社です。 とくにナショナルクライアント、大企業を中心に、Webやデジタルを通
GitHub - github/accessibilityjs: Client side accessibility error scanner.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
この実装チェックリストは主にHTML 4.01、CSS2を使用することを前提とした例であり、実際に使用する技術やその使用方法に合わせて、変更して使用することが望まれる。なお、JIS X 8341-3:2010 の細分箇条8.2の表ー4の例では、すべての達成基準を一つの表として表現しているが、この例では達成基準ごとの表を採用している。統合して一つの表にしてもよいし、そのままの形式でもよい。
jQuery simple and accessible hide-show system, using ARIA… or not (collapsible regions) - By Nicolas Hoffmann
Warning: Undefined array key "HTTP_ACCEPT_ENCODING" in /home/clients/97cf10fa399c6faa42e2c9c80e9afbe5/web/subdomains/a11y/hide-show/includes/all.php on line 16 Deprecated: substr_count(): Passing null to parameter #1 ($haystack) of type string is deprecated in /home/clients/97cf10fa399c6faa42e2c9c80e9afbe5/web/subdomains/a11y/hide-show/includes/all.php on line 16
freee Accessibility Training
はじめに このサイトでは、Web サイトを実装する際に作ってしまいがちなアクセシビリティ上の問題と、それが起きにくくなるような実装の例を紹介しています。 freee アクセシビリティー・ガイドラインとあわせて見ることで、Web アクセシビリティへの理解を促進することを目的としています。 ただ各ページを見ていくだけでなく、キーボードのみによって操作したり、スクリーンリーダーで操作したり、開発者ツールで DOM の状態を見たりしてみてください。 キーボードで操作してみよう スクリーンリーダーを使ってみよう 画像 リンク ボタン フォーム 見出し 言語 ランドマーク ステータスメッセージ アクセシビリティチェックの練習ページ
品質と開発速度を 両立させるために 捨てたものと守ったもの Inside Frontend 2019 Abema Towers, Shibuya 2019.05.18
2011年11月26日(土)、青森市のラ・プラス青い森にて青森Webアクセシビリティフォーラムを開催しました。 当日は34名の方のお申し込みをいただきました。ありがとうございました。 第1部はインフォアクシアの植木真さんから「アクセシビリティが引き出すWebの”力” ～「アクセシビリティって何？」からJIS X 8341-3:2010の概要まで～」と題して講演いただきました。 冒頭、Webがテレビ・ラジオや紙媒体と比較して何が有利かというお題で参加者同士にディスカッションしてもらうところからスタートし、障害に合わせた各種支援技術の紹介などご紹介いただきました。一概に障害といってもその種類は多岐にわたり、視覚に障害のある方には音声読み上げソフトや画面拡大ソフトなどの支援技術がある一方で、聴覚障がい者や知的障がい者の傾けの支援技術といったものは特になく、Webを構築する側での配慮が必要とのこと
GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました | アクセシビリティBlog | ミツエーリンクス
2021年1月22日 W3C Accessibility Guidelines (WCAG) 3.0の初期公開作業草案が発行されました アクセシビリティ・エンジニア 中村（直） Web Content Accessibility Guidelines (WCAG) 2.0とそのマイナーバージョンの後続として開発されている、W3C Accessibility Guidelines (WCAG) 3.0がFirst Public Working Draft（初期公開作業草案）として発行されました。 元の言葉はWeb ContentからW3Cに変更されているものの、略称は同じWCAGになっているのは、WCAGという語がWebアクセシビリティを取り巻く世界ではよく知られている証左と捉えることもできそうです。 そんなWCAG 3.0ですが、Abstract（概要）には以下の1文が記載されています。
HTML5 accessibility
HTML5 Accessibility Get the current accessibility support status of HTML5 features across major browsers. Editor’s draft, April 2022 Chrome 100 on Windows 10 98.7% Edge 100 on Windows 10 100% Firefox 100.0b7 on Windows 10 98.5% Internet Explorer 11 on Windows 10 56% Safari 15.4 on Mac OS 95.5% This site tests which newish HTML5 features are accessibly supported by major browsers. This includes if
GitHub - elierotenberg/react-armor: Protect your DOM from third-party tampering.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
押したキーのキーコードを取得 | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
押したキーのキーコードを取得するには、イベント引数であるevent.keyCodeプロパティで取得できます。 取得できるイベントはkeyup、keydown、keypressです。 keyCodeプロパティはイベントの引数で参照できますが、IE8以下ではwindow.eventでのみの参照が可能となっています。 デモ ※ 何かキーを押してください。 サンプルコード JavaScript document.onkeydown = function(e) { var keyCode = false; if (e) event = e; if (event) { if (event.keyCode) { keyCode = event.keyCode; } else if (event.which) { keyCode = event.which; } } alert(keyCode); };
アクセシビリティ Advent Calendar 2020 の記事です。https://adventar.org/calendars/5011 よし分かった！アクセシビリティって大事だよねって思って取り組むじゃないですか。これ読んでる人って、最初から関心があって読んでる、もうすでに取り組んでいる人たちなわけでしょ？こういう人をAチームって呼びましょうか。 Aチームメンバーって、たいていある種のダブルバインド状態に陥るのですよ。でもそれって、日本固有の現象なんじゃないかなぁって思うのです。そこを掘り下げてみようといというのが、本稿の狙いです。 アクセシビリティについて、よくこんな説明を受けませんか？「アクセシビリティは障害者の（交通、建築、情報）アクセスを確保していく取り組みである」「と同時に、高齢者などのより広い人たちにも役立ちます」って。これって、JIS X8341-1 あたりから意図的
WAI-ARIAといえば、ランドマークなどのロール（role属性）が話題になることが多いようですが、aria-*属性の方にも便利な（アクセシビリティ対応がスマートに簡潔なコードで行える）機能はたくさんあります。本日は、その中でも特に有用性の高いaria-label属性を紹介します。 まずは、aria-label属性の解説を『わかりやすい「WAI-ARIA 1.0」仕様解説書』から抜粋して掲載します（部分的に簡略化・補足しています）。aria-label属性はグローバルな属性ですので、HTML5の文書であればどの要素にでも指定可能です。 aria-label属性 要素のラベルにする文字列を属性値として指定する属性です。 この属性で指定したラベルは画面上には表示されません。この属性は、画面には表示させずに支援技術に対してのみラベルを設定しておきたい場合に利用できます（この属性で指定したラベルは
発注者のためのアクセシビリティ簡易チェックシートと検証ツール 仕様書に「ウェブアクセシビリティ対応」と記載してあるにもかかわらず、公開されたサイトがアクセシビリティに対応しておらず、ご担当者も気づいていないケースをよく見かけます。発注者の方の多くは、ウェブサイト選任というわけではなく、アクセシビリティを勉強してサイトを確認する時間を作るのが難しいのではないでしょうか。 そこで、簡単にウェブアクセシビリティがチェックできるチェックシートと検証ツールをご用意しました。 まず、以下のどちらかのチェックシートをダウンロードまたは印刷し、お手元にご用意ください。 ＜ケース1＞ウェブ制作会社が間違えやすい部分のみ手早く確認したい（11項目） 新：＜高速＞簡易チェックシート （excel版 40.0KB）※一部等級ＡＡ ＜ケース2＞JIS X 8341-3:2010の等級Aのポイントを理解しながら確認し
アクセシビリティについて
アクセシビリティについて ウェブアクセシビリティ方針 誰もがいつでも、迷わず「書く」「読む」「応える」ができる状態を目指す Amebaはこれまでもユーザーの生活に寄り添ってきました。 「人と情報をつむぎ 暮らしが豊かに育ちつづけるための機会をつくる。」をミッションに掲げ、ユーザーの「変化」にも寄り添っていきます。 今利用しているユーザーが歳をとっても、怪我や眼鏡を忘れてしまったときにも、ユーザーが日々遭遇するあらゆる環境や状況の変化が障害になるデザインであってはいけません。 アクセシビリティを高めると、障害者や高齢者、子どもも含めた誰もが使えるようになります。 そしてそれは、いつでも使いやすいにつながります。 Amebaはミッションの追求のために「誰もがいつでも、迷わずコンテンツを楽しむことができる」サービスを目指し、これからもアクセシビリティの向上に取り組みつづけていきます。 アクセシビ
Overlay Fact Sheet
What is a web accessibility overlay?Overlays are a broad term for technologies that aim to improve the accessibility of a website. They apply third-party source code (typically JavaScript) to make improvements to the front-end code of the website. Website add-on products claiming to improve accessibility go back to the late 1990s with products like Readspeaker and Browsealoud. They added text-to-s
国立国会図書館 図書館におけるアクセシブルな電子書籍サービスに関する検討会 令和5年7月 ※本書は、クリエイティブ・コモンズ・ライセンス 表示 4.0 国際（CC BY 4.0）に従って利用が可能です 「電子図書館のアクセシビリティ対応ガイドライン1.0」について、ご意見・ご要望のある方は以下のメールアドレスまでお知らせください。 総務部企画課企画係 電話：03-3581-2331（代表） メールアドレス：a11y-dl （電子図書館のアクセシビリティ対応ガイドライン1.0（PDF: 1.95MB）は国立国会図書館デジタルコレクションからご覧いただけます。） 令和元年6月、「視覚障害者等の読書環境の整備の推進に関する法律」（令和元年法律第49号。以下「読書バリアフリー法」という。）が施行された。令和2年7月には、同法第7条の規定に基づき、文部科学省及び厚生労働省において「視覚障害者等の読書
ANDI (Accessible Name & Description Inspector) is a free accessibility testing tool. ANDI is a "favelet" or "bookmarklet" that will: Provide automated detection of accessibility issues Reveal what a screen reader should say for interactive elements (the accessible name computation) Give practical suggestions to improve accessibility and check 508 compliance
I have resigned as the WordPress accessibility team lead. Here is why.
Update December 5, 2019: As I am no longer part of the accessibility team and don’t follow closely what is happening in WordPress core any more, I’d like to add to following. This post was about the state of WordPress end 2018. In the meantime other people have stepped up and there have been made improvements to the accessibility and there are efforts to change the workflow of a new release and of
From The Front, Bologna 2016 @LeonieWatson Platform controls Role is "checkbox" Accessible name is "Bold" State is focused, checked, focusable Web control <input type="checkbox" id="bold"> <label for="bold">Bold</label> Role is "checkbox" Accessible name is "Bold" State is focused, checked, focusable HTML Accessibility API Mappings (AAM) The relationship between platform objects and web objects is
We need to change the way we talk about accessibility. Most people are taught that “web accessibility means that people with disabilities can use the Web”—the official definition from the W3C. This is wrong. Web accessibility means that people can use the web. Not “people with disabilities.” Not “blind people and deaf people.” Not “people who have cognitive disabilities” or “men who are color blin
Digital accessibility refers to the practice of building digital content and applications that can be used by a wide range of people, including individuals who have visual, motor, auditory, speech, or cognitive disabilities. There’s a myth that making a website accessible is difficult and expensive, but it doesn’t have to. Designing a product from scratch that meets the requirements for accessibil
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BBC Mobile Accessibility Guidelines
Webアクセシビリティ Advent Calendar 2018 - Adventar
わたしとWebアクセシビリティ - note
How Our CSS Framework Helps Enforce Accessibility
すべての人のためのアクセシビリティ対応 #iosdc
民間に対する法律上の「合理的配慮」の見直しについて | アクセシビリティBlog | ミツエーリンクス
http://blog.e-riverstyle.com/2013/12/waiariajquery-1.html
Focusable Elements - Browser Compatibility Table
kintoneでこだわりまくるデザインとアクセシビリティとは？ (1/2)
お気持ちは嬉しいのですが… | ３人で居れば晴れ～遠位型ミオパチー＆車椅子ウォーカー（車いすウォーカー）
Accessible UI Components For The Web
UXデザインが果たす役割とは？～HCD-Net認定 人間中心設計専門家インタビュー：株式会社ビジネス・アーキテクツ 伊原 力也さん：インタビュー｜gihyo.jp … 技術評論社
フォームの構築方法 - ウェブ開発を学ぶ | MDN
実装チェックリストの例 2012年11月版
Inside Frontend 2019 - 品質と開発速度を両立させるために捨てたものと守ったもの
青森Webアクセシビリティフォーラムを開催しました - W3A(ダブリュスリーエー) » 青森県で障害とウェブアクセシビリティについて考えるプロジェクト
アクセシビリティの二重性｜UMEGAKI Masahiro
知っていると便利なaria-label属性の使い方 – ofujimiki.jp
20分でできる簡易チェックシート用検証ツール - 情報バリアフリーポータルサイト
電子図書館のアクセシビリティ対応ガイドライン1.0｜国立国会図書館―National Diet Library
ANDI - Accessibility Testing Tool - Install
Developer's guide to accessibility mechanics
Reframing Accessibility for the Web
Designing for accessibility is not that hard