タグ

関連タグで絞り込む (247)

タグの絞り込みを解除

Web制作に関するpmakinoのブックマーク (3,430)

  • 人に優しいフォームを作ろう、特に日本人に

    皆さん、フォーム作ってますか? Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも

    人に優しいフォームを作ろう、特に日本人に
  • ボタンをaタグで作るな高校校歌 - 弁護士ドットコム株式会社 Creators’ blog

    まずはこちらをお聞きください。 技術的解説: ボタンを a 要素で作るな a 要素は URL などへのリンクをつくるためのもので、button 要素はなんらかの処理を起動するボタンをつくるためのものです。 配置されるものがリンクなら a 要素で実装し、ボタンなら button 要素で実装すべきです。 これに違反すると、意図しない動作や、アクセシビリティ上の問題が発生します。 これは MDN でも詳しく説明されています。 onclick イベント -- \<a>: アンカー要素 - HTML: ハイパーテキストマークアップ言語 | MDN よく見られる誤った使い方として、擬似的なボタンを作成するためにアンカー要素を使用し、href を # または javascript:void(0) に設定してページの再読み込みを防ぎ、click を待ち受けするようにするというものがあります。 これらの偽の

    ボタンをaタグで作るな高校校歌 - 弁護士ドットコム株式会社 Creators’ blog
  • 「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、「アクセシビリティを向上させたいなら、HTMLの disabled 属性ではなく、aria-disabled 属性を使うべき」という主張を見かけますが、当にそうなのでしょうか? disabled属性を使っていても、スクリーンリーダーで要素を知覚できる そのような主張をしている人、それを受け止めた人の中には「 disabled 属性を使った要素はスクリーンリーダで読めなくなる」と誤解している人が少なからず存在するように思われます。しかしこれは正しい理解ではありません。 たしかに、disabled属性を付加している button 要

    「絶対にdisabled属性を避けて、aria-disabled属性を使わなければならない」わけではありません - Qiita
  • 全国各地の自治体ホームページが閲覧できなくなる障害 | NHK

    30日午前、全国各地の自治体のホームページが閲覧できなくなる障害が起きました。その後、順次復旧し、各自治体はホームページの管理を委託している会社と連絡をとって原因を調べています。 三重 名張市 復旧も原因を調査 このうち三重県名張市では、30日午前8時ごろ、市のホームページが閲覧できなくなっていることに、職員が気付いたということです。 ホームページは民間のシステム会社が所有するサーバー上に設けられ、この会社にシステムの管理を委託していて、市によりますとサーバーで不具合が発生したということです。 ホームページのアドレスにアクセスすると、「エラー」と表示される状態になり、システム会社で復旧作業を進め、昼すぎに復旧しました。 不具合の詳しい原因はわかっていないということで、原因を調べています。 福岡県でも30日午前中、糸島市と大野城市、それに粕屋町の3つの自治体のホームページが閲覧できなくなりま

    全国各地の自治体ホームページが閲覧できなくなる障害 | NHK
    pmakino
    pmakino 2024/07/30
    「ホームページを管理しているのは▽糸島市が「ジー・サーチ」、▽大野城市と粕屋町が「富士通Japan」で、いずれも「富士通」のグループ会社」
  • ウェブサイト制作では、游ゴシックはおすすめしない理由

    ウェブサイト制作では、游ゴシックはおすすめしない理由こんにちは、こんばんは!せきゆおう です。 游ゴシックは好きですか?僕も印刷物では使いますが、ウェブサイトでは「游ゴシックを使ってください」と指示されるまでは使いません。 また、そう指示された場合もデメリットは必ずお伝えするようにしています。 「游ゴシックってMacでもWindowsでも標準でインストールされているし、デバイスフォントとして使う際に最有力候補では?」という方も多いです。それでも僕は推奨しません。 その理由は4つあります。 ・游ゴシックはWindowsでかすれて見える ・スマホ端末に游ゴシックは搭載されていない ・実はMacOSで游ゴシックは標準では搭載されていない ・今後、システムフォントとして使えないブラウザが増える それら4つの理由を参考資料を交えつつ解説したいと思います。 その前に...游ゴシックの採用率は非常に高い

    ウェブサイト制作では、游ゴシックはおすすめしない理由
    pmakino
    pmakino 2024/06/12
    「実はMacOSで游ゴシックは標準では搭載されていない」<知らなかった。10年近くも前に状況が変わっていたのか…
  • 音声読み上げや文字の大きさの変更について

    横浜市ウェブサイトを閲覧していて「ページを読み上げて欲しい」「文字サイズを変更したい」と感じた方は、端末の設定変更やウェブブラウザ(ウェブサイトを閲覧するためのソフト)の機能の活用をお願いします。 このページでは、設定変更や機能の活用方法、端末やウェブブラウザのサポートページへのリンクを掲載しています。利用している端末によって機能が異なったり、機能が更新・変更されることもあるため、最新の情報はサポートページを確認してください。

    音声読み上げや文字の大きさの変更について
    pmakino
    pmakino 2024/03/28
    「文字拡大・音声読み上げツールは、次の理由から、『ウェブアクセシビリティ導入ガイドブック(デジタル庁)』で非推奨とされているため、横浜市では令和6年3月27日に提供を終了しました。」<100回「いいね」したい
  • UIの色を変えただけで大量のクレームを頂戴してしまった話|のなと

    Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の1要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑&黄」から「緑塗り&緑枠線」に変更しました。「え、それだけ?」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが

    UIの色を変えただけで大量のクレームを頂戴してしまった話|のなと
    pmakino
    pmakino 2024/03/07
    「色で見分けづらくなって不便」という話かと思ったら「白抜き文字がチカチカ」だったのは自分も意外だった。他の方の反応によれば白抜きは年配の方が拒否反応を示すことが多いとのことで、その点学びがあった。
  • 任天堂、Webサイトのドメイン変更へ 26日から 「nintendo.com/jp」に

    ドメインの変更は26日に実施。旧URLへアクセスしても自動的に新URLへ転送されるという。会社情報やサポートページなどは旧URLのままで、変更はないとしている。 関連記事 任天堂、「Newニンテンドー3DS」など3製品の修理受付を終了へ 部品は在庫限り 任天堂は13日、携帯ゲーム機「ニンテンドー2DS」「Newニンテンドー3DS」「Newニンテンドー3DS LL」の体について、現在保有している部品在庫がなくなり次第、修理サービスを終了すると発表した。 3DSとWii U、オンラインプレイは4月9日で終了へ 任天堂は、ニンテンドー3DSとWii Uのソフトでのオンラインプレイなどのサービスを4月9日で終了すると発表した。 任天堂、被災した製品の無償修理を発表 保証書の有無問わず 任天堂は16日、令和6年能登半島地震により被災したゲーム機などの任天堂製品を無償修理すると発表した。 ゆうちょ銀

    任天堂、Webサイトのドメイン変更へ 26日から 「nintendo.com/jp」に
    pmakino
    pmakino 2024/02/25
    「理由は「サーバ環境の整備に伴ったもの」と説明」<何の説明にもなってないのは気になるが、「旧URLへアクセスしても自動的に新URLへ転送される」なので好きにすればいい
  • 【お願い】広告ブロッカーの除外設定をお願いします。 - すまほん!!

    広告ブロッカーの除外設定に、ドメイン「smhn.info」を追加するようお願いいたします。 お願いするに至った背景と、解除方法について解説します。 広告ブロッカーの浸透は「現状、やむを得ない部分がある」 すまほん!!は、主に広告掲載収入によって日々の取材、レビュー、記事更新を行っています。 最近、アプリストアのランキング上位に広告ブロッカー(Adblock)が表示される例が見られ、浸透している様子がうかがえます。弊誌の広告収入も減少しています。 確かに、最近では日の各種大手媒体が「画面を埋め尽くすほど異常に大量の広告を表示する」「記事タイトルのリンクをクリックしても、記事ではなく利用者の意図しない全画面広告を表示する」「バックキーの操作を乗っ取って広告を表示して戻るのを妨害する」などの極めて悪質な手法を取るようになっています。 Google、広告業者、大手メディアの著しい劣化であり、この

    【お願い】広告ブロッカーの除外設定をお願いします。 - すまほん!!
    pmakino
    pmakino 2023/12/24
    「弊誌は今後も広告の表示量を抑え、視界を奪う全画面広告やブラウザの基本操作を妨害する悪質な広告を表示しません。」<そう言っていただけるならと除外設定しました
  • Accessibility overlays

  • アクセシビリティオーバーレイってなんなのか - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こちらの記事を書いた際にコメントでもらった、アクセシビリティオーバーレイに関して調査してみました。 Qiitaで調べてもアクセシビリティオーバーレイに関して言及している記事は1件も見当たりませんでした。教えてくださった方にとても感謝です。 アクセシビリティオーバーレイとは しっかりとした定義はないですが、WCAGに準拠したWebのアクセシビリティを提供するSaaSのことです。JavaScriptを使ってサイトをを上書きしてアクセシビリティを提供するツールみたいです。大体サイトの右下にボタンがあり、それをクリックするとWCAG準

    アクセシビリティオーバーレイってなんなのか - Qiita
  • CSSのword-break: auto-phraseで日本語の分節で自動改行できる

    word-break: auto-phraseとは 日語テキストで分節に応じた自動改行ができるCSSプロパティおよび値。 日語テキストで分節に応じた自動改行をするには「lang="ja"」が必要です。 日語のほとんどのWebサイトの場合、htmlタグに「lang="ja"」が付いているので、以下のサンプルの見出しのように「lang="ja"」が追加で必要になることは少ないです。 word-break: auto-phrase の有無で以下のように改行位置に違いが生じます。

    CSSのword-break: auto-phraseで日本語の分節で自動改行できる
    pmakino
    pmakino 2023/12/07
    これがもっと早く実装されていれば、「あなたとJAVA, ↓今すぐダウンロー↓ド」になってしまうこともなかったのに…
  • SEOにリスク大! サイト貸し(寄生サイト)とは?|専門家が漫画で解説 | Webのコト、教えてホシイの!

    SEOにリスク大! サイト貸し(寄生サイト)とは?|専門家が漫画で解説 | Webのコト、教えてホシイの!
    pmakino
    pmakino 2023/11/28
    こういう話があること自体初めて知った。やばそうにしか見えない。しかしそういう意味では広告も大差ないね。
  • 堺市のキャンペーンHPのドメイン 第三者が再使用 市が注意喚起

    堺市は7日、今年2月まで実施していた旅行キャンペーンのホームページ(HP)のドメインが第三者に使用されていると発表した。被害は確認されていないが、市とは無関係として注意を呼び掛けている。 市によると、市内を観光する旅行者に助成を行う「堺旅キャンペーン」のHPのドメインとして「sakaitabi.jp」を使用していたが、キャンペーン終了に伴い、3月でHPを閉鎖しドメインを手放した。 他の自治体で過去のドメインが第三者に使用されていたとの報道などを受け、市が調査したところ、10月中旬にこのドメインがオークションサイトに出品されていることが発覚。11月1日には、市と無関係なサイトのドメインとして使用されていることを確認した。運用者や運用目的は不明という。 市は、堺旅キャンペーンのHPとしてこのドメインを掲載していたホテルや旅行会社などにリンクの削除を依頼。市民にも注意を呼び掛けており、今後は取得

    堺市のキャンペーンHPのドメイン 第三者が再使用 市が注意喚起
    pmakino
    pmakino 2023/11/08
    「今後は…「lg.jp」を使用するなどの対策を検討」<これだとあたかもこれまでそういうポリシーがなかったかのように見えるけど本当かな? あったけど統制取れてなかったのではないの?
  • 悪名高きスワイプ広告を解析する - Qiita

    この記事の概要 ユーザーから嫌われている広告の1つに「スワイプ広告」というものがある。 誤タップをしやすいことが理由だが、あまりにもこの広告だけ誤タップするため調べたところ 実は誤タップしたように見せかけて意図的に広告先に遷移させる広告であるということがわかった。 スワイプ広告とは、左右にスワイプすると画像がついてくるタイプの広告である。 スワイプ広告とは スワイプ広告とは、主にアフィリエイトサイトで見られる広告形式の一つである。 ユーザーは指で画面上の広告を左右にスワイプすることで、広告画像を切り替えることができる。 スワイプによるインタラクティブ性を活かし、複数のメッセージやメディアを使い、魅力的な広告体験を提供することが特徴である。 なぜ悪名高いのか しかし、スワイプ広告はユーザーから嫌われている。その理由は、誤タップを誘発しやすいからである。 誤って広告をタップして画面が遷移してし

    悪名高きスワイプ広告を解析する - Qiita
  • CHRONO CROSS: THE RADICAL DREAMERS EDITION | SQUARE ENIX

    のどかな島の海辺にある村で暮らす少年セルジュは、 ある日突然他の世界に迷い込む。 そこには、同じように見えて 全く別の世界が広がっていた。 仲間と共にふたつの世界を行き来しながら、 自分の存在と世界の未来の因果関係を解き明かす、 時空を超えた 壮大なドラマが始まる。

    CHRONO CROSS: THE RADICAL DREAMERS EDITION | SQUARE ENIX
    pmakino
    pmakino 2023/08/03
    このサイト、スマホで縦スクロール操作すると横スクロールしていくのがめっちゃ気持ち悪い。さらに横スクロール操作には無反応。そして普通に見辛い。これはさすがに悪手じゃない? おかげで元々の興味が吹っ飛んだ。
  • デジタル庁のサイトやばすぎるwww - Qiita

    Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに みなさん、デジタル庁のサイトはご覧になったことはありますか?今話題のデジタル庁です。 こちらが2023年6月現在のデジタル庁のサイトです。やばくないですかこれ?最初見たときこれ「やっばw」と思いました。これからこのサイトのやばさを語っていきたいと思います。 洗練されたシンプルさ、そしてデザイン 僕は最初見たときびっくりしました。「なんてシンプルで見やすいんだ!」官公庁のサイトですよ?官公庁のサイトといえば、細かい字がずらっと並んで見づらいイメージでしたが、デジタル庁のサイトはとことんシンプルさを追求して見やすくしてます。フォン

    デジタル庁のサイトやばすぎるwww - Qiita
  • トップページ以外の流入を想定せず サイト刷新で利用者アクセスに支障

    IT化を推進する情報処理推進機構(IPA)が2023年3月、Webサイトを刷新した。しかし直後から「必要な情報が見られない」といった批判がSNSなどで殺到。WebサイトのURLを変更した上にリダイレクトも設定していなかったことが原因だ。利用者がどうサイトを使っているかを理解せず、プロジェクト中に複数の判断ミスを重ねた。半月後には使い勝手を改善させたものの、IPAのずさんな刷新計画は、IT関係者に衝撃を与えた。 以前からブックマークしていた情報処理推進機構(IPA)のWebサイトにアクセスすると、「404 Not Found」が表示される――。 IPAがWebサイトを刷新した2023年3月31日以降、TwitterなどのSNS(ソーシャル・ネットワーキング・サービス)で、このような投稿が相次いだ。「404 Not Found」とは、Webサイトが既に存在しないことを示すステータスメッセ

    トップページ以外の流入を想定せず サイト刷新で利用者アクセスに支障
    pmakino
    pmakino 2023/05/26
    「トップページ以外から各コンテンツにアクセスする導線を想定していなかった」「Webクローラーのように、ロボットがWebサイトを見に来るといった使い方があることも考えていなかった」<どうして…
  • 「BIZ UD」フォントが「Google Fonts」へ ~モリサワのユニバーサルフォント/ライセンスは「SIL Open Font License 1.1」。すでにカスタムフォントも

    「BIZ UD」フォントが「Google Fonts」へ ~モリサワのユニバーサルフォント/ライセンスは「SIL Open Font License 1.1」。すでにカスタムフォントも
  • IPAのサイトリニューアルで「404エラー」多発、一体なぜ? 経緯を聞いた

    情報処理推進機構(IPA)の公式Webサイトリニューアルにおいて、多くのページにリダイレクト設定がなされず問題視されていた件を巡り、IPAは4月3日「ご不便をおかけしまして大変申し訳ありません」と謝罪した。 IPAは3月31日に公式Webサイトの全面リニューアルを実施。モバイル端末からの閲覧を意識したデザイン改修、コンテンツへの導線の改善などを図ったとしていた。その中で多くのページのURLも変更したが、リダイレクト設定がほとんどなく、既存のリンクを開いても「404 Not Found」とのみ表示されることが問題視されていた。 謝罪文によると、リニューアルに際して「安定的なレスポンスの確保を考慮し、リダイレクト対象とするコンテンツを選定した」という。しかし、多くのユーザーがIPAのコンテンツを資料として使っており、その影響について認識が不足していたのが原因の一つとしている。 なぜ「404エラ

    IPAのサイトリニューアルで「404エラー」多発、一体なぜ? 経緯を聞いた
    pmakino
    pmakino 2023/04/04
    「全部リダイレクトさせると、Webサイトへのアクセスが遅くなる懸念があると(ニッセイエブロから)聞いていて」に疑問を持った方はこちらをどうぞ→ https://twitter.com/pmakino/status/1642930062768115713