Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
ＨＰ開設22周年記念コラム
「持続可能な云々」とは最近よく聞く言葉ですが、このホームページも持続可能型、つまりずっと続けられる事を目指して製作しました。平たく言えば、一度作ったらあとは更新せずほったらかしにしても差し支えなく、頑張らなくても大丈夫なようにと最初から考えていたのです。だから管理し続けなければならないＢＢＳ（＝掲示板：もはや懐かしい言葉ですね）も設置しませんでした。 『幽幻道士』が初めて日本で放送されたのは1987年で、『テンテンメモリアルHP』を開設したのは1999年だから、ホームページ開設時はキョンシーブームからまだ10年ぐらいしか経っていなかった事になります。このコラムを書いているのは2021年ですから、キョンシーブームからホームページ開設までの時間よりも、ホームページ開設後の時間のほうがすっかり長くなりました。もはやこのホームページ自体がノスタルジーです（笑）。 更新しなくても大丈夫なように作った
調べて、整理して、発信するのが好き。「とほほのWWW入門」管理人が26年間も更新を止めない理由｜tayorini by LIFULL介護
調べて、整理して、発信するのが好き。「とほほのWWW入門」管理人が26年間も更新を止めない理由 #老後も楽しむ 公開日 | 2022/12/12 更新日 | 2023/01/26 インターネットが世の中に急速に普及した、1990年代後半から2000年代前半ごろ。当時はまだ、ブログやSNSといった手軽な情報発信ツールが一般的ではありませんでした。 そんな時代に情報発信をするにはWebサイトが必要で、Webサイトを制作するためには専用のHTML言語を習得する必要がありました。 書籍だけでなくインターネットにもHTMLを学べるコンテンツはさまざまありましたが、中でももっとも多くの人が参照したであろうサイトが「とほほのWWW入門」。Webサイト制作に関する膨大な情報がきれいに整理されており、素人でも分かりやすくHTMLについて学習できる「先生」のような存在です。 とほほのWWW入門は1996年に開
なぜ、ハイパーリンクは青色なのか?
Mozillaブログより。 エリーゼ・ブランチャード インターネットは私たちの生活のあらゆる場面に浸透していますが、デジタルの世界では当たり前のように使われているものがあります。それは、多くのリンク、特にハイパーリンクが青色であることに気づいたことがありますか? 同僚が何気なく「なぜ、リンクが青いのか」と聞かれた時、私は戸惑いました。2001年からウェブサイトを制作しているユーザ・エクスペリエンス・デザイナーの和tがしは、常にリンクを青くしてきました。私は青の特定の色調を提唱してきました。しかし、「なぜリンクが青なのか」と疑問に思ったことはありません。それはただの事実でした。草は緑で、ハイパーリンクは青です。文化的に、私たちはリンクを青色に関連付けているため、2016年にGoogleがリンクを黒に変更したときには、かなりの混乱が生じました。 しかし今、私は「なぜ、リンクが青なのか」と言う疑
4Gamerは，20周年を迎えることができました
4Gamerは，20周年を迎えることができました 編集長：Kazuhisa 20周年バージョンのロゴ。今年の1月以降の名刺は全部このロゴに差し替わっているので，見たことがある業界の方もいるかも。1年間限定です 本日8月18日に，4Gamerは20周年を迎えました。2000年8月18日に最初の記事を公開してから，20年です。 4Gamerというサイトは，実は一番最初は白基調のデザインだったんです（あまり知られていません）。当時想定していたPC環境とは横の解像度がけっこう違うので，少々間延びしてますが。それにしても20年前の自分の原稿を読むと，さすがにちょっと恥ずかしい…… 仕事柄，記事くらいは書けるけど，htmlは知らない，デザインも出来ない，プログラムも組めない，そんな私が始めたサイトがここまで来られたのは，素晴らしい作品を作ってくれる業界の皆様と，記事を読んでくれる読者の皆様，そしてこの
「娘に情報が古いと指摘されます」 老舗サイト「とほほのWWW入門」の管理人ってどんな人？ | HRナビ by リクルート
90年代後半から2000年代にウェブ制作を経験した者なら『とほほのWWW入門』と聞いて、ピンと来ない人はいないだろう。同サイトは、HTMLやJavaScript、Ruby、Pythonなどの基礎知識が学べる、ウェブ制作初心者にとってはバイブルのような、とてもありがたい存在だ。サイトが開設されたのは1996年。国内でインターネットが普及し始めた初期からある老舗サイトで、お世話になった人も多いはずだ。 2016年10月を最後に更新がされていないようだが、それでも20年間コンテンツを出し続けるのは、かなり大変なことだったのではないか。同サイトの管理人・杜甫々（とほほ）さんは、いったいどのような人物なのか。サイトを開設したきっかけやインターネット初期の空気感などについて、話を聞いた。 「とほほのWWW入門」管理人・杜甫々さんとは？ ――今回は取材に応じていただき、ありがとうございます。杜甫々さんは
やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog
と思う次第である。以下理由。 JavaScript, GUI設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基盤だが、その中で生き残った方法論が、今一番GUIの課題を上手く扱えている、と自分は考えている。 React/Redux や Angular によって、Flux/MVVMという抽象パターンが枯れてきたように思う。(この際、現場はまだ jQuery だぞ、みたいな話は無視する)。要は View は State の写像である、ということに尽きる。State はシリアライズ可能(JSON)で、Flux Action/Rx.Observable の Event Stream を入力とし、それ
Polyfill のあり方と Web の進化と協調するためのガイドライン | blog.jxck.io
Intro W3C の TAG から、主にブラウザ API の Polyfill に関するドキュメントが公開された。 Polyfills and the evolution of the Web Polyfill は便利な一方で、時として標準化の妨げになってしまう場合があるため、それを避けるために、 Polyfill 実装者、利用者、仕様策定者などが、どう振る舞うべきかという趣旨である。 今回はこの内容を元に、 Web の進化と協調する Polyfill のあり方について、主に「実装者」がどうすべきかに着目し記す。 Web における Breaking Change Breaking Change は、簡単に言えば 後方互換を失うことで既存のものが壊れる可能性がある変更 のことを表す。 そして、 Web における Breaking Change (Break the Web)、具体的には W
フォントの読み込み完了を検知する
TypeKitとかがやってるWebフォントの読み込みが終わったらhtml要素にクラス名を振るアレの話。TypeKitがオープンソースでリリースしているWebFont Loaderを使う方法が安全で安定。Googleがホスティングしているのもあるので手軽でもある。でも読み込み完了の検知以外にも機能があってパワフルすぎる気がするので、Adobe Blankを使って自前で書いてみることにした。 Adobe Blankのサイズ削減 Adobe Blankはそのまま使うと30KB以上ある。読み込み完了検知だけなら幅0のグリフが1つあればそれで良いので、まずはサブセット化してサイズを抑えることから。aだけのWOFFなAdobe Blankを作ればちょうど1KBくらいになる。 Download: adobe-blank.woff @font-face定義の追加 外部リクエストにすると意味が薄れるのでDa
Webコンテンツ、JavaScriptと画像が増加の一方で、Flashは減少傾向に
HTTP Archiveに2011年と2012年のWebサイトにおけるコンテンツの傾向比較が「2011 recap」として発表された。HTTP ArchiveはWebサイトを分析し、どの種類のコンテンツがどの程度転送されているかをまとめているサイト。2011年と2012年のサイト比較ではFlashを除くほかのすべての主要コンテンツのデータ転送量が増加しており、全体としてコンテンツ量が増加傾向にあることがわかる。 「2011 recap」では特に次の2つのデータ変化を指摘している。 Webサイトデータのうち過半数を画像データが占めており、しかも増加傾向にある。増加割合ではコンテンツ種類別で2番目に多い。 JavaScriptの増加率が44%と飛び抜けて高い。画像の増加率の2倍以上の増加率となっている。 コンテンツタイプ(Webサイト平均) 2011年1月 2012年1月 増減の割合
デジタルネイティブじゃない1989年生まれのわたしの話 - インターネットもぐもぐ
この年に東欧革命が起こって冷戦が終わったので、世界史、特にヨーロッパ史では、この1989年以後が「現代」と見なされている[1]。 東欧革命は、2年後にソビエト連邦崩壊をもたらした。 ―1989年 - Wikipedia 1989年は、元号が平成に変わって、消費税3%が導入されて、中国では天安門事件が起きて、東西ドイツを隔てるベルリンの壁は崩壊して、事実上冷戦が集結した年、みたいだ。覚えてるわけがないのだけど。 ソ連が崩壊するのは２年後の1991年。東西冷戦も社会主義国家も教科書のなかの存在で、物心ついたときには隣の国はソビエト連邦ではなくロシア連邦でした。 資本主義が世界の共通ルールだってことが考えるまでもない事実で、アメリカに対する過剰なあこがれも（たぶん、上の世代と比べたら）なかった。 というより、そもそもあまり海外に目が向かなかった。中国や韓国の存在も、意識した覚えすらない。 「アメ
Flashのことを笑っている場合じゃない « ku
Web開発の現状を25のトゥウィートで斬るとこうなる–iPhoneを見捨てたFacebookデベロッパの告白のはなし。 Apple vs Adobeで大揉めしてみんなに楽しい娯楽を提供してくれているけれど、我々ウェブ開発者(というのは大雑把すぎるくくりだけれど)にとってはFlashなんてはなから選択肢に入っていないのだから単なるゴシップでしかない。 でもJoe Hewittの話はひとごとではない。 彼は10年前の2001年にcanvasを実装し[canvas]、Firebugを作り[firebug]、facebookのiPhone向けWeb版を作り、facebookのiPhoneアプリを作りセットでいろんなiPhoneアプリで使われてるthree20を作り、Appleの身勝手にうんざりしてiPhoneアプリはもうやらないと宣言してた。 彼のいまのウェブに対する見方はこのふたつのtweet
自治体サイトWebアクセシビリティ調査2008を終えて 上／アクセシビリティコラム｜ユニバーサルワークス
第67回 自治体サイトWebアクセシビリティ調査2008を終えて 上 （2008年9月1日掲載） 2008年の自治体サイトWebアクセシビリティ調査を終えて、個々のサイトはささやかな成長をしていたり、完全に保守・運用に失敗していたり、リニュリニュサギとか、ガイドラインでっかちとかさまざまなのだが、全体的には昨年度調査時とほとんど変わらない感想を抱いた。 「もう一度言いましょうか。」というノリで毒を吐くことはできるが、昨年度はある自治体のレーダーチャートの大きさとコメントが一人歩きしてしまい、当該自治体やアクセシビリティの業界のみなさんにいくらかのご迷惑をかけてしまったかもしれないという自覚があるので、今年の毒は抑え気味にしておこうと思う。 昨年度同時期のコラムにて、「各自治体ともalt属性を正しく付けることができるようになってきたよ。次のステップとして文書構造を意識してはどうですか。」とい
HTML5が持つ本当の意味 ― ＠IT
2008/01/25 ウェブ関連技術の標準化団体「W3C」（World Wide Web Consortium）が「HTML5」の策定に向けて活動を本格化しました。1月22日には「HTML5」の最初の草案を公開。2010年9月に正式な勧告としてリリースする予定だと発表しました。 普段からウェブ関連技術をウォッチしている方は別として、「なぜ今ごろ？」と、この突然のW3Cの動きに驚かれた方が多いのではないでしょうか。「そもそもW3Cがやる意味があるの？」という疑問の声も聞こえてきそうです。 標準化団体としてのW3Cのプレゼンスは、近年あまりに高いとは言えません。かつて1990年代後半から2000年ごろにかけて、誰もがW3Cの一挙手一投足に注目していた時期がありました。彼らの出してくる標準技術仕様こそが、インターネットを形成する共通言語だと、多くの人が信じていました。 ところが、現在広く使われて
Hatena::agendaを移し終えて (agenda)
昨今コミュニケーションの部分が重視されている「ウェブ」だが、私にとってのウェブは、ハイパーテキストを公開する手段という認識が根本にある。そこで繋がっているのは人ではなく、ハイパーテキストと呼ばれる文書である。 わが国でブログと呼ばれているウェブ上の交換日記は、コミュニケーション手段、あるいは自己顕示欲を満たす手段として使われたらそれでお終いであり、ハイパーテキスト間の繋がりは軽視されている傾向がある。その証拠に、過去の記事で紹介したブログへの数百のリンクの内、アメリカ人のブログへのリンクは殆ど全てそのまま利用できたのに対し、日本人の「ぶろぐ」へのリンクは7割以上がデッドリンクになっていた。つまり記事が消されたか、あるいは非公開にされたのである。もっともアメリカ人といってもウェブに関するリテラシが高くそれで飯を食っている人々ばかりであるから、公平ではない。しかし私がリンクした記事の日本人の著
ウェブ標準、それは状況や環境に左右されない情報伝達を実現するためのもの
何がウェブ標準で、何がウェブ標準でないか一般にW3C、ISO/IEC、IETF、ECMA、IANA、OASISといった国際的な標準化団体やガイドライン策定機関によって発行された技術や仕様、ガイドラインが、ウェブ標準の「標準」で表される技術や仕様であるとされており、「ウェブ標準技術」あるいは「ウェブ標準仕様」という。また、ウェブ標準的な仕様に基づいて定義されたウェブサイトを「ウェブ標準に準拠している」などという。 そういった団体のなかでも、特にW3C（ワールドワイドウェブコンソーシアム）が策定する各種の仕様が、最も「ウェブ標準的」だといえる。しかし、W3Cの仕様であればすなわちウェブ標準なのかというと、必ずしもそうではないのが困ったところだ。なぜこうも曖昧なのかといえば、ウェブ標準とは、「なんとなく標準的な仕様であろうもの」のこと全般を指すからだ。「ウェブ標準」に厳密な定義はなく、ときにはマ
hidetox blog | Webの「標準」って？
この広告は60日以上更新がないブログに表示されております。 新しい記事を書くことで広告を消すことができます。 （2007年6月25日発表ネットレイティングス株式会社調べ） 日本のトラフィックの大部分をしめるサイトにおいて驚くほど「Web標準」は無視されている。 いくら「Web標準」をうったえても変わらないだろう。大手企業が自社運用しているサイト（とくにヤフー、楽天、グーグル、Amazonなど）をやり玉にあげて糾弾でもしていかないと変わらないと思うなー。（PL法やPSEやプライバシー保護のように消費者から企業に変化を迫る） でも、しかし、そもそも「Web標準」って意味あるの？ そういう問いを突き付けてますよ。このランキング結果は。 よくいわれる「SEO」についても、Googlebotがマークアップを参考にしていないという専門家の意見もあるし、当のGoogleがWeb標準な
ニコニコ動画で思い出した、横に流れていくテキスト！
何か大切なことをずっと忘れていて、ずっと思い出せなかったことを、今日ついに思い出しました。 大人気Webサービス「ニコニコ動画」で取り入れられている、「横に流れていくテキスト！」。 ざわ ざわ こうやって流れる文章をHTMLタグで実装して、 「わーい、ホームページ作ったー！！」 って喜んでる人がたくさんいたよね。インターネット初期の頃に。 そのうち、だんだんネットに詳しい人たちが増えてきて、 「うぜぇ、このサイト。まさに厨だな」 とか言い始める人が出て来て、結局廃れたんだっけ。 ケータイサイトでは、割と普通に使われていたのに。 月日の経過と共に、ウザいものがウザくなくなる時代もやってくるのかも。 もちろん、新しいアイディアは必要だけどね ニコニコ動画で思い出した横に流れていくテキストでした おらおら
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
方向音痴アプリの開発&雑用日記
HugeDomains.com
