Examples

✗ Bad example: let the user determine how best to access content 

Non-responsive design forces users to make compromises, use extra time and exert additional effort to access information. And, in cases where users have mobility or other physical limitations, the information may be completely inaccessible. 

^{(Source: CSS-TRICKS article on responsive tables)}

✓ Good example: adopt a responsive front-end framework

^{(Source: CSS-TRICKS article on responsive tables)}

Use "responsive design" principles (CSS @media queries) to detect if the screen is smaller than the maximum width of the table. If it is, the table gets reformatted, by

1. Hiding the table headers (although still accessible by screen readers)
2. Creating a new column with table headers placed in table rows.
3. Displaying the content of each row within a single column

HTML table:

<table>
 <thead>
  <tr>
   <th>First Name</th>
   <th>Last Name</th>
   <th>Job Title</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>James</td>
   <td>Matman</td>
  <td>Chief Sandwich Eater</td>
  </tr>
  <tr>
   <td>The</td>
   <td>Tick</td>
   <td>Crimefighter Sorta</td>
  </tr>
 </tbody>
</table>

CSS:

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

CSS for setting every table-related element to be block-level, then for each "cell", use CSS generated content (:before) to apply the column header to label the content originally shown in each row:

/* Max width will take effect for any screen smaller than 760px and also iPads specifically. */

@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {

 /* Force table to not be like tables anymore */
  table, thead, tbody, th, td, tr {
    display: block;
    }

/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}

tr { border: 1px solid #ccc; }

td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative; padding-left: 50%;
}

td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}

/* Label the data */
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

Examples

✗ Bad example: increasing the size of the view requires horizontal scroll

When zoomed, the page requires both vertical and horizontal scrolling to access information. 

^{(Source: Accessible University by University of Washington)}

✓ Good example: increasing the size of the view doesn't require horizontal scroll

This web site is zoomed from 100% to 400%. When zoomed, the page has a vertical arrangement for scrolling in one direction, up and down, to access information. 

The navigation menu across the top collapses into a menu button in the upper right as the screen size diminishes.

^{(Source: Knowbility article on Reflow)}

Examples

✗ Bad example: Non responsive interface.

The effect of changing the text spacing and line height on a non-responsive interface: some of the headline text of each item no longer displays

✓ Good example: Responsive interface.

The effect of changing the text spacing and line height on a responsive interface: the headline text of each item always displays

^{(Source: Knowbility article on text spacing)}

Examples

✗ Bad example

p.bad {
  font-family: serif;
  line-height: 1;
  text-align: justify;
}

There are a number of things wrong with this example:

• The line-height or "leading" is too tight at just 1. There needs to be some space (although not too much!) between each run of text, to separate them. A value of 1.3 to 1.5 is optimal, depending on the font.
• Justified text can produce readability issues for people with dyslexia and other conditions that affect reading and comprehension.
• Justified text can produce unevenly enlarged spaces between certain words, sometimes known as "rivers".
• The width of a paragraph is called the "measure." Measures that are too wide make it difficult for readers to scan back to find the start of the following line. In this case, it is not set at all, meaning it can easily grow too large on wider viewports.
• The typeface is a serif font. While accessibility requirements do not mandate use of specific fonts, be aware that people who have online reading difficulties benefit from body text set using a clear, consistently formed and balanced sans-serif font.

Code editor

In the code editor, you'll find the bad example described above and an alternative. Try different fonts to see where the line-height and other metrics need to be adjusted.

Examples

✗ Bad example

In a WYSIWYG editor, it is possible to upload an image of some text (let's say, "delicious pancakes") and insert it into the page with alternative text that matches the text exactly:

<img src="/path/to/text.png" alt="delicious pancakes" />

One disadvantage here is that screen readers will, in some contexts, read the alternative text with "graphic" appended, and you might not want the user to know that the text is really an image. In addition, text that’s inside an image isn’t translatable into different languages, selectable for copy/paste, or resizable without degrading its quality.

✓ Use CSS and web fonts

Write the text as text in the editor and let the publishing system apply styling.

Behind the scenes, the text will be styled using web fonts and CSS properties such as background, text-shadow and color.

.pancakes-text {
  font-family: PancakeFont, FallbackFont, sans-serif;
  color: SandyBrown;
  text-shadow: 0.02em 0.02em 0 Brown, 
                        0 0 0.5em violet;
}

Code editor

You can experiment with CSS text styling in this code editor, using the above rules as a starting point.

Examples

Many users will zoom their web pages using CTRL and "+" or CMD and "+". This will enlarge the pages proportionately, so there's little you need to do in terms of intervention. However, you should also take into account that some users may choose to resize just their text. Setting a px based font-size on the html element suppresses this ability, but a percentage based value does not. In this example, 100% means “100% of the size the user chose in their browser or OS settings:”

html {
  font-size: 100%;
}

When the user changes their font size—say, by choosing "Large" in Chrome's advanced settings—the font-size will increase as expected—that is, if no px sizes are used further down in the page’s CSS. So all font sizes after that, the html element should be set using the relative units like em or rem. To make sure line-height adjusts proportionately, define your CSS line-height using relative units or unit-less values. If you don’t, when the font size increases, the line height will remain the same, resulting in poor line height and reduced readability.

✗ Bad example

html {
  font-size: 100%;
}

p {
  font-size: 1em;
  line-height: 20px;
}

In the above code, the line-height uses an absolute value (it’s not relative to the root font size). The result, after the user enlarges their text in their settings, will be something similar to this:

✓ Good example

html {
  font-size: 100%;
}

p {
  font-size: 1em;
  line-height: 1.5;
}

In this example, the line-height is always equal to 1.5 times the current font-size. So whether the text size may be increased or decreased, the line height will remain appropriate at any text size.

Note: To make sure text resizing is possible via pinch zoom on touch devices, you need to use the correct viewport meta tag:

<!-- don't use this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- use this -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">