IT系女子ログ

Webデザイナーのエッセイ。デザイン、コーディングで気になることをあれこれ考える。

社内じんわりアクセシビリティ普及活動記録

これはWeb Accessibility Advent Calendar 2017 - Adventarの11日めの記事です。 

 

活動目的 

「少しでも誰かの『べんり』を増やすこと」と「アクセシビリティに気を配りながら制作する空気を、じんわりと社内につくること」を目的としています。

「まずは自分から。まずは自社から。まずはできることから。」がポリシーです。

 

活動以前のアクセシビリティに対する意識

社内ではアクセシビリティという言葉を聞いたことがありませんでした。

全く意識していないわけではなく、見づらいとか、使いづらいとかの意識はみんなにあるし、デザインする上で考慮しようという意識はありました。ただ、基準が各自の知っている範囲内でした。

赤が見づらい方や、マウスが使いづらい方までは対象に入ってないのが現状です。

 

また、ガイドラインはあるものの、アクセシビリティに関する項目はありませんでした。さらにガイドラインもチェックする工程がないので、きっちり守って制作する方とあまり気にせず制作する方とで、制作物自体のクオリティにばらつきがあります。

 

活動内容

1

上司にアクセシビリティの話を持ちかける。「こんなセミナーに行ったんです。こんなお話されていました。」と報告した。 

結果

上司の反応はイマイチだった。

ただ聞いた内容をそのまま話すのではなく、どう現場に繋がっていくか、「だからどうすればいい?」を自分でももっと考える。

 

2

Aさんに、ハンバーガーメニューの実装を依頼した。

その際に「タブキーで操作できるように」とお願いした。

結果

タブキーで開閉はでき、中のリンク要素にもフォーカスできる実装ができた。

Aさんは「アクセシビリティって聞いたことがない」と話していたが、色々記事を調べてくれていた。

 

3

Bさんに「開閉ボタンにフォーカスできるアコーディオン」の実装を依頼した。

結果

タブキーのみでも操作できるアコーディオンの実装ができた。

 

4

Bさんにユーザビリティについて話した。法律の話や社内ガイドラインにも追加したい話をした。

結果

Bさんはキャリアが長く技術力も高いが、ユーザビリティについては今まで気にしていなかったみたい。賛同も否定もなかったけれど、ユーザビリティについて意識してもらえたと思う。

 

5

Cさんがコーディングした注釈のフォントサイズが、小さすぎて見えないのでは?という話になった。

Cさんは「自分ではギリギリ見える」と思ったとのこと。

結果

見えづらい方は見えないかもしれないことを考えて、フォントサイズを大きく調整した。

 

6

社内ガイドラインの見直しをする。

クオリティチェック項目にユーザビリティに関することを、具体的な作業に落とし込んで記載することを検討。

結果

「altを入れましょう。」だけでなく、どう記述すればいいのか具体例もあるとわかりやすい。あまり詳しすぎるのも見づらいかもしれないが、年内にできるところまで作成してみることにする。

 

総括 

特段強くアクセシビリティを意識しているわけではないし、豊富な知識があるわけでもないのですが、できることはまだまだありそうです。

社内でも、アクセシビリティという言葉は普及していませんが、「見やすくしたい」や「フォーカスできるようにしたい」という条件を満たそうとはしてくれるので、アクセシビリティを考えるきっかけは作っていけそうです。

 

来年はもう1歩踏み込んで、

  • ガイドラインにアクセシビリティの項目追加
  • 誰でも一定のアクセシビリティを担保できるように
  • アクセシビリティの考え方をみんなで話す機会を設ける

上記のようなことを行う予定です。

 

以上、社内じんわりアクセシビリティ普及活動報告でした。

明日はizuizuさんです。お楽しみに。

視覚とデザインと数学

f:id:tosssaurus:20171204222508j:plain

コンピュータで正確な数値をもとに位置や大きさをそろえると、当たり前ですが確実にそろいます。一方で、数値的にそろえた状態が、必ずしも「そろえた」とは言えない現象が、デザインの分野ではたびたび起こります。

人があるものを目で認識するときに使う脳のはたらきによって、数値的には正確に同じでも視覚的には違って見えてしまうパターンがあります。目の錯覚、錯視といわれるもののことです。

続きを読む

いまさらHelvetica入門

f:id:tosssaurus:20171126174810p:plain

欧文フォントの王様と呼ばれるHelvetica(ヘルベチカ)。

今年で60周年を祝う特設サイトを見て、しびれました。

60th Anniversary Helvetica Typeface

 

かっこいい。

Helveticaを使うからかっこよくなるのか、Helveticaを使う人がかっこいいものを作れる人なのか、Helveticaのことをいまさら調べてみました。

続きを読む

職業訓練とデザイナーと採用について当事者が思ったこと

f:id:tosssaurus:20171120080517j:plain

先週話題になっていた記事を拝見して、たくさん考えるきっかけになったのでまとめておこうと思います。

続きを読む

head内の記述チェックリスト(まずはこれだけ版)

f:id:tosssaurus:20171113074701p:plain

headとは、HTMLページの情報を書いておくところです。

記述しておくことで、ユーザーがページを訪問する前に「どんな内容が書かれているページなのか」が分かりやすくなります。

なんとなく使いまわしてきたhead内の記述を、最近のアップデートに合わせて重要なタグだけに整理してみました。 

続きを読む