Creating 万博体育官网网址 Tables
布局表

介绍

如果您不是屏幕阅读器用户,请假装您只是片刻您将访问一个网站,了解生物205课程的举办地点您转到包含此信息的网页,这是您所听到的:

表有10列7行Department Code, Class Number, Section, Max Enrollment, Current Enrollment, Room Number, Days, Start Time, End Time, Instructor, BIO, 100, 1, 15, 13, 5, Mon,Wed,Fri, 10:00, 11:00, Magde, 100, 2, 15, 7, 5, Tue,Thu, 11:00, 12:30, Indge, 205, 1, 15, 9, 6, Tue,Thu, 09:00, 10:30, Magde, 315, 1, 12, 3, 6, Mon,Wed,Fri, 13:00, 14:00, Indge, BUS, 150, 1, 15, 15, 13, Mon,Wed,Fri, 09:00, 10:00, Roberts, 210, 1, 10, 9, 13, Mon,Wed,Fri, 08:00, 09:00, Rasid.

After listening to this information, do you have any idea where biology 205 is supposed to be held? Probably not当你直接听桌子而不进入表读书模式在屏幕阅读器中,这种类型的信息可能非常混乱即使您进入表读取模式,如果表没有正确标记,仍然会令人困惑。

布局表vs.数据表

Web上的表有两种基本用途:数据表和布局表HTML表的原始用途是用于表格数据表是存在行标题,列标题或两者的数据表例如,这是一个简单的数据表:

雪莉的女儿们
名称 年龄 生日
成龙 4月5日
贝丝 8 1月14日

表格也常用于页面布局布局表没有可以映射到表格单元格内信息的逻辑标题布局表传统上用于克服使用HTML的视觉呈现和布局的限制但是,使用CSS,在控制页面布局方面有更多的灵活性,因此最好不要使用表来执行此操作使用CSS可以获得更清晰,更简单的HTML代码,更好的最终用户适应性以及很少的潜在可访问性问题布局表也不应该在HTML5中使用。

有时候,即使是一些可访问性倡导者,有时也会建议布局表对可访问性不利实际上,布局表不会造成固有的可访问性问题在可访问性方面,你肯定会做很多糟糕的事情只要表格的设计考虑了可访问性 - 确保适当的线性化阅读顺序,内容缩放等,各种残障人士都可以轻松访问布局表格。

布局表线性化

内容线性化是指删除所有格式时内容的顺序对于数据和布局表,内容的显示顺序可能会影响其含义许多网站使用表格进行布局,其中大多数使用跨越的行和列来实现格式化效果最终结果是线性化阅读顺序可能与视觉阅读顺序不同这可能导致访问线性化阅读和导航顺序的人员混淆,例如使用屏幕阅读器或使用键盘导航的个人。

屏幕阅读器基本上忽略了内容在表格内部的事实The screen reader just reads the content in the literal order that it appears in the code如果代码中内容的文字顺序是逻辑的,那么线性化的阅读顺序是合乎逻辑的。

重要

屏幕阅读器对布局表和数据表的处理方式截然不同对于布局表,它们可以根据源代码顺序简单地读取表的内容For data tables, however, they will identify the presence of the table including number of columns and row, provide table navigation functionality, read row and column headers, etc.

那么屏幕阅读器如何知道表是数据表还是布局表?他们对表格标记和结构进行一些分析以“猜测”因此,数据表标记至关重要,例如<字幕><TH>等等是决不在布局表中使用,否则屏幕阅读器可能错误地将表作为数据表呈现,从而导致增加的开销和混乱。

让我们来看一个阅读顺序成为问题的例子这是为视觉效果创建的布局表:

地下室     UP!
洗手间 厕所 红晕  
  必须    

视觉用户会读到:“地下室厕所必须冲洗!”

屏幕阅读器将听到(或通过盲文感觉):“地下室UP!厕所冲洗必须”

Why does this difference exist between the visual order and the screen reader order? To answer this question, we have to look at the table structure这是相同的表格,边框可见,并且每个单元格都添加了数字,以指示屏幕阅读器读取它们的顺序:

1 - 地下室 2 3 4 - UP!
5 - 厕所 6 -厕所 7 - 同花顺 8
9 10 - 必须 11 12

如果您查看此表的源代码,您会注意到源代码顺序与上面指定的顺序匹配工具,如,Web Developer Toolbar等可以帮助您直观地查看表格的线性化阅读顺序。

布局表大小调整

当作者使用表格进行布局时,他们通常会这样做,以便更精确地(可以)灵活地控制页面中元素的位置执行此操作时,布局表通常会定义像素值以尝试控制精确位置由于存在大量终端用户浏览器和设备,从纯文本移动浏览器到大屏幕高清显示器,定义基于像素的大小调整是非常有限的。

布局表的主要问题是缺乏适应最终用户内容调整的灵活性,主要是低视力用户的文本大小调整如果最终用户放大了像素大小的表格单元格中的文本,则会导致可读性问题,尤其是如果文本不再适合定义的像素尺寸这可能导致水平滚动条,文本从单元格中流出并重叠其他页面组件等如果使用布局表,请确保表的结构允许最终用户自定义和文本缩放。

使用最简单的表配置

一些设计师对布局表感到疯狂它们创建各种嵌套表和不必要的行和列,使用每个方向的跨越行和列,直到表几乎看起来不再是一个表如果表格边框设置为零,所有这些对于有视力的用户可能是不可见的,但盲人用户将“看到”它他们的屏幕阅读器可以告知他们表格中的行数和列数当他们试图从桌子中的一个区域导航到另一个区域时,他们可能会迷失方向这里的经验法则越简单越好。