マークアップで改善するウェブアクセシビリティ - SaCSS

マミりん @mamiline6

キャーゆうこさーん #sacss

サトウ ハルミ / フロントエンド専門 FLAT @uzu

もりかわさんのアクセシビリティセッションはじまった。 #sacss

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

「日差しの強い屋外にいる人」 アクセシビリティは障害がある方だけに限った話ではないんだなー #sacss pic.twitter.com/AxvkqsjAFh

拡大

ナガ＠加工肉製造業みたいな名前のウェブ制作会社の従業員 @nagasawaaaa

うぇい・ありあ #sacss

えび𝕏🍤 @pino_ebiebi

うぇいありあ！ #sacss

うぇびん(holyKurka) @webbingstudio

午後はTo-R森川さんのアクセシビリティの話。スクリーンリーダーはhtmlのlang属性、見出し要素、altを読み上げる。適切なマークアップをしていないと視覚に障害を持つ人は混乱する。弱視の人の500%拡大、色反転も考慮したい #sacss

えび𝕏🍤 @pino_ebiebi

役割のroleと 状態のaria- #sacss

池田 泰延 @clockmaker

HTMLでアクセシビリティを高めるためのマークアップ。 ・role属性 ・alt属性 ・lang属性 ・必要に応じてWAI-ARIA スクリーンリーダーの読み上げの改善につながる。 #sacss pic.twitter.com/Vq6CrnrqLE

拡大

えび𝕏🍤 @pino_ebiebi

TOPに戻るのaタグが不適切なことが多いよね #sacss

うぇびん(holyKurka) @webbingstudio

スクリーンリーダーのみに適用される非表示スタイルを利用して、アイコンのみのリンクでも適切なテキストを記述しよう #sacss

akahappa @akahappa

visually-hidden : 存在するが見えなくする #sacss

えび𝕏🍤 @pino_ebiebi

visually-hidden 見えないけどスクリーンリーダーでは読み上げる #sacss

ナガ＠加工肉製造業みたいな名前のウェブ制作会社の従業員 @nagasawaaaa

これか CSS: Visually hidden gist.github.com/marcol/3979586 #sacss

池田 泰延（勉強会用） @clockmaker_bot

画面の表示されないが、読み上げ対象をするという手段もあるのですね #sacss

ミウラタクマ @1v1ura

visually-hidden はじめてきいた #sacss

歩くCSS設計完全ガイド / HubSpot Tech Ninja @assialiholic

リンクテキストはコンテキストにそってテキストを指定する #sacss pic.twitter.com/9ZvYBzPvqZ

拡大

拡大

うぇびん(holyKurka) @webbingstudio

aria-hidden="true" は支援技術では非表示として扱う #sacss

ナガ＠加工肉製造業みたいな名前のウェブ制作会社の従業員 @nagasawaaaa

リンクだけで遷移先がわかるようにする #sacss

池田 泰延（勉強会用） @clockmaker_bot

spanタグで読み上げようの文言をいれておく #sacss

えび𝕏🍤 @pino_ebiebi

キーボードフォーカス消されがち #sacss

ミウラタクマ @1v1ura

アウトラインをcssで消すの本当いや #sacss

えび𝕏🍤 @pino_ebiebi

what-input is hatumimi #sacss

マミりん @mamiline6

アウトラインは消さない #sacss pic.twitter.com/uNwHPhEX30

拡大

tomo_e🐾ただの犬好き @tomo_e

focus消されちゃうことあるよね… #sacss

西畑一馬@to-R @KazumaNishihata

まさかのスタッフからセミナー発表中に自社サイトのダメ出しくらった。修正します。。 #sacss