タブUIをアクセシブルにする
どうも、nano72mknです。 アクセシビリティを意識してタブUIを作ったので、実装時に調べたことやポイントをまとめます。 タブUIについて まず、初めにタブUIと言われて思い浮かべるのは、この形だと思います。 このUIは、２つのパーツに分けることができます。 １つ目は、「タブ」と呼ばれるパーツ ２つ目は、「タブパネル」と呼ばれるパーツ この２つのパーツをがっちゃんこして、タブUIは出来ています。 タブUIをアクセシブルにする roleとaria属性を付与してアクセシビリティ対応をする。 roleを付与する 付与する必要があるものは下記の３つ tab tablist tabpanel tabとtablist タブにはtab、複数のタブを囲っている要素にはtablistのroleを付与する <div id="tab"> <div role="tablist"> <button role="
先月の話になりますが、State of HTML 2023の結果が公開されました。フロントエンド開発者の方であれば、State of JavascriptやState of CSSをご存じの方もいると思いますが、これらのHTML版ということになります（アクセシビリティBlogでは過去にState of CSS 2023に見るアクセシビリティ関連機能という記事もあります）。State of HTMLのもう少し詳しい説明については、アンケートの設計を主導したLea Verou氏のBlog記事Help Design the Inaugural State of HTML Survey!を参照してください。 さて、内容の方を見ていきたいと思いますが、この記事では特にアクセシビリティの側面から調査結果を眺めていくことにします。（正面からの話題については、当社のUI開発者がフロントエンドBlogあるい
キーボードで操作してみよう マウスやトラックパッドでの操作が困難な事情があって、キーボードによる操作で Web を閲覧している場合は多くあります。 そのため、Web ページ上のすべての操作をキーボードで完結できるようにしてください。 キーボードによる主な操作方法 Tabキーを押してフォーカスを移動（Shift+Tab キーで逆順に移動） リンク、ボタン、入力フォームなどにフォーカスが移動していく Safari を使用している場合は、設定によってはOption キーを押しながら TabキーやShift+Tab キーを押さないと、リンクなどにはフォーカスが移動しない場合があります Enterキーを使ってリンクやボタンをクリック ↑, ↓, ←, →キーや PageUp, PageDownキーでスクロール チェックボックスはSpaceキー、ラジオボタンは↑, ↓, ←, →キーで選択状態を変更す
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel. — Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第
はじめに Webアクセシビリティは、ウェブサイトやアプリケーションがすべてのユーザー、特に障害を持つ人々にとって利用しやすくなるように設計されていることを指します。 アクセシビリティを考慮した設計は、視覚障害、聴覚障害、運動障害、認知障害などのさまざまな障害を持つユーザーにとって使いやすさを提供します。 次に、Webアクセシビリティの具体例をいくつか挙げます。 Webアクセシビリティ 13のポイント 1. キーボード操作: すべての操作をキーボードだけで行えるようにすることで、運動障害を持つユーザーやマウスが使えない状況のユーザーに対応します。 例えば、タブキーでフォーカス可能な要素を移動し、エンターキーでクリック操作を実行できるようにすることが重要です。 2. キーボード操作に対応したカスタムコントロール: カスタムUIコントロール（例: カスタムドロップダウンメニューやスライダー）を作
Switching It Up With HTML’s Latest Control 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに Webは、HTMLの要素を取り入れ、見た目、動作、感触を完全に異なるものに変換することに慣れ親しんでいます。この一般的な例がスイッチ(トグル)コンポーネントです。複数のスタイルレイヤーの下にチェックボックスを隠し、ARIAの役割を「スイッチ」として定義し、そして出荷していました。しかし、この手法には不確定な状態における使いやすさの問題がありました。結局のところ、言葉にあるように、最高のARIAはARIAがないことです。 しかし、ネイティブHTMLスイッチが普及するための新たな希望が生まれました。 はじめに ネイティブHTMLスイッチの登場 疑似要素によるスタイル付け スタイル付け 基本的なインプッ
現在の最新版は8/25リリースのv3.1らしいぞ！ MathJax公式ドキュメント 何かあったらこ↑こ↓を読んでくれよな〜頼むよ〜 注意 ちょっと頑張って和訳したり実験したりしているだけです，あんまり本気でアテにするなよ…？ 前提 （特には）ないです． MathJaxの導入 最も基本の型 こ↑こ↓にある通りだと <script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"> </script> を<head></head>にぶち込めばおk． ちなこのcdn.jsdelivrはこのままだと強制的に最新版を読み込ませてくるので，それが嫌なら <script id="MathJax-script" async sr
app-office/libreoffice-24.2.3.2-r1でsandbox violation, なぜ? - Gentoo metalog
ひさしぶりのGentooの話. Xvfbをいれていると, libreofficeのconfigure phaseで, sandbox violationが出て進みません. 実際のところ, 下のようにbugzあるのでそれ見りゃいいんですけど. 933257 – app-office/libreoffice-24.2.3.2-r1: If x11-misc/xvfb-run in installed, sandbox violation: /dev/udmabuf sandbox violationはこんな感じ. Xvfbが/dev/udmabufをさわりにいく. >>> Source configured. * ----------------------- SANDBOX ACCESS VIOLATION SUMMARY ----------------------- * LOG FILE
【JTC】レディースナイト（テーマ：アクセシビリティ、a11y） (2024/07/16 19:00〜)
注意 現在X(旧Twitter)でのソーシャルログインができない事象を確認しています。事前にX(旧Twitter)側で再ログインした上でconnpassのソーシャルログインを行うか、 「ユーザー名(またはメールアドレス)」と「パスワード」の組み合わせでのログインをお試しください。合わせてFAQもご確認ください。 お知らせ 2024年9月1日よりconnpassサービスサイトへのスクレイピングを禁止とし、利用規約に禁止事項として明記します。 9月1日以降のconnpassの情報取得につきましては イベントサーチAPI の利用をご検討ください。 お知らせ connpassではさらなる価値のあるデータを提供するため、イベントサーチAPIの提供方法の見直しを決定しました。2024年5月23日(木)より 「企業・法人」「コミュニティ及び個人」向けの2プランを提供開始いたします。ご利用にあたっては利用
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
State of HTML 2023にみるアクセシビリティの現状 | アクセシビリティBlog | ミツエーリンクス
キーボードで操作してみよう | freee Accessibility Training
なんでもSPAにするんじゃねぇ！という主張のその先 | Memory ice cubes
a11y（accessibility）13のポイント - Qiita
最新のHTMLではスイッチが進化！ネイティブHTMLによるスイッチインターフェイスの実装方法 - コハム
MathJax v3.x メモ-1 MathJaxの導入 - 雑記簿帳・調法調度