The XHTML WYSIWYG Editor For Desktop & Web Applications

Tables

Tables and accessibility

  • The desire to make information universally accessible has generated standards and best practices that are supported at the authoring level. This ensures information in tables is as accessible as possible prior to publication.
  • The editor supports the creation of accessible content in four ways:
    • Authors are given a choice between creating layout tables or data tables.
    • Essential information needed to make data tables accessible is required before they can be saved.
    • Additional information is collected for data tables and this information is made available to screen readers.
    • The editor also includes a view mode called "Screen Reader Preview" that allows authors to verify (prior to publication) that content presented in tables is accessible.

Accessibility and layout tables

  • Layout tables are a popular method of presenting mixed content comprising text and images. However, layout tables can hinder accessibility if authors are unaware of how content in tables is processed by assistive technologies, such as screen readers.
  • First, layout tables typically position text in relation to images, whereas screen readers completely ignore any such visual relationships. Instead, they process information found in layout tables in strict linear fashion, from left-to-right, top-to-bottom, regardless of the type of content.
  • The editor's Screen Reader Preview is therefore designed to give authors a glimpse of how a given table will be processed by screen readers. This highlights any accessibility issues, and allows authors to make changes prior to publication.
  • For example, in the layout table below (seen in Edit mode), the author doubtless intended the text describing the Acropolis to be read in relation to the image of the Acropolis that appears beneath the text. The same is true for the pyramid.

Layout table seen in Edit mode.

  • However, despite the author's good intentions, significant accessibility problems arise when the same content is processed by a screen reader, as demonstrated by the Screen Reader Preview below:

Layout table seen in Screen Reader Preview.

  • The most striking difference between the Edit and Screen Reader views of the layout table is that the relationship between images and text has broken down. For example, the words "...such as the Acropolis seen below" are no longer followed by an image of the Acropolis.
  • In the same way, the words "...pyramids such as this..." are no longer followed by the image of a pyramid.
  • Since the author is now aware of these obstacles to comprehension, s/he can return to Edit Mode and make necessary changes before publishing.


Accessibility and data tables

  • Unlike layout tables, data tables typically do not contain images. Instead, cells in data tables usually contain text or numbers, whose meaning is understood by reference to column and row headers (see below).

A data table example.

  • However, if screen readers are not made aware of the presence of column and row headers, they will process information in a data table as if were in a layout table: reading from left-to-right, top-to-bottom.
  • Thus, a screen reader that is unaware of the column headers in the table above will generate the following meaningless output:
    • "Popular Summer availability Winter availability Greece Yes. Visitors are particularly drawn to sites of antiquity such as the Acropolis. Yes No Egypt Yes, an increasingly popular tourist spot, with pyramids being of special interest. Yes Yes"
  • To avoid this type of confusion, the editor requires authors to identify when a data table is being used, and ensures that screen readers are able to detect the presence of column and row headers in the table.
  • The result can be seen below, in the Screen Reader Preview of the same data table. The presence of column headers has been clearly flagged by the editor, and the screen reader can now use the headers to make sense of information found in the table:
    • "Country Greece Popular Yes. Visitors are particularly drawn to sits of antiquity such as the Acropolis. Summer Availability Yes Winter Availability No"...and so on.

Screen Reader Preview of data table.

Create a Table

  1. On the toolbar, select the Draw data table button or the Draw layout table button.. Alternatively, in the context menu, select Toolbar, Buttons, then either Draw layout table, or Draw data table.
  2. Draw the desired number of rows and columns for the table.

Draw a table.

  • In the case of data tables, once the table has been drawn, the Table properties dialog box displays and accessibility information must be entered before the data table is actually created.

Edit tables using the Table properties dialog box

  • To open the Table properties dialog box, place the cursor inside a layout table, open the context menu, and select Table, then Properties.
  • The following screenshot shows the Table properties dialog box for layout tables:

Layout table properties dialog box.

  • The following screenshot shows the Table properties dialog box for data tables. In addition to fields found in the layout table properties dialog box, data tables include the fields Summary and Caption:

Data Table properties dialog box.

  1. Under Rows and Columns (both required fields), input the number of rows and columns.
  2. For data tables only, under Summary, enter a summary for the table. Summaries are required for data tables and are made available to screen readers. Summaries do not appear in Edit mode or in Browser Preview mode, but are visible in Screen Reader Preview mode.
  3. For data tables only, under Caption, select Yes or No to indicate if the table is to have a Caption or header. Captions are made available to assistive technologies such as screen readers. They are input in Edit mode, appear immediately above the table and are center-aligned. Captions are visible in all view modes.
  4. Under Width, input the width of the table in pixels, or as a percentage of the width of the page. In data tables, when this field is left blank, the width of the data table expands as content is entered into the table.
  5. Under Cell Padding, enter a number representing the space you want to appear between the contents of a cell and the cell's border. One (pixel) is the default.
  6. Under Cell Spacing, enter a number representing the space you want to appear between the cells themselves. Two (pixels) is the default.
  7. Under Border, enter a number representing the thickness of the table gridline. The default border setting for layout tables is invisible or "0". However, for the author's convenience, a "0" border setting displays as a gray border in Edit mode. One pixel is the default setting for data tables.

Edit tables using the context menu

Tables context menu.

Column and Row Headers

  1. In data tables, it is assumed that the top row is a row of headers. Column and row headers appear bolded.
  2. To add/remove column headers in a data table, in the context menu, select Table, then (de-)select Column of headers or Row of headers.

Insert a row, or a column

  1. Place the cursor in the table and, in the context menu, select Table, then choose to insert a row / column either above / below or on the left / right.

Delete a row, a column, or a table

  1. Place the cursor inside the table and, in the context menu, select Table then choose Delete a table / row / column.

Merge cells

  1. Select consecutive cells for merging (horizontally and vertically).
  2. Place the cursor in the selection and, from the context menu, select Table then Merge cells.

Split cells

  1. Place the cursor in the merged cells and, in the context menu, select Table then Split Cells.

Align Row, Column or Cell Contents

  1. Place the cursor in the row / column / cell and, in the context menu, choose Table then Row / Column / Cell properties.
  2. Under Align horizontal, choose, Left, Right, Center, or the Default alignment.
  3. Under Align vertical, choose Top, Bottom, Middle, or the Default alignment.

Move around inside a table

  • Accessibility best practices reserve the use of the Tab key for navigating into the editor from another control in your content management system. Therefore, use the following keyboard combinations to move from one cell to the next while in the editor:
  • Windows and OS X:
    • Use CTRL + UP ARROW to go to the beginning of the current cell or preceding cell.
    • Use CTRL + DOWN ARROW to move to the beginning of the next cell.
    • Use the UP ARROW or DOWN ARROW keys to move to rows above or below.

Change the width of a table

  • The width of layout tables is set by default to 100% of the page width.
  • The width of data tables is left blank by default. If no width is specified by the content author, data tables expand gradually as data is entered into the table.
  • To change the width of a table:
  1. Place the cursor in the table and, from the context menu, select Table then Table properties.
  2. In the Table properties dialog box, under Width, set the width of the table in pixels or as a percentage of the width of the page.

    OR:
  3. Place the cursor on the vertical edges of the table until a double-headed arrow displays (see below).
  4. Drag the table to the desired width. The new width of the table display (in pixels) as the table is being resized.

Dragging a table to its desired width.

Change the width of a column

  1. Place the cursor inside the column and, in the context menu, select Table, Column properties.
  2. In the Column properties dialog box, under Width, enter the desired width of the column in pixels, or as a percentage.
    OR:
  3. Place the cursor along the column border until double-headed arrows display (see below).
  4. Drag the column to the desired size. The width of the column to the left is displayed, in pixels, as the column border is dragged.

Dragging a column to its desired width.

Reset table properties

  1. Place the cursor in the table and, in the context menu, select Table then Reset table properties. Selecting this option will not remove any rows or columns added since the table was first opened, but will:
  • Remove all column widths
  • Remove any formatting applied since the table was first opened

Insert space before a table

  1. Place the cursor in the top-left cell of the table. In data tables, place the cursor in the caption if one is present.
  2. Use the left arrow key to move the cursor to the left until it appears as one long cursor along the vertical left edge of the table, as seen in the screenshot below. Press ENTER to insert a paragraph before the table.

Inserting a space before a table.

Insert space after a table

  1. Place the cursor in the bottom-right cell of the Layout or data table.
  2. Use the right arrow key to move the cursor to the right until it appears as one long cursor along the vertical right edge of the table, as seen in the screenshot below. Press ENTER to insert a paragraph after the table.

Inserting a space after a table.