Hatena Blog Tags
はてなブログ トップ
Webアクセシビリティ
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Webアクセシビリティ

(ウェブ)
【うぇぶあくせしびりてぃ】

障害者や高齢者を含むすべてのユーザーに対するwebコンテンツへのアクセスのしやすさ。
2004年、W3Cがガイドラインを勧告。

かいつまむなら、

  • フラッシュのような技術は使わない（そこに書かれている情報を盲人用ブラウザが拾えなかったりする）
  • JavaScriptのような技術は使わない（盲人用ブラウザに対応しているかどうか不明だから）
  • TABLEをレイアウト目的に使わない
  • TABLEを本来の用途に使う場合、欄の説明をきちんと入れる
  • およそ可能な全てのタグにALT属性やTITLE属性を設定する
  • 「○○をするには<a href="url">ここ</a>をクリック！」のようなリンクは避ける。（盲人用ブラウザでは、「ここ」としか発音されず、その行き先がわかりにくい場合が多いから）

等々。

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
弁護士ドットコム株式会社 Creators’ blog•18日前

なぜボタンは button 要素で作るべきなのか、div 要素をボタンにすることを通して考える

この記事を読むとわかること なぜボタンを button 要素で作るべきなのか、その理由 どーーーーーしてもボタンを別の要素で作らなければいけないとき、何をすればいいか 答え button 要素を使ったときに得られる標準動作を捨ててまで得られるメリットがないからです。 HTML の標準に従って、適切な要素を用いて開発することが重要です。 そもそも HTML (HyperText Markup Language) は、ドキュメントの構造や意味を印付けして表すためのマークアップ言語です。 ボタンにはボタンであるという印、つまり button 要素を用いるのが理にかなっています。 button 要素の…

#HTML#アクセシビリティ#Webアクセシビリティ#動作検証

関連ブログ

エニグモ開発者ブログ•9ヶ月前

自社サービスで必ず達成しておきたいウェブアクセシビリティ対応についてまとめました

こんにちは。株式会社エニグモにてフロントエンドエンジニアを務めています新井です。 こちらは Enigmo Advent Calendar 2023 および アクセシビリティ Advent Calendar 2023 の 14 日目の記事です。 はじめに：ウェブアクセシビリティとは？ 1. ページ内の見出しの最適化 2. リンクや状態の判別を色の変化だけで行わないようにする 3. キーボード操作時のフォーカスインジケーターは非表示にしない 4. クリッカブルな要素の実装には a タグまたは button タグを使用する 5. 画像の代替テキストの指定と装飾的な画像の取り扱い 6. フォームコント…

#HTML#CSS#JavaScript#Webアクセシビリティ#アクセシビリティ#Advent Calendar 2023#Webデザイン
note•3年前

記録：『Web24』というイベントに出ました

2つ前の記事で告知を出してた、Web24というイベントに、無事登壇（どちらかというとパネラー？）を果たした。あれからもう1週間経ってしまったとは……早い。 このイベントは「登壇者も主催、みんなで作る」をモットーに構築されていたため、参加後記をすべく特記を以下でまとめる。 まずは、参加いただいた方々、それに声をかけてくださった運営の方々にお礼申し上げる。 「アーカイブ配信なし」の試み 場外セッション「残り香的なもの」と言い残し UDトーク

#web24#a11y#アクセシビリティ#Webアクセシビリティ
note•3年前

わたしとWebアクセシビリティ

わたしは「Webアクセシビリティ」というものに、ライフワーク的に取り組んでいる。 と、言い切っていいはず。少し気恥ずかしいけれども、これまでそんなことを触れ回ったことはないので、そろそろ改めて記録するべきだと思って書いている。 これはポートフォリオの一部のようなものでもある。 というのも、イベントやセミナーにお呼びいただいて登壇などの機会が、ありがたいことに増えてきている（後述）。あるいは、何らかの場でコメントを求められたり、Twitterでイベント中のリアルタイムレポートを（偉そうに！）したり。 そんな時にふと、「出自のわからないヤツが四の五の言ってて、周りの人はどう思うのだろう……」と考え…

#a11y#アクセシビリティ#Webアクセシビリティ
クラウドワークス エンジニアブログ•4年前

クラウドワークスのフロントエンド活動を振り返る 2020

この記事はクラウドワークスアドベントカレンダー１日目の記事です。 クラウドワークスでフロントエンドの可能性を模索し続けている @yamanoku です。 アドベントカレンダーを今年もやっていきます。初日の盛り上げ手としてよろしくおねがいします。 フロントエンド活動の振り返りをしてみよう クラウドワークスでは現在、フロントエンド専属のエンジニアチームというものは存在しません。 その代わりにサーバーサイド（Ruby on Rails）も併せてフロントエンド開発するのが基本体制となっています。 各チームごとでのフロントエンド開発の悩みやノウハウといったものは存在するのですが、それらを全体を通してうま…

#フロントエンド#Vue.js#JavaScript#Atomicデザイン#Webアクセシビリティ
techtekt•7日前

Webサイトの完成度を高める方法と心構え

はじめに こんにちは。はたらく未来図構想統括部 PERSOL_MIRAIZ部 MIRAIZエンジニアリンググループにて、PERSOL MIRAIZ を開発している大威です。 現在スクラムチームで開発に取り組んでおり、企画、デザイナー、エンジニアといった職種が異なるメンバーとタッグを組み、ワンチームで機能開発を行っています。 スクラムチームで開発を行っていく中で、デザイナー観点でのFBや、実際の開発現場での遭遇したWebサイト / UI開発において気をつけておくべきポイントがありました。私が関わっているMIRAIZだけではなく、さまざまなプロダクトやサービス開発に対しても応用できるポイントとなり…

水底の血•12日前

（メモ）地方自治体のアクセシビリティJIS試験の提示について

ある方面ではおなじみの調査、自治体サイトWebアクセシビリティ調査 2024 – 有限会社ユニバーサルワークスについて、ざっくり眺めた感想とか。 今年5月に公開された「みんなの公共サイト運用ガイドライン（2024年版）」では、実際のウェブアクセシビリティ品質と公開されている試験結果や準拠状況との間に差異があるとの指摘がなされています。今回の調査は、自治体公式サイトにおける試験の実施状況と試験結果に関する書式や記載内容を明らかにし、規格や指針に即していない点、今後の取り組みを進める中で優先してほしいことなどを記しました。 書式が使い回されている疑惑のあるページがある -JIS X 8341-3:…

ぜにのQAブログ•13日前

JaSST新潟参加レポート

今回は8/9（金）に開催されたJaSST'24 Niigataに現地参加してきたので、参加レポートを書いていきます！ もくじ 基調講演 現地の様子 おまけ 基調講演 今回のJaSST新潟テーマは「アクセシビリティ」ということで、山本怜さんが基調講演に登壇されていました。 資料： このあと13:00からのJaSST '24 Niigata 基調講演の資料を置いておきます #jasstniigata「いま求められるソフトウェアのアクセシビリティ」https://t.co/ixbfF2Vs7C — ymrl (@ymrl) 2024年8月9日 学んだこと アクセシビリティとは、障がい者のためだけのも…

KEPPLE CREATORS BLOG•14日前

2024年8月 JavaScript Tech Talk / アクセシビリティ

こんにちは！KEPPLE CREATORS LAB エンジニアの吉田です。私たちは、月に１度フロントエンドに関連する勉強会をゆるーーく開催しています。 今回の内容 少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック 前回に続き、HTMLとCSSを活用して、使いやすさとWebアクセシビリティの向上についてになります。 以前の記事も合わせてご覧いただけますと幸いです！ https://blog.lab.kepple.co.jp/entry/2024/07/12/080000https://blog.lab.kepple.co.jp/entry/2024/08/02/…

NEXTSCAPE blog•15日前

Webアクセシビリティ、WCAGについて調べてみた

Webアクセシビリティとは？ 株式会社ネクストスケープ、ソリューションビジネス部所属の小野塚です。Webサイト開発に携わったことがある方であれば「Webアクセシビリティ」という言葉、もしくはそれに関連する言葉を見聞きしたことがあるかと思います。より具体的に言いますと、海外であれば「WCAG」（Web Content Accessibility Guidelines）、日本であれば「JIS X 8341-3:2016」といったWebアクセシビリティに関する基準が存在しています。特に官公庁等の公的機関のホームページ・サイトに携わった方であればご存じではないでしょうか。 ここ近年、このWebアクセシ…

もちポケ記録•1ヶ月前

対戦画面読み上げの舞台裏 モニターテスト編

ポケモン対戦画面読み上げアプリのエモい開発記録、第2弾です。今回はモニターテスト開始から初版公開までの話をします。 視覚が使えないプレイヤーとの対話を重ね、当事者のプレイング環境についての理解が深くなるだけでなく、開発スタンスにも大きな影響を受けました。ついでに、このアプリのソースコードに関するポリシーにも言及しています。

KEPPLE CREATORS BLOG•1ヶ月前

2024年7月 JavaScript Tech Talk / アクセシビリティ

こんにちは！KEPPLE CREATORS LAB エンジニアの吉田です。私たちは、月に１度フロントエンドに関連する勉強会をゆるーーく開催しています。 今回の内容 少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック 前回に続き、HTMLとCSSを活用して、使いやすさとWebアクセシビリティの向上についてになります。 前回の記事も合わせてご覧いただけると幸いです！ HTML/CSSを使ったユーザビリティとアクセシビリティの向上 以前のJavaScript Tech TalkでもCSSの進化が話題になりましたが、2024年6月4日からウェブアクセシビリティ義務化によ…

pdfeditor-knowledge’s diary•1ヶ月前

PDFファイルの読み上げを利用してワンランク上のユーザーになろう！

/*シンプル角丸（影）枠 3*/ .kakomi-maru3 { margin: 2em auto; padding: 1em; width: 90%; /* ボックス幅 */ background-color: #EEFFFF; /* ボックス背景色 */ color: #666; /* 文章色 */ box-shadow: 0 0 5px 1px #c0c0c0; /* 影 */ border-radius: 10px; /* 角の丸み */ } 「PDFファイルを音声で聞きたいな」 そうお考えの方へ。PDFファイルを読み上げることのできるアプリや方法をお伝えします。活用していただけたら幸…

GameWith Developer Blog•2ヶ月前

お役立ちハウスって結局なんなの？その実態に迫る！ #GameWith #LT会

サービス開発部のdanaです！ 今回はこのブログでも度々出てくるワード、お役立ちハウスについてご紹介します！ お役立ちハウスって結局なんなの？ お役立ちハウスはGameWithで過去に行っていたLT会から独自進化した活動です。 リモートワークが基本となっている中で、社員同士で交流をする機会として機能しています。 主に以下のカテゴリで様々な活動を行っています。 LT みんなでやってみる 知見共有 遊ぶ ディスカッション 元となっているLTに加え、誰でも気軽に参加できるように間口を広げた形になりました。 今回はLT以外のカテゴリについて、過去の活動からいくつかを振り返りながら紹介します。 ちなみに…

ASKUL Engineering BLOG•2ヶ月前

デザインシステム構築によるフロント開発環境改善

こんにちは。アスクル初のデザインエンジニアになることを目論んでいる現フロントエンドエンジニアの谷です。 本記事では、サイトのフロント刷新のために1からデザインシステムを構築したという取り組みについてご紹介します。

かすてらすねお。•2ヶ月前

【テキスト起こし】はままつレインボープライド2024会場内で行われた企画についてのお詫び

テキスト起こしをするに至った経緯 先月の 2024年 6月 10日に「はままつレインボープライド 2024」というイベントが浜松で行われました。 私はそこで当日ボランティア活動をしていました。 ところが、ある私の友人が同イベントに来場した際に、実施されたアンケート企画に遭遇してひどく傷ついたと、その夜に教えてくれました。 これを聞いて深刻だと思った私は、帰宅後に実行委員宛にアンケート企画の問題点を指摘する文書を作成して実行委員宛に送りました。 それを受けてかは分からないのですが、翌昼、公式ホームページと Instagram に、お詫びが掲載されました。 そのお詫びは、Word か何かで書かれた…

meetaps | あらゆる人と、メタップスHDが交わる場所•2ヶ月前

イベントレポート「第3木曜LT会 #6」を開催しました！

こんにちは。re:shineチームの宇田川海人です。𝕏では @kaitou1192 でやっています。今回は6月20日に開催した第6回目の「第3木曜LT会」についてのレポートです。 第3木曜LT会とは？ 毎月第3木曜日にWeWork 渋谷スクランブルスクエアの共有スペースで行っているLTイベントです！さまざまな方に登壇していただき、ITエンジニア同士で盛り上がるお話、ちょっとためになるお話をしていただいています。 今回の内容について 今回も6名の方に10分の持ち時間でご登壇いただきました！ WebはReact, アプリはReact Nativeってどーなの？鏡 諒平さん（株式会社メタップスホール…

水底の血•3ヶ月前

Re: HTMLのルート要素ではcolorとbackground-colorをセットで指定すべき

ちょっと間が空いて、亀リプっぽくなっちゃいましたけど、HTML のルート要素では color と background-color をセットで指定すべきというお話について。 昔からブラウザには配色設定があり、テキスト色と背景色をユーザーが任意に指定できます。 ……という話は Web アクセシビリティとフェイルセーフの記事に以前書いたのでその詳細は省略しますが、WCAG 2.2 達成方法集の F24(W3C) において達成基準 1.4.3（レベルAA）などの失敗事例として掲載されているにも関わらず、このことは世間ではなぜか認知が薄いようです。 認知も薄いというか、私も言われるまで気づかなかったあ…

Stratus_KLABの日記•3ヶ月前

障害者のジレンマ

障害持って 困ったこと収入を得る手段が極端に少ない。 特に就労！始めの頃は、障害者枠でのを目指したが、半身麻痺の上、眩暈もあるので通勤しないリモートで探したが、全くといって見つからず。リモートワークもコロナでかなり普及したのではと思っていたが、完全に当てが外れました。 元々はプログラマーでWEB制作で自営していたが、狭心症で入院を機に廃業し住宅営業をしていた経緯もあり１０年近くのブランクの為か全く見つけられずハローワークの障害者のためのリモートワーク講座を受けて再度、試みたがやはり駄目で、就労支援B型でリモートを選択することになる。 障害年金、障害級数、介護保険など障害福祉関係に連絡し受けれる…

障害者の日常ブログ0802•3ヶ月前

6：　「視覚障害者の雇用支援：キャリアの機会と職場の課題（2）」

6： 「視覚障害者の雇用支援：キャリアの機会と職場の課題（1）」続き 目次7. 視覚障害者の働き方 7.1 在宅勤務とリモートワークの可能性 7.2 成功事例と課題 8. 職場での課題と差別 8.1 職場での差別の現状 8.2 課題解決に向けた取り組み 9. マインドセットと意識改革 9.1 視覚障害者のマインドセット 9.2 社会全体の意識改革 10. 視覚障害者雇用の未来 10.1 未来の働き方と技術 10.2 SDGsと視覚障害者の雇用 11. 参考文献・リンク 11.1 役立つリソースと情報源 11.2 関連するウェブサイトの紹介 12. 結論 12.1 視覚障害者の雇用支援の意義 1…