2

我正在遵循联合国的无障碍指南来编写无障碍表格。

我有这张桌子。我做了 -我认为-应该是<th> 粗体的。

桌子

这是 HTML：

<table width="100%">
    <thead>
        <tr>
            <th>Year</th>
            <th>1991</th>
            <th>1995</th>
            <th>2000</th>
            <th>2002</th>
            <th>2007</th>
        </tr>
    </htead>
    <tbody>
        <tr>
            <th>Indicator 1</th>
            <td>3.0</td>
            <td>11.0</td>
            <td>7.8</td>
            <td>4.0</td>
            <td>4.7</td>
        </tr>
        <tr>
            <th>Indicator 2</th>
            <td>9.0</td>
            <td>23.4</td>
            <td>19.5</td>
            <td>9.4</td>
            <td>9.1</td>
        </tr>
        <tr>
            <th>Indicator 3</th>
            <td>18.7</td>
            <td>32.0</td>
            <td>30.0</td>
            <td>20.1</td>
            <td>21.8</td>
        </tr>
    </tbody>
</table>

但我不确定它是否准确。我认为这更有意义：

<table>
    <tbody>
        <tr>
            <th id="year">Year</th>
            <td headers="year" id="year-1991">1991</td>
            <td headers="year" id="year-1995">1995</td>
            <td headers="year" id="year-2000">2000</td>
            <td headers="year" id="year-2002">2002</td>
            <td headers="year" id="year-2007">2007</td>
        </tr>
        <tr>
            <th id="indicator-1">Indicator 1</th>
            <td headers="indicator-1 year-1991">3.0</td>
            <td headers="indicator-1 year-1995">11.0</td>
            <td headers="indicator-1 year-2000">7.8</td>
            <td headers="indicator-1 year-2002">4.0</td>
            <td headers="indicator-1 year-2007">4.7</td>
        </tr>
        <tr>
            <th id="indicator-2">Indicator 2</th>
            <td headers="indicator-2 year-1991">9.0</td>
            <td headers="indicator-2 year-1995">23.4</td>
            <td headers="indicator-2 year-2000">19.5</td>
            <td headers="indicator-2 year-2002">9.4</td>
            <td headers="indicator-2 year-2007">9.1</td>
        </tr>
        <tr>
            <th id="indicator-3">Indicator 3</th>
            <td headers="indicator-3 year-1991">18.7</td>
            <td headers="indicator-3 year-1995">32.0</td>
            <td headers="indicator-3 year-2000">30.0</td>
            <td headers="indicator-3 year-2002">20.1</td>
            <td headers="indicator-3 year-2007">21.8</td>
        </tr>
    </tbody>
</table>

你怎么看？有人对表格和可访问性有经验吗？如果可能，请提供参考。谢谢。

注意：我知道该summary属性，但为简单起见，我在此处将其删除。

在sench touch 2中解析xml

我想使用 sencha touch 解析 xml，我已经尝试了 stckovrflow 中的所有可能性，但没有任何显示：

XML 数据：来自：http ://www.aufaitmaroc.com/feeds/maroc.xml

商店：

 Ext.define("MyApp2.store.NewsStore", {
 extend: "Ext.data.Store",
 requires: ["Ext.data.proxy.JsonP", "Ext.dataview.List", "MyApp2.model.News"           ,"Ext.data.reader.Xml"],
config: {
model: "MyApp2.model.News",
autoLoad: true,
proxy: {
    type: 'jsonp',
    url: 'http://www.aufaitmaroc.com/feeds/maroc.xml',
    reader: {
        type: 'xml',
        record: 'item',
        rootProperty: 'channel'
        }
    }
}    
});

我的模型：

Ext.define("MyApp2.model.News", {
extend: "Ext.data.Model",
config: {
type:'tree',
fields: [
{name: 'title', type: 'auto'}

 ]
  } 
   });

我的观点 ：

 {
                    xtype: "list",
                    store: "NewsStore",
                    itemTpl: '<h1>{title}</h1>'
 }

我在 chrome 的控制台中有这个错误：

图片来自我的浏览器

我试图解决我的问题：我在我的 apache 的 HTTPD.conf 中添加了这个（我正在使用 WampServer）

    AddType application/x-font-woff .woff
    AddType application/rss+xml .xml

我创建了：httpd-proxy.conf 并将其放在额外的文件夹中

我的 httpd-proxy.conf

 ProxyRequests Off
 ProxyPreserveHost On

<Proxy *>
Order deny,allow
Allow from all
</Proxy>

ProxyPass /EMBackend http://localhost:8383/MyApp2/index.html
ProxyPassReverse /EMBackend http://localhost:8383/MyApp2/index.html
<Location /EMBackend>
    Order allow,deny
    Allow from all
 </Location>

我已将此添加到 httpd.conf：

 Include conf/extra/httpd-proxy.conf

& 仍然无法显示任何数据。任何帮助将不胜感激:)

Ps：我尝试像这样使用JsonP：

       proxy: {
    type: 'jsonp',
     url: 'https://ajax.googleapis.com/ajax/services/feed/load?         v=1.0&q=http://www.aufaitmaroc.com/feeds/maroc.xml',
    reader: {
        type: 'json',
        rootProperty: 'responseData.feed.entries'
        }
    }

我没有得到所有数据，你可以尝试将 url 放入浏览器。

4

2 回答 2

3

对于像这样具有简单结构的表，您的标记（第一个简单版本）足以实现可访问性。具有类似结构的表格出现在 WCAG 2.0 的 HTML 和 XHTML 技术中，项目Using table markup to present tabular information，没有额外的标记，仅th用于标题单元格。

结构更复杂的表可能需要特殊技术。

但是，数据表通常应具有caption可访问性和可用性元素。它可以帮助用户获取有关整个表的关键信息。代替标题、标题或表格前的文本可用于此目的，但它们与表格（在标记级别）的关联方式不同。

于 2013-05-26T13:55:11.013 回答
1

我发现使用scope属性更有意义：

<table width="100%">
<thead>
    <tr>
        <th scope="col">Year</th>
        <th scope="col">1991</th>
        <th scope="col">1995</th>
        <th scope="col">2000</th>
        <th scope="col">2002</th>
        <th scope="col">2007</th>
    </tr>
</htead>
<tbody>
    <tr>
        <th scope="row">Indicator 1</th>
        <td>3.0</td>
        <td>11.0</td>
        <td>7.8</td>
        <td>4.0</td>
        <td>4.7</td>
    </tr>
    <tr>
        <th scope="row">Indicator 2</th>
        <td>9.0</td>
        <td>23.4</td>
        <td>19.5</td>
        <td>9.4</td>
        <td>9.1</td>
    </tr>
    <tr>
        <th scope="row">Indicator 3</th>
        <td>18.7</td>
        <td>32.0</td>
        <td>30.0</td>
        <td>20.1</td>
        <td>21.8</td>
    </tr>
</tbody>

参考：使用 th 元素指定数据表中的行和列标题 | 伯里亚街 456 号

于 2013-05-26T13:14:00.560 回答