2018年1月11日 星期四

無障礙AA與資安風險檢測

大家好,我是達沛的客服工程師Ada
今天要介紹無障礙AA與資安風險檢測

最近案子是空軍航校
我這邊就以航校調整為例

無障礙AA的部份

1.每一頁都要有一個H1,而且只能有一個唯一的H1,不可兩個以上
調整方式:在MasterPage裡的Logo部份DIV設定改成H1即可

2.每一頁都要有正常的標題H1~H6
調整方式:每一頁都要加上小標從大到小H2~H6依序增加

3.圖片、連結要加上替代文字,且內容需可閱讀,不可SHOW出無意義命名,例如:1、2、3
調整方式:
圖片<img> 加上 alt=""
連結<a> 加上 title=""

4.每一頁title都要依照網站內容去設定
調整方式:把MasterPage的<title>拿掉
在每一頁的aspx Header裡加上<title
內容編輯依名稱去設定
命名方式:網站名稱 功能名稱 頁面名稱

5.所有CSS字型大小都要使用em,不可使用px、pt
 
6.導盲磚設定<a href="#" title="右上方功能區塊" accesskey="U" tabindex='3'>:::</a> 
調整方式:
<a href="#U" name="U" title="右上方功能區塊" accesskey="U" tabindex='3'>:::</a>
href="#"的#後面要加上定位區塊名稱,然後要加上name為定位區塊名稱,這樣在CHROME才會有作用
設定導盲磚注意事項
a.不可以超過5個設定
U = 頭
M = MENU
C = 內容
R = 右
F = 尾
b.設定時注意是否該鍵為瀏覽器快捷鍵,設定時請避開各瀏覽器快捷鍵

7.用鍵盤設定連結需照順序遊走以tabindex='排序'為主,跑到後面突然回中間之類的
調整方式:檢查tabindex='排序'是否正確,可以使用一樣的數字,他會走接著往下
比方tabindex='2'、tabindex='3'、tabindex='4'、tabindex='4'、tabindex='5'
他會走2>3>4>4>5
他不會從2>3>4>5又回4
但如果中間沒有重覆設定4
會變成ttabindex='2'、tabindex='3'、tabindex='4'、tabindex=''、tabindex='5'
他不會從2>3>4>5又回中間空白處,這樣人工檢測的時候就會失敗

8.背景色和文字色需有明顯對比
調整方式:不可用太相近的顏色做配色,會造成使用者會有閱讀上的障礙
所以要配背景深文字淺,或背景淺文字深
只要對比度夠,人工檢測就會過

9.MENU鍵盤遊走需可自動展開收合子MENU,且需要依序方式遊走,走完子MNEU才可接下一個大MNEU
調整方式:RWD的預設MNEU下拉選單不支援鍵盤遊走
需重新寫過MENU的HTML和CSS
參考連結:http://jsfiddle.net/dvLden/Ltz7nmdb/1/

10.More文字或圖片,需要替代文字說明為"什麼功能的更多"
調整方式:
如果是連結<a>需加上title="更多OO功能"
圖片<img> 加則需加上alt="更多OO功能"

11.輪播切換的功能鈕也需要加上替代文字說明
調整方式:方法同10.,加上容可說明"上一個大圖"、"下一個大圖"之類的相關說明文字

12.不可放至無法連結之連結
調整方式:若無法連結的連結需修正或移除



資安風險檢測部份

1.aspx頁面不能包含css檔
建議設計師在做UI時使用同一個CSS檔放置MasterPage
所有的CSS/JS都應該放在MasterPage,然後在MasterPage裡做資安風險調整即可

2.在Web.config加上做資安修正
a.上傳圖檔加密,加上<system.web><machineKey validation="AES"/></System.Web>
b.不顯示ASP.NET版本,加上<System.Web> <httpRuntime enableVersionHeader="false" /> </System.Web>
若在Web裡的Web.config做了沒反應,應去IIS裡的Web.config做設定

3.HTTP OPTIONS 問題
至IIS站台底下>要求篩選>HTTP指令動詞>[拒絕指令動詞]新增"OPTIONS"即可

2013年5月12日 星期日

橘子工坊

橘子工坊網站
http://www.orangehouse.com.tw/index.php


很久沒寫了,寫簡單的試試

他這個網站的特色
1.粉筆試畫風+寫實圖片,表現出對大人小孩都好的產品印象

2.網站程式碼超簡潔整齊,沒有太多繁雜的內容

3.網站利用CSS和jQuery,做到沒有Flash、HTML5也可以支援IE的動態網站

4.CSS內容整齊,利用定位點不同,將所有圖片完整排好在頁面

2012年8月15日 星期三

玄奘之路的戈壁挑戰賽

玄奘之路的戈壁挑戰賽競賽網頁

http://www.bizchallenge.net/


選擇原由,這是一個在巧妙的因緣際會下遇見了這個網站,這是一個內地的運動比賽網站,重點是,他顛覆了我對內地網站的看法…這告訴我,身為半個幫忙運動筆記的UI設計的我,應該要再嚐試更多…

為什麼叫玄奘之路,主要因為玄奘三藏法師,在西行求法中遭遇艱險的九死一生的道途,風餐露宿,身體力行,在歷史和現實的長河中,所以他們秉持著體驗三藏當年追求理想、出入生死的絕境、用信念和堅持超越自我的經歷,並且認識理想和信念的強大力量,認識“從堅持到超越”的不變法則,在內心深處尋找到讓生命攀援上升的巨大能量,從而以更積極、更健康、更持久的動力去擁抱生命中更高的挑戰,所以都是跑一些很長途的沙漠西行之路。

讓我們繼續看下去…

2012年8月3日 星期五

HITCON 2012


HITCON 2012


http://hitcon.org/2012/index.html


網站主要特色
就是超酷!運用大量的CSS3和宅宅宅所設計出來的(?)

網站主要介紹是
Hacks In Taiwan Conference (HITCON) 台灣駭客年會是台灣最大的駭客與資安技術研討會,是駭客們的聚會,駭客們一年一度的 Party。

網站配色
以灰色做為主軸配色,運用深淺不同的灰色做搭配。

讓我們往下看下去~




2012年7月24日 星期二

Inc.com

Inc.com
http://www.inc.com/

Inc.com是一個專為企業家和企業主而生的資訊網站所有有關於企業相關資訊都來自該網站,網站有login項目,使用者也能夠自行申請一個帳號,在該網站寫下自己瀏覽完心得留言。
就讓我們開始吧…

2012年7月2日 星期一

TETRABYTE

TETRABYTE
http://www.tetrabyte.com/

前一陣子都一直尋求商業網站的部份
今天找個IT附有科技感的版面來試試新的感觀的寫法
欸欸...你知道嗎?你肯定不知道
版很像
但意外看到科技版的網站很多都使用大地色系
一般既定印象都是屬於比較金屬的冷色系,像是藍色,銀灰色等
這次介紹的是商業科技等最基本的配色暗紅色為主的TETRABYTE
使科技和商業結合滿不錯的。


讓我們繼續看下去。

2012年6月28日 星期四

Fox Business

Fox Business
http://www.foxbusiness.com/index.html

Fox系列中的商業類別網站,在Fox中有很多類別網站,像Tab的功能放置在網站的最頂端



介紹著許多的商業資訊,還有專欄文章等
讓我們繼續看下去...

2012年5月13日 星期日

elearning europa

http://www.elearningeuropa.info/

特色
漸層藍
Title圖片有特色

http://www.elearningeuropa.info/en/events

彩色Tab配和 Search別有特色

Sidebar淡淡漸層別有特色

配色版面簡單大方

主要特色是因為教學,有資料夾的感覺(凸起弧度)



2012年3月18日 星期日

Business Govt

http://www.business.govt.nz


商業政府機關的一個網站
配色走大自然路線
藍灰綠橘,舒服的四種顏色
利用漸層達到舒服的柔合感
不會給人太死版太硬,但又不是專業感
利用箭頭形狀搭配陰影,使箭頭更充滿立體感,加上使用滑過去換色,給人比較生動的感覺

menu部份以橫的上方menu,是以大型下拉選單為主軸,利用大遍灰色為主,給配色多一個的不同忠實感


版面以左右為主
利用邊框設計使版面整齊排列,給人比較穩重的感覺

2012年3月11日 星期日

工研聯防網



Top
工研做的比較整齊
Banner
工研有漂亮的地圖圖示,運用光暈擴散,做出聯防網的感覺
Menu
工研MENU排列整齊又大方,配色自然不突兀
配色
工研以藍灰橘為主,看起來舒服,又美觀
Footer
工研以淡淡的漸層,做出柔和又不單調的感覺

版面運用像素技法表現出版面質感


版面不應該只是複製改配色
還要加一些自己的想法和創意變成自己的東西


一開始參考的版面..