【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

未経験でもこれは覚えて入社しろ10のアクセシビリティ【駆け出しエンジニア向け】

Web転職する

先日下記ツイートをしました。

 

【未経験でもこれは覚えて入社しろ】のアクセシビリティをツイートしましたので補足と解説を書いていきます。

 

未経験や駆け出しのエンジニア、コーダーの方にとって有益になるように書いていきますので、宜しければ読み進めください。

 

とはいえ、まずアクセシビリティについて聞き馴染みがない人もいるかと思います。

恐らく駆けだしに限らずコーダー皆さんの意識下では、アクセシビリティの優先度はかなり低いかと思います。

 

ですが、UIやUXにも関わる分野になりますし、そもそもWebは誰でも同様にアクセスできると言うのが前提になるのでアクセシビリティはこの業界にいる以上押さえておくべきといえます。

コーダーに限らず、ディレクター、デザイナー、バックエンドにも知っておいて欲しい内容になっています。

 

また、自分がアクセシビリティを学んだ副産物として面接で有利に働くこともありました。

ちなみにアクセシビリティ詳しい自社開発ってかなり少なくて、面接行くとたまに「教えてほしいくらいです」って言われるんで、割とできるとコーダーとしての付加価値あるかもです。

 

なので、ぜひこの記事で参考にしていただければと思います。

 

では早速一つ目から補足します。

①なぜアクセシビリティやるの?

 

①なぜアクセシビリティやるの?

・アクセスできる人を増やすため
障害がある人、手を怪我した人、接続の調子が悪いなど
・さまざまなデバイスに対応するため
情報にアクセスできない、画面が小さく操作できない
・SEOのため
クローラーがアクセスしやすくなる
・UI、UXのため
使いやすさ、体験の向上

 

アクセシビリティは4つの目的があります。

ここで誤解しがちなのは、視覚障害に向けてだけの取り組みと思われがちですがそうではないということです。

スクリーンリーダーが適切に読まれることももちろんアクセシビリティですが、それ以外の全てのユーザーも対象になるということです。

 

Webを閲覧するときにマウス操作を嫌がる人はTABで操作します。

閲覧環境は多種多様になり、スマホユーザーも増えました。

 

どんな人どんな環境でもアクセスしやすいWeb作りを目的としています。

 

またそれは人だけではなく、クローラーにも及びます。

つまりアクセシビリティを考慮したサイト=クローラーがクロールしやすい=SEOに効果を発揮ということになります。

②CAPTCHA

②CAPTCHA

CAPTCHAは機械を排除するが、スクリーンリーダーのユーザーのアクセスも妨げられてしまいます。
対策は以下
・音声でも利用できるようにする
・Web以外(電話)のアクセス手段を用意すること

 

CAPTCAとはパスワード入力の際に求められるランダムな英数字ですね。

参考:https://www.ipa.go.jp/security/awareness/vendor/programmingv2/contents/103.html

 

あれいつも思うんですがわかんなくないですか?笑

 

大きさバラバラなのに小文字か大文字判断できないですよね…。

CAPTCAは他にも多くの問題を抱えています。

  • 視覚障害の方が認識できない
  • 画像認識技術が向上したため機械の不正が可能になった
  • とにかくわかりづらい、離脱の恐れ

 

以上の理由から最近のセキュリティチェックはCAPTCAにするよりスマホを使った2段階認証が多くなっている印象です。

 

③アニメーションは5秒で止めること

③アニメーションは5秒で止めること

アニメーションは5秒で止めるか一時停止ボタンを置きます。

なぜかというと動きに集中してしまいその先の目的に達成できないユーザーもいるからです。

自分も過去に紙吹雪のアニメーションに停止ボタンつけたりしました。。

 

これなかなか衝撃的な内容ですよね。自分も実はあまり受け入れられませんでした。

ただ理由としては、上記の通りそのアニメーションに集中してしまい本来の目的を見失ってしまうということが挙げられます。

なので5秒で止めたり、ユーザーの意志で止められるようボタンを設置する必要があります。

 

しかしそのアニメーションがコンテンツの目的であったりアニメーションが終わったら遷移先が表示される場合は上記に該当しないので問題ないかなと個人的には思います。

 

カルーセルも同じです。一時停止ボタン、再生ボタンを置く必要があります。

④altの書き方

④altの書き方

駆け出しの方に限らずaltの書き方は勘違いされてる方がかなり多いです。

考え方としては、「画像に書いてる文字を過不足なく書く」です。

例えば女性の画像に女性と書くことは間違いになります。

 

altの書き方は迷われる方も多いかと思います。

上記の通り基本的に過不足なく書く必要があります。つまり多すぎても少なすぎても不適切であるということです。

SEOのためにaltに不要な内容を盛り込むという人がいますが、それは大きな間違いですしむしろユーザーにもよくないので結果SEOにもマイナスです。

 

⑤TABキーの順序

ページをTABで巡回するユーザーは一定数います。
そのため順序通りフォーカスさせる必要があります。

基本的にはa要素やbutton要素がhtml順序通りフォーカスするので特段処理は必要ないのですが、JSの機能のモーダルやスムーススクロールは注意が必要です。

TABで遷移するユーザーは一定数います。自分もフォームの入力はTABで操作したりします。

 

JSの機能のモーダルやスムーススクロールは注意が必要です。

上記部分について自分の技術ブログから引用して解説します。

モーダルウィンドウ

モーダルウィンドウが開いてるときは、モーダル内のコンテンツとブラウザのボタンのみでフォーカスが当たるようにして、元のページはフォーカスさせないようにします。

 

つまり例えば背景がグレーのオーバーレイがかかった元のページ内は、モーダルが開いてるときはtabを無効化する必要があります。

 

スムーススクロール

スムーススクロールはTOPに戻るボタン押下後、ページ内で最初のフォーカス対象要素にフォーカスさせる必要があります。

 

JSで上記制御してない場合html上でTOPに戻るの次の要素にフォーカスが当たってしまいますね。

 

それをロゴ等にフォーカスが当たるようこちらもJSで制御する必要があります。

⑥見出しを一番先に

⑥見出しを一番先に

ボックス内などで上から画像→見出し→テキストの順序のデザインをコーディングする場合は注意です。

文書構造として正しいのは見出しが先に来てそのほかのテキストや画像が次に来なければいけません。

先日cssのツイートでお伝えしたflexのorderで順序は変えられます。

デザインとはhtmlの順番を変える必要があります。
なぜならそのコンテンツ(section)で一番上に来るのは見出し要素だからです。
下記は順番をorderで変える方法を実装しました。

See the Pen
OKBMMQ
by funclur (@funclur)
on CodePen.

⑦img要素?背景画像?

⑦img要素?背景画像?

迷ったら
・読み上げ必要な画像か?
・動的に吐き出す場合システムがどちらを仕様としているか

アイコンであってもただの装飾であったりフリーダイヤルアイコンのように意味のあるアイコンもありますので、意味を考えて読み上げ必要な画像か?を判断基準としましょう。

 

img要素にしたらいいか背景画像にすべきか悩まれる人も多いかもしれません。

明確な基準は読み上げ必要か、運用効率がいいかです。

 

例えばお店の一覧画像をいちいち背景にしてはcssが肥大化してしまいます。

またお店を追加するたびにcssの追記も必要になるでしょう。

 

その際はcssの追記が無いようにhtmlのimg要素にするべきです。

 

⑧かっこを装飾目的で使わない

⑧ かっこを装飾目的で使わない

以下はよくやっちゃってるの見ますが、括弧は装飾で使わず区切りで使いましょう。

【お問い合わせ】
000-0000-0000

見出しっぽく使われてる場合は間違いです。

適切なモジュールがない、cssの実装を省きたいからといってかっこを装飾目的で使うことはよくありません。

セマンティックなコーディングの観点からも意味付けすべきですね。

 

最近のブログでタイトルに使われる【】は逆に区切りとして使ってるため正しい使い方といえますね。

⑨フォームで気を付けること

⑨フォームで気を付けること
・入力項目を可能な限り減らす
・可能な限り、任意に設定し、明示する
・機械的に補完できる内容はシステム側で補う
・スマホでも入力しやすい(電話番号などinputを分けない)

 

フォームはアクセシビリティの要素が詰まっています。

そのため上記のようにユーザーの身になって実装する必要があります。

 

スマホでは操作がタップになってしまうためフォーカスの移動が手間ですよね。

そのためinputをなるべく分けずに電話番号も郵便番号も1つの入力欄にした方がユーザーを考えた仕様になります。

また、font-sizeは16px以上にしないとフォーカスした時ズームしてしまいますので、注意しましょう。あれも割と手間です。
h
ttps://frontendmemo.work/2016-10-07-002828
< h2>⑩右クリック禁止はよくない

⑩右クリック禁止はよくない

画像にコピーライトを含めるなどが必要

(ブラウザ上で保存を禁止しても、キャッシュから拾い出す、スクリーンショットを撮るなどコンテンツを公開する以上コピーや保存を禁止することは不可能)

 

一時期記事の盗用や素材の盗用が流行ったため、右クリックやコピーを禁止するサイトが増えました。

 

しかしそれもアクセシビリティを阻害することになってしまっています。

つまりユーザーの操作を制限すること自体よくないと考えると良いです。

 

サイトに注意文などを入れて置くのは良い例かなと思います。

 

 

以上、未経験でもこれは覚えて入社しろ10のアクセシビリティ【駆け出しエンジニア向け】の解説でした。

 

覚えてから入社しろと書いてありますが、ぶっちゃけ入社してからでも大丈夫です。

(自分も入社してから覚えた事ばかりなので)

 

知識の上塗りを積み重ねましょう!

 

以上のアクセシビリティは必ずすべて達成するというよりは、より良いサイトにするためにできるだけ多くやるというのが本質的な考えです。

尚、今回紹介した内容は全てこちらの本に書いてあります。

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ | 太田良典, 伊原力也 |本 | 通販 | Amazon
Amazonで太田良典, 伊原力也のデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチ。アマゾンならポイント還元本が多数。太田良典, 伊原力也作品ほか、お急ぎ便対象商品は当日お届けも可能。またデザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチもアマ

アクセシビリティで一番有名な本なので気になる方はどうぞ

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する 未経験でもこれは覚えて入社しろ10のTIPS
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました