ドキュメントのアクセシビリティ実現には、レイアウト志向を捨てて構造化志向で計画すること
2024年4月から「障害を理由とする差別の解消の推進に関する法律（障害者差別解消法）」の改正法が施行され、ウェブアクセシビリティへの配慮が義務化されています。これにより、官公庁や行政はもとより、民間企業もウェブアクセシビリティに対する理解と配慮がますます大きな課題となっています。 ウェブアクセシビリティへの配慮というのは言葉としては理解できます。しかし、実際のところ、何を行わなければならないか、具体的にどうすれば良いのかを理解し、それを日々実戦するのはなかなか難しいと感じます。ウェブアクセシビリティについての分かりやすい解説が望まれるところです。 これに関して、デジタル庁のWebページに「ウェブアクセシビリティ導入ガイドブック」（最終更新日: 2025年10月16日）が公開されています。ガイドブックの対象読者は、「ウェブアクセシビリティについて、全く知らない、きちんと触れたことがない方々」
HTTP/1.1 Must Die
HTTP/1 Must Die It's time to acknowledge HTTP/1.1 is insecure Upstream HTTP/1.1 is inherently insecure, and routinely exposes millions of websites to hostile takeover. Vendors have spent six years deploying mitigations, and researchers have consistently bypassed them. In PortSwigger's latest research, we introduce several novel classes of HTTP desync attack, and showcase critical vulnerabilities w
空世界 〜HTMLの永遠仕様探訪記、或いは、文字なきsrcにまつわる寥々たる考察について〜
問題 <img src=""> をブラウザで表示した時、どうなるか知っていますか？わざわざimg要素のsrc属性を空文字列にする機会がないので意外と知らないかもしれません。 もちろん画像は表示されず、(指定していれば)altが表示されます。 img要素のsrc属性を空文字列にすると、リンク切れになることがわかりました！いかがでしたか？(？) そのときHTMLImageElementは JavaScriptでsrcが空文字列のimg要素のDOMインスタンスを確認してみましょう。例として https://zenn.dev/stin を開き、Chrome開発者ツールを使ってsrc属性に空文字列を指定したimg要素を埋め込んでおきます。 そして次のJavaScriptを実行します。 const element = document.querySelector('img[src=""]'); con
The Static Site Guide
This is a book about creating and publishing static websites using HTML, CSS, and the Hugo static site generator. It’s still a work in progress, but you can read the draft chapters here. Table of ContentsA Note From the AuthorIntroductionMaking Your First Web Page (Part 1: Getting Started)Publishing Your Web PageBuilding a Basic Static WebsiteStyling Elements With CSSCreating a Static Website Usin
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
画像が「情報」を持っているかどうかの判断基準、持っていない場合はalt=""を指定しよう
はじめに この記事は、画像を「純粋な装飾のための画像」と見なすか、「情報を持っている画像」と見なすかの判断基準についての私見とともに、それぞれのケースでの実装についてまとめたものです。 この記事での「画像」とは実装レベルではimg要素のことを指します。 結論 画像が削除されても、削除前と同様の情報量、機能を提供できる場合、その画像は純粋な装飾のための画像と考えられます。 「純粋な装飾のための画像」は可能な限りCSSのbackground-imageプロパティを用いて実装する。 実装上の都合によりbackground-imageによる実装が難しい場合はalt=""を指定する。 画像が削除された場合に情報量や機能に損失が生じる場合、その画像は情報を持つ画像だと考えられます。 「情報を持っている画像」の場合は、alt属性に視覚的な情報を伝える代替テキストを指定する。 画像が情報を持っているかどう
FlutterKaigi 2023 ホームページへコントリビュートしました - Qiita
本記事は、YUMEMI Flutter Advent Calendar 2023 5日目の記事です 昨日 4日目 は、同期の@Yo2_enginnerさんによる ゆめみFlutterギルドのキーボードを調査してみた でした。 0. はじめに こんにちは 株式会社ゆめみでFlutterエンジニアをしている もぐもぐ(@YumNumm)です。 よろしくお願いします。 2023年11月10日に開催したFlutterKaigiのWebサイト制作にコントリビュートしたので、今回はその話をしていこうと思います。 1. FlutterKaigiとは? 日本国内でFlutterをメインに扱う技術カンファレンス。 FlutterやDartの深い知見を持つ開発者によるセッションを多数企画します。 (https://flutterkaigi.jp/2023/ より引用) FlutterKaigi 2021からス
HTML: ログイン・ユーザー登録フォームの厳選ベストプラクティス11（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: 11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/05/24 原著者: Andrey Sitnik（PostCSSとAutoprefixerの作者、首席フロントエンドエンジニア） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに ログインフォームやユーザー登録（サインアップ）フォームは、ほとんどのWebサイトで使
HTMLメールの最近の実装方法を解説、tableは不要になりました
HTMLメールの実装で「tableか、、、」とため息をついていた人に朗報です。 tableを使用しなくてはいけなかった理由はWindows上のOutlookだったのですが、新しいOutlookではレンダリングエンジンがEdgeに切り替わります。これにより、tableによる実装は不要になります。 HTMLメールの最近の実装方法を解説します。 Modern HTML email (tables no longer required) by Ollie Williams 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLメールの実装でもっとも頭を悩ませている問題 今日、HTMLメールをどのように実装すべきか？ 電子メール用のAMPについて 終わりに はじめに MailChimpによるHTMLメール実装のベストプラクティ
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
2023年最新版: HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「HEAD」を紹介します。 HEAD: A simple guide to HTML <head> elements 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 以前の版からいろいろと変更されています。 2016年版: head内に記述する要素の総まとめ 2018年版: head内に記述する要素の総まとめ head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記
わたしはページ内検索を普通に使いたい
以前にも少し書いたのですが、ウェブブラウザーで使えるページ内検索による体験が阻害されるのが本当にストレスで、その例を残しておこうと思います。 採用側の気持ちも分かりますので、どうなると皆が幸せになるのか分からないという種類のものなので困ったところです。 省略されたテキストoverflow: hiddenとtext-overflow: ellipsisまたは-webkit-line-clampによってテキストが省略された場合、その省略部分がページ内検索にヒットすると非常に探しづらいです。 特に、グリッドで区切られたアイテムが複数列・複数行で並んでいる際に顕著です。 以前の記事のとおり、わたしはYouTubeでよく遭遇します。 下記のデモは、1000個のアイテムを並べたものです。 このうち、「Red Rose」というワードは12個のアイテムに含まれています。 デモを開いて「Red Rose」で
1ミリ秒でも早く届けたい! HTMLで画像読込を高速化するために取り組んでいること - ICS MEDIA
ウェブサイトの表示スピードはサイトの健全性における重要な観点の一つです。Googleが提唱するCore Web Vitalsコア・ウェブ・バイタルズと呼ばれる指標の中にもサイト表示スピードに関する項目があり、表示されるまでの時間が単なるユーザー体験だけでなく、SEOでも無視できない存在です。表示スピード低下の要因はネットワークやサーバーサイド、そしてフロントエンドまで広範囲におよびます。本記事ではその中でも画像の読み込みについて改善できるテクニックを改善前と改善後を比べながら紹介します。 改善前サンプルを別ウインドウで開く 改善後サンプルを別ウインドウで開く 画像読み込みBefore / Afeter 上図はLighthouseによるチェックの結果です。Lighthouseはウェブサイト検査ツールで、ウェブページのパフォーマンス、アクセシビリティ、SEOなどの状態を計測できます。Googl
ブログをAstro に移行しました - As a Futurist...
式年遷宮の様な感じですが、数年おきにブログを作り直してます(前回)。今回は Gatsby でデザインした UI をほぼそのままに、フレームワークを Astro に移行しました。静的サイトの作成では Astro の開発者体験が最高に優れているので、2 年間ほぼ塩漬けにしてしまっていた Gatsby のコードを無事に移行できてよかったです。 Astro とは？ Astro は 一言で言うと、Better HTML です。Astro というフォーマットでサイトが記述できるのですが、普通の(素の)HTML も Astro としてそのまま使えます。厳密には違いますが、HTML のスーパーセットみたいな感じです。その HTML の要素群を component としてまとめることで関心を分離できて(この辺は Web Components でも実現できます)、必要に応じてビルド時にロジックも走らせることが
Web フロントエンドの実装において本来の機能を損なってはいけない
データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケースも発生してしまいました。見た目上操作に不都合がないのですが、修飾キーが有効でなかったりと、とある要素が当然に持っているべき機能が失われていることがよくあります。 昨今の Web フロントエンドの開発においては、React や Vue.js などを利用した SPA を採用することが多くなりました。従来の MPA と比較して、リンククリック時やフォーム送信時にページリロードを挟まないので、高速な画面遷移を実現できるため、快適な操作を実現できます。 一方データの取得・ルーティング・フォームの値の管理に至るまで JavaScript で制御するようになった結果、本来備わっていた機能を損なう形で実装されるような間違いが起きるケ
Sign-in form best practices | web.dev
Checklist Use meaningful HTML elements: <form>, <input>, <label>, and <button>. Label each input with a <label>. Use element attributes to access built-in browser features: type, name, autocomplete, required. Give input name and id attributes stable values that don't change between page loads or website deployments. Put sign-in in its own <form> element. Ensure successful form submission. Use auto
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML DAY 2025 TOKYO
メールをデザインするなら『Marka Email Generator』Figmaで作ってHTMLでエクスポート！
Flutter WebにHTML要素を貼る | ドクセル
FlutterをHTML elementに埋め込む