アクセシビリティ学習の手引きとしての入門講座
合理的配慮という言葉の意味は次のとおりです。 社会生活において提供されている設備やサービスなどは障害のない人には簡単に利用できる一方で、障害のある人にとっては利用が難しく、結果として障害のある人の活動を制限してしまっている場合があります。このような、障害のある人にとっての社会的なバリアについて、個々の場面で障害のある人から「社会的なバリアを取り除いてほしい」という意思が示された場合には、その実施に伴う負担が過重でない範囲で、バリアを取り除くために必要かつ合理的な対応をすることとされています。これを「合理的配慮の提供」といいます。 出典: 事業者による障害のある人への「合理的配慮の提供」が義務化 | 政府広報オンライン たとえば、障害者がレストランを利用する場合、次のような配慮が必要になると考えられます。 車椅子に乗った人のために、ふだん置かれている椅子を移動させて、車椅子のまま席につけるよ
スクリーン・リーダーを用いたチェックの実施方法 — freeeアクセシビリティー・ガイドライン Ver. 202510.0-RELEASE+7.0.0
ここでは、主要なスクリーン・リーダーを用いてチェックする場合に推奨される設定や最低限知っておくべき事項について説明します。 なお、freeeでは以下の方針でスクリーン・リーダーによるチェックを実施しています。 PC向けWeb Windows上のNVDAとGoogle Chromeで動作確認し、動作しない場合は当該チェックの結果をNGとする macOS VoiceOverによるチェックは、スタティックなコンテンツや既にNVDAでの動作確認が完了しているUIコンポーネントに限定し、その他のチェックはNVDAで実施する モバイル・アプリケーション iOS VoiceOver、Android TalkBackそれぞれでで動作確認し、動作しない場合は当該チェックの結果をNGとする
オンライン授業での情報保障に関するコンテンツ集 - PEPNet-Japan
聴覚障害学生支援のための ナレッジベース このサイトは、聴覚障害学生支援のためのさまざまなノウハウや事例、教材、新しいトピックなどを紹介しているナレッジベースです。 聴覚障害学生支援に携わるさまざまな立場の方にご活用頂ける情報を発信しています。
プログラマーから見たPDFファイル - アンテナハウス PDF資料室
更新日: 2020年8月14日 このページの目的 プログラマーは、クライアントから提供されたPDFファイルで、その要求を実現させようとしたとき、PDFのどんなところを見ているのでしょうか。このページでは、ちょっと珍しい視点でPDFファイルを解き明かしていきます。 自分でプログラムを書いてPDFファイルからテキストデータを取り出したいという人も、ぜひご一読ください。 はじめに PDFファイルをクリックすると、あたかも紙に印刷したかのように、どんなマシンでも同じような見た目で文章や画像がディスプレイに表示されます。 この単純な事実は、日常的にPDFファイルを利用していると当たり前に感じられるかもしれません。しかし、よくよく考えると驚くべきことです。 いったい、どのような仕組みがあれば、「過去から現在に至るさまざまな種類のコンピューターで見た目を変えずに同一の紙面を再現する」という目的を達成でき
ASMRはいいぞ【#ねおりん Advent Calendar 2019】｜ナナメ
前日は瀬見川 笑子さんによる「～2019年振り返り的なやつ～」でした。 音楽は、音楽そのものを楽しむもよし、歌詞を考察して自分の感情と向き合うのも良し、聴いてた当時の気持ちや季節を思い出しながら聴くのも良しで楽しいですよね。ちなみに先日好きな音楽を語り散らかす配信をしました。 こんにちは、ナナメです。 フリーランスでイラストレーター兼Live2Dデザイナーをしつつ、『まうちゃん』というキャラクターの身体を借りてVTuber的な活動もしています。 詳しくはTwitterやYoutubeをご覧ください。 今回書くことねおりんの基調エントリで長文が読みたいというお達しがあったため色々考えました。今年はVTuberの活動1周年を迎えたり、夏に会社を辞めてフリーランスになったり、オリジナル同人ゲームを作ったり色んな事があったのでそれらについて振り返ろうかな～と思いましたが、折角なので、好きなASMR
Scaling SVG Elements
Scaling <svg>s can be a daunting task, since they act very differently than normal images. Instead of thinking of <svg>s as images, let's change our mindset: The <svg> element is a telescope into another world.Much like everything inside of an <iframe> on another webpage, everything inside of an <svg> element is in another world. Our telescope defaults to a normal zoom level: one "unit" is the sam
The ultimate guide to proper use of animation in UX
Nowadays it’s hard to impress or even surprise with an interface animation. It shows interactions between screens, explains how to use the application or simply directs a user’s attention. While exploring the articles about animation, I found out that almost all of them describe only specific use cases or general facts about animation, but I haven’t come across any article where all rules concerni
Interactive SVG Coordinate System
The grey coordinates (grey ruler 800 x 600) represent the coordinates of the viewport established on the <svg> element using the width and height attributes. The blue coordinate system is the user coordinate system established on the SVG canvas—where all the drawing will be done—using the viewBox attribute on the <svg> element. The orange vertical line represents the position of the <min-x> value
宣言ブロックのCSS設計 - kojika17
日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用
もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ
SVGが一般化してきたとはいえど、「SVGは聞いたことあるけれど、使ったことはない」というWebデザイナーの方も多いのではないでしょうか。 実際、長い間GIFやJPEG、PNGなどのビットマップ形式のデータが主流だったWeb業界ではあったので、SVGのようなベクター形式のデータが扱えるようになったとは言っても、「新しもの好き」の人が扱う目新しいフォーマットだと思っているひとが多いのも事実です。 しかし、SVGは画像劣化がなかったり、アニメーションを扱えたり、テキストエディターで直接カスタマイズができたり、CSSやJavaScriptで操作できたりと、扱うメリットが多いので、これから急速に普及していく可能性があります。 また、Can I use…でも確認できますが、今ではほとんどのモダンブラウザがSVGをサポートしているので、互換性も他の最新技術ほど気にする必要がないのです。 今回は、SVG
SVG / 図形の描画方法まとめ
SVGタグの使い方が気になった時にまとめたものを、せっかくなのでメモに残したいと思います。 内容は半年以上前のものなので、情報が古い・正しくない箇所がありましたらご指摘頂けると嬉しいです。 描画で使用するタグ 種類 タグ
Front End Center — Why Inline SVG is Best SVG
SVG is one of the most powerful tools in a front-end developer's arsenal, and while its browser support is excellent, there's enough rough edges that a lot of people consistently reach for an alternative such as icon fonts, static images or CSS-only drawing techniques. In this episode we'll look at what can be achieved by writing SVG by hand, simple effects that can add a lot to an interaction th
SVG Authoring Guide
SVG is a generalized graphics markup language, which can be used for any purpose from icons to complex images to data visualizations to animated pictures to interactive applications. SVG can be generated by script libraries, by GUI drawing applications, or by hand-coding. Because of this flexibility, SVG does not dictate a structured content model, though it does provide primitives for structure,
階調反転フィルターCSS Mozilla編 - ayapi.github.io
Mozilla編… CSS3 filter: url(svg-url#element-id) Firefoxにぉぃてゎ、 Webkit編でかぃたfilter: invert()ゎ実装されてなく、 SVGでフィルターをっくってCSSに埋め込む必要がぁります SVG自体にっぃてゎ、このページにとても詳しく載ってます svg要素の基本的な使い方まとめ ↑非常に貴重な情報で、とてもぁりがたぃです ぃくっかぁる原始フィルターの書き方 SVGで輝度を変換するにゎぃくっかの方法がぁるんですけど、 以下にかくサンプルゎどれもゃってることゎ同じ、階調反転です feColorMatrixでmatrix 仕様書にょると、feColorMatrix type="matrix"にぉぃて、 適用される変換の行列ゎ以下のとーりです \( \left( \begin{array}{c} R' \\ G' \\ B' \\
Using this tutorial | Teach Access Tutorial
Welcome to the Teach Access Tutorial! This resource is part of the Teach Access Initiative, and provides best practices for making accessible mobile and web apps. This tutorial currently provides basic training for developers and designers, with more disciplines to come! If you are new to accessibility, you've come to the right place - the following material will help you get a solid footing on ac
SVGを使用して鮮明なロゴへ変身 | フロントエンドBlog | ミツエーリンクス
Retinaディスプレイの登場をきっかけに高解像度ディスプレイのスマートデバイスが多く登場し、その波はすでにPCにも到来しています。高解像度ディスプレイは通常の解像度より画素の密度が高く、より鮮明な表現が可能となっているのが魅力です。では、目的のWebサイトを閲覧している際に、企業ロゴ、製品ロゴ（以下、ロゴと表記）は鮮明でしょうか。それとも、ぼやけていますでしょうか。 ロゴはとても重要な存在です。企業を象徴するロゴはコーポレートアイデンティティ（CI）を構成する要素に含まれるビジュアルアイデンティティ（VI）に該当します。ビジュアルアイデンティティ（VI）は、企業が目指す「理念」「ビジョン」「経営戦略」などに基づいた行動指針を社内外問わず共有するためにデザインとして策定し、企業のイメージを図案化したものです。Webサイトが幾度更新されようとロゴは常に最初に目に留まる位置にいます。つまり、ロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Three Illustrator tricks for better SVG stroke animations | Val Head
(mt) Media Temple - Web Hosting Built to Scale.
SVG-паттерны
SVGの学習サイト[VIVA-SVG] -SVGアニメーションを作ろう！-