Objective
This article outlines the steps to create an accessible table using the content editor, ensuring it is friendly for screen readers.
Key Steps
Step 1: Open the Content Editor
- Select your page.
- Click on 'Show Editor'.
- Locate the table icon to add a table in the Rich Text Editor.
Step 2: Configure Table Rows and Columns
- Choose the number of rows and columns needed for your table in the drop down grid.
Step 3: Access Table Properties
- Right-click on the table.
- Select 'Table Properties' from the context menu.
Step 4: Set Accessibility Options
- Navigate to the 'Accessibility' tab.
- Indicate that there is one row of headings and no column headings.
Step 5: Add Captions and Summaries
- Add a caption using descriptive language to describe the table's content for screen readers.
- Optionally, include a summary.
Step 6: Save Changes
- Click 'OK' to apply the changes.
- Accept and save the updated table.
Step 7: Preview the Table
- Preview the table to see how it will look on the live site once published, to ensure headers and captions are displayed correctly.
- With the item selected and saved, click the Preview button under the Publish tab.
Step 8: Verify Code Structure
- Check the code to confirm the presence of:
- Table tag
- Caption
- Header information
- Body of the table.
Cautionary Notes
- Ensure that the table is not overly complex, as this can hinder accessibility.
- Avoid using design properties that may conflict with accessibility features.
Tips for Efficiency
- Familiarize yourself with the content editor's interface to speed up the process.
Link to Loom Video of Steps