XHTML站点设计过程中的10个小技巧

日期: 标签:网页设计 12 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

     毫无疑问,当你考虑建立一个网站的时候,最重要是让别人能够顺利地浏览它。你的网站在屏幕阅读器(screen reader)前是否发挥良好呢?用户是否可以重写你的样式表,而仍然可以看到你的网站提供的内容呢? 如果其他Web开发人员看到你的代码,他们会不会感到烦呢?如果你的网站符合标准,你可以更自信地回答这些问题。

     

     那就让我们一起来看看本文吧, 我们将多付出一点努力,包括你得遵循的非W3C制定的标准以使您的网站更容易访问。每一部分都列出了满足您需要的内容,解释了为什么您需要了解它们,并举例说明了你该做的和不该做的。

Accessibility

1. 指定正确的DOCTYPE

Specify the correct DOCTYPE

标准.

     文件类型声明(DOCTYPE)是一个位于你的网页文件顶部的说明。DOCTYPE需要告诉浏览器如何正确地显示您的网页。

我为何需要它?

     没有适当的DOCTYPE声明,浏览器会尝试自动给网页分配一个DOCTYPE。这会使您的网页加载得很慢,并导致网页在不同的浏览器中显示不一致或不正确。

那我怎么做呢?
     在你的网站每个网页顶部包含合适的DOCTYPE。推荐使用 XHTML 1.1 ,但是 XHTML 1.0 Strict 也是可选的。

XHTML 1.1

     这是对你的网站进行编码的最简洁方式。所有的网站样式需要包含在外部CSS文件中。请确保在顶部添加 XML 声明,这是至关重要的,因为XHTML 1.1被认为是真正的XML。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

注意:

     如果您正在使用的XHTML 1.1 ,对于使用Internet Explorer 6的用户,你不可以包括XML声明。相反,为了支持IE6用户,您应该有条件地显示XML声明。

XHTML 1.0 Strict

     这是XHTML 1.1 的替代。两者之间的技术差异是次要的,但XHTML 1.1是被推荐使用的,以适应未来网站的发展趋势。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     还有其他两个XHTML 1.0的声明,它们是被用作特殊用途的。但是使用这些 DOCTYPE 是不被提倡 。

XHTML 1.0 Transitional

     如果你的网页需要在传统的浏览器中浏览,通常这些浏览器不支持CSS,那就要使用这个声明。Transitional允许网页元素调用inline styles。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

     建议只在那些需要HTML frames的网站上才使用Frameset。当然,使用静态的CSS DIV 代替框架会更合适。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

2. 定义命名空间(namespace)和默认语言(Default Language)

Define the Namespace and Default Language

标准.

     XHTML的命名空间和默认语言必须包含在<html>元素中。

我为何需要它?

     XHTML站点应该定义默认命名空间。命名空间定义了所有你可以使用的元素。设置默认语言可让屏幕阅读器告诉访问者该网页使用的语言。这也是W3C标准所要求的。

那我该怎么做呢?

在<html>元素中附加属性<xmlns>和<lang>。在XHTML 1.1中,lang属性是xml:lang。

XHTML 1.1
1、XHTML文档使用英文

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

2、XHTML文档使用简体中文

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">

XHTML 1.0

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

 

3. 添加合适的Meta标签

Supply proper Meta tags

标准.

     在你的网页的<head>中提供http-equiv,language, description 和 keywords meta标签。

我为何需要它?

     http-equiv meta标签相比其他的是最重要的。结合DOCTYPE使用,它可以帮助浏览器正确显示你的网页。language meta标签对非英语的网页是很重要的,但是它已经成为每个网页的普遍做法,不管你使用的是什么语言。descriptionkeywords meta标签调用是为了易用性,而不是为了符合标准,因为它们已被屏幕阅读器所普遍使用。

那我该怎么做呢?

     在你网页的<head>元素中包括下面四个meta标签:

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="language" content="zh-CN" />
<meta name="description" content="这里填网站描述信息" />
<meta name="keywords" content="这里填网页关键字,用半角逗号隔开" />

     请确保你在<html>元素中指定的语言与meta标签中定义的语言是一致的。另外,如果您使用的是XHTML 1.1 ,请确保XML中指定的encodinghttp-equiv meta标签中的charset是一致的。

 

4. 使用易用的导航

Use accessible navigation

标准.

     使用户能够轻松地区分正在查看的网页的页面和子目录。

我为何需要它?

     现在大多数网站都结合使用文字,颜色和图形样式来组织和显示信息。但是许多残疾人无法看到或使用屏幕显示的图形、自定义样式表和其他辅助工具来检索信息。无论谁访问你的网站,实施易用的导航系统可以帮助他们快速而准确地找到所需的信息。

那我该怎么做呢?

     为您的网站创建一个描述性的标题,然后使用标题元素(heading elements)将网页分裂成不通的内容。

在<head>元素内部中包含<title> 元素。

<title>露兜博客</title>

在网页页面中包含 <h1> 。 <h1>元素应该跟你的</h1> 元素部分吻合或全部吻合。

<h1>露兜博客 - 分享IT知识,书写我心情</h1>

所有的标题标签 <h1>,<h2>>等)应包含文字内容。而images也要添加alt标签。

错误写法:

<h2><img src="logo.png" alt="露兜博客" /></h2>

正确写法:

<h2><img src="logo.png" alt="露兜博客" />露兜博客</h2>

 

5. 正确转义JavaScript

Properly escape JavaScript

标准.

     当直接在网页上包含JavaScript时,你应该正确地将它它转义为字符数据。

我为何需要它?

     在HTML中 ,<script>元素中的文本是被当做CDATA (字符数据character data)的。在XHTML中,<script>元素中的文本是被看做PCDATA (分析的字符数据parsed character data)的。PCDATA由W3C验证服务器来处理,因此必须必须正确转义为CDATA。 此外,虽然大多数屏幕阅读器能够忽略<script>元素中的内容,不论它是什么类型的数据,如果它所包含的代码没能正确转义,那你又自找了另一个潜在的故障点。

那我该怎么做呢?

     在<script>元素的任何内容中使用CDATA标记。为了支持传统浏览器,我们还应注释掉CDATA标签。

例子:

<script type="text/javascript">
//<![CDATA[
$(function() {
$('#divone').tipsy({fade: true, gravity: 'n'});
$('#divtwo').tipsy({fade: true, gravity: 'n'});
});
//]]>
</script>

 

6. 正确转义 HTML实体

Properly escape HTML entities

标准.

     &,引号,大于号和小于号及其他一些HTML实体必须转义。

我为何需要它?

     使用HTML实体,尤其是在URLs中,不仅可能会出现验证可用性问题,而且会导致使用中的一些问题。例如,符号( & )恰好是HTML中初始字符,如果您没有正确转义符号,浏览器会假设你告诉它显示一个HTML实体,而这个实体却是不存在的。

那我该怎么做呢?

     将HTML实体转义成它们对应的转义字符

  • 用 &amp; 替换 &
  • 用 &quot; 替换 "
  • 用 &lt; 替换 <
  • 用 &gt; 替换 >
  • 其他 HTML 实体

例子:

<a href="http://www.example.com?page=1&amp;view=top">A "Cool" Link</a>
<div id="content">Test information.</div>

 

7. 只使用小写的标签和属性

Use only lowercase tags and attributes

标准.

     所有元素和元素属性必须小写。属性值可以是大写和小写.

我为何需要它?

     因为W3C制定的XHTML标准是这么说的

那我该怎么做呢?

     请务必对所有元素和属性只使用小写。一些开发人员常犯的错误是使用大写字母作为一个JavaScript元素的属性(如onClick ,onLoad等)。

错误写法:

<A href="#" onClick="doSomething();">Send us a message</A>

正确写法:

<a href="#" onclick="doSomething();">Send us a message</a>

 

8. 对所有输入元素表单使用Label

Label all form input elements

标准.

     所有的表单元素都应该添加 <label> 标签.

我为何需要它?

     <label>元素可以为使用鼠标和显示器的人添加某些功能。点击位于<label>中的文本可聚焦到相应的表单元素。屏幕阅读器(Screen readers)可读取这些标签(label ),这样读者可以知道他们需要提供哪些信息。

那我该怎么做呢?

     给每个表单的每个域(field)添加 <label> 。

例子:

<p><label for="searchbox">Search: </label><input type="text" id="searchbox" /></p>
<p><input type="checkbox" id="remember" /><label for="remember"> Remember</label></p>

 

9. 提供图片的替代文本(Alternative Content )

Supply alternative content for images

标准.

     你的网页中的每一张图片都应该附上一个alt标签。

我为何需要它?

     如果图片不能显示或者不能查看的时候,alt标签会告诉来访者图片显示的是什么。美国残疾人法案规定所有图片必须有一个alt标签。

那我该怎么做呢?

     让每张图片都包含一个alt标签。alt标签属性必须包含相应的文本,而且不能留空。如果你使用图片仅仅是为了设计,那就使用CSS来实现相应的样式吧。并且别忘了给你的图片定义一个确切的 width 和 height 值。

错误写法:

<img src="picture.png" />
<img src="spacer.gif" alt="" />

正确写法:

<img src="picture.png" alt="A warm sunset" width="450" height="350" />

 

10. 正确地使用CSS属性"id" 和 "class"

Correctly use CSS attributes

标准.

     当使用CSS属性时,每个"id"只能使用一次。 "class"你想用多少次就用多少次。

我为何需要它?

     开发人员经常因为粗心大意而在同一个页面中多次使用同一个 "id"。这可能会在不同的浏览器中带来意想不到的后果,并且你会得到W3C给你的大大的红色 "Validation Failed"

那我该怎么做呢?

     一定要记住,在单个页面中只能使用一次同一个"id"。如果你需要在多个元素中使用相同样式,那就用"class"吧.

错误写法:

<p id="leftNav">Home</p>
<p id="leftNav">Contact</p>
<p id="homeNav" class="leftNav">Home</p>
<p id="contactNav" class="leftNav">Contact</p>

 

总结:验证、验证、验证!


     使用本文提到的所有技术,你将会更顺利地建立易用而又符合标准的网站。但是别满足于此!不断地验证您的网站,并立即解决问题。 下面是你创建网页的时候应该运行的验证程序列表:

 

 

本文翻译自:Ways To Make Your XHTML Site Accessible Using Web Standards

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/10-ways-to-make-your-site-accessible-using-web-standards-2.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

12 条留言

点此留言
  1. magehao

    链接已做好~
    你得代码插件很好哦,用的什么?这么配置的?

  2. killfox

    有用,呵呵,以后自己写代码的时候参考下。

  3. Ludou

    回复@magehao
    代码高亮用的是WP-Syntax,上传后直接激活就可以用了。

  4. Ludou

    回复@killfox
    小小技巧,这是每个网页设计人员必须会的哦。就像作者说的这其实只是一个first step,并没有什么高深的东西。

  5. 123博客

    做个链接吧。
    博客名:123博客
    网址:http://www.onetwothree123.com/
    已经做好你的链接了

  6. Ludou

    回复@123博客
    呵呵,暂时不想做友情链接,看咱的博客也没有什么新鲜有趣的东西,做友情链接也没什么意义。

  7. Ludou

    回复@magehao
    代码高亮现在改用syntaxhighlighter

  8. andcat

    很有心思…

  9. 萌动

    博主你好,我是做产品设计的,业余也做下网页。
    我用W3C标记验证服务检测我的网站,发现有很多提示问题,请问怎么解决啊。有没有相关的软件自动更正啊,十分感谢,
    QQ:76857737

    • Ludou

      @萌动 没有自动更正的软件,自行参照标准进行更改

  10. 1zjzy

    您文章里的图片是用什么工具做出倾斜的特效呢

发表留言