2012年5月14日 星期一
2012年5月7日 星期一
Lab 20 Google Accessibility
1. Google Search Keys Numbers the results in a Google search page and you can type the corresponding number to follow the link.
2. Google Access Keys Enables navigation through Google search results.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站
2. Google Access Keys Enables navigation through Google search results.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站
Lab 24 Firefox Accessibility Extension
Use Firefox Accessibility Extension to check the accessibility of three sites that you visit most.
Report the summary of all the errors and warnings for each site.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站
1. Yahoo! 奇摩
Date: 5/7/2012 20:04 PM
URL: http://tw.yahoo.com/
2. Facebook
Date: 5/7/2012 20:05 PM
URL: http://www.facebook.com/
Date: 5/7/2012 20:06 PM
URL: http://itouch.cycu.edu.tw/
Report the summary of all the errors and warnings for each site.
Reference:
http://dia.z6i.org/ (中文) 在 30 天內打造更具親和力的網站
1. Yahoo! 奇摩
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Warn | 1 | The words contained in each h1 element should match a subset of the words contained in the title element. Words (%1) in h1 elements should also be in the title element. | Title |
| Fail | 1 | Each heading element (h1..h6) must have text content. | Headings |
| Check | 1 | Heading content should be concise (usually 65 or fewer characters in length). | Headings |
| Warn | 1 | If the content of the alt attribute is not empty it should contain at least 7 characters and less than 90 characters. The text should provide people who cannot see the image orientation to the content and purpose of the image in the website. | Images |
| Warn | 2 | Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2. | Menu and Navigation Bars |
| Warn | 4 | Every onClick event handler should be on a focusable element. | Events |
| Warn | 8 | The content of the headings of the same level within the same section should be unique. | Headings |
| Fail | 21 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Fail | 21 | Each img element should have alt text. | Images |
| Warn | 32 | Ensure that links that point to the same HREF use the same link text. | Links |
| Warn | 58 | Ensure that links that point to different HREFs use different link text. | Links |
| Warn | 100 | Avoid using text links that are shorter than four 4 characters in length. | Links |
Date: 5/7/2012 20:04 PM
URL: http://tw.yahoo.com/
2. Facebook
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Fail | 1 | The page should contain at least one and no more than two h1 elements. | Headings |
| Fail | 1 | Heading elements that follow the last h1 should be properly nested. | Headings |
| Check | 1 | Heading content should be concise (usually 65 or fewer characters in length). | Headings |
| Warn | 1 | Each map, ul or ol element that precedes the last h1 element and appears to be a navigation bar should be immediately preceded by a heading element, preferably an h2. | Menu and Navigation Bars |
| Check | 1 | Most web pages should contain at least one navigation bar. | Menu and Navigation Bars |
| Fail | 1 | The i element must not be used to italicize text content, instead use heading (h1-h6) elements for heading text or the em element for emphasizing words, phrases or sentences. | Text Styling |
| Fail | 1 | The u element must not be used to underline text content, instead use heading (h1-h6) elements for heading text or the em or strong element for emphasizing words, phrases or sentences. | Text Styling |
| Warn | 1 | The character encoding was not specified. | W3C Specifications |
| Check | 2 | onChange event handler should not be used with the select element to cause a automatic change of focus or load a web page. | Events |
| Warn | 5 | Ensure that links that point to different HREFs use different link text. | Links |
| Warn | 7 | Avoid using text links that are shorter than four 4 characters in length. | Links |
| Warn | 10 | Ensure that links that point to the same HREF use the same link text. | Links |
| Fail | 10 | Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. | Language Changes |
Date: 5/7/2012 20:05 PM
URL: http://www.facebook.com/
3. itouch
Accessibility Extension
List of Accessibility Issues Summary
| FAE Rule | Violations | Message | Class |
|---|---|---|---|
| Fail | 1 | The page should contain at least one and no more than two h1 elements. | Headings |
| Fail | 1 | Heading elements (h1..h6) should be used for structuring information on the page. | Headings |
| Check | 1 | Most web pages should contain at least one navigation bar. | Menu and Navigation Bars |
| Fail | 1 | Each page must have a lang attribute on its html element whose value or initial subtag is a valid two-character language code. | Language Changes |
| Warn | 1 | Hidden or empty frames should not be used. | Frames |
| Fail | 1 | A DOCTYPE declaration was not found. | W3C Specifications |
| Fail | 2 | Every frame element must have a title attribute with content that describes the purpose of the frame. | Frames |
Date: 5/7/2012 20:06 PM
URL: http://itouch.cycu.edu.tw/
Lab 23 Making web pages accessible
1. Use Firefox Accessibility Extension to identify the accessibility failures and warnings in http://google.com
2. Fix the failures you found.
Lab 22 More on HTML
Tables
1. Copy and paste theTables example at http://www.w3schools.com/html/html_tables.asp
3. What kind of effects can you see?
一個表格，將內容分成兩欄兩列
Lists
4. Copy and paste the Lists example at http://www.w3schools.com/html/html_lists.asp
6. What kind of effects can you see?
文字以項目標示
訂閱：
文章 (Atom)