Accessibility

High Contrast

Website_image00281106_183611


https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph

|

Accessibility Developer Tools

Website_image00281106_183445


https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb

|

ChromeVox

音声チェック用

Website_image00281106_183359


https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn

|

シンプルなデータは良いデータ


ustwo - PPP


アクセシブル設定の読み上げ順なんかにも影響がありますから
普段から習慣づけたいですね

http://ustwo.com/ppp/

|

社内文書等簡単な文書は白黒に印刷される事を意識する

Rgb


よくある
こんな感じのキャプチャー画面

PCの操作方法とかでよく見ますよね

この手の文書は、白黒でプリントアウトして見る人が結構いる
そうすると

Gs

矢印の違いがわかりにくい

Website_image20130309_13916


こんな感じで「差」を付ける事で
白黒で出力された時に

Cggs

差がわかりやすくなる。

ちょっと年配の方はプリントアウトするから
文書によっては
白黒を意識した作りをしないとダメですね。

画面で見るのに慣れすぎて
紙で見たい人の事を忘れていました。
失敗失敗


|

[Font]APHont

American Printing House for the Blind
が配布している
読みやすい欧文フォント
Image00221212_190509


Image00221212_191814

確かに読みやすさに対しては配慮がありますね
文字間隔も若干広めですし

良い取り組みですね
私たちは『こう』なら読みやすい

言われないとわからないですからね
なかなか
機会があれば使いたいですね。

  
ダウンロードしたEXE実行形式の圧縮ファイルは
こちらの記事[LINK]アイコン:新しいウィンドで開きますの方法で解凍出来ます。

| | コメント (0)

[Accessibility]アクセシブルなTABLEを考える

一般的によく見かけるテーブル
Force4u00221113_204749

このテーブルをアクセシブルにする
にはどうしたら?を考えてみた

キーワードは
id
headers
ですね。


 
サンプルのテーブルで
headers
はこのような関係があります。

Headers

headersの個々の要素

Id


D


Th

headersの個別の要素は
それぞれのth(見出し)に対して紐づいている


 
Force4u00221118_61618
あくまでサンプル上の話になりますが
今回のサンプルでは
captionには『スクリーンリーダー』の利用者向きの文言を付加している
ブラウザユーザーには必要ない事項なので
captionにCSSで画面の外に追い出す方法で
ブラウザ上には表示させない方法を取っています

またCSSを無効にする事でこの文言は一般ブラウザにも表示されるので良いじゃないか?

 

<p class="forscreenreaders">料金表についてわかりにくい点がございましたら0000-00000-00000までお問い合わせ下さい</p>
<table summary="旅客運賃表 通常と深夜の一覧表">
<caption>旅客運賃表 2010-10-10時点</caption>
<thead title="料金区分">
<tr>
<th title="目的地"></th>
<th id="jyousya_ryokin">乗車代金</th>
<th id="tokkyu_ryokin">特急料金</th>
<th id="shitei_ryokin">指定席料金</th>
</tr>
</thead>
<tbody title="料金表">
<tr>
<td title="ここから通常料金" colspan="4" id="tsujyou">通常料金(AM9:00 - PM20:00)</td>
</tr>
<tr>
<th id="to_sinagawa">品川</th>
<td headers="jyousya_ryokin tsujyou to_sinagawa">100</td>
<td headers="tokkyu_ryokin tsujyou to_sinagawa">100</td>
<td headers="shitei_ryokin tsujyou to_sinagawa">100</td>
</tr>
<tr>
<th id="to_yokohama">横浜</th>
<td headers="jyousya_ryokin tsujyou to_yokohama">200</td>
<td headers="tokkyu_ryokin tsujyou to_yokohama">200</td>
<td headers="shitei_ryokin tsujyou to_yokohama">200</td>
</tr>
<tr>
<th id="to_oofuna">大船</th>
<td headers="jyousya_ryokin tsujyou to_oofuna">300</td>
<td headers="tokkyu_ryokin tsujyou to_oofuna">300</td>
<td headers="shitei_ryokin tsujyou to_oofuna">300</td>
</tr>
<tr>
<th id="to_fujisawa">藤沢</th>
<td headers="jyousya_ryokin tsujyou to_fujisawa">400</td>
<td headers="tokkyu_ryokin tsujyou to_fujisawa">400</td>
<td headers="shitei_ryokin tsujyou to_fujisawa">400</td>
</tr>
<tr>
<td title="ここから深夜料金" colspan="4" id="shinya">深夜料金(PM20:00 - AM9:00)</td>
</tr>
<tr>
<th id="to_sinagawa">品川</th>
<td headers="jyousya_ryokin shinya to_sinagawa" title="乗車代金 深夜料金 品川まで">200</td>
<td headers="tokkyu_ryokin shinya to_sinagawa" title="特急料金 深夜料金 品川まで">200</td>
<td headers="shitei_ryokin shinya to_sinagawa" title="指定席料金 深夜料金 品川まで">200</td>
</tr>
<tr>
<th id="to_yokohama">横浜</th>
<td headers="jyousya_ryokin shinya to_yokohama" title="乗車代金 深夜料金 横浜まで">300</td>
<td headers="tokkyu_ryokin shinya to_yokohama" title="特急料金 深夜料金 横浜まで">300</td>
<td headers="shitei_ryokin shinya to_yokohama" title="指定席料金 深夜料金 横浜まで">300</td>
</tr>
<tr>
<th id="to_oofuna">大船</th>
<td headers="jyousya_ryokin shinya to_oofuna" title="乗車代金 深夜料金 大船まで">400</td>
<td headers="tokkyu_ryokin shinya to_oofuna" title="特急料金 深夜料金 大船まで">400</td>
<td headers="shitei_ryokin shinya to_oofuna" title="指定席料金 深夜料金 大船まで">400</td>
</tr>
<tr>
<th id="to_fujisawa">藤沢</th>
<td headers="jyousya_ryokin shinya to_fujisawa" title="乗車代金 深夜料金 藤沢まで">500</td>
<td headers="tokkyu_ryokin shinya to_fujisawa" title="特急料金 深夜料金 藤沢まで">500</td>
<td headers="shitei_ryokin shinya to_fujisawa" title="指定席料金 深夜料金 藤沢まで">500</td>
</tr>
</tbody>
</table>

 

「Accessibility.table.html」をダウンロード

「Accessibility.table.html.txt」をダウンロード


| | コメント (0)

[AcrobatX]アクセシビリティ

好みの問題がありますが
概ね新しいAcrobatXのユーザーインターフェイスは好感が持てます
実際にやりやすいし
Ws000004

アクセシビリティ関連はほぼ9から変更無し
Adobe - Accessibility : Acrobat X Accessibility what's new[LINK]新しいウィンドで開きます
(まぁコマゴマありますが)
Windows版はMsaaを積極サポート
Microsoft Active Accessibility: Architecture (Windows)[LINK]新しいウィンドで開きます
そういわれてみれば
読み上げ精度が増したような....

若干操作性良い分マシですが
まだまだUNDO出来ない場面も多く
編集性では今一歩です。

ただ
インデザインとの相性はやっぱり上がったようで
タグやシオリ等

Epubやswf等のWEB系メディア

インデザイン→印刷用PDF

WEB用PDF→アクセシブルなPDF


DTPではインデザインを中心になりますね
今後しばらくの間は(次に何が来るのか?わからないけど)


脱線しましたが

Ws000004_2

↑このように
メニュー上はフォームの内容を読み上げ設定出来るような?
感じですが
今日ちょっとだけ試しましたが上手くできませんでした
ちょい勉強します。

今回のAcrobatXは『ポートフォリオ』に力入れてますが
どうかなぁ〜
操作性悪いんだよなぁ、書類間の移動とか
隣にあるPDFへ行くのが直感的に行けないっていうか
とにかく
インターフェイスが悪いと思うんだよなぁ
ポートフォリオ。
FLEXないとnavファイル作れないし

ただ
何でもかんでも
ポートフォリオの中に内包出来るようになってきた。
(まあ前からですが)
化けるかなぁ あまり使われないような気がするな

ポートフォリオは
アクセシブルでは無いですしね。

脱線しました。
設定項目も9からほぼ変更無し
111
※Windowsカラースキームは
例えば
アクセシビリティツールはWindows中心ですから
モニターの色数が限られるような場面も想定されますので
Macの256色で作るならWindowsの256色カラースキームで
作っておいた方が
結果
利用者からすれば『見やすい』って事になりますね。

| | コメント (0)

[AppleScript]アクセシビリティ・リンクメーカー

こんな風に考えてみた Force4u00221110_221419

 

アクセシビリティのサイト等では『新規ウィンドウ』を開かない事を 求めている事が多いですが 実際には新規ウィンドウで開きたい場面も多いですから (ここは好みの問題もあります) 今回のサンプルスクリプトでは、画像をクリックで 新規ウィンドウを開く事を『選べる』ようにしています。

Force4u00221110_230053  

titleへの文言の書き込みは 企業や団体系でBLOG等を付けている場合は考慮したい項目だと思います。 titleをsafariで取得する事で タグにする労力が少しだけ楽になります。

タイトルの記述はこちらのページ 【10 Simple Web Accessibility Tips You Can Do Today[LINK]新しいウィンドで開きますを参考にして


NG
<a href="/company" title="現在のウィンドウで 会社情報 を開きます">会社案内</a>
<a href="/product" title="現在のウィンドウで 製品情報 を開きます">製品情報</a>
<a href="/contact" title="現在のウィンドウで コンタクト を開きます">コンタクト</a>
↓を
OK
<a href="/company" title="会社情報 を現在のウィンドウで開きます">会社案内</a>
<a href="/product" title="製品情報 を現在のウィンドウで開きます">製品情報</a>
<a href="/contact" title="コンタクト を現在のウィンドウで開きます">コンタクト</a>
のように整形しています。

リンク点数の多い場合は 『を現在のウィンドウで開きます』は不要かもしれません。 新規にウィンドウを開くリンクにだけ 『新規にウィンドウを開きます』と入ると良いかもしれません。

 

サイト外警告画面は本当に必要なのか? ちょっと疑問でもありますが 官庁なり企業なりのページから 外部サイトへのリンクに対しては 有った方が良いのかもしれません。

 

サイト内リンクの場合は 例 詳しくはこちら[LINK]アイコン:新しいウィンドで開きますの記事を

タグはこんな感じ <a href="http://force4u.cocolog-nifty.com/skywalker/accessibility/index.html"  title="[FORCE]: Accessibilityを現在のウィンドで開きます">[LINK]</a><a href="http://force4u.cocolog-nifty.com/skywalker/accessibility/index.html" target="blank" title="[FORCE]: Accessibilityを新しいウィンドで開きます"><img src="http://force4uip.appspot.com/images/10x10nw.png" alt="アイコン:新しいウィンドで開きます" width="10" height="10" /></a>

 

サイト外の場合は 例 のだめカンタービレのWikiの記事 のだめカンタービレ - Wikipediaアイコン:新しいウィンドで開きます

タグはこんな感じ

<a href="http://force4u.cocolog-nifty.com/redirect/redirect.html?http://ja.wikipedia.org/wiki/%E3%81%AE%E3%81%A0%E3%82%81%E3%82%AB%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%93%E3%83%AC"  title="のだめカンタービレ - Wikipediaを現在のウィンドで開きます">のだめカンタービレ - Wikipedia</a><a href="http://clubsmoky.appspot.com/redirect/redirect.html?http://ja.wikipedia.org/wiki/%E3%81%AE%E3%81%A0%E3%82%81%E3%82%AB%E3%83%B3%E3%82%BF%E3%83%BC%E3%83%93%E3%83%AC" target="blank" title="のだめカンタービレ - Wikipediaを新しいウィンドで開きます"><img src="http://force4uip.appspot.com/images/10x10nw.png" alt="アイコン:新しいウィンドで開きます" width="10" height="10" /></a>

に作ります。

 

----ここからユーザー設定
set OriginalURL to "" as Unicode text

--クラス指定等無い場合は空欄のまま
set LinkClass to "" as Unicode text
set relTagd to "" as Unicode text

--CSSクラス指定等有る場合はこちらの記述
--set LinClass to " calss=\"TextLink\"" as Unicode text
--set relTagd to " rel=\"nofollow\"" as Unicode text


---リンクテキストを固定の場合はこちらの記述
set LinkMes to "[LINK]" as Unicode text
---リンク先のドキュメントのタイトルをリンクテキストにする場合はこちら
---set LinkMes to "" as Unicode text


set LINK_TEXT_A to "を現在のウィンドで開きます" as Unicode text
set LINK_TEXT_B to "を新しいウィンドで開きます" as Unicode text



----外部のサイト用にリダイレクト用警告を出すURL
set ReDirectURL to "http://force4u.cocolog-nifty.com/redirect/redirect.html?" as Unicode text

set YourSiteDomein to "http://force4u.cocolog-nifty.com" as Unicode text


tell application "Finder"
activate
---ダイアログを出して
display dialog "リンクを作りたいURLをペーストしてください" default answer the OriginalURL buttons {"リンクを作成する", " 終了 "} with icon 1 with title "URLをペーストしてください" default button 1

if button returned of the result is "リンクを作成する" then
copy the result as list to {the OriginalURL, BottPressNo}

set ReplaceText to the OriginalURL as Unicode text
----URLエンコード
set encodeURLText to my encodeURL(ReplaceText) as Unicode text

else if button returned of the result is "終了" then

end if
end tell

---よく使われる文字だけURLエンコードから戻す
set encodeURLText to replace(the encodeURLText, "%2F", "/") as text
set encodeURLText to replace(the encodeURLText, "%3A", ":") as text
set encodeURLText to replace(the encodeURLText, "%3F", "?") as text
set encodeURLText to replace(the encodeURLText, "%3D", "=") as text
set encodeURLText to replace(the encodeURLText, "%26", "&") as text

---リンク先のドキュメントのタイトルを取得する
tell application "Safari"
launch
activate
make new document
delay 1
tell window 1
open location encodeURLText
end tell
delay 3
set theTitle to (name of document 1) as Unicode text
end tell
tell application "Safari"
close window 1
end tell
set UrlTitle to theTitle as Unicode text

tell application "Finder"

------サイト内リンクの場合とサイト外リンクの分岐

if encodeURLText begins with YourSiteDomein then
set URLText to encodeURLText as Unicode text
set LinkTitle to LinkMes as Unicode text
else
set URLText to ReDirectURL & encodeURLText as Unicode text
set LinkTitle to UrlTitle as Unicode text
end if

set LINK_TAG_A to "<a href=\"" & URLText & "\" " & LinkClass & relTagd & " title=\"" & UrlTitle & LINK_TEXT_A & "\">" as Unicode text
set LINK_TAG_B to "<a href=\"" & URLText & "\" target=\"blank\"" & LinkClass & relTagd & " title=\"" & UrlTitle & LINKTEXT_B & "\">" as Unicode text
set LINK_IMAGES to "<img src=\"http://force4uip.appspot.com/images/10x10_nw.png\" alt=\"アイコン:新しいウィンドで開きます\" width=\"10\" height=\"10\" /></a>" as Unicode text

set AccessibilityLink to LINK_TAG_A & LinkTitle & "</a>" & LINK_TAG_B & LINK_IMAGES


activate
----ダイアログに表示
display dialog "リンク用のタグが出来ました\nコピーして使って下さい。" default answer the AccessibilityLink with icon 1 with title "URLをコピーしてください" default button 1


end tell







-----URLエンコードのサブルーチン
on encodeURL(str)
set scpt to "php -r 'echo urlencode(\"" & str & "\");'"
return do shell script scpt
end encodeURL

-----文字の置換えサブルーチン(「Web Scripter's Meeting」より参照)
on replace(src, tg, rp)
set oldDel to AppleScript's text item delimiters
set AppleScript's text item delimiters to tg
set myList to text items of src
set AppleScript's text item delimiters to rp
set myText to myList as string
set AppleScript's text item delimiters to oldDel
return myText
end replace

 

「AccessibilityLinkMaker.scpt.rtf」をダウンロード

「AccessibilityLinkMaker.scpt.zip」をダウンロード

| | コメント (0)

[Accessibility]W3Cのドキュメントの関係図【アクセシビリティ】

Force4u00221110_194942

Web Accessibility Initiative (WAI) - home page[LINK]新しいウィンドで開きます


ATAG 作る側のツールに求める事項
Authoring Tool Developers Accessibility Guidelines

UAAG 閲覧するためのツールに求める事項
User Agent Accessibility Guidelines

WCAG ウェッブコンテンツに求める事項
Web Content Accessibility Guidelines


3つから構成されている事がわかりました。

JIS X 8341に大きな要素となっているのは
WCAG
Web Content Accessibility Guidelines
ウェッブ コンテンツ アクセシビリティ ガイドライン
になるわけでね。

だんだん分ってきました

| | コメント (0)

その他のカテゴリー

Accessibility | AccessibilityCheck | AccessibilityForm | AccessibilityInDesign | AccessibilityPDF | Acrobat | Acrobat Action | Acrobat Annotation | Acrobat AppleScript | Acrobat Layer | Acrobat Plug-ins | Acrobat Portfolios | Acrobat Print | AcrobatBarcode | AcrobatDialog | AcrobatForm | AcrobatJS | AcrobatMenu | AcrobatPDF | AcrobatStamp | AcrobatYouTube | AddressBook | Adobe | Adobe InDesign | AdobeAppleScript | AdobeBridge | AdobeIllustrator | AdobeJSX | aed | Alfresco | Android | AnimationGif | Apple | AppleScript | AppleScriptBasics | AppleScriptCharacter | AppleScriptColor | AppleScriptDroplet | AppleScriptErrorNum | AppleScriptFolder | AppleScriptFontBook | AppleScriptRename | AppleScriptTools | AppleSymbols | Applications | Barcode | Barcode2D | BarcodePostal | BetterHTMLExport | Book | Browser | buzz | Certificates | CharacterEntity | CharacterSets | Colors | Cool Site | CSS | Cutting | DecoMail | DecorationMail | Design | Desktop | Diff | DJ | dmg | DNS | Documents | Download | eBook | Editer | eMail | Envelopes | ExifTool | Facebook | FFmpeg | File System | Fonts | FontsTool | FontsWeb | FOOD | FormPrint | ftp | Gadget | Gif Animation | Google | HexEditor | HTML | info | iPhoto | ISBN | ISO | iTunes | iWork | iWorkNumbers | iWorkNumbersCalendar | iWorkNumbersTimecard | iWorkPages | JavaScript | JeditX | JeditX Regexp | JeditXAppleScript | JIS | jquery | Letterpress | Library | logo | Mac Admin | Mac Archiver | Mac Browser | Mac Browser Plugin | Mac QuickLook | Mac Spotlight | Mac Video | Map | Mobby | Moto | Movies | Music | Network Basic | ntp | OCR | Office | OSX | Pantone | Paper | PDFlib | Permission | Photo | Pictograms | Print | Public | QuickLook | QuickTime | QuickTimeSetting | QuickTimeSound | Real Media | ReName | ResourceFork | ruby | Screen | ScreenCast | Search | Security | SEO | Sharing | SLAResource | Spotlight | Stamp | SWF | Tutorial PSD | TV | Twitter | Typography | Unicode | Utilities | Video | WebFont | Wedding | Windows | WindowsMedia | XML | XMP | XPS | YouTube | YouTube Rss