2024年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2023年のWebアクセシビリティに関連する出来事を振り返りつつ、2024年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2の勧告とWCAG 2.1の更新 長らく待ちわびていたWCAG 2.2について、2023年10月5日付けでようやくW3C勧告（Recommendation）となりました（日本語訳はまだありません。詳細は後述の「臨時WGの活動状況」を参照）。また、これと連動する形でWCAG 2.1（日本語訳）の勧告も改めて発行されました。 今回のWCAG 2.1の更新では、達成基準4.1.1構文解析に注記が設けられています。これにより、WCAG 2.2で削除された達成基準4.1.1の扱いについて連続性が保たれるようになっています。WCAG 2.1からの変更点は、公
fudist - Shift_JISのダメ文字
Shift_JIS(SJIS, cp932) の文字コードで、2byte目が0x5c の \ になっているものの俗称(だめ文字、駄目文字) 0x5cの \ は使用するフォントやロケールによりバックスラッシュまたは￥記号で表示されます。 ダメ文字を含む文字列やパス、ファイル名を処理する場合には文字化け、検索不可など様々な不具合が起きることがあります。 ダメ文字には ー ソ 十 表 など、使用頻度の高いものもあるので cp932を扱う場合には注意が必要です。 また広義には2byte目が 0x7c のパイプ文字 | になっている文字や、2byte目が正規表現などのメタ文字と重なる文字も含む場合もあります。 ダメ文字問題は正規表現をはじめとする様々な言語、システムで制御用のメタ文字として扱われる文字と同じバイト列が、SJISの漢字の2byte目に含まれていることにより起こります。 特に 0x5c
2023年のWebアクセシビリティ | gihyo.jp
あけましておめでとうございます。株式会社ミツエーリンクスの中村直樹です。昨年と同じく、2022年のWebアクセシビリティに関連する出来事を振り返りつつ、2023年のWebアクセシビリティの展望について俯瞰していきたいと思います。 WCAG 2.2 2022年9月版のWCAG 2.2で、文書のステータスとしてはようやく勧告候補（Candidate Recommendation）にまでたどり着き、仕様文書として完成する勧告（Recommendation）が見えてきた…と思っていたところですが、12月になって達成基準4.1.1構文解析を削除するという話が急浮上してきました。 達成基準4.1.1がどういったものなのか、改めて振り返ってみましょう。この達成基準については、もとはWCAG 2.1（原文、参考日本語訳）と同じものであり、WCAG 2.0とも同一です。達成基準4.1.1は、マークアップ言語
ひたすらWebサイトを見るのが趣味な私が独断と偏見で選ぶ今年「良い！」と思ったWebサイト16選 - KAYAC engineers' blog
どうもみなさまおはようございます。あるいはこんにちは。あるいはこんばんは。 KAYAC Advent Calendar 2019の18日目の記事を担当します、フロントエンドエンジニアのたがみです。普段はwebサイトを作ったり動かしたりぶっ飛んだものにしたりしなかったりしています。 去年は私のその時の推しライブラリだったVuetifyについてこのブログを通じて布教したのですが、今年も今の推しライブラリの話をするぜ！・・・と、意気込んでいたのですが。「というか日頃からWebサイト事例収集しまくってるから、今年の素敵だと感じたサイトを振り返るか」と思いついちゃいましたので今年は推しのWebサイトの話をしようと思います。 というのも、私は去年入社してからデザインや演出や作りが素敵なWebサイトを見つけては自分のツイッターに「このWebサイトが良い！」というのをひたすら垂れ流すというのを日常的にやっ
サイトに行くとポンとでる｢通知送っていい？｣のやつ、Firefoxはとりあえず全ブロックへ
サイトに行くとポンとでる｢通知送っていい？｣のやつ、Firefoxはとりあえず全ブロックへ2019.11.07 18:0028,674 Victoria Song - Gizmodo US ［原文］ （ 岡本玄介 ） 邪魔くさい通知よ、サラバ。 ｢通知送っていい？｣のポップアップは、控えめに言っても“死ぬほどウザすぎ”です。定期的にウェブサイトへアクセスしているからといって、ポップアップ通知で飽和されたがっているということではないのです。 Mozillaさんグッジョブということで、Mozillaはこの問題に対抗するため、Firefox 72ではそうしたポップアップ通知を自動的にブロックし、URLバーに小さなアイコンで表示するようにしました。 変更は2段階で行なわれます。MozillaはFirefox 70から、通知ポップアップの許可オプションをデフォルトで｢Not Now（いまはしない）｣
Typhoon Hagibis in Photos (Published 2019)
Oct. 12, 2019As of Monday, dozens of people had been killed, more were missing and hundreds of thousands had been forced to abandon their homes after Japan was lashed by Typhoon Hagibis, the most powerful storm to strike the country in decades. Rescue services jumped into action, using helicopters to pluck stranded people from balconies and roofs, and inflatable boats to access residential streets
Logos - Thousands of Handcrafted Logos to Customise & Make Your Own
Social Media Covers Facebook CoversYouTube BannersTwitch BannersLinkedIn BannersFacebook Event CoversSoundCloud BannersTwitter HeadersPinterest Board CoversZoom BackgroundsEtsy BannersTumblr BannersSocial Media Posts Instagram PostsInstagram StoriesFacebook PostsFacebook StoriesFacebook AdsTwitter PostsLinkedIn PostsPinterest PinsTikTok VideosInstagram ReelsYouTube ShortsYouTube VideosWhatsapp Sto
モックアップをツールで作成！ぶれないデザインを生み出す方法を解説
4.ツール選定までのスケジュール案 いいツールを選ぶためには、スケジュール感を持って進めることも大事です。 いくつか無料トライアルから始めるかと思いますが、通常の仕事を行いながらツール選定するのは時間がかかります。計画的に進め、最短でツールを選定しましょう。 ＜ツール選定スケジュール案＞ 2月 優先順位の洗い出し 3月 ツールのトライアル〜ツールの選定 4月 運用開始 ※もし自社サーバーでの導入を検討される場合は、より長い期間の確保が必要です。 5.モックアップ作成ツールのご紹介 では最後にツールのご紹介をします。主要なツールはこちらに網羅されていますので、下記のリストから検討を始めてみてください。 5-1. オンラインツール 5-1-1. moqups ユーザー数：100万人以上 プラン：登録不要で無料で利用できるが一部機能制限あり 料金：月額約¥1,500〜 特徴：UIは英語だが、あら
280文字数制限拡大においてのデザイン上の課題
TwitterがまだTwttrという表記だったころから、Twitterらしさの定義のひとつが「140文字のツイート」でした。この140文字の制限を挑戦として楽しまれる方もいらっしゃいます。文字数制限が、創造性を駆使した簡潔なメッセージにしようと思うきっかけにもなっているようです。中には、文章力の向上に役立ったという方もいらっしゃると聞きました。その一方、この文字数制限によってTwitterに不満に感じる方も多くいらっしゃいます。文字制限があるために書き方を考えなくてはならず、表現能力に制限を与え、結局はツイートを行うことを諦めさせてしまうことも少なくありません。簡潔であることはTwitterにとってとても大切なことですが、皆さんにもそれぞれのお考えを共有していただきたいとも思います。 ツイートの長さについてのデータを見て、興味深いパターンを発見しました。この140文字の制限が、使われている
Webページの表示が早くなる！既存ページのクリティカル レンダリング パスを最適化するオンラインツール
スタイルシートを外部ファイルで管理されている人が多いと思います。しかし、最近では上部のコンテンツを表示するためのスタイルシートをインラインで記述し、残りは後にロードさせ、ページの表示を早くしているサイトが増えてきました。 Googleなどでも積極的に採用されているテクニックです。 既存ページのクリティカル レンダリング パスを改善するためのスタイルシートを簡単に生成できるオンラインツールを紹介します。 ※秒数は目安です クリティカル レンダリング パス(Critical Rendering Path)とは、ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になり、この時にブラウザがページの最初のペイントを実行するために必要とするシーケンスのことです。 クリティカル レンダリング パスについて詳しくは、下記を
【決定版】はてなブログ・スマホデザイン最強カスタマイズ集 - ひつじの雑記帳
※記事更新から1年以上が経っているため情報が古い可能性があります 当ブログ「ひつじの雑記帳」は5月1日で運営1ヵ月目を迎えました。お陰様で5記事しか書いてないにも関わらず1ヵ月目で4万PVを達成することができました。 投稿する記事の質は当然意識してきましたが 、短期間でここまで成長できたのはブログデザインの影響も少なからずあるかなと感じています。 そこで今回は、当ブログ「ひつじの雑記帳 」で実践しているカスタマイズ・コード全てを紹介していこうと思います。 当初はこのブログのスマホデザインのカスタマイズコード全てをひとつのパックとして5000円で販売しようと思っていたんですが、いろいろと気が変わったので全て無料で公開することにしました。 デザイン完成図 使う色を落ち着いた色に統一したフラット風のデザインに仕上げています。おすすめ記事を宣伝するスペースもいくつか設けているので直帰率の改善にも貢
CSSで再現するドカベンOPの文字エフェクト - Qiita
<h1 class='dokaben loop komaochi'>ドカベン</h1> <h1 class='dokaben loop komaochi vartical-align-baseline'>ドカベン</h1> 使い方 まず、sm29720917様にてドカベンフォントを してください そうしたらファイルを解凍し、中にある 「dokaben_ver2_1.ttf」を実行して してください。 次に、dokaben.cssをダウンロードし、h1タグを書いたHTMLと同じ階層に置き、linkタグでダウンロードしたCSSファイルを読み込んでください。 これで準備は完了です。HTMLファイルをブラウザで開いてみましょう。 Q&A Q. なぜウェブフォントにしないんですか？ A. フォントの再配布になるかと思って遠慮しました。 Q. ドカベンフォントじゃないとダメ？ A. 画像や動画でも同じ
JIS X 8341-3:2016 試験実施ガイドライン
1. ガイドラインの目的 本ガイドラインは、JIS X 8341-3:2016 の「附属書JB（参考）試験方法」に基づく試験を行う際に、どのように理解して実施すればよいかを補足するためのものである。附属書JBの理解を助けるだけでなく、附属書JBでは明確に記載されていない事項についても目安や例を示している。 なお、本ガイドラインは指針を示しているだけであり、これによらない方法であってもJIS X 8341-3:2016附属書JBに基づいて試験を実施することは可能である。 また、本ガイドラインは、JIS X 8341-3:2016、WCAG 2.0、Understanding WCAG 2.0（WCAG 2.0 解説書）、Techniques for WCAG 2.0（WCAG 2.0 実装方法集）、アクセシビリティ サポーテッド（AS）情報（本委員会による）などの文書を読み、それらのアクセシ
行政サイトを作る時に気をつけておいた方がいい事 - Qiita
県や市の公式ホームページ制作の経験から、気をつけておきたい点をメモに残しておきたいと思います。 納品前 納期が３月に集中する 行政サイトの場合、お金は年間予算や国からの特別補助金などから支払われます。つまり基本的に年度を跨ぐことが出来ません。（保守にかかる費用は別です）その為、行政の案件に頼っている制作会社は納期が重なり３月が滅茶苦茶忙しくなります。 年度末は余裕を持ったスケジュールを組んでおきましょう。 見積もりは２割増しで ここで言う見積とは入札時の見積もりではありません。行政の案件をいくつかこなして担当者と仲良くなってくると、コンペの上限金額を決めるために事前に見積を頼まれる事があります。「もし○○みたいな案件だったらいくら位でできそう？期間と見積もり貰えると助かるんだけど。」みたいな感じです。サラリーマン金太郎の東北編で出てきたアレです。大事なのはここで割引など一切考えずに、むしろ
Bootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料ツール -Bootstrap Editor
Bootstrapはページ作成に役立つ機能がたくさん用意されており便利ですが、ファイルをダウンロードしたり、テンプレートを用意したりなど、始めるまでに少し手間がかかってしまいます。 そんな手間をすべて解消し、初心者の人でもプロの人でもすぐにBootstrapのテンプレートが簡単に作成・カスタマイズできる国産の無料オンラインツールを紹介します。 Bootstrap Editor Bootstrap Editorの特徴 Bootstrap Editorの機能 Bootstrap Editorの使い方 Bootstrap Editorの特徴 Bootstrapを初心者でも手軽に使えるよう開発された日本製のオンラインツールで、ダウンロードやインストールなどの準備は不要、すぐにBootstrapでさまざまなページを作成できます。 Emmetなどにも対応しているので、使い慣れた人にも便利です。 作者様
Excelスクショ問題の解決策を現役エンジニアが本気で考えた。 - Qiita
はじめに SIerのExcelスクショ問題が少し前にバズっていた。 SIerでは、プログラムを手動で操作し、その時の画面写真をExcelに貼り付けた資料を作る事で、プログラムが正常に動作するエビデンスとしている。 そもそも、なぜそのような作業が必要なのかは、下記の方のブログが詳しいのでここでは語らない。 - > Excelスクショ問題について周りの方へのお願いと、今職人となっている方への励ましの言葉（元職人より） | 羽根帽子の太公望 ここで語りたいのは、「Excelスクショ作業はなぜ自動化されないのか？」とそれに対する解決策だ。 原因 まず原因はこれらだと思う。 セキュリティの観点から自動化ツール導入に制限がある。（そのツールがスパイウェアでない保証はありますか？） フリーウェアの導入や有名でないシェアウェアの導入の際に問題になる。それらのツールがスパイウェアの類でない事を証明する事は難
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://twitter.com/catnose99/status/1602508250532171776
W3Cでデジタルマンガの動的な表現技法を実現するためのコミュニティグループが発足、マンガ家や編集者などの参加を呼びかけ | HON.jp News Blog
http://www.yoga-lava.com/special/dhalsim/
Honoka - 日本語も美しく表示できるBootstrapテーマ
