Website resources

Accessibility

Content accessibility

Content editors are responsible for their content's compliance with federal and state accessibility laws. Below are instructions for content editors at UW Bothell on how to make your web pages accessible when using Kentico. Content editors can also download the accessibility checklist to get more details on what elements of your content need to be accessible and why.

Resources


Headings

Headings should be in semantic order:  page title will always be marked as a "Heading 1" but within the content areas, content editors can choose between the headings "Heading 2" through "Heading 5". 

Headings should related to each other on a page. Headings 2-5 should related to Heading 1. Think of headings like buckets of information and how they each relate to each other.

The importance of heading order

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 of 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 visually largest to visually smallest.

Tips

  • The topics of the headings should all relate to the page title/heading 1 of the page
  • Heading 2 is used to show the main points of the page and they each relate to the Heading 1 (page title)
  • Heading 3s can be thought of as sub-topics or sub-categories to the Heading 2, then Heading 4s and even more narrow sub-topic that further supports the Heading 2

Stylized headings

The point of headings is provide a navigational page structure for your end-user. People don't read pages, they scan them and good heading use increases how easily an end-user is able to scan and comprehend the information.

Example

Heading 3s can be bolded to look like a Heading 2; the screen reader will still read it has a Heading 3. Below is how all headings will appear if stylized with the "bold" option.

Read more about headings


Images

Images need alternative text: A screen reader will land on the image and say "Graphic of..." and read whatever alternative text has been added into the field. If an image doesn't load on a page, it will also display the alternative text.

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. 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. 

Tips

  • Always include alternative text
  • Image just descriptive? Use null text!
    • Just type in "" into the text field
  • Screen readers usually say "Image of" or "Graphic of" before reading the alternate text.

Tables

Tables need table headers and captions: Table headers are different from content headings. They denote the difference between the information in the table cells from the information in the table headers.

Tables need headers

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.
  • 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.

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. For example: "Building hours"


Hyperlinks


Video captioning

In order to be compliant with state and federal accessibility laws, all videos that are a form of official communication must be captioned for the deaf and hard-of-hearing.  

Washington State discount

Washington State has form a contract with 3Play Media to receive a discounted rate for video captioning (and other) services. Currently it costs about $2 per minute of video captioned. When using 3Play, it is possible to send videos to their servers directly from the UW Bothell YouTube channel, and when they've completed captioning it, the video will update automatically with the new captions. UW Bothell departments are encouraged to set up their own account with 3Play Media. Please contact uwbweb@uw.edu with any questions on video captioning.

Free captioning

YouTube is a possibility if you're looking for free options. Users can type the captions into YouTube directly while listening to the audio. If the video is hosted on a channel that you do not have the login credentials for, you will need to contact the owner of that channel and work directly with them on a solution.

  • Videos should always have closed captioning and YouTube auto-generated does not count as a final product but is a great place to start for manual updates. There are other free and fee-based options as well.
  • Electronic Documents (PDFs, Word Docs, etc.) need to be accessible. How you make it accessible depends on the format (.pdf, .docx, etc.).
  • External applications need to be checked for accessibility prior to procuring it. The university is liable for inaccessible software, programs, etc.; the vendor is not liable. Sometimes need to get certain verbiage in contracts as well to ensure products accessibility. 

Communities of practice

Join the AccessibleWeb@U mailing list to hear from a community of UW web designers, developers, and other interested individuals who discuss and share ideas on accessible web design.