2016年2月24日
简单标记显现网页结构
文章的标题与副标题一般都会透过简短的文字来描述其内容重点，它有助读者们更快捷地搜寻资料，以及理解不同内容部份之间的关系。这个情况在阅读报章时尤其重要，因为我们可以透过新闻标题来选择自己有兴趣的文章。
要在网页上设立标题，除了简短文字以外，网页设计人员通常都会利用不同的文字格式，例如加大字体或粗体文字来突出标题内容。但是这个简单改动只能够惠及健视用户；对于读屏软件的使用者而言，不同款式的字体也只不过是一般文字而已。因此，网页设计人员在设立标题的同时，也须要为标题加入适当的网页标题元素。读屏软件用户就可透过几个键盘快捷键来阅读标题，以及迅速地略过部份内容，并跳转到其他章节。
这一次我们就以政府资讯科技总监办公室的无障碍网页成功准则示例，繁体中文版网页为例：
https://www.ogcio.gov.hk/sc/our_work/community/web_mobileapp_accessibility/promulgating_resources/handbook/live_example/
网页如下图所示，使用了不同的标题层级元素，例如主要标题「主要内容」是标题层级一(H1)；「无障碍网页成功准则示例」标题是标题层级二(H2)；而标题内的相关标题「A级」及「AA级」，列作标题层级三(H3)。这种设计除了可让读屏软件用户快速地跳转和浏览内容外，它还可以让视障用户清晰地了解到网页的内容结构。
文：香港失明人协进会资讯科技主任Johnny
实用技巧小贴士
在以下的例子里，主要内容是第一栏的「即时新闻」，会以H1作为标记。而「网站导航」及「相关连结」属于较次要内容，因此会以H2作为标记。
范例代码∶
<head>
<title>即时新闻</title>
</head>
<body>
<!-- main contents -->
<div class="main">
<h1>即时新闻</h1>
<!-- article text here -->
</div>
<!-- bottom panel -->
<div class="left-nav">
<h2>网站导航</h2>
<!-- content here -->
</div>
<!-- bottom panel -->
<div class="left-nav">
<h2>相关连结</h2>
<!-- content here -->
</div>
</body>
