ADA-508前台HTML页面制作时一些注意事项

ADA 508前台HTML页面制作时一些注意事项1. 关于图片使用和描述标签的注意事项A. 图片放在HTML HTML页面的所有图片都必须加上相关联的说明和描述文字 所有要加alt属性： （alt中的文本不要超过150个字符）如果替代图片的alt属性文字不够清晰，则可以使用longdesc属性提供更详细的说明 如果图片没有实际意义时alt属性可以用空来表示：*alt=（注意两引号中没有空格） 在有连接的图片时，尽量在a标签里使用title标签说明： B.图片在CSS中控制显示当没有连接的图片或部分图片可以直接写在CSS样式来控制显示Our hours of operation are :Monday Friday 8am - 5pmCSS样式标中的样式定义.contactright width:43%; background-image:url(./image/hours.gif); text-indent:-3000px;这样在样式中把要显示的图片定义为背景；把图片内容作为文字内容中放在中；通过CSS控制它不显示在屏幕内；当用户在读取是只会读到文字内容；这样对用户读取内容更友好！C. 标签Input标签有以上两种用法，具体看type的类型，下面说下一个描述标签的区别alt ,longdesc与title的区别: Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。他只能用在img、area和input元素中（包括applet元素）对于input元素，alt属性意在用来替换提交按钮的图片。替换文字是用来替代图像而不是提供额外说明文字的在写替换文字前仔细想想，确保那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义title属性title属性能用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。不过并不是必须的。title属性有一个非常好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清晰的表达了链接的目的。这样就使得访问者知道那些链接将会带他 们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或其他非本质的信息。longdesc属性能用来提供链接到一个包含图片文字描述的独立页面。这就意味着把浏览者链接到另外的页面，这可能会造成理解上的困难。另外浏览器对于longdesc属性的支持也是不一致的，并且不是非常好。longdesc属性能包含一个链接到当前文件的其他部分（锚点）来取代链接到另外的页面。在Accessibility footnotes, Andy Clarke非常好的解释说明了怎么应用。描述链接（D links）能用来补充longdesc。一个描述链接就是个常规的链接，连接到含有替换文字的页面。该链接被置于图像的旁边，并且在所有浏览器中都是可是的。D网站中的标题类文字尽量使用h1-h6Hn 元素类型对标记标题是很重要的，Assistive 技术譬如屏幕器的读者可利用一个适当的标题来了解文件的概述。如果我们使用., 那他们就不能读懂了。注意，h1标签在一个页面只能使用一次，但是，h2到h6可以如你所需任意使用多次，但它们应依设计意图，该按顺序使用。比如，h4应该是h3的子标题，h3应该是h2的子标题，以此类推。E其它注意事项1、尽量使用样式表控制网页排版，建议使用Div+CSS，尽量少使用Table进行页面布局2、尽量使用相对尺寸控制页面布局，例如： 3、避免使用header标签来产生粗体字效果4、网页设计时需明确指出页面的编码类型，如UTF-8、GB2312，便于读屏软件阅读内容，例如： 5、合理的在页面中加入针对字体尺寸的Big、Normal、Small，便于视力不好的用户挑选自己的字体尺寸6、不要用颜色来确保所有藉由颜色所传达出来的信息，在没有颜色后仍然能够正确的传达出来；确保前景颜色与背景颜色彼此呈现明显的对比（主要为具有色弱障碍的人士所用）7、不要在页面中使用跑马灯效果，即字体水平移动或垂直移动8、 避免使用flash，如果需要使用，则要为元素添加文字描述9、 建议不要自动转移网页的网址10、 对于标签，需要加入title属性及元素内容，例如：不符合规范的写法如下： 规范的写法如下：This is an Excel document.11 对于标签，需要加入alt属性，例如：不符合规范的写法如下： 规范的写法如下： This is a navigation applet. Alternative navigation can be found at: /uaccess/navigate.html12建议在页面中合理设置一些不可见的导航信息，例如：Your locations in the website Home Our Products About Us2. Table使用的注意事项 table其实本质是表格数据的显示方式。主要显示数据列表；而不是应用在页面排版上，所以在使用时应清楚什么时候用table，什么时候用DIV 表格的属性（我们只举例在ADA508中需要注意的一些事项）主要有以下几个：tr (定义表格行) tr 元素包含一个或多个 th 或 td 元素。th (定义表格行的表头)td (定义表格行的单元)表格一般用于数据列表，通常不用于页面排版 Table 1: Company data 姓名 出生日期 部门 工资领取 刘小雨 1985.12.15/td Developer yes 张小亭 1982.05.04 Developer yes在数据列表中定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体Summary：不会对普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性Caption ：用于描述表格的标题 Title Table 1: Company data姓名出生日期部门工资领取刘小雨1985.12.15Developeryes张小亭1982.05.04Developeryes- Table 2: Company data 姓名 刘小雨 张小亭 张小亭 出生日期/th 1985.12.15/td 1982.05.04 1982.05.04 th部门 Developer Developer Developer th工资领取 yes yes yesTable 2: Company data姓名刘小雨张小亭张小亭出生日期1985.12.151982.05.041982.05.04部门DeveloperDeveloperDeveloper工资领取yesyesyes-Table 3: Company data EmployeesFoundedACME Inc 1000 1947XYZ Corp 2000 1973Table 3: Company dataEmployeesFoundedACME Inc10001947XYZ Corp20001973-Table 4: Company data8Company Employees FoundedACME Inc 1000 1947XYZ Corp 2000 1973Table 4: Company data8CompanyEmployeesFoundedACME Inc10001947XYZ Corp20001973HTML 标签的 Scope 属性使用 scope 属性，可以将数据单元格与表头单元格联系起来。通过属性值 row，表头行包括的所有表格都将和表头单元格联系起来。指定 col，会将当前列的所有单元格和表头单元格绑定起来。Scope属性同时定义了行的表头和列的表头：col: 列表头scope=colrow: 行表头scope=row在第一行的th加上值为col的scope属性，声明他们是下面数据单元格的表头。同样的，给每行的开头th加上值为row的scope属性声明他们是右边数据单元格的表头。HTML 标签的thead,tbody,tfoot 属性thead标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。thead 元素应该与 tbody 和 tfoot 元素结合起来使用。tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。（所以需要注意的时，这组标签要么就一起成对使用，要么就不出现在表格里） Month Savings January $100 February $80 Sum $180 HTML 标签的 headers 属性headers 属性规定表头与单元格相关联。headers 属性不会在普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。headers 属性会将表格中的一个表头单元格和一个数据单元格联系起来。这个属性的值是引号包括的一列名称，这些名称是用 id 属性定义的不同表头单元格的名称。headers 属性对非可视化的浏览器，也就是那些在显示出相关数据单元格内容之前就显示表头单元格内容的浏览器非常有用。 Year BugsSales19952.3500,00019963.21,700,00019975.68,200,000199912.333,000,000Year (id=year)Bugs (id=bugs)Sales (id=sales)1995(id=y1 headers=year)2.3 (headers= y1 bugs)500,000 (headers= y1 sales)1996(id=y2 headers=year)3.2 (headers= y2 bugs)1,700,000