Accessibility

Creating accessible web sites is a collaborative effort between the developers of Caltech Sites and site editors. For example, our image blocks all include the html attributes that screen readers use to provide an audio representation of images - but it is up to each site's editors to provide meaningful text describing said images.

Here are some tips to make pages more accessible:

1. When uploading images, include a concise descriptive alt text. The alt text will be included with the image when displayed on the page. People who use screen readers will be able to read it to help give them context.
2. When using image blocks, consider adding additional context to images. Maybe it's a diagram, graph, or some kind of figure that supplies supplemental information to your overall content.
3. When you want to add spacing between content, use Spacer blocks. Do not use empty headers or empty paragraphs in rich text. Our accessibility checker will flag empty headings; see below for how to fix these.
4. When creating a table, include some sort of table header descriptions or labels, to improve readability.

To help editors evaluate the accessibility of their pages, they will be alerted of accessibility issues while trying to preview or save changes. There are currently two accessibility validators - one for empty headings, and one for empty table headings. We will be adding more accessibility validators in future releases.

To preview without saving, clicking on the mobile phone icon on the top right corner.

In the example below, we attempted to save a rich text block that has an empty H2 header. You can tell it is empty by the gray font color and placeholder text of the heading level.

After attempting to save with a validation error, you should see a small red icon in the minimized vertical navigation bar (if the preview sidebar is closed), indicating the block location of the error and an actual validation error at the affected field. The validation error gives you a textual clue as to where the empty header is located.

The minimized vertical navigation bar will open up when you hover over it. You can click on the name of the block to jump to it rather than scroll down yourself. Note: If you have the preview sidebar open, you'll need to close it to see the navigation bar. Click the right-arrow icon in the sidebar's upper-left corner.