Web development

General accessibility tips for blog post authors

by

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.

 

Additional resources about blog post accessibility:

Editing a SharePoint page and adding a Call to Action (CTA)

by

TOC

How can you add a Call to Action web part widget to a SharePoint page?

You might wonder how can you add a Call to Action (CTA) web part to an MS SharePoint page?
To add a call to action web part widget to a Microsoft SharePoint page, you can follow these steps:

  1. Navigate to the SharePoint page where you want to add the web part.
  2. Click Edit at the top right of the page to enter edit mode.
  3. Hover your mouse above or below an existing web part and you’ll see a line with a circled +, like this: +.
  4. Click +, and then select Call to action from the list of web parts.
  5. Start typing in the Add your call to action text here field.
  6. Click the Edit web part icon to access the Call to action webpart toolbox.
  7. Customize the web part properties, such as the image, the button label, the button link, and the alignment.
  8. Save the changes.

If you need more detailed instructions, you can watch this video that shows how to add a call to action button to a SharePoint page using the call to action web part. The video covers how to:

  • Add a call to action button to a SharePoint page using the call to action web part
  • Customize the text, label, alignment, and background image of the button

How to check your SharePoint page for accessibility?

You can check your SharePoint pages with the WAVE tool from WebAIM. It will point out a lot of accessibility issues. For convenience you can get a browser extension for Chrome, Firefox, or MS Edge that allows you to check a webpage in one click.

Additional resources for editing SharePoint pages:

Videos about the Call to Action webpart in SharePoint

The SharePoint Call to Action Web Part – YouTube video
Dive into SharePoint Web parts: Call to action – YouTube video
How to add a Call to Action Button to a SharePoint page – YouTube video

Articles about the Call to Action webpart in SharePoint

Use the Call to action web part –
How to add an eye-catching Call To Action on SharePoint –

Articles about accessibility and SharePoint

Resources for creating accessible sites in SharePoint Online –
Add accessible content and links to a SharePoint Online site –

Using Planner in MS Teams to manage projects

by

TOC
What is MS Planner?
Advantages of MS Planner
What can you do in MS Planner?
How to create a new project in MS Planner within Teams
How to add a team member to your MS Planner project in MS Teams
How to assign a task to a team member
How to create a task card to send notifications to select team members
How to schedule a due date and how this will benefit managing project timelines
Using Planner in MS Teams resources

What is MS Planner?

Planner is a Kanban board style project management system (similar to Trello) where you have a series of columns on the board in which project cards are placed and move across. A Planner plan can be added as a tab at the top of an MS Teams channel. There are also other project management apps that can be added in Teams as a tab at the top of a channel, like Trello or MS Project. Most of the time team members access our MS Planner Plans through MS Teams but they can actually also can access their Planner plans in a web browser by logging in Planner that way.

Advantages of MS Planner

  • Already hooked into and organization’s Outlook and able to send them project notifications.
  • Can be easier to use and more intuitive than more complicated project management systems.
  • Helps organize project materials for an organization’s team in one place instead in a bunch of different network locations and emails.

What can you do in MS Planner?

  • You can add a new project card by clicking ‘Add Task’.
  • You can assign someone to work on a project task by going into the task card and clicking on ‘Assign’. Then you can start typing and names will be auto-suggested.
  • You can add sub-tasks to a project, like a checklist, by going into the card and adding them under Checklist.
  • You could attach related documents to a card.  
  • You can add due dates, priorities, and labels to a card.
  • You can add notes to a card, and people working on the project can add comments as they go along.

MS Planner can be very useful in managing an academic organization’s projects, like developing new programs or curriculum. A project starts in the To-do column of the Kanban board and then proceeds through In-progress and Completed columns. Or teams could add custom columns to better suit the project.

How to create a new project in MS Planner within Teams

  • In MS Teams, go to the Team that you want your project to be in.
  • Go to the channel you want your project to be in.
  • Go to and click on the ‘+’ button at the top tool bar.
  • Search for the MS Planner (Tasks by Planner) and click on it.
  • Create a new plan (project), give the ‘Planner plan’ a name and click ‘Save’.
  • Go in your new Planner plan tab and set up the project columns (buckets).

Some examples of column bucket names might be: ‘to do’, ‘completed tasks’, ‘in-progress tasks’, ‘needs reviewed’, content topics, sub teams names, or any names specific to your projects. You can customize your buckets to meet the management needs for your project.

How to add a team member to your MS Planner project in MS Teams

You can add team members to your project by assigning them to a task in a task card.
By default, all the members of your Team can see Planner projects created in the Team. You can assign anyone from your MS Team to task cards in an MS Planner plan in the Team. In some cases, if someone isn’t already in the Team, you’ll need to be a Team owner (or ask your Team owner) to add them (depending on the Team’s settings).
You can add team members (or request to add members) by going to the three-dot menu beside the Team name, choosing ‘Manage Team’, and then clicking ‘Add member’.

How to assign a task to a team member

  • Create a task card for the task you want them to work on.
  • Click on the Assign field in the card and type in the name of the team member(s) who you want to assign to the task.
  • Click on that person’s name that comes up, they are now assigned to the card.

How to create a task card to send notifications to select team member(s) and the benefits of using the comments field for notifying your team

  • Create a task card and assign team members to it.
  • Set a project due date and create a checklist.
  • Instruct your team members to use the Comments field to update the group about. which checklist items they have completed. The group assigned to the card will get email notifications about the update.

How to schedule a due date for a task and how this will benefit managing project timelines.

  • Create a task card and assign team members to it.
  • Set a project due date. Team members will receive email reminder notifications when a due date is near and if a task is overdue.

MS Planner will send you and your team members reminder notifications when a due date is near.

 

Using Planner in MS Teams resources

Creating new SharePoint pages to be used in an MS Team

by

We can do a lot of editing of MS SharePoint pages inside MS Teams but we can’t create a new page there. We can only select pages to use in MS Teams itself.

To create a new SharePoint page to use in your Team you’ll need to access SharePoint in your browser:

  • In your browser: go to: https://buckeyemailosu.sharepoint.com/_layouts/15/sharepoint.aspx and login.
  • Find the ‘site’ that you want to create your new page in, like the ‘FCS Educators – FCS Database’ Team.
  • Choose New > Page and then select ‘Blank’ page.
  • Click ‘Create’ and give the page a name. Delete your name from the author box if you don’t want it there.
  • Hit ‘Publish’ to make your page available to Teams.
  • Go to ‘Share > Copy link to page’ if you need to URL of the new page to paste into a link.

Resources about MS SharePoint pages and MS Teams:

Create and use modern pages on a SharePoint site – an article from Microsoft with a video showing on to create a new page in Sharepoint. The video also shows adding images, sections, and web parts in a page.

How to Build a Website in Microsoft Teams – Using SharePoint! – a YouTube video showing how MS Teams can be enhanced by adding SharePoint pages.

How To Add a SharePoint Page To Microsoft Teams – a YouTube video showing how to add a SharePoint page as a tab in an MS Teams channel.

Use the SharePoint Team collaboration site template – an article from Microsoft outlining how MS Teams are powered by Sharepoint sites. At least one Sharepoint template page is included in each MS Team.

How to Create a SharePoint Team site – a YouTube video from 2021 showing how to add a SharePoint Team Site. MS Teams automatically creates an underlining SharePoint site when you create a new team.

How writing evergreen content can extend the impact of your blog

by

One way to work more efficiently and extend the impact of your blog is to create what’s known as ‘evergreen content’. This is content that isn’t tied to a specific date or month, writing about subjects that are more timeless. Keeping up with blog posting can be a challenge if every post is date specific. It can be a good strategy to mix in some evergreen posts that will have a longer shelf life. Then you get a longer benefit for your post writing efforts.

Another idea, similar to writing evergreen content, is to write seasonal content that can be reused year to year. You might create winter, spring, summer, and autumn content that isn’t tied to a specific year, making it more reusable. It can be more efficient to preplan and schedule posts once a month or once a quarter, than to be always be publishing ad hoc.

Managing a blog is like tending a garden. It’s best to do routine checks and maintenance every month to keep your blog healthy like doing periodic content audits and accessibility checks. ‘Link rot’ is something that happens over time where links become broken. As part of the blog’s monthly maintenance, content managers should go through their site and look for broken links. WordPress makes it easy to spot broken links by crossing them out with a strikethrough. Blog authors can look for strikethrough links each month and update the URLs that they point to. Links become broken in websites because the URLs of external webpages they link to change over time from organizations adjusting the structure of their websites.

If you run a blog with multiple authors, it’s likely that web accessibility errors will pop up over time. It would be a good practice to run periodic accessibility checks as part of the blog’s monthly maintenance plan. WAVE is a free tool that is good at finding accessibility issues in individual pages. To check a large blog or website, site scanning services like PopeTech can be used. Many organizations at Ohio State have access to scan their sites with PopeTech. For smaller blogs, authors may find it more convenient to install the WAVE browser extension which can check a page for issues in one click. Forming a plan to train authors about accessible content authoring can also help lower the number of accessibility issues that pop up over time. Ohio State offers several online courses about web accessibility through the Digital Accessibility Services office (DAS).

Resources:

Evergreen Content: What It Is, Why You Need It, & How to Create It by Si Quan Ong – Updated on May 8, 2019.

Evergreen Blog Posts: Content Ideas, Examples, and Tips by James Parsons – Updated Jan 4th, 2022

Link Rot: What It is and How to Deal with It by John Hughes – Updated on Jan 25, 2023

 

A blog post accessibility & optimization checklist

by

This checklist covers some major accessibility items to check when writing a high quality blog post.

Major areas to check:

Images

Do all of your images have alternative text descriptions?

Alternative text will describe the image to screen reader users and be seen by sighted users if the image can’t load.

See the Adding alternative text to images in a WordPress post for details of how to add alt text to an iamge in your Blog.

Have your images uploaded to your post been sized / optimized for the web?

Today’s digital cameras take high resolution photos with larger file sizes. But in a blog post you don’t need high res photos. You can work with your web developer or graphic designer to resize your images to an optimal size or use an application like Photoshop. Then the images will load faster for people on mobile connections and won’t eat up their data-plan bandwidth.

Headings

Are your headings structuraly nested correctly?
A post should have only one H1 heading at the top that is usually the same as the post title. The post title you enter in WordPress becomes the page’s H1. Be sure your H2 headings and H3 headings underneath them are nested properly. Never skip to a lower heading level without nesting it under a higher heading. In the past some designers have thought of heading levels as font sizes and skipped to a lower level because they like the font size of that level. Actually headings are semantic elements for creating a structural hierarchy in the page. This aids screen readers in navigating the page and has SEO (search engine optimization) benefits.

Colors and Typography

If you’ve added colors, do they have the right contrast?

For WCAG 2.1 level AA: have a 4.5:1 ratio for normal text and a 3:1 ratio for large text (bold and 18px or higher or normal and 24px or higher)

Use the WebAIM Contrast Checker tool or the Colour Contrast Analyzer tool.
The WCAG 2.1 guidelines related to color contrast is: 1.4.3

Are you using a standard font that’s easily readable?

You should use standard serif (Times Roman) or sanserif fonts (Arial or Helvetica) for maximum legibility. Novelty fonts with unusual letter-forms might be harder to read for people with low vision. Also you should avoid setting long lines of text in All-Caps because capital letter forms can be harder to read and process as words.

Are your links descriptive and not just ‘click here’?
This can help 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

If you have tables, are they only used 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.

Do you have a header row specified in your data table?
Each label on a column should be a true header cell TH instead of a regular cell. 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”.

Are you using any complex tables with multiple header rows or both vertical and horizontal heading cells?

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.

Testing

Can you tab keyboard your way through the web page?

A lot of assistive technology uses a form of tabbing to go through a page. If you
can’t tab through your page, you’ve got some issues.

Have you tested your page with an accessibility checker tool?
You can use a tool like the WAVE tool, Axe by Deque or Google Lighthouse from the inspect code developer’s tools in Chrome to check your page for accessibility issues.

Have you tested your webpage with a free screen reader like NVDA?

If you don’t have a screen reader installed you could contact your organization’s digital accessibility expert to ask if they could test it. Screen readers use keyboard tabbing & other key shortcuts to navigate through a webpage. For non-visual users, they know where they are in the page through audio announcements. Headings and other semantic elements become audio landmarks when navigating a page non-visually. Screen readers have key shortcuts that jump between headings and other landmarks so non-visual users can jump around in a non-linear fashion. The location where the Screen reader has navigated to is called the keyboard focus.

Some other good screen readers include:

You may already have a free screen reader installed in your OS.

References and Resources

Blog Post/Web Page Accessibility Checklist from Jacob Martella Web Development.

How to write an accessible blog from the University of Edinburgh.

Introduction to Links and Hypertext guidance from WebAIM.

Understanding the WCAG 2.1 guidelines related to color contrast from WAI (the web accessibility initiative).

Narrated PowerPoint presenation about blog post accessibility 13:21 – covering accessibility for images, headings, colors, typography hyperlinks, and tables.

WordPress accessibility course in LinkedIn Learning – covering creating accessible themes, plugin accessibility, authoring accessible content, and testing.

How to Make Your WordPress Website Accessible video 14:16 – covering how images, colors, and text should be accessbible and how plugins can help.

Digital accessibility videos for FCS educators and Extension staff:

by

Use your OSU login to sign in and watch the videos.

Other resources:

Also see the Digital Accessibility Essentials Training from LOD group to learn more about these accessibility topics.