WordPress Themes and Plugins for Accessibility

When people start building their brand-new WordPress websites, their mind is filled with design and colors and content. “How can I make my site look good?” is typically their foremost thought. Experienced site designers will usually say “think of your audience”, and will try to make something that caters to as many people as possible. One group that has often times been left out of the discussion are individuals with disabilities who need assistive technology to understand and interact with content that is being presented to them.

Fortunately, WordPress has incorporated web accessibility guidelines into its application, making it easier for site creators to make a more accessible site. To familiarize yourself with the issues of accessibility, you can refer to our Accessibility page. In addition, WordPress makes available themes that are “accessibility ready”, as well as plugins that can easily enable accessibility features.

It should be noted that this is an ever evolving area of web development, so plan to see updates on this topic as guidelines evolve and new technologies are introduced. Here are some current WordPress themes and plugins that follow accessibility best practices:

Themes:

 

Aaron


Bookmark


Shift


Simone


Startup Blog


Tiny Framework


Unit


Unlimited

You can also go directly to the list of Accessibility Ready themes.

 

Plugins:

 

Photo by Casey Clingan on Unsplash

Next Steps

UNF Faculty Domains was released from the starting gate on September 19, 2017. Any UNF faculty member can now sign up for their own domain and start building in their space. We held a couple of workshops on September 22nd to introduce the system as well as install the WordPress application. In October we will offer the workshops again. You can sign up for Getting Started with UNF Faculty Domains, or Getting Started with a WordPress Website on UNF Faculty Domains.

While we cover several topics about configuring your new WordPress website, you may need a review of what we cover in the workshop, or you might want further instruction on what else needs configuring. You can find out more by following the links to the topics below:

Photo by Isaac Benhesed on Unsplash

Getting Started Videos

Three videos that will help you get started using UNF Faculty Domains

An Introduction to UNF faculty Domains

Visit the Getting Started Using UNF Faculty Domains documentation referred to in the video.


Getting Started with UNF Faculty Domains


Get a WordPress Website on UNF Faculty Domains

Photo by Felix Russell-Saw

UNF Faculty Theme Screenshot

UNF Faculty Domains Template

As part of the UNF Faculty Domains initiative, we have created a template for UNF faculty to use when installing a WordPress website. Our first template (we plan on creating others soon) includes two UNF-styled themes with some recommended plugins. The default WordPress installation includes everything you need to get started. A complete demonstration site is available, if you would like to see what the theme looks like. You can check it out by visiting https://template.domains.unf.edu/.

We have documentation on Using the UNF Faculty Template, as well as full documentation on how to Install WordPress. This template will automatically be selected when you install the WordPress application. In addition to the main theme included in the template – known as UNF Faculty – we have another theme that has a UNF look and feel called Faculty Domains 2017. It is based on the WordPress theme known as Twenty Seventeen that is included on “standard” WordPress installs. When installed, your site will look something like this:

Faculty Domains 2017 Theme Screenshot

 

We think either theme will be a good starting point for UNF faculty, and CIRT will provide workshops that will help you to use the template to its fullest advantage.

What is a Domain?

A web domain is an “address” on the web. In your web browser, if you type google.com, you will go to Google’s main, or “home” page. A domain name needs to be registered with a global organization (known as ICANN). You can register a domain with an ICANN-accredited domain registrar. You can usually register a domain when you purchase web hosting space, or you can register a domain separately (we use Reclaim Hosting for both of these). A domain name is unique and can only be registered to one organization or person at a time. You need to renew a domain annually or your will lose it.

We see web domains and their associated websites all the time – google.com, amazon.com, whitehouse.gov, hardvard.edu. A domain is actually made up of two parts – The domain name (or second-level domain) – google, amazon, whitehouse – and then the “top level domain” is the .com, .gov, and .edu endings. A domain is like a name in a phonebook or contact list. Associated with the name is a number and that number is how the computer networks talk to each other. Google’s “number”, or at least one of them, is 216.58.219.174 (Also try 216.58.192.46). Typing in that number in a web browser will get you to Google’s home page. However, it’s easier to remember google.com than it is to remember the number(s). This system is called DNS or Domain Name System. DNS uses a Domain Names System server, and that is a special computer server that acts as the “lookup” authority. Think of it as a global domain contact list. There are many local DNS servers that talk to other DNS servers and they are constantly talking to each other and updating their contact list. Below are a couple of real-world lookups.

Can I find the IP address of my domain?

You would need to use what’s known as a Terminal program (or terminal emulator). A terminal is a text-based interface that gives you access to a computer, either your own or another computer on the network. You type in text commands at a command line or “prompt”.

To find an IP address, you start the Terminal and type the following:

ping google.com

After you hit the Enter key, you would get a streaming set of data repeated until you hit the Ctrl-c key combination. Google’s IP address may change because they’ve got lots of servers.

What is UNF’s IP address?

Let’s try something more familiar. In the terminal type:

ping www.unf.edu

You should get – 139.62.234.57

You can try facebook.com? You should get – 157.240.14.35

Now if you type google.com or www.unf.edu in a web browser, you would go to the websites that you would expect. But what if you typed the number in the web browser? Well, that would work too – so typing 139.62.234.57 into a web browser would transport you to the University of North Florida home page. So what happens when you click on the mystery number below?

Click Me to enter a whole new world of shopping! >>> 54.239.17.7

Amazon.com!

There are web-based IP lookup sites if Terminal is not your thing – an example is IP Checker.

One final note. If you have purchased your own domain you may not have your own unique IP address and that’s because you are probably using what is known as “shared hosting” where a bunch of customers share a server with a single IP address. Obtaining your own IP address will cost extra, but unless you are a large organization or business, you generally don’t need it.

ICANN’s Beginner’s Guide to Domain Names (PDF)

Domain vs. Subdomain

One way that you can subdivide a domain is with a subdomain (or third-level domain). A subdomain is usually another computer server application that exists at the domain of an organization. The most common third level domain is www. There are many subdomains at the University of North Florida.

First off, unf.edu is the University of North Florida’s domain name. The .edu top level domain is unique in that in can only be registered to institutions of higher education, and only through the organization known as Educause – https://net.educause.edu/edudomain/ . You can’t get .edu as part of a personal domain name. Other restricted domains like .mil and .gov are unique because they are government owned as are country domains like .uk (United Kingdom), .es (Spain), and .it (Italy).

The following are examples of subdomains (or subdirectories) at UNF:

If you would like more information about how domains work on the UNF Faculty Domains system, you can read documentation on Domain Management, Registering a Domain, Setting Up Subdomains, and Subdomains vs. Subdirectories.

Photo by Sebastien Gabriel on Unsplash

Scalar

Installing Scalar

Scalar is a free, open source authoring and publishing platform that’s designed to make it easy for authors to write long-form, born-digital scholarship online. Scalar enables users to assemble media from multiple sources and juxtapose them with their own writing in a variety of ways, with minimal technical expertise required. To install Scalar, use these simple steps:

  1. Login to your control panel (https://domains.unf.edu/dashboard) using your UNF username and password.
  2. Once logged in you’ll be at the homepage of your cPanel (control panel). Navigate to the Applications section of the cPanel then select Scalar.
  3. To begin the install click install this application in the upper-righthand corner.
  4. On the next page the installer will ask for some information about this install. The first thing you’ll want to do is decide where to install it. If you’re wanting to install Scalar on your main domain, you can leave the directory area empty. If you created a subdomain, you can select it from the dropdown menu. You also have the option of installing Scalar in a subfolder by typing in the folder name in the Directory field. Click here for more information about subdomains and subdirectories.
  5. By default the installer will automatically backup your website and update it anytime a new version comes out. While we recommend you keep this option, it is possible to only do minor updates, or turn them off completely. The installer will also create a database for you automatically, but if you’ve already created one for this website you can choose Let me manage the database settings and enter the details. Click Install to continue.
  6. The installer will take just a few moments to install Scalar and a progress bar will keep you updated. When it is complete you will see a link to your new Scalar site as well as a link to the backend administrative login screen for your Scalar site. Click the website link to configure your new Scalar installation.
  7. When you visit the website, you should see a sign in link. Use the email and password that you used when installing the application. You will then be presented with your Scalar main page. You are now ready to use Scalar to create and publish your book.

Using Scalar

Once you’ve finished the Scalar installation process and have signed in, you can learn how to use this application in the official Scalar 2 User Guide. This support guide will help you get started and begin creating your Scalar site. Since you have already created an account, you can begin with the section on Creating Your First Book.

UNF Faculty Theme

This theme is a child of the Superhero theme. Use it to give your blog a clean look with bright pops of color. It uses a UNF-styled header including a UNF osprey logo. It includes page templates where you can add a CV, as well as a course, research, and service page.

Signing Up Vs. Signing In

If you are brand new to the world of UNF Faculty Domains, you may not know what you need to do to start using it. So to begin, you first need to select a domain name that will look something like yourdomain.domains.unf.edu. That is what we refer to as signing up. After you have signed up and have selected your domain (you only sign up ONCE), you will subsequently sign in. To sign up or sign in you will go to the same page at https://domains.unf.edu and click on the Get Started button or the Dashboard link.  After you have selected your domain name, and you sign in, you will see what is known as the Control Panel or cPanel screen.

Customize Your WordPress Site

One of the features of using WordPress is that it is almost infinitely configurable. That’s a good thing and a bad thing at the same time, since it can be difficult to find where to go to make a change to your site. In recent updates to the WordPress software, there has been a concerted effort to make the WordPress Customizer the default place to go to change the look and feel of a site.

It is not, however, universal. Meaning that what is on offer to customize depends on the theme you are using. Some theme designers give you lots of possibilities for customization. Others are pretty limited. In this document, we’ll be using the UNF Faculty Theme (which is based on the Superhero theme) as our example to customize.

You should be signed in to your WordPress site and viewing the Dashboard.

There are many section to this document, which makes it quite long. If you want to jump to a specific section of the Customizer, use the links below:

Go to the Appearance > Customize menu.

Customize from Appearance Menu

The Customizer allows you to see your changes immediately. The different options that are available to configure are located in the left sidebar, and there is a preview window for how the site looks, and will update when you make changes within the Customizer.

At the top of the Customizer (in the sidebar), you will see a message that “You are customizing, My Blog”. If you’ve changed the Title of your site, you will see something different.

Click on the question mark icon to get an expanded description of what the Customizer does.

There are what are known as Edit Shortcuts in the preview – indicated by an icon that look like this – 

Clicking on the Edit Shortcuts icon will take you directly to the area in the Customizer where you make the change.

For example, clicking on the Edit Shortcut icon in the header (between the logo and the Menu), sends you directly to the Menu Locations area.

The UNF Faculty theme has only one menu, called “Main“. Other themes might have multiple menus. If you click on Edit Menu, you will move to the editing area of the Main menu.

From here you can edit all of the Menu items, and even add items to the menu.

Clicking the Back button, near the top of the sidebar…

Customizer Back button

 

… will move you to the Menu editor area where you can add a new menu.

Click the Back button one more time to return you to the top of the Customizer.

Click the Save & Publish button at any time to commit your changes.

Now we can describe each Customizer section and how it affects your site.

Active Themes

As you know the UNF Faculty Template uses the UNF Faculty Theme by default. Click the Change button in the Active Theme area.

This will show you the Customizing Themes area.

Here you can preview another theme that is available in your WordPress installation. If your mouse your mouse over a them preview icon, a Live Preview button appears.

Clicking the Live Preview button in the above example will preview the Faculty Domains 2017 Theme. Clicking the Save & Publish button would change the theme for visitors of your site. Clicking the Customize button will return you to the Customizer and not change your theme.

Site Identity

The next option down the list of Customizer options is Site Identity. Here you change modify the Site Title and Tagline, choose whether to display them or not, also add a Site Icon.

You can change the Title and Tagline of your site to something like a name for the Title, and maybe your job title or department. Then click the checkbox labeled “Display Site Title and Tagline“.

Making the following changes…

… will result in your Header changing to:

The Site Icon area is a place where you can change what is also know as the Favicon. It is the icon that appears in your web browser tab when you visit a site. After the changes we made above, the tab in you browser might look like this (with a very plain looking icon):

If you choose to change the Site Icon (we recommend you do), make sure to follow the guidelines listed – Icons must be square, and at least 512 pixels wide and tall. Clicking the Select Image button will send you to the Media Library. There is an all-black UNF logo that is available to use.

Click on the logo in the Media Library and then click the Select button in the lower right corner. The Site Icon area will now reflect your changes with a represntation of what a web browser tab will look like and what a shortcut icon will look like on a mobile device. You can Save & Publish to commit your changes to the website, or you could click the Remove button, or the Change Image button. What they would do should be obvious.

Your web browser tab should now look someting like this:

Colors

The next Customizer area is Colors. Again, keep in mind that the option to change colors and what is available to change depends on the theme. For the UNF Faculty Theme you can change the Header Text Color and Background Color.

Let’s choose a couple of wild colors to show you how it changes the look of the site.

That gives us the Title text in bright yellow, and the site background color in bright green. You might want to change to more subtle colors that are easier to live with.

Header Image

The Header Image for the UNF Faculty Theme could actually be described more as a logo. The recommended size for images is 480 × 150 pixels. The current Header Image selection looks like:

If you want to change the image, click the Add new image button. Like you did in the Site Icon area, choose an image in the Media Library, again making sure you choose at least a 480 x 150 pixel image. We’ll choose the all-black University of North Florida logo. Click on the image and choose the Select and Crop button.

Now this gets a little tricky because you also need to “crop” the image. You need to drag the boundary around the entire image and then choose the Crop Image button.

Now the site Header will look like this, and frankly the black logo gets a little lost in the blue background, so you may not want to save this change.

Background Image

The Background Image area doesn’t get much use because it can make the site look a little busy, but we’ll demonstrate a change here anyway. Click the Select Image button to get started.

I’ve got an image of water on my computer so we’ll upload and choose that. In the Select Image window click on the Upload Files tab (instead of the Media Library, which are images that already exist on the site).

You can drag files from your hard drive into the window, or click the Select Files button and navigate to where the file exists on your computer. Your image will upload to the Media Library and you can click the Choose Image button. You can choose from several options.

Modify these to adjust the image to your theme. Your website looks like this with the CV page on view:

It may not be the professional look you want, but it demonstrates the feature. You always go back and Remove the background image.

Widgets

We skip the Menus area since we covered that earlier.

We have three Widgets in the UNF Faculty Theme – Search, Links (a.k.a. “Blogroll”), and Recent Posts. You can configure any Widget by clicking on the down area on the top-right of the widget box.

There’s not much to configure in the Search Widget, but you could change the Title. So this…

… will give you this in the Widget area on your site.

Each Widget will have a varying number of options. Play around and see what things do. That’s what’s great about the Customizer.

You can also add new Widgets (and if you install certain Plugins, they will give you even more Widgets). Click on the + Add a Widget button. Shown below is a small sample of the available Widgets:

If we chose Audio, for example, we would have a Widget that would place an audio player in the sidebar of your site. It might look something like this:

Visitors could click on the Play button and listen to your Welcome Message.

Again, explore the other Widgets, and also explore other Plugins that install new Widgets.

Static Front Page

A WordPress site displays Posts on your home page by default. Every time you write a new post it will appear at the top of the page. If you would like to have another page appear as the home page, the Static Front Page area in the Customizer is where you change this.

Let’s say you want your CV page as the page that visitors to your site see first. Begin by click the “A static page” radio button, and then in the Front page selector choose Curriculum Vitae.

Click the Save & Publish button and now visitors will see your CV page first. Now you might be asking, “where did my Blog go?” Well, it’s still there, but we need to give it a new home. Let’s create one. In the Posts page section click +Add New Page. Type in Blog (or something else like “Latest News”) and then click Add.

A new page will be created on your site to house your Posts. Click Save & Publish to save your changes.

Now, let’s add it to our Menu. Go to the Menu Customizer (you can find your way there right?). Choose Main.

Now choose + Add Items. Next, click the Blog page. It will be added to your Menu.

Note that the resulting Menu configuration…

Will result in a menu that looks/functions like this…

You can move the Blog item under the other pages so that it is one continuous list of pages.

Additional CSS

The last Customizing area, Additional CSS, is quite technical, and better left alone if you’re new to WordPress. It allows you to make “code level” changes to your site. Having said that, if you consider yourself a rebel (or at least an experimenter), we can show you one modification that might be of use to you.

This is the area where we made changes to the style of the original Superhero theme (the parent theme) that this UNF Faculty Theme (the child theme) is based on. So let’s look at what’s there:

Oooh, it’s scary! Well, it’s just code and it changes the look or functionality of the site. So let’s make a minor change here. Look for the lines that read:

#masthead-wrap {
 background-color: #092C73;
}

That set of characters after the # sign is the background color of the Header (referred to as masthead-wrap in the code). Now change:

#092C73

to

#000000

(or just #000 will work too).

If you like the change, click Save & Publish. If not, click the X in the upper left and choose Leave when asked “Do you want to leave this site?”

What we did was change the blue color to black. Zeros mean “no color” by the way and we need three zeros to indicate black. This system is called Hexadecimal Color or Hex Color for short – or the even less technical name, Web Color, which is beyond our scope here, but it is likely to be useful to you down the road.

Wow! That was a lot of information, but we hope it was helpful.

 

 

 

 

 

Introduction

UNF Faculty Domains is a project at the University of North Florida managed by the Center for Instruction and Research Technology (CIRT).

It is a full featured web hosting solution that offers the opportunity to create academic publishing spaces using modern web applications. This project is one of many “Domain of One’s Own” projects happening at institutions of higher learning across the country. As part of UNF’s version of Domain of One’s Own, UNF faculty receive their own subdomain (web space) to install the available applications, as well as easy to use management tools.

WordPress, Omeka, and Scalar are currently available.

These faculty domains can function as hubs for professional presence. The service provides both simple templates for common needs and more sophisticated tools and support for faculty who wish to experiment.

If you are not sure what a domain is, the “What is a Domain?” article may help.