CampusPress Themes and Plugins

Table of Contents:

Yale CampusPress offers free WordPress sites to the Yale community. It is for students, faculty and staff who need a flexible, online CMS for professional, personal and group sites. When creating a new CampusPress site, accessibility of the site should be considered. The first step is to chose a WordPress theme that has been built with accessibility in mind.

WordPress offers a category of  “Accessibility Ready” themes.  To be tagged as “Accessibility Ready”, the theme must pass an accessibility review by WordPress.  Check out the WordPress Accessibility Requirements for Themes.

When you are choosing a theme for your CampusPress site, the Accessibility Ready themes are found by choosing the “Accessibility Ready” filter at the top of the Themes page.   There are 25 “Accessibility Ready” WordPress themes available on CampusPress. We recommend using one of the Top Four Accessibility Ready Themes that are detailed below. Even a theme tagged as “Accessibility Ready” may not be the most accessible theme.  If you’d like to use another theme, try enabling the theme and testing it yourself. The biggest problems we usually see are keyboard inaccessibility and color contrast issues. Try using your keyboard only to see if you can get to all of the focusable items on the page (including the menu and submenu items).  Check that text isn’t placed on a background image or some other background that creates poor color contrast with the text. 

Using an “Accessibility Ready” tagged WordPress theme does not automatically make your site fully accessible, but it is a good starting point.  To make sure you are following the Web Content Accessibility Guidelines (WCAG), refer to our WCAG 2.1 A and AA checklist.

Wordpress also offers a Quick Start Guide to making your Wordpress site accessible.

When choosing a plugin, be very careful as these are not reviewed by WordPress for accessibility.  Though not a WordPress plugin, Qualtrics is a great accessible option for forms.

CampusPress offers a limited selection of plugins.  We have reviewed these for accessibility.  Please find each plugin with its associated accessibility notes detailed below.  Some of these plugins are not recommended for use.  Some plugins need to be tweaked in order to be made accessible.

Top 4 “Accessibility Ready” Themes on CampusPress

  1. Aaron

    Accessibility Notes:

    • There are header and background image options, but don’t use the background image (text on image is bad).  If a header image is needed, use a logo with a solid background and good contrast, and use the header widget instead of the call to action.  The call to action area has bad contrast when a header image is used.   

    • This theme has two menu locations: main menu and social menu.

    • The widget locations are: front page sidebar, footer, header, and footer copyright

    • A search field is included in the header, but it goes away in the mobile view by default. This can be adjusted in the “customizer”. Go to the Advanced Settings to find the check box option “The search form in the header menu is hidden on smaller screens by default. Check this box to show it on all screen sizes.”

    • Skip link is not visible upon focus (use the Yale default child theme or add CSS to show this in child theme)

    • There are a lot of options with the widgets and customizations.  The call to action is optional.
       

    CSS that could be added to make the accessibility better:

    // To have skip link visible upon focus, add this CSS:
    
    .screen-reader-text:focus {
    
       clip-path: unset;
    
    // To add a visible focus indicator:
    a:focus, button:focus, input:focus
       outline: 3px solid black;  //choose a color with good contrast
    }
  2. Amalie Lite

    Accessibility Notes:

    • There are header and background image options, but you can’t really see these images if they are implemented.  The background image will make the footer hard to see.

    • This theme has two menu locations: main menu and social menu.

    • There is only one widget location that is under the logo and menus (can make for a long sidebar - try to use only a few widgets)

    • A search field would have to be added to a widget

    CSS that could be added to make the accessibility better:

    // To add a visible focus indicator:
    a:focus, button:focus, input:focus {
       outline: 3px solid black;  //choose a color with good contrast
    }
    
     
  3. Twenty Seventeen

    Accessibility Notes:

    • There is only a header image option (no background image option). You can put a video in the header (do not put a video in the header - it is not good for accessibility since it plays automatically).

    • This theme has two menu locations: main menu and social menu.

    • The widget locations are: sidebar, footer 1, and footer 2.  Sidebar can only be used on archived pages and blog posts.

    • A search would have to be added in a widget.

    CSS that could be added to make the accessibility better:

     // To add a visible focus indicator:
    a:focus, button:focus, input:focus {
       outline: 3px solid black;  //choose a color with good contrast
    }
    
    
    // To add a background color to the site title that displays on header image:
    .site-title {
       background-color: black;
    }
    
     
  4. Twenty Sixteen

    Accessibility Notes:

    • There are header and background image options. The background image will make the footer hard to see.  

    • This theme has two menu locations: main menu and social menu.  The social menu is duplicated in the mobile menu view (see the CSS notes below to fix this).

    • The widget locations are: sidebar, content bottom 1, and content bottom 2.

    • A search would have to be added in a widget.

    CSS that could be added to make the accessibility better:

    // To hide the social menu that is duplicated in the mobile menu view:
    .site-header-main .menu-social-links-container {
       display: none;
    }
    
    
    // To add a visible focus indicator:
    a:focus, button:focus, input:focus {
       outline: 3px solid black;  //choose a color with good contrast
    }

Plugins available on CampusPress

AddThis Social Share

Documentation: http://help.edublogs.org/addthis-social-bookmarking-plugin/

Buttons added to pages, posts, etc. to share with any social media, email, or print

Use the bigger buttons that display below the post (larger buttons are easier for mobility disabilities).  Best to use the “build your own” button. Select the larger size (32 x 32) for a larger, more accessible touch region.  Then select the services that you want to use. You can select from a list found here: 

https://www.addthis.com/services

For example, enter “facebook, email, pinterest_share” to display a Facebook share link, email link, and a Pinterest share link.  

Then click save changes.

Accessibility

Documentation: http://help.edublogs.org/accessibility-plugin/

Gives options to make your site more accessible. It is better to use an accessibility-ready theme and keep accessibility in mind as you create the site though!

Most useful options in Accessibility plugin: 

  • Force underline on all links

  • Add outline to elements on keyboard focus Outline color (hexadecimal, optional)

Contact Form

Documentation: http://help.edublogs.org/contact-form-plugin/
We suggest that this plugin not be used.  The challenge question (2+2=) is not announced to screen reader users and there is no way to hide the challenge question.

Custom CSS

Documentation: http://help.edublogs.org/editing-css/

Inject your own CSS into the campuspress theme

Pros: Your CSS will not be removed when there is a theme upgrade (or plugin upgrade) - this is completely separate from your theme.  Good to inject CSS to make your site more accessible!

Easy Tables

Documentation: http://help.edublogs.org/easy-tables-plugin/

Adds a button to the WYSIWYG to include a table on a post or page.

Layout tables: 

  • Add role=”presentation” on the table element (do this in “text” view).

  • There is no way to remove the table border with options available.  This must be done with CSS. Example:
     

<table role="presentation" style="border: none;">
<tbody>
<tr style="border: none;">
<td style="border: none;">column1</td>
<td style="border: none;">column2</td>
<td style="border: none;">column3</td>
</tr>
<tr style="border: none;"> 
<td style="border: none;"></td> 
<td style="border: none;"></td> 
<td style="border: none;"></td> 
</tr> 
</tbody> 
</table>

Data tables:

  • Don’t forget to add header cells (found in table cell properties) and scope (also in table cell properties). Example:
     

<table><caption>My table caption</caption>
<tbody>
<tr>
<th scope="col">height</th>
<th scope="col">width</th>
<th scope="col">depth</th>
</tr>
<tr>
<td>10cm</td>
<td>5cm</td>
<td>100cm</td>
</tr>
<tr>
<td>40cm</td>
<td>4cm</td>
<td>2cm</td>
</tr>
</tbody>
</table>

Embed Any Document

Documentation: http://help.edublogs.org/embed-any-document-plugin/

This plugin is not recommended because focus is very hard to see (and many times not visible at all) once the user gets into the iframe.

Footnotes

Documentation: http://help.edublogs.org/footnotes-plugin/

This plugin is not recommended because the links to the footnotes are not given enough description (only numbers can be used).  Links should be understandable and make sense by just reading the text.

Formidable Forms

Documentation: http://help.edublogs.org/formidable-forms-plugin/
A form plugin.

  • Not all inputs are accessible. Do not use the following form fields: File Upload, Date, Time, Star Rating, Toggle (there are no work-arounds to make these accessible).

  • No success or error message announced upon submittal. Error messages should be programmatically associated with the input fields.

Add the word “Error” before each error message to clearly mark it as an error (under “Validation” → “Required” in the form build area.  Then under “Settings” → “Customize HTML”, add aria-describedby to the input field and associate it with the error message (give an ID to the div element with the error message). Example:

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
    <label for="field_[key]" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
    [input aria-describedby="error1"]
    [if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
    [if error]<div class="frm_error" id="error1">[error]</div>[/if error]
</div>
  • It is best to not use the description field for an input, as these fields are not programmatically associated with the fields (unless an aria-describedby is used like in the case for error messages above).  Make sure the label is clear enough without the need for further instructions.

  • Required fields are not marked required (screen reader users just hear “star”).  Make sure to add the word “required” to the field label or add aria-required=”true” to the input field (in Settings → Customize HTML).  Also, adding a small description above the form that explains what the asterisk means would be helpful to all users.
      [input aria-required=”true”]

  • Do not use radio buttons, checkboxes, or scale without adding fieldset and legend to the group!  Do this under “Settings” → “Customize HTML”. Other work-arounds: use drop downs instead or include label information in each option.

<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<fieldset>
<legend>
    <label for="field_[key]" class="frm_primary_label">[field_name]
        <span class="frm_required">[required_label]</span>
    </label>
</legend>
    <div class="frm_opt_container">[input]</div>
    [if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
    [if error]<div class="frm_error">[error]</div>[/if error]
</fieldset>
</div>
  • Okay fields to use: Text, Paragraph (long text), Dropdown, Email, Phone, Website/URL, Number, Slider, Password, Address

Forums

Documentation: http://help.edublogs.org/forums-plugin/

This plugin is not recommended. Many of the input fields are missing labels.  It is not possible to add alt text to a user’s profile picture.

Google Maps Pro

Documentation: http://help.edublogs.org/working-with-the-maps-plugin/

This plugin is not recommended.  There are many elements missing alt text and form input fields missing labels.

Jetpack

Documentation: http://help.edublogs.org/jetpack-plugin/

There are many things you can do with Jetpack…including post by email, slideshows, image gallery option, auto post, social media accounts, social share options, portfolios, and more (and this is just the free version).

How to use Portfolios

Portfolio Shortcode

Portfolio Demo Blog
This feature is not working on CampusPress.

This feature of Jetpack is not recommended.  The focus is not trapped in the carousel and focus is not visible.

This feature is fine.  There isn’t that much to it.  

This feature is also not working on Campuspress.

https://jetpack.com/support/sharing/

This feature is good.  The icons are properly labeled, added as a list, and since they all open in a new window, it will inform the user that it opens in a new window.  This can be used instead of the AddThis plugin. The contrast is not good when using the “text only” option on the button style Sharing settings. It is better (for color contrast) to go with the “icon only”.

https://jetpack.com/support/related-posts/

Use the option to add a heading to your related posts!

Jetpack features that shouldn’t affect accessibility of your Wordpress site:

  • Post by email:

https://jetpack.com/support/post-by-email/

This feature is fine.  It won’t post pages, but will post blog posts.

JSON Feed

Documentation: http://help.edublogs.org/json-feed/

It shouldn’t affect the accessibility of the site.

Mathematica Toolbox

Documentation: http://calle.ekdahl.website/MathematicaToolbox/

No accessibility review done.

Media Tree

Documentation: http://help.edublogs.org/media-tree-plugin/

This plugin is not recommended.  The file structure is not keyboard-accessible (folders are implemented as spans - should be buttons).

Polldaddy Polls & Ratings (now Crowdsignal)

Documentation: http://help.edublogs.org/polldaddy-polls-ratings-plugin/

This plugin is not recommended.  The answer choices are not grouped in a fieldset with a legend.  Also, the vote button is not keyboard-accessible.

Print, PDF, & Email by PrintFriendly

Documentation: http://help.edublogs.org/print-friendly-and-pdf-plugin/

This plugin is not recommended.  It opens in a new window (user is not notified of this).  The new window has buttons that are not labeled. Email form is missing programmatically associated labels.  

RSS Just Got Better

Documentation: http://help.edublogs.org/rss-just-better-plugin/

This plugin is fine.  A basic RSS feed importer.  

Scheduled Content Plugin

Documentation: http://help.edublogs.org/scheduled-content-plugin/

This plugin should not affect accessibility.

Supreme Google Webfonts

Documentation: http://help.edublogs.org/supreme-google-webfonts-plugin/

This plugin should not affect accessibility.

Table of Contents

Documentation: http://help.edublogs.org/table-of-contents-plugin/

This plugin is fine and should not affect accessibility.  It’s great for a long document and forces people to think about their heading structure and content organization.

Term Management Tools

No documentation. (Not sure how it works.)

This plugin should not affect accessibility.  “Allows you to merge terms and set term parents in bulk.”

User Widget and Profiles

No documentation. (Not sure how it works.)

“A widget which displays blog participant info - number of posts and comments, and links to profile page.”

Wiki

Documentation: http://help.edublogs.org/wiki-plugin/

This plugin is not working correctly on Campuspress (“page not found” error).

Zotpress

No documentation. No accessibility review done.

“Bringing Zotero and scholarly blogging to your WordPress website.”