How to test Color Contrast Ratios

Video Overview of how to test Color Contrast

Understanding the Importance of Color Contrast in Web Accessibility

Welcome to the fascinating world of color contrast and its critical role in web accessibility. In this post, we’re delving into the ways you can test for color contrast in different authoring environments. Color contrast is pivotal in ensuring digital content is accessible to everyone, including those with visual impairments.

Unpacking the WCAG Standards for Color Contrast

According to the Web Content Accessibility Guidelines (WCAG), there are varying levels of conformance to consider when it comes to color contrast. Level AA requires a minimum contrast ratio of 4.5:1, while for large text (18 Point and above), there’s a color contrast ratio requirement of 3:1.

Remembering these standards may seem daunting. However, free color contrast checking tools can simplify this task. Two of these tools are the Color Contrast Analyzer tool from TPGI and the WebAIM Color Contrast Checker.

Harnessing the Power of the Color Contrast Analyzer Tool

Download the TPGI Tool

The Color Contrast Analyzer tool is particularly user-friendly, incorporating WCAG 2.1 standards at the bottom of the tester. It allows you to test various colors for contrast ratio, which can range up to a maximum of 21:1 for black fonts on a white background.

Testing color contrast isn’t limited to text; it applies to non-text content too. Whether it’s the bullets in your presentation or the color of your titles, this tool will indicate if your color choices meet the necessary contrast requirements.

Additionally, it offers a unique feature: the Synchronized Color Values option. This function lets you adjust color shades on a slider to find a similar color that achieves double A and triple A compliance. It’s a straightforward way to ensure your color selections are both aesthetically pleasing and compliant with accessibility guidelines.

CCA Tool

Expanding Your Toolkit with the WebAIM Color Contrast Checker

The WebAim Tool

The WebAIM Color Contrast Checker is another handy web-based tool. Much like the Color Contrast Analyzer, it allows you to test colors and automatically updates contrast ratios.

Notably, this tool also applies to graphical objects and user interface components, making it exceptionally versatile. Similar to the Color Contrast Analyzer tool, it lets you adjust shades to find a compliant color.

Conclusion: Ensuring Your Content is Universally Accessible

Color contrast is more than just an aesthetic consideration; it’s an essential aspect of web accessibility. Tools such as the Color Contrast Analyzer and WebAIM Color Contrast Checker can empower you to meet and maintain WCAG standards, ensuring your digital content is accessible to everyone.

Dont forget about your charts and graphs!

Creating an Accessible PowerPoint: Step-by-Step Guide

Video Overview

Welcome to a comprehensive guide on how to create an accessible PowerPoint presentation. In this guide, you’ll learn the best practices for making a PowerPoint accessible and how to use the built-in accessibility checker to ensure your presentations are inclusive for all audiences.

Best Practices for Making a PowerPoint Accessible

Before diving into the process of making your PowerPoint accessible, it’s essential to understand some best practices:

  1. Use a built-in theme.
  2. Add alternate text to all images.
  3. Give every slide a unique title.
  4. Ensure list elements are properly identified within the PowerPoint.
  5. Format links properly.
  6. Use table headers in tables.
  7. Set the reading order.

By following these practices, you can create a PowerPoint presentation that is more accessible and inclusive for all users.

Using the Accessibility Checker in PowerPoint

To begin, launch the accessibility checker in PowerPoint by selecting the File button, then Info, and then Check for Issues. Click on Check Accessibility, which will bring up a list of errors that need to be fixed within the document.

Go through each error, starting with missing alternate text for images. Add appropriate alt text to each image, describing what the image represents. For example, “A screenshot from Adobe Acrobat with a parent figure tag on display.”

Next, ensure that hyperlinks are properly formatted. While you may want to leave the full URL for presentational purposes, it’s better for accessibility to use descriptive link text instead.

As you go through your slides, make sure each slide has a unique title, and list elements are properly identified. Additionally, check that any tables are using table headers for added accessibility.

In some cases, you may have images that can be marked as decorative if they do not add significant information to the presentation. Mark these images as decorative, and the accessibility checker will no longer flag them as errors.

Once you’ve addressed all errors, the accessibility checker may provide warnings about the reading order of the slides. To fix this, open the reading order pane and rearrange the content so that it is read in the correct order. For example, ensure the slide number is read last.

With all errors and warnings resolved, your accessible PowerPoint is ready to go! Remember, while accessibility checkers are not always perfect, PowerPoint’s checker is more fine-tuned, and following its guidance will help you create more inclusive presentations.

Remember, creating accessible PowerPoint presentations not only benefits those with disabilities but also ensures your content is available to a broader audience, making your presentations more effective and inclusive.

Start from scratch

Sometimes its easier to simply copy and paste the content from an inaccessible PowerPoint into a new accessible template:

Fixing PowerPoint Footer Display Issues

Welcome to our tutorial on displaying and fixing slide footers, dates, and slide numbers in PowerPoint presentations. Whether you’re using templates or customized presentations, it’s essential to ensure your content…

How to hide a slide title

Since every slide must have a title it may interfere with the layout of your slide so instead of deleting the title, there is an option to hide the title.…

Table Accessibility in PowerPoint

Table accessibility is an important aspect of creating accessible PowerPoint files. Be sure to follow all basic table accessibility features. Unsure of what those are? Keep reading. Accessible tables should…

Lists in PowerPoint Accessibility

Lists and PowerPoint accessibility are essential for Section 508 compliance. This post will cover the difference between unordered and ordered lists, and how to apply them in PowerPoint.

Making Your Bilingual Microsoft Word Table Accessible in PDF

Introduction

Welcome to the Accessibility Guy channel! In today’s post, we will be discussing how to convert a bilingual table created in Microsoft Word, which uses both English and Spanish, into a PDF while ensuring that it remains accessible. If you find this helpful, don’t forget to like and subscribe for more content on accessibility.

Video Overview

Step 1: Saving the Word File and Creating a PDF

To begin, save your Word file, which should have an accessible table with English, Spanish, and some PNG checkboxes. Next, under the Acrobat tab, select “Create PDF” and save the file. Since the table was already accessible in Microsoft Word, it should mostly transfer over to the PDF as accessible.

Step 2: Checking the Tags Panel

After converting the table to a PDF, open the tags panel on the far left side of the page to check if the table has been tagged properly. If you see a section tag and a blank p tag, you will need to make some adjustments to ensure the document is accessible.

Step 3: Making the Document Accessible

First, change the section tag to a document tag by right-clicking the section tag, selecting “Properties,” typing in the word “document,” and clicking “Close.” This will help the PDF pass PDF UA and WCAG accessibility standards. Next, change the blank p tag to an artifact by right-clicking the empty container and selecting “Change Tag to Artifact.” For the artifact type, choose “Page” and click “OK.” You can then delete the p tag.

Step 4: Cleaning Up the Table Structure

Go through the table cells to ensure proper formatting, and use the table editor to adjust table headers if necessary. Remove any blank p tags by right-clicking and changing the tag to an artifact. This process will help clean up the table structure, making it more accessible.

Step 5: Running the Accessibility Checker

Once the table structure is in place, run the accessibility checker to identify any issues that may still need to be addressed. In the case of the example provided, the nested alternate text failed. To resolve this, remove the alt text from the path tag, which should resolve the issue.

Step 6: Fixing Missing Alt Text

You can fix missing alt text by using the accessibility checker panel. Right-click on the issue and select “Fix” to add the alt text. Ensure that your alt text is descriptive and helpful for users.

Step 7: Verifying the Spanish Text

Make sure that the Spanish text has been properly recognized. To do this, select the Spanish text and use the “Find Tag from Selection” option. Right-click the p tag and ensure the language setting is correct.

Step 8: Final Checks

Save your file and run the accessibility checker one last time to ensure that everything is in order. If any issues remain, address them accordingly. In the example provided, the title was missing and was fixed by right-clicking and selecting “Fix.”

Conclusion

In this tutorial, we went through the process of converting a bilingual table in Microsoft Word into a PDF while ensuring its accessibility. Although there may be some challenges and bugs along the way, the final result should be a fully accessible PDF document that meets PDF UA and WCAG standards. Thank you for joining us on this journey, and don’t forget to like and subscribe for more accessibility content!

Order 508 documents

ABBYY FineReader 16: Efficient PDF Editing and OCR

Video Overview

Welcome to the Accessibility Guy channel! We’re excited to share that ABBYY FineReader 16 is now on our computer. This latest version of ABBYY FineReader provides a stronger OCR engine and a host of PDF editing tools that can make document processing easier and more efficient. In this video, we’ll provide an overview of some of the most common workflows we personally work through when using ABBYY FineReader, so let’s jump right in.

Launching ABBYY FineReader PDF presents two main distinctions: the PDF document side and the OCR editor. While you can use the tool as a PDF editor, we want to focus on the OCR editor, as ABBYY FineReader has one of the strongest OCR engines on the market. It can assist you in converting file types, from PDF to Word, for example, or editing underlying text of a document and updating language settings.

When you launch the OCR editor, it will prompt you to open a file. Once you’ve selected your file, ABBYY FineReader will perform OCR on all the pages, and you’ll see a thumbnail section on the far left side of the screen that displays a snapshot of all the different pages in your document. The image panel displays the visual aspect of your PDF, and typically matches directly with the file. On the far right side of the screen, you’ll find the text area of ABBYY FineReader, where you can edit any of the underlying text of the program. If the OCR is poor, or you need to update a spelling mistake or add in information for acronyms, you can make changes in the text panel. Finally, a zoom panel appears on the bottom of the screen and will update depending on where you are in the image panel.

Before we dive into the settings, we like to adjust our settings. For example, we’ll take this document into a searchable PDF, so we need to adjust our PDF settings. To do that, we’ll select the Tools button and then select Options. This brings up the options window where you can set a variety of settings. In the General tab, you can choose when the OCR editor begins, or you can set up a scanning device to scan documents directly into ABBYY FineReader. We really want to spend most of our time under format settings.

Earlier, we mentioned that we’re going to be exporting to PDF, so we need to select our document type. We can adjust the settings for documents, spreadsheets, PowerPoints, text files, HTML ePubs, etc. For PDF, we’ll dive into the preferred settings. When creating accessible files, the first thing we want to adjust is the image quality. If you have a lot of images in your document, be sure to set custom. We’ll change our color control from automatic to “do not change image color,” as we don’t want any quality loss on our file. Then we’ll change the dropdown menu for quality to “quality loss not allowed” and select OK. We have additional settings that may not be relevant for you, such as creating PDF view a documents, which requires OCR. Additionally, we have the checkbox selected to use MRC compression, which also requires OCR. We like to apply the ABBYY precise scan to smooth characters on page images, which makes the font and images a bit crisper and easier to work with under searchable PDF settings.

We like to have the text under the page image, but you can adjust the settings for better results depending on the document you’re working with. We’ll have the option selected to create bookmarks from headings, create PDF tags, and ensure that our fonts are embedded. Additionally, you can set metadata in this way.

In conclusion, ABBYY FineReader 16 offers a range of OCR and PDF editing tools

How do I make a Canvas page accessible? Video post

This video will walk users through how to make a canvas page accessible. Ive got a even more content for Canvas Accessibility.

Transcript

Hi there, my name is Shawn Jordison. And this is going to be a video walkthrough for Canvas accessibility. The goal of this video is to walk you through the most commonly found accessibility elements that may exist on your pages. So I have a sample page here that has many accessibility errors in it. And what we’re going to do is simply walk through them and fix them. So to begin, let’s select the Edit button.

I like to design my accessibility starting from the very top of the page.

Going all the way down. I also like to start my content below h2. So I’m going to add in some text here, that’s called overview. I’m going to select this text, use the drop down arrow to make this a header to.

Now from here,

this paragraph looks fine. There’s no accessibility elements to address. I do have another area here that says where do I begin designing. This is also a paragraph. So what I’m going to do is make this content a Heading Two.

But we also want to turn off bolding and I actually want it to be lowercase.

So I’m just going to retype that and delete this text file. The reason we want it to be lowercase is because screen readers will often read acronyms letter by letter. And when it sees all capital letters, it could sometimes interpret that word to be an acronym.

Next up, we have a couple of dashes here. These should be built in bulleted list, because the order is not important. So I’m going to select these two items and select bullet lists from the rich content editor.

I’m going to come back through here and delete the dashes out

and move on to my next heading. The next heading is Is there enough time for my students. First I want to retype it.

To make sure we get rid of all that capitalization. Next, I want to remove the bolding on this text. So I’m going to select the text and select bold. I’m going to make this text a header three, as it relates to this heading to have Where do I begin designing.

And so let’s keep going here it looks like we have a little bit of misspellings.

Is there enough time. This is a part of this header down here. So this is also going to be a Heading Three. I’m then going to remove the bolding.

And then under design and develop, I’m also going to remove bolding and it’s actually already marked as a header for which is perfect. So let’s keep going. It looks like this was supposed to be a couple of list items that we tried to designate with axes.

But let’s make this an actual bulleted list, we can come back through, delete the text.

And then we have a new area that doesn’t really relate to any of our current heading structures. So I’m going to select the text and make it a heading to.

Now from here we have a built in list. And if you’re not used to doing this,

these list items might look correct. They are numbers, they clearly are meant to be in a list. But here’s the deal. It’s not actually a list within the structure of the HTML. So we need to select all of our texts, and then select numbered list.

And it puts in an actual list which we must come in here and actually remove these extra numbers.

And we can keep going.

So the essay writing process, this looks like it should be a heading. We’re gonna go ahead and make that a heading two.

And then again, we have another list. That should be a bulleted, excuse me, this should be a numbered list as it represents a sequence of steps.

All right, next up, we have a link. So here’s the Canvas guide for viewing my feedback in the gradebook. So first thing I’m going to do, I’m going to copy the hyperlink

with Ctrl C,

and I’m going to select feedback in the gradebook.

Then select Link to URL

and paste our link with Ctrl V.

Then we’re going to select Insert link, which now puts the link on these words. So I can enter this with a period, and delete the rest of this content. So using the Delete key on my keyboard, I’m removing this extra text

as we do not want extra hyperlinks, or for URLs on the page. Additionally, we want to avoid vague language, like the words here, so we need to fix these two links. First, let’s take a look at the sentence read about the role and structure of US courts and US supreme court procedures here in here.

So I’m going to add the word procedures.

And to get this link out, I’m going to select in the link with my mouse, I’m going to select the link to URL button. And from here, I’m going to copy the link out so I just did a ctrl c.

Now I’m going to select my text where I want to put the link, select the link to URL button Ctrl V to paste and select Insert link. Now we have one more to fix. I’m going to put my cursor in this link, select Link to URL, I’m going to simply copy the link out,

close the window

and add my link to this text on the page. By selecting the text select Link to URL pace.

And then insert link. Now I can delete all of this extra text.

And we have another link.

But the sentence doesn’t really support it. So we’re going to say

additional resources

about language and culture.

I’m going to select in this link. Select the link to URL button to copy my link out Ctrl C to copy this out.

And then I’m going to paste it on my newly created text and then select in certainly.

Now I could delete this extra text. All right, let’s see what else we have in this area. So we have a table that will need to address I’m going to leave the table.

And we’re going to use the check accessibility tool to fix this table.

With our image though, let’s select the image, select Embed Image. And this is where we can add alternate text

and select Update.

We have another table here. I’m also going to use the check accessibility tool. So let’s let’s go ahead and run that we’re going to run the check accessibility tool.

Adjacent links with the same URL should be a single link. Okay, that looks like

an actual error that can be fixed. So we’ll select Apply, we need to add a caption.

Oops.

I apparently cannot type today.

Oh my goodness. All right, we’re gonna put sample data. And then let’s select header row for our headers, select Apply.

And we have one more sample data for a caption and select Apply. Now what’s interesting, it didn’t catch these all caps. So I’m going to come in here and fix these.

And it’s a good reminder

that the accessibility checker is automated, and it doesn’t catch every error.

And all capitalization should be avoided if possible, unless you were working with an acronym.

Let’s go ahead and run that check accessibility tool once more. Perfect, no issues were found. Select Save.

We can quickly review and this page looks a lot better. We have clean links. We have clear tables. We have an image with alternate text. And this page is fully accessible. So you just learned how to make a Canvas page accessible. I hope this video walkthrough was useful for you

Hi thank you for watching

Transcribed by https://otter.ai