Accessibility｜HIG Foundations 日本語訳まとめvol.2｜dyson｜flier UI designer
Appleのアクセシビリティ機能を使用して、自分に合った方法でデバイスを操作する方法をパーソナライズします。 ■ 本noteの見方どうも、株式会社フライヤーUIデザイナーのつついです。 2022年6月7日、Appleのイベント「WWDC22」に合わせHIGが改訂されていたので、その概要となる「Foundations（基礎）」のところだけザックGoogle翻訳したものをインデックスとしてまとめておきました。 ■ Accessibility (アクセシビリティ)アクセシブルなアプリまたはゲームは、設計によりアクセシビリティのパーソナライズをサポートし、機能やデバイスの使用方法に関係なく、すべてのユーザーに優れたユーザーエクスペリエンスを提供します。 約7人に1人が、世界やデバイスとのやり取りに影響を与える障害を持っています。人々は、年齢、期間、重症度のレベルを問わず、障害を経験する可能性があり
Front-End Study #3「『当たり前』をつくりだすWebアクセシビリティ」
📝 イベントレポートも発信しています 📝 コチラから：https://pr.forkwell.com/events/front-end-study-03/ ▍プログラム 0:00 〜 オープニング 12:55 〜 基調講演「Webエンジニアとしていま知っておきたいWebアクセシビリティ」freee株式会社 デザイナー/エンジニア ymrl氏 47:30 〜 質疑応答 54:27 〜 Sponsor LT 1 Forkwell 重本 湧気 1:00:10 〜 休憩 1:05:02 〜 Session 1「これからもつづけるWebアクセシビリティ」 株式会社クラウドワークス フロントエンドデザイナー yamanoku氏 1:26:13 〜 質疑応答 1:30:55 〜 Sponsor LT 2 株式会社アンドパッド フロントエンドエンジニアmmiyauchi氏 1:38:19 〜 休憩
macOS の VoiceOver で Web サイトのスクリーンリーダー対応をはじめよう - Qiita
開発している Web アプリケーションをスクリーンリーダーでも扱えるようにするにあたって、 VoiceOver を使いはじめてみたら思ったより簡単だったので、やり方についてまとめてみます。 この記事内では macOS High Sierra (10.13.6（17G65）) を前提としていますが、 VoiceOver の操作方法などはバージョンが変わってもあまり変わらないんじゃないかと思います。 VoiceOverとは Appleが macOS や iOS に搭載しているスクリーンリーダーです。視覚障害者向けに画面上に並んでいるものを音声読み上げしてくれます。 視覚のアクセシビリティ - Mac - Apple（日本） 視覚のアクセシビリティ - iPhone - Apple（日本） VoiceOver は macOS に内蔵されているので、 Mac さえあれあばスクリーンリーダーを試して
企業サイトのウェブアクセシビリティの今とこれから
はじめに 企業のマーケティング、ブランディングの現場では、Webサイトをはじめとするデジタル活用が今やあたりまえとなっている。解析ツールを用いてユーザーの行動を探索し、マーケティングオートメーションの導入によって見込み顧客の裾野を広げ、大規模なコンテンツマネジメントシステムによって日々膨大なコンテンツを量産している。 Webサイトの最大の特性は、距離や量の制限を受けずに、いつでも、どこにでも、誰にでも、情報やサービスを届けることができる点にある。しかし、その情報やサービスがユーザーにとっていかに有益であったとしても、ユーザーがその情報にアクセスできなければ、その情報は存在していないに等しい。単にWebページを作成し、インターネット上に公開しただけでは、ユーザーが情報に十分にアクセス可能な状態になるとは言えず、発信者側が情報やサービスをアクセス可能な状態にしなければならない。 「情報にアクセ
CSS Gridとアクセシビリティについて気になっていたこと
前回の記事でCSS Gridは「魔法の杖」だと書きましたけど、1つ気になっていたことがあります。 それは、HTMLソースの順番（ソースオーダー）と視覚的な順番（ビジュアルオーダー）にまつわるアクセシビリティについてです。FlexboxでもそうなんですがCSS Gridを使うとCSSで表示順を変更することができます。そうするとHTMLソースにあるコンテンツの順番とブラウザで表示される順番が異なる場合が出てくるわけですね。 「でも、それってアクセシビリティ的にはどうなんだろう？」というのが気になっていました。 マルチデバイス対応のレイアウトを考える際、CSSで表示順を変えられるのはものすごく便利で、まさにここがCSS Gridの「魔法の杖」的な要素の一つでもあるわけです。でも、技術的にできるからといって考えなしにやっていいかというと、そんなことはないですよね。 調べてみたところ、CSS Gri
入門者向け alt属性の書き方アドバイス
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
Building Accessible Menu Systems — Smashing Magazine
There are lots of different types of menu on the web. Creating inclusive experiences is a question of using the right menu patterns in the right places, with the right markup and behavior. Editor’s Note: This article originally appeared on Inclusive Components. If you’d like to know more about similar inclusive component articles, follow @inclusicomps on Twitter or subscribe to the RSS feed. By su
アクセシビリティを意識した CSS の書き方 - Frasco
私は約一年前から Web アクセシビリティについて注目し始めました。私にとって何かを学ぶこと最も効率的な方法は他人に教えることなので、ミートアップやカンファレンスなどで発言したり、このトピックに関する記事を書いているわけです。Progressive Enhancement については Smashing Magazine で、Web アクセシビリティに関しては Medium で書いています。この記事は3つ目の Web アクセシビリティ関連の記事です。このシリーズを読むのに特に決まった順序はありませんので、興味があれば Writing HTML with accessibility in mind や Writing JavaScript with accessibility in mind を読んでいただければと思います。 私が初めて Web サイトを作った17歳当時、CSS は比較的新しい
【アクセシビリティ】HTML/CSSで突っ込まれた点をメモメモ | バシャログ。
来週遅めの夏休みをいただき、東北へ旅行の予定を立てている kouraku です。おはこんばんちは。 さて今回は、とある案件でアクセシビリティ：AA レベルのサイト制作を行ったとき、専門の方から色々と指摘をいただいて、その対応に苦労したり、そんなことしないといけないのか！と思った内容のいくつかを忘れないようにメモしておこうと思います。 ・・・とその前に、アクセシビリティって何？ 「アクセシビリティ」の意味と混同しがちな言葉が「ユーザビリティ」です。ユーザビリティとは、W3Cでは次の内容で定義されています。 Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specifie
role 属性を正しく設定してアクセシビリティを高める
role 属性は、要素が示す役割を明確にするための属性です。 例えば、header 要素はコンテンツの header か、あるいはサイト全体の header を示すことなどができますが、 どちらの header であるかを明確に区別する手段はありません。 しかしながら、role 属性の値 banner によって、コンテンツ固有の header ではなく、サイトの持つ header であることを示すことができます。 HTML5 以降の HTML は、ある役割を示す要素が多く存在しますが、role 属性はより強く役割を示します。 role によって役割を明確にする意味 role 属性は HTML などで使いますが、role 属性に与える値や役割は HTML とは切り離された ARIA と表記される区分に定義されています。 Accessible Rich Internet Application
Web Accessibility: Tools and Considerations — SitePoint
February 10, 2014Web Accessibility: Tools and Considerations Web accessibility is the process of making the features of your website accessible to people of all abilities. It’s about giving everyone equal access and opportunities, thereby allowing as many as possible to access your features without hindrance. With the potential legal obligations to comply with the accessibility standards set by th
ショッピングモールをシニアが見てみた（シリーズ実例） | マミオン有限会社-パソコン・数学研修、法人研修
先日、Yahoo!ショッピングが無料化するニュースが世間を騒がした。 たまたま近くにいた60歳代前半女性のIさん。 ネットでしょっちゅう購入している方だ。 Yahoo!ショッピングも2，3回使ったことがあるとのこと。 普段はamazonを利用している。 Iさんにお時間をいただき、今話題のYahoo!ショッピングを使って アイトラッキングで視線を録画することをご了解いただいた上で ほしいものを探していただいた。 「アンティークのランプがほしいと思っていたの」とのことである。 ※実施したのは10月7日の為、Yahoo!ショッピングの画面が 多少変わってしまったことを先にご了承願いたい。 画像しか見てないカテゴリから家具、インテリアを選択し、 その後、検索ボックスに「アンティーク」と入力したIさん。 検索候補に「アンティーク 照明」と表示されたので、そこをクリック。 シニア層は検索のサジェスト機
Accessible Mega Menu
1. Perceivable Information and user interface components must be presentable to users in ways they can perceive. 1.1 Text Alternatives Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. 1.1.1 Non-text Content 1.2 Time-based Media Provide alternatives for time-based media. 1.2.
【介護サイト比較】情報を気持ちよく入力してもらえるか？ | マミオン有限会社-パソコン・数学研修、法人研修
サイトの使い心地に大きく影響を及ぼすのが、入力フォームの設計です。 ユーザーテストを観察していても、特に介護サイトのメインユーザーであるシニア層は、情報の入力を不得手とする方が多いです。 今回は、各サイトが入力フォームにどういった工夫や配慮をしているか確認してみたいと思います。 主要サイトの入力フォームのデザインをチェック！介護DB（Link） 上の図の赤枠部分を見るとわかる通り、『介護DB』では同じ入力項目内でフォームを分けてしまっています。このように「姓名」「郵便番号」「電話番号」のフォームを分けて設置しているサイトは、他でもよく見かけます。 特にパソコンに慣れてないないシニア層ユーザーは、「タブキー」を使って次のフォームに移動するという技は知りませんので、毎回キーボードとマウスを行ったり来たりしながら苦労して情報を入力することになってしまっています。 これに対処するためには、データベ
フォームで離脱させないためのjQueryプラグイン50選｜designaholic -Creative Column-
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブアクセシビリティ 導入ガイドブック - デジタル庁
Color Tool - Material Design
https://help.apple.com/voiceover/info/guide/10.13/
The Ultimate Guide to Web Accessibility & WordPress - WPMU DEV
http://blog.e-riverstyle.com/2011/01/rolewaiaria.html
