WordPress

Getting an account and logging on

If you have never used U.OSU before, you can use the ‘Sign up for U.OSU.EDU link at https://u.osu.edu/ to sign up for the service.
Then later you can use the Login button at: https://u.osu.edu/ to log into the U.OSU.EDU WordPress service.
The U.OSU login and signup buttons

If you need access to a specific group or project website, contact that site’s administrator to add you.
You will need to be signed up for U.OSU for an administrator to be able to add you as an author/editor.

Editing and adding posts

Posts are different from pages, as they can be categorized and tagged. The Teaching and Learning Resources Center has some more information about the difference between WordPress posts and pages.
To see the list of posts in your group’s site, click on the ‘Posts’ link in the link to the left of your screen.
To add a new post, click on the ‘New Post’ button.
A screenshot showing the location of the ‘Add New Post’ button.

A screenshot showing the location of the ‘Add New Post’ button.

Add a title for the new post in the Title field.
Add the body text in the rich text editor.
A screenshot showing where to add a title and the body of the blog post.

A screenshot showing where to add a title and the body of the blog post.

Choose a category for the post from the Categories pane on the right side of your screen.
A screenshot showing how to Choose a category for the post from the Categories pane on the right side of your screen.

A screenshot showing how to Choose a category for the post from the Categories pane on the right side of your screen.

Add tags for the post in the Tags pane.
Set a featured image in the Featured Image pane. The image will represent the post in search results.
A screenshot showing the Tags pane

— Using photos in a blog post

Images can also be used inline, in post by uploading them to the Media library and using the ‘Add Media’ button to place them. The U.OSU guides in the Teaching and Learning Resources Center have an article about uploading to a site’s Media Library.
When we upload a photo to the Media library we should be sure to add an alternative text description (related to the purpose of the image) in the field provided. Alt text should be concise at no more than 120 characters.
See the U.OSU Working with Images article in the Teaching and Learning Resources Center to learn more about consideration to think about when using images in posts.

Note that the Media Library has a 32 MB size limit for files uploaded. Use Photoshop or other image editing software to more appropriately size raw photos of use on the web. If you have a video you want to share as part of your blog post, it’s bet to upload it to a video hosting service like YouTube or MediaSite where larger file sizes are allowed. Be sure to check that your YouTube video has closed captions and a transcript for accessibility. YouTube or MediaSite will provide embed code to allow sharing your video in WordPress.
See the Creating audio and video playlists article or embedding videos article for more information about working with multimedia and U.OSU
The featured image, set in the Featured Image pane, will represent the post in search results.

— Linking to PDFS in a blog post

You can also upload PDFs to the Media library and link to them if you need to.
We should be sure to run the accessibility checker on our PDFs before uploading. Here’s some information about it in Acrobat Pro.

— Checking the accessibility of blog posts

Before publishing, we should check that our blog posts are accessible. Using the WAVE browser Extension to check blog posts is a great way to check accessibility issues as we are posting.
Here’s a General accessibility tips for blog post authors article with more information about blog post accessibility considerations.

Here are some general web accessibility principals that blog post authors can keep in mind to make their posts more accessible. These principles also apply to working with webpages in general. Blogging software and content management systems use similar WYSIWYG editors for updating the HTML content of a webpage.

Accessibility testing

Check your page with an accessibility checker like WAVE:

The WAVE tool is available as a browser extension for Chrome, Edge, and Firefox and will allow you to check your webpage for accessibility issues in one-click. The checker will show you exactly where the issues are in the code and provide advice on how to correct them.

Alt text

Add alternative text descriptions to your images:

Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load. Focus on the meaning or purpose of the image rather than trying to describe every detail. See the Adding alternative text to images in a WordPress post for details of how to add alt text to an image in your Blog.

Headings

Use headings properly:

Be sure to separate your content into sections, especially in longer articles, and use headings correctly. In the editor, it may appear that headings are like font sizes, but they are more for structural usage. You shouldn’t pick a lower heading size because you like the font size of it. Headings need to be properly nested in a heading structure where you shouldn’t skip heading levels. For example, you shouldn’t go from an H1 to an H3. That H3 should be an H2 to be properly nested in the heading structure.
See WebAIM’s article about Semantic structure and headings for more information.

Use of color

Make sure all text has sufficient color contrast:

Small or regular-sized text should have a contrast ratio of 4.5:1 and large text (bold and 18px or higher or normal and 24px or higher) should have a contrast ratio of a least 3:1. You can use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool to find the color contrast ratio. Also, make sure no content or visuals rely on color alone to communicate meaning. Use other ways to differentiate visuals to aid color-blind users.

Links

Make sure your hyperlinks are descriptive and not just ‘click here’ links:

Making link text more descriptive helps give context about where the link goes to. You could instead say, click here to learn more about (the subject…). Links should make sense out of context so if screen reader users land on them they will know where they go. Short phrases such as “click here,” “more,” “click for details,” are ambiguous when read out of context. Screen readers have key shortcuts that can jump between links in a page and using the tab key jumps between focusable objects like links & buttons. So, a screen reader user may not have read nearby text that would give a short ‘click here’ more context. You should include the context withing the link text itself.
See the Introduction to Links and Hypertext guidance from WebAIM for more information about writing descriptive hyperlinks.

Tables

Make sure you only use tables for tabular data:

Tables should only be used to show numerical data. They shouldn’t be used for layout like organizing out parts of the page into columns. In the late 1990s some designers used table-based layout which wasn’t an accessible practice and not responsive to smaller screens.

Make should your data tables have a header row specified:

Each label on a column should be a true header cell TH instead of a regular cell TD. In WordPress you can tell that something is a header cell clicking in the cell while editing the post. Below the table if it says ‘TH’ in the tage tree it’s a header cell. For example, the tag tree at the bottom of the editor might say: ‘TABLE > THEAD > TR > TH’. This is just above where it says: “Word count”.

Avoid using complex tables:

You should avoid using complex table because they can be challenging to make accessible and confusing to navigate for screen reader users. It may be better to convert a large complex table into two or more simple tables.
See WebAIM’s article about Creating Accessible Tables for more information.

Ohio State nav bar

Using U.OSU.EDU WordPress sites