UO Blogs: Creating accessible content

Overview

Learn how to create accessible content within UO Blogs.

Please Note: UO Blogs uses the WordPress platform and the methods described here will work for WordPress.com sites as well.

Content Types

Each of the content types listed below require some effort to ensure that they are accessible. Please select a link corresponding to a content type to learn more:

Theme and appearance

To create an accessible website in UO Blogs with UO branding, you must use the latest version of the Cosmic theme. Cosmic V2 includes a varitey of accessibility fixes, and is regularly updated with new accessibility upgrades and features.

To select the Cosmic V2 theme:

  1. Log in to the site's dashboard.
  2. Hover over the Appearance menu and select Themes.
  3. Search for Cosmic V2 or scroll through to find cosmic-wp-v2.
  4. Select Activate to install the theme.

For more information about Cosmic V2, please consult the UO Blogs: Installing Cosmic V2 Theme for your site article.

Return to the top

Text and headings

Text

Guidelines for text from the Digital Accessibility @ UO website:

  • The bulk of your text should be an easy-to-read sans-serif font. Serif fonts might be appropriate for headings and text with special emphasis, but the majority of your text should be a sans-serif font. University Communications recommends some easy-to-read fonts for digital content. 
  • If you are using a non-standard font on a website, define a fall-back font that is more widely available.
  • Use generous line spacing. The line height should be at least 1.5x the font size, and the paragraph spacing should be at least 1.5x the line height.
  • Don't use justified text alignment. Left-aligned text is best; right-aligned and center-aligned text can be used in moderation.
  • Consider breaking long paragraphs of text into smaller paragraphs of text, or into bullet lists.
  • Some people have difficulty reading lines of text longer than 80 characters. Consider using a multi-column page layout for text-heavy content.
  • Pages must be able to zoom in up to 200% without loss of functionality.

Adjusting text in UO Blogs

  • Text is entered by default in UO Blogs in left-aligned with a paragraph tag in the editor.
  • Line height between paragraphs (through the insertion of a line break by pressing Enter or Return) is double-spaced by default
  • Line height within paragraphs is going to vary depending upon the elements used:
    • If standard paragraph text without using a list: the font is single spaced
    • If you're using a list: it is subject to the list formatting preset in UO Blogs
    • If you're using headers: padding is added around the text specific to formatting presets pertaining to each heading level
      • For example, using Heading 2 will have more padding than Heading 3, 4, or 5.

Headings

Guidelines for headers from the Digital Accessibility @ UO website:

Guidelines

  • Content creation tools like word processors and rich text editors have defined Heading elements. Use these to organize the content, versus styling non-heading text with increased font sizes, underlining, bolding text, colors, etc.
  • Headings are arranged in order of importance with heading levels. The syntax and number of heading levels varies by platform, but typically starts with <h1> as the main heading on the page, <h2> to indicate main subsections of content, down to <h6> as the lowest level heading.
  • Pages must have exactly 1 <h1> heading. This is the main content on the page.
  • Most content does not require 6 levels of headings.
  • Do not skip heading levels. <h1> headings must be followed by <h2> headings.
  • Be careful of headings that may be automatically inserted by the content template. Some web platforms (like UO Blogs) may automatically add the page title as an H1 heading, for example.

Adjusting heading levels in UO Blogs

In the page and post editors, select the text you wish to change or to change the format of any text you are about to enter, select the Paragraph drop-down menu. This will allow you to select the desired heading level as well as display keyboard shortcuts to those heading levels. (The image below includes shortcuts for macOS.)

Note: Do not select Heading 1 as the title of the page will already be set to Heading 1. Proceed to using Headings 2-6.

Paragraph/Heading level drop-down menu in the editor.

Return to the top

Tables

Tables need headers and shouldn't have blank cells, and captions can provide helpful context.

Adding table headers

Please Note: You can only add headings to the top row of a table without additional coding in the Text editor.

To add a header row:

Page editor screen, table options menu, row option, table row properties option highlighted

  1. Highlight the top row of the table
  2. Select the Table menu
  3. Choose Row
  4. Select Table row properties
    Table row properties window: Row type set to Header, Alignment none
  5. Select the Row type drop-down menu
  6. Select Header
  7. Select OK

Adding a caption

Captions provide a context for any data table and help to guide readers through its contents.

  1. Go to the Table menu
  2. Select the Table Properties option
  3. Select the Caption checkbox. This will place a small space above the table where you can enter it.
  4. Select OK to return to the editor.
  5. Enter your caption in the space above the table.

Avoid blank cells

Please ensure that all of the cells are filled even if there is no data.

For example, enter 0 or n/a into a table cell when applicable.

Return to the top

Media

Media refers to any uploaded file that can be used in links or menus. This includes PDFs, Microsoft Office files (Word, Excel, PowerPoint, etc.), image files, among others. Making them accessible in UO Blogs will depend on the file type. To learn how to make documents and media accessible, please take the UO Digital Content Accessibility Training

Once uploaded, the file cannot be edited within UO Blogs. You can upload a more-accessible version of the file and replace its counterpart.

Images

Any images uploaded to UO Blogs need to have alternative (alt) text attached to them. Alt text can be added in two different ways, in the media library or in the image properties in the page/post editor.

In the media library

  1. Go into the site dashboard, then select the Media menu option on the left side.
  2. If you need to upload your image file, you can drag-and-drop it on the media library window that appears.
  3. Once the image is uploaded, double-click on the image file to open the image properties
  4. In the image properties, enter a summary of the image's contents in the Alt text field. Additionally, make sure that the Title field is readable. For bonus points, add a longer summary to the Caption field.

From the alt text menu option

Please Note: This is only possible with images that are already uploaded to your site.
  1. Go into the site dashboard, then select the Alt Text option from the Media menu on the left side.
  2. A list of all images that do not have alt text will appear. You can choose other filter options from the drop-down menu above the initial list
    From the Alt Text screen, you can select the Images with no alt text option from the drop-down menu if it is not already chosen.
  3. In the right-hand column, you can enter any alt text for the listed images or mark them as decorative, and track how many characters are used.
    Alt Text screen with the Alt column highlighted on the right

Return to the top

Links

Links should descriptive text that is both easy to read and meaningful to the reader. 

Adding meaningful link text

From the page editor, highlight the text to which you would like to add a link.

  1. Select the Insert/edit link button in the editor toolbar or use the key combination Ctrl-K (Windows) or Command-K (macOS).
    Location of the Insert/edit link button in the editor toolbar.
  2. A small box will appear.
     Small link box with the Paste URL field labeled 1 and the Apply button labeled 2.
    1. Enter in the link's web address or URL (for example, found in your browser's address bar) and enter it that field.
    2. Select the Apply button (indicated by the bent arrow button).

If you don't have text to highlight or would like to add a link to existing content on your site:

  1. Select the Insert/edit link button in the editor toolbar or use the key combination Ctrl-K (Windows) or Command-K (macOS).
  2. A small box will appear. Select the Link options button (indicated as a gear icon).
    Small link box with the Link Options button highlighted
  3. A larger box will appear. Enter the link's web address in the URL field or select from the list of existing content in the list at the bottom.
    Insert the destination URL or choose from your site's existing content
  4. Add meaningful link text to the Link Text field.
  5. Select Add Link to save the link.

Return to the top

Additional Resources

For more assistance about UO Blogs, please submit a request with the Web Development & Hosting service page.

Create a Ticket Print Article

Related Articles (1)

UO Blogs: Installing Cosmic V2 Theme for your site
Learn how to install the Cosmic V2 theme or convert from Cosmic to Cosmic V2.

Related Services / Offerings (1)

Web Development & Hosting Support
The web development and hosting service can assist the UO community with creating and administering a dynamic, secure, and recognizable web presence.