Tables

Data tables are used to organize data with a logical relationship in grids.

Purpose

A table is great for displaying multiple points of data across a range of items. For example, a list of technology platforms with their product name, capacity, status, cost, etc. would display well as a table.

Accessibility Requirements

There are specific technical requirements for tables to be Section 508 compliant:

• Each column or row that is a header, must be labeled the <th> element.

• The table must include a <caption> element.

How To Create Accessible Tables

Best Practices

There are 3 simple rules.

• Right-aligned numeric columns

• Left-aligned text columns

• Column names aligned according to column content

Focus

Focus on the most important

Try to position key columns from left to right (this may be the opposite way, based on the region you’re designing for) — this is based on the way we read. Columns on the left will get the most attention. We will check the other columns only if we’re interested in something specific.

The F-Layout relies upon various eye tracking studies for its foundational concept. These scientific studies show that web surfers read the screen in an “F” pattern — seeing the top, upper left corner and left sides of the screen most… only occasionally taking glances towards the right side of the screen. These eye tracking studies argue in favor of placing the most important elements of your site (branding, navigation, call to action) on the left side of the design.You can find out more about F-patterns in this article by Brandon Jones http://webdesign.tutsplus.com

Type

• Don’t Use All Caps as it is hard to read

• Avoid using Serif fonts as they create additional visual noise

• Avoid using bold and italic

• Use good fonts only

Image for post

Avoid Duplication

I see needless duplication very often in UI design. It has big impact on readability as it adds extra items without any value.

How To Create Accessible Tables