Kentico accessibility

Kentico accessibility checklist

Below are some Kentico specific instructions for publishers and editors at UW Bothell on how to make your webpages accessible. 

Images need alternative text

Any image that denotes information requires an alternative description for non-visual devices. If an image is purely decorative and serves no content purpose it can have an alt text with two quotation marks(""). This will tell asssitive technology to skip the image and move onto the next content.

When inserting an image in Kentico, note that the Image/Edit dialog provides a field for the alt tag.

Image editing area with alt text field highlighted

The text should describe the image or contain the actual text if there is text in the image. Note that if you insert an image through the Quickly Insert Image option it will automatically put the file name into the alt text field. This should be removed and replaced with readable text.

Example of a file name incorrectly added to the alternate text field

Screen readers usually say "Image of" or "Graphic of" before reading the alternate text.

Learn more about images


Headings

When selecting heading levels, ensure that they are in outline order. This will help the semantic structure of your page and assist those using non-visual devices. For example, a Heading 4 should only be a sub heading under Heading 3, not Heading 2.

The title of the page is considered Heading 1, which is edited through the Properties tab. The heading options within the toolbar are Heading 2- Heading 5 which is in order of largest heading to smallest. 

Heading Tips

  • Typically pages only have one Heading 2 - best practice is no more than two
  • Heading 3s can be bolded to look like a Heading 2; the screen reader it will read it has a Heading 3

Heading 3 normal

Heading 3 bolded

Heading 2 normal

Read more about headings


Tables

Columns and rows need to be clearly identifiable as a header for a screen reader to differenciate between what is data and what is header information. 

Making table headers

  • Click on the table tool.

               table button location on toolbar

  • In the Table Properties dialog select the Headers drop down. There are three options to create headers: in the first row, the first column or both. Select the option that fits your data best.

The table properties dialog box with the Headers drop down

  • You will know that they are correctly marked as headers by the styling. For example, "Both" was selected so this table has both row headers (light gray background) and column headers (dark gray background.)

A table displaying column and row headers
(View of table in Edit mode)

Unseen edit mode text Column header Column header
A row header data data
A row header data data

The text in the white box above the row headers will only appear in Preview or Live site if any content is placed there.

Table Captions

If there is not already a descriptive title that introduces the data table, add a caption. The caption will appear before the table.

An example of a table with a caption

(View of table in Preview mode)

The optional summary field is for any details that may provide additional context of the table to a user of a non-visual device.

Learn more about tables