CampusPress Themes and Plugins

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

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
}

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
}

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
}

Documentation (link is external)

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)

Documentation (link is external)
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.

Documentation (link is external)

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!

Documentation (link is external)

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>

Documentation (link is external)

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.

Documentation (link is external)

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.

Documentation (link is external)

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

Documentation (link is external)

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.

Documentation (link is external)

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

Documentation (link is external)

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

• Portfolios

How to use Portfolios(link is external)(Link is external)

Portfolio Shortcode(link is external)(Link is external)

Portfolio Demo Blog(link is external)(Link is external)
This feature is not working on CampusPress.

• Carousel Slideshows

Documentation (link is external)

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

• Testimonials

Documentation (link is external)

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

This feature is also not working on Campuspress.

• Sharing

Documentation (link is external)

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

• Related Posts

Documentation (link is external)

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

  Documentation (link is external)

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

  • Write posts or pages in plain-text Markdown syntax or Enable Markdown use for comments (link is external)

  • Check your spelling, style, and grammar
    (link is external)

  • Automatically share your posts to social networks (link is external)

  • Site stats
    
     

Documentation (link is external)

It shouldn’t affect the accessibility of the site.

Documentation (link is external)

No accessibility review done.

Documentation (link is external)

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

Documentation (link is external)

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.

Documentation (link is external)

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.  

Documentation (link is external)

This plugin is fine.  A basic RSS feed importer.  

Documentation (link is external)

This plugin should not affect accessibility.

Documentation (link is external)

This plugin should not affect accessibility.

Documentation (link is external)

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.

No documentation. (Not sure how it works.)

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

No documentation. (Not sure how it works.)

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

Documentation (link is external)

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

No documentation. No accessibility review done.

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