Create Accessible Web Content Self-Paced Training Course and Transcript

Welcome to create accessible web content. My name is Kristina England. I'm the Digital Accessibility Specialist for the President's Office, and I'll be facilitating this training. During this training, we'll go over the following topics. Who benefits from accessible web content? Hierarchy and structure. Emphasis, hyperlinks, and use of color.

Images, animations, emojis, and multimedia. Web forms and data visualizations. Document accessibility training. Guidance on redesigning and accessible content. Monitoring your content with the bot. And finally, ongoing verification, the web content accessibility checklist.

So who benefits from accessible web content? All disabled people benefit from accessible web content. At least 26% of the US population identifies as disabled. 80% of disabilities are non-apparent. Here are examples of disability communities who benefit from accessible content. This does not cover all examples. We'll build in other examples throughout the training.

Blind and low vision people that need to navigate a website with a screen reader. Hard of hearing or deaf people that need equal access to audio-based content. Anyone with low vision or reading glasses that needs to zoom in on content. Anyone with a temporary or physical disability that needs to navigate a website with their voice or with an alternative input device.

Anyone with light sensitivity or motion-triggered health conditions that need to use specific display modes such as reduced motion, dark mode, and high contrast mode. And anyone that needs to use text-to-speech software to read content on your site.

When we think about digital accessibility, never think about it as compliance or a checkbox. Digital accessibility is disability inclusion. I have a quote here by Judith Heumann from her book, Being Heumann, An Unrepentant Memoir of a Disability Rights Activist.

Judy was a leader within the disability community who passed away in 2023. She was involved in many of the disability rights movement activities, including the Section 504 protests, the longest protest in a federal building in the United States.

Judy states, "I recognize now that exclusion, especially at the level and frequency at which I experienced it, is traumatic. Although at the time it didn't feel out of the bounds of my normal everyday experience, I can see that constantly coping with it definitely impacted me, and it never stopped being painful."

I have a picture of Judy on the slide. Judy is in her wheelchair. She is wearing a shirt with purple flowers, and the shirt itself is blue. And Judy is smiling. Judy has short, brown hair and is wearing glasses. Judy is holding two books, Being Heumann, and also her book, Rolling Warrior for adolescents to read as well about the disability rights movement.

Judy's story is a common one. Disabled people encounter counter exclusion on an hourly basis. In fact, many disabled people burn out when dealing with inaccessible schools and workplaces. Think about it. If almost every email you received and almost every site or document you visited had content you couldn't access, how would that feel?

Accessibility requires additional effort from everyone at first but becomes second nature once you become used to the process. You are basically relearning how to create content just as you would learn any new skill. While the relearning does take time and energy, that effort will save colleagues, students, and external customers with disabilities significant time and energy.

For our first digital accessibility topic when it comes to websites, we're going to go over hierarchy and structure. With hierarchy and structure, it's always important to use the built in heading styles when identifying sections of a page. If you have sections of content with a section heading for each section, you should always use proper heading styles for those section headings.

For example, let's say you have a training guide that has three sections, searching for items, making a purchase, and reviewing a purchase. Those three sections would be assigned as heading 2's. The title of the document, email, or web page is always the heading 1. Any subsections under each heading 2 would be a heading 3. Always keep to the heading hierarchy.

You should never skip a heading level. If you have a heading 2 and decide to have a couple subsections under that heading level 2, those subsections should be heading level 3s, not heading level 4's. If you have no sections, no additional headings outside of the page title are needed. I'll show an example next of a proper heading structure and how the heading structure was assigned to the page.

So now, I'm going to show you how to apply a heading 1 to a page in Drupal. I have the edit basic page, digital accessibility training and standards page open. So on this page, I have a title field. That is where your heading 1 goes in. So that is your page title of the page, and you won't have the ability to add any other heading 1's, because we only have one heading 1 per page.

I'm going to scroll down to my content sections, and under there, I've expanded the WYSIWYG editor for my first content section. And I have a new section with, actually, a new heading to assign. So the content says about the digital accessibility training and standards, and I want to make that a heading 2, because it's a main section of my page. So I'm going to select that.

And once I do, I want to go to the paragraph dropdown or the heading dropdown. And once I select that, I have the option to just make this regular paragraph content, which would be body content on the page, or I have the ability to assign a heading. I have heading 2, heading 3, heading 4, heading 5, and heading 6. This is a heading 2, because it's a main section of my page, so I'm going to assign it as a heading 2.

That is now a heading 2 behind the scenes. I also have other heading 2's on this page, and I have heading 3's as well, so I'm going to expand. I'm actually going to go down to the columns T, third section on the page. Go ahead and expand that. And the advanced document accessibility guides and training, whenever there's a title for columns, that's automatically signed as a heading 2.

And underneath that, I have two columns. And if I expand a column, and then I expand the WYSIWYG editor that's under that column, I now have the section body. And if I go ahead and highlight Adobe PDF remediation, I can see that's assigned as a heading 3, because that's what's under the heading dropdown as assigned for this.

And that is correct, because it's beneath the heading level 2, which is advanced document accessibility guides and training, so it should be a heading 3, because it's a subsection of that main section. And so that's how you assign headings. I'm going to go ahead and save this.

And then the second piece I wanted to show everyone is what the experience is like for screen reader users. So I'll give this a minute to save, and then I'm going to turn on voiceover. So I'm on the digital accessibility training and standards page that I just published with an updated heading 2.

And I'm going to show you what the experience is like for a screen reader user-- so a blind person or a low vision person using a screen reader, the experience they'd have with accurate heading structure. So I'm going to go ahead and pull up basically what's called the rotor in VoiceOver, which is the built in Mac screen reader. And I'm going to do control option U--

Headings menu.

And under this heading structure, I get both the structure for the navigation, so I have utility navigation and main navigation that are heading 2's. I'm looking for the page title, because that is where the content on the page starts.

2. 1. Digital accessibility training and standards

I know by listening to this the digital accessibility training standards is the heading 1. I can then look for main sections on the page. So underneath it, I have--

2. About the digital accessibility training and standards.

Heading 2 about the digital accessibility training and standards. And then it goes on with a heading level 2 for general accessibility courses, a heading level 2 for interactive checklists, then the heading level 2 for the advanced document accessibility guides and training, which has subsections under it, which are a heading 3.

So both of those are Adobe PDF remediation heading 3 and additional document remediation resources heading 3. This provides that structure where the person knows these are the child content of the information above them, so they'll know when they're drilling down into child content. So that's basically how the structure works behind the scenes. It's conveyed the same way as you assign the headings.

If you assigned something as a heading 5 and skipped over heading 3 and heading 4, that would be a confusing experience to screen reader users, because they would think they missed sections within the page. So just remember to keep that structure. Your page title is always the heading 1. Then the main sections of the page are heading 2's, and then any subsections of those heading 2's are heading 3's.

Now, let's talk about the importance of using built in list styles. When using numbers or bullets to list items, you should always use the built in numbered list and bulleted list in the content management system to style the list items. Using built in bullets and numbering renders your list as actual list items to assistive technology.

A screen reader will land on a list of bulleted items and read the total number of items, along with which item you are on. For example, the list will be read as list with four items. When you are on a specific item, because of the semantics behind the scenes, the screen reader will read that item as item 1 of 4 or item 4 of 4, depending on where you are in the list.

Now, I'm going to show you how to actually apply a list in Drupal. So I'm in edit mode for the digital accessibility training and standards page. I'm going to scroll down, and I'm going to look for one of my column content sections. So I have columns T, and I'm going to go to the advanced document accessibility guides. Go ahead and expand that. I'm going to go to column T Adobe PDF remediation.

Go ahead and expand that. And then I'm going to expand my WYSIWYG editor. And under here, I have a list. So how did I do this? So I'm going to go ahead and highlight this list. The list is three items. And we have President's Office PDF remediation guide, creating accessible PDFs LinkedIn Learning course, and advanced accessible PDFs LinkedIn Learning course.

When I highlight them, you'll notice that there's emphasis applied to a bulleted list item menu. And so in the WYSIWYG, we have various menu items. We have the undo button. We have the redo button. We have the paragraph or heading dropdown. We have bold, italics. We have the text alignment. And after that, we have the bulleted list, and we have the numbered list.

In this case, it's a bulleted list, because they do not have to follow an exact order like steps. They're just items that relate to each other, but there's no meaning to the order of them. So when you don't need to have an exact order communicated to screen reader users, you want to use the bulleted list, because it's just a list of items. When you do want to communicate an exact order, such as steps, that's when you would use the numbered list.

So I obviously did the-- I can undo this for a second. I unselected this being a list, and it just becomes links without a list. And then I'm going to just go ahead and select bulleted list again, and that is a bulleted list.

Next, I'm going to show you-- after this saves-- how this sounds to a screen reader user. So now, I'm going to show you how it sounds when a screen reader lands on a list on a page on our website. And so I have the digital accessibility training and standards page, and this is the public facing page on the website. I have VoiceOver on. So I'm going to go ahead and navigate to the general accessibility courses section of this page.

VoiceOver help menu. Five items. Headings menu. You are currently in a VoiceOver menu. This is a list of Voice-- 2, 2, 1, 2. General accessibility-- heading level 2. General accessibility courses. You are currently on a heading level 2. List seven items. You are currently in a list.

As you heard, it actually says there's going to be seven items, and this is a list. If we had just done dashes or asterisks and hadn't used the built in list, it would not identify it as a list, and it would not identify the total items in there. So now, I'm going to go ahead to the first item.

One of seven. You are-- link, write accessible emails. You are-- 22 minutes. 2 of 7. You are currently on a-- link, create accessible-- 44 minutes. 3 of 7. Link, develop and deliver accessible-- 40 minutes. You are currently on a text element.

So as we go through, it's 1 of 7, 2 of 7, 3 of 7. So it's going to convey until you get to the end, and then it will let you know you're at the end of the list. So that's really how it works. And it's really important to do that so that does convey it as a list. If you don't use the built in list items, again, it won't convey it as a list.

If you plan to use footnotes in an article, you should always use the built in footnote functionality. The built in footnotes provide the needed semantics and navigation for screen reader users. The footnote functionality is available through the WYSIWYG tool options in the body field. It is labeled footnotes for assistive technology users, and if you hover over it with a mouse, and is an a with the number 1 for sighted users.

So now, I'm going to show you how to add a footnote to an article. And in this article, I just have an example article about native plants. I have multiple paragraphs here. In the third paragraph, I want to add a footnote after the second sentence. And so what you want to do is you always want to add the footnote after the period for the sentence that you want it to follow. Don't put it before the period.

And then you're going to go to the WYSIWYG, and you're going to look for the footnotes icon that's an A with a 1, or when you're navigating with a screen reader or other type of assistive technology, this is labeled as footnotes. I'm going to go ahead and select it. The footnote content pop up is going to open. I'm going to go ahead and select the footnote content field, and I'm going to go ahead and paste in my footnote.

I pulled this footnote from a text file, so it doesn't have any code in it. If you are pulling it from Word or Dropbox, make sure that you do paste and match style so that it pulls out all of the code from Dropbox or from Microsoft Word.

Now, what I'm going to do is that I have a full URL here, I'm going to just cut that out of the footnote and delete retrieved from. And what I want to do is make "Why Garden With Natives?" the descriptive link. And after I've selected that, I'm going to go ahead and select the link button under the WYSIWYG for footnote content.

I'm going to go ahead and paste in the URL. I'm going to go ahead and select save. And then my footnote is completed. You're going to ignore the footnote value. I'm going to select submit. And now, my footnote is created, and it's showing the footnote next to the sentence.

However, when I show you a live version of a general council legal alert, that footnote appears below the article, just like you would expect footnotes to do. It's just going to appear next to the sentence for anyone editing the content.

So next up, I'm going to show you a published legal advice article that the general counsel wrote with actual footnotes in it. And now, I'm going to show you an example of a published article with footnotes built in. And I'm just going to scroll up a little bit. This is the new DOJ rule requiring website accessibility for public entities. So that's an example if you ever need to refer to how footnotes are styled on the website.

And what I'm going to do is I'm actually going to use keyboard navigation instead of a screen reader now for anyone that uses keyboard only navigation. We're going to tab until I get to my footnotes. And so I have landed on the first footnote in the article, and that is highlighted with a focus indicator from keyboard navigation perspective.

What I'm going to do is just go ahead and hit enter, and what that does is it actually brings me down to the first footnote in the article. And now, I can read that footnote. And then I can actually go back, and I can just select the one again and go right back to the top of the article to continue reading the article itself.

This works with all types of assistive technology as well. So if you're navigating with your voice, if you're navigating with a keyboard, if you're navigating with a screen reader, this is going to work. And also, it's also going to work for most users. So if I click the 1 with the mouse, I get down to the 1. If I click the 1 again, I'm brought back up. So that is how the footnote functionality works, and that's how it works with keyboard and with a mouse.

Now, let's talk about tables and why not to use tables for layout purposes on the website. Tables are meant for data comparison only. Using tables to provide columns on a page creates the following accessibility issues.

Blind and low vision people who visit the site using a screen reader will have an inefficient and confusing experience as the visual layout will not be conveyed. Rather, the table will try to compare data that is not meant for comparison. And anyone with low vision that uses browser zoom will experience issues with the layout of the content, as tables cannot reflow based on browser zoom.

If you do use tables for data comparisons, here are some best practices to remember. Always ensure you have assigned a header row to your table. Never merge cells. Merging cells creates accessibility issues for screen reader users. And never include blank cells. Always include N/A for not applicable, zero, or blank when data is not available for a given cell.

During the next section of this training, we will cover content accessibility best practices. The first best practice we'll go over is ensuring you follow plain language guidelines. You should always use an active voice and present tense. You should focus on what users want to know, address them directly, and make your information easy to follow. You should use lists to highlight a series of steps, requirements, or pieces of information in a visually clear way.

You should also make users' top tasks the priority content on your website. Finally, use simple words and phrases. Avoid using abbreviations, jargon, and complex language. When using abbreviations, remember to spell out what the abbreviation means the first time you use it on a page. You can find additional information on the plain language guidelines website, which we'll include within this learning path.

Now, let's go over the best ways to emphasize content. For basic content where you want to draw added attention to a word or a portion of a sentence from a visual perspective, you should always use bold. Italics is harder for the low vision and dyslexic communities to read, and underline indicates a hyperlink and should only be used for hyperlinks.

However, if you have an important note or alert that you need to draw attention to for assistive technology users, you can add an appropriately nested heading that emphasizes there is an important note on the page. An example of an important note using a heading is on the PDF remediation guide page, remediation options.

I wanted to show the important note example I noted in the previous slide quickly. So we have the remediation options page under the PDF accessibility remediation guide. Remediation options, because it's the page title, is the heading 1. Then we have a main section of the page that's a heading 2 that's called remediate a PDF yourself.

But we wanted to draw attention to an important note under that section. So we have as a heading 3 important note, followed by the notes that we want all users to see. So that is how we actually deliver that information so that it's findable by a screen reader users through the rotor. And also visually, it stands out so that people know there's an important note on the page.

Now, let's talk about the importance of descriptive links and why you should always provide descriptive links. Do not use here, click here, or learn more for links. These links provide no context to screen reader users and create an inefficient experience for anyone navigating the website with their voice using speech recognition software.

In addition, do not just add a hyperlink, as a long hyperlink creates an inefficient and frustrating experience for screen reader users. Instead, provide context by using descriptive links. In most cases, the exact name of the page, document, or other media you are pointing the person to will be the best name for the link.

For example, in the following sentence, "Understanding Disability Identity, Community, and Culture" is the descriptive label for the link, as it matches the page the user is being sent to. "Learn more about the social model of disability on the Understanding Disability, Identity, Community, and Culture page.

So I'm briefly going to show an example of what happens when you have click here links, and a screen reader user needs to navigate your page. So screen reader users have shortcut keys they can use to scan a page, so they don't have to necessarily scan all the content on the page.

Just like sighted users will scan the page quickly and might not read all the content on the page, the screen reader allows the blind and low vision community to also scan a page quickly and to skip over paragraphs of content. So what I'm going to do is I'm going to select control, option, command, U. I have VoiceOver on, and that's going to point me to links on the page.

Click here, link. You are currently on a link. To click this link, press control, option, space.

And so I've landed on a click here link. It doesn't provide me with any context, so that means I'm going to have to navigate the content around it. I'm going to look just for another link, because a screen reader user would be frustrated coming across click here links, and they would want to know, am I going to come across multiple click here links on this page?

Click here, link. You are currently on a link. To click this link, press control, option, space.

And sure enough, I have two click here links on the page that don't tell me what I'm clicking to go to. Also, keep in mind that screen reader users don't click, they navigate with a keyboard. But either way, the actual click here, not descriptive enough. So how do we change this? I'm going to shut off the screen reader.

VoiceOver off.

And I'm going to go into edit mode for this page, jump over to my other browser, come in here, and just go to this URL. And I am logged in. And what I'm going to do is I want to have a sense of where I'm going to be sending a user to.

And so I'm going to just right click and open this link in a new tab to see what this page is about. And I've opened the new tab. And I'm on the Mass Audubon site, and it says birds in Massachusetts. So instead, what I'm going to do is I'm going to go into edit mode on Drupal. I'm going to find that first click here link. I'm going to edit it. And actually, I'm going to have to go in here and just type.

So we know birds of Massachusetts page. And then I'll delete the rest of the click here reference just so I don't have to rebuild that link. And then because it was just saying, click here, I do need an action before birds of Massachusetts page, so I'm going to say visit the birds of Massachusetts page. "Visit the" is not part of the link, because it's not important to the link itself.

But now, I have birds of Massachusetts page, so I know that I'm sending people off to birds of Massachusetts page. This will be beneficial to all users as well. And then I'm just going to go ahead and actually go into this one. So there's a second click here link, and I'm going to copy the link. And I'm going to open another tab and paste in that link and see what it's about.

So it says seven simple actions to help birds, and I'm just going to actually highlight and copy that title. And I'm going to go in here. And another way that you can edit a click here link if you're concerned about breaking the click here link is you can go into the source option within the WYSIWYG, and you can find that click here reference. And so I have a click here reference, and I'm going to go ahead and paste in that page title.

So now, instead of click here, it's seven simple actions to help birds. And then I'm going to just read the full sentence to make sure it makes sense. So visit the birds of Massachusetts page to explore bird species in their habitats, or seven simple actions to help birds to learn more about-- and it looks like we have a typo here, too, so we'll just fix that-- about conservation efforts.

And so now, I have two descriptive links in there that tell people what they're going to be sent off to, and they don't have to read all the content on the page to get the context of those links. And that is how you change the links within the page and also just an example of using the page name that you're sending people off to-- using that exact page name to create a consistent experience.

We already discussed some of the benefits of descriptive links, but I want to cover overall who benefits from descriptive links. So we talked about the blind community. There's also the deafblind community and the low vision community. They can all skim content with assistive technology. Then there is anyone that's using speech recognition software to navigate a website with their voice, so that's anyone in the motor disability community that uses their voice to navigate a website.

And that can include temporary disabilities, such as someone that has broken both wrists or both hands and still needs to be able to navigate a website. And then finally, anyone skimming the content visually, as click here and here links increase the time for anyone trying to quickly find a resource. I do have a picture on the slide. It is of a Black man, and he has low vision.

And he is navigating a website with a screen magnification tool where you can zoom in on specific content. And he's most likely looking for a resource and is about to click on that resource as well. So that screen magnification tool, if he has a clear link to click on, he can then go off to that link to the resource that you've pointed him to.

Before we move on from links, I wanted to talk about anchor links. You should always avoid using anchor links unless users are provided with needed context. Anchor links often do not provide the needed context to assistive technology users and can trigger a vestibular disorder or motion sensitivity.

So when are anchors OK to use? When proper context has been given, and it is the standard way in which users would engage with that content. A good example is when footnotes are used in an article. People know the numbered link will send them to the bottom of the page. They then have the option to use that link or to scroll to the bottom of the page on their own. User choice is always best.

When are anchors not OK to use? When context is not provided and the behavior is not expected. For example, do not use anchor links on a separate page that sends people to a section of another page, and do not use them in main user navigation elements-- for example, department navigation.

The last topic we'll cover under general content accessibility best practices is not to rely on color alone as the only way to convey meaning. Using color as the only way to convey meaning will create issues for people who are colorblind and people who are blind, deafblind, or have low vision. In the case of someone who is colorblind, they may not be able to distinguish between certain colors, such as red and green, or they may not be able to see colors at all.

If using red, yellow, and green to denote statuses, use a text equivalent of that status in the status field, such as high risk, medium risk, and no risk. You can use icons such as a check mark to show an item as complete, but always provide alt text and always ensure the icons clearly convey the intended meaning for both colorblind and neurodivergent employees.

Now, we're going to focus on images, emojis, animations, and videos. The first topic we're going to discuss is always providing alternative text for images. Alternative text describes the visual information that the blind, low vision, and deafblind community would miss without a description. Alternative text is hidden visually and can only be picked up by a screen reader.

Alternative text is not the same as a photo caption. A photo caption usually provides important identification info in the photo that everyone needs to know, such as the location of the photo or the person or people included in the photo. A photo caption should be provided for all site visitors when applicable.

Now, let's go over an example of alternative text versus a photo caption. I have a photo here, and the photo caption is, "picture shows Associate Vice President LeeAnn Pasquini on the left, Chief Procurement Officer Michael Durkin, center, and NASH Interim President Jessica Todtman on the right." So that describes key information about the people in the photo for everyone.

Now, alternative text is about the visual information that's conveyed via the photo, so this is the alternative text for the image. "Three people stand in front of a backdrop featuring the logo and name of the National Association of Higher Education Systems. The woman on the left smiles. She is wearing a blazer and shirt. The man in the center holds an award in both hands. He smiles and wears a suit and tie. And the woman on the right smiles. She is wearing a blouse."

So now, I'm going to show you quickly how to add alt text to an image in Drupal, and I'm going to show you how to actually turn on the caption feature for a photo as well. So what I have is I've added an image of a red-bellied woodpecker that I took in my back yard to Drupal as our example. And what I'm going to do is it already has, basically, the functions for being able to update this image.

And the first function is to change the image alternative text. Drupal itself unfortunately does assign the images as decorative at first. You should always change that and add alt text. Even if the image is described below the actual image-- let's say you have a graph, and there's a detailed chart description below it-- you're still going to want to add some alt text to the image, so that the blind community knows the image exists on the page.

Whether that is, "image description of this chart is below this image,"-- just providing that context so people know an image exists on the page and that they know where the description exists within the page.

So I'm going to change the image alternative text, so I'm going to look for that icon. It's labeled change image alternative text. And then for a visual icon, it has an eye with a slash through it. So I'm going to select that. Once the decorative image part opens, I'm going to toggle decorative image off.

Now, I have an alternative text field. I always write my alternative text in a text file first. The alternative text field is very tiny, so it can be hard to write it within that field and be able to look at the finished product, so I write that in a plain text file and then copy it in. I'm going to hit command, V on my keyboard. That would be control, V on a Windows computer, but I'm on a Mac.

And so I've now pasted in my alternative text, and I can read that off quickly. And like I said, this is a small field, so it does get tricky to actually review it for typos, et cetera. A woodpecker perched on the side of a tree trunk. The bird has a vibrant red cap that extends from its nape to its forehead.

Its body is primarily a soft beige. This was based on the lighting. They're usually white. And with a black and white speckled wings.

The woodpecker's sharp beak is black, and its eyes are round and dark. The background is a blurred gradient of green, suggesting a dense, leafy environment.

So I'm going to say that's fine for my alternative text. I'm going to select the save button. And now, my alternative text is added to the image. Now, if I want to add a caption a photo caption-- and that's for everyone. A lot of people might not know what type of woodpecker this is, and so I'm going to add a caption.

And now, I have a caption field below, and I'm going to just type in there red-bellied woodpecker-- if I can spell it right. And then close out of that. So I have red-bellied woodpecker there. And I could add red-bellied woodpecker in Marlborough, Massachusetts, because that is the location in which this photo was taken.

But for now, just for this example, I'm just entering red-bellied woodpecker, because both sighted and nonsighted users might not know what kind of woodpecker that is. And so that's how you add both the alt text and the caption for the photo. Photo captions aren't required. The alternative text is. It's really whether you think you need to convey information to both nonsighted and sighted users about the photo.

Another key aspect of image accessibility is to always use actual text instead of images of text. It's always best to work with the digital experience team to implement any content you may want to convey in a more visual way, such as providing infographics, event posters, or a marketing banner. When our team is engaged, we can work with you to implement the content in an accessible and mobile responsive design.

So what are the issues with images of text? An image of text can often not be resized with zoom and magnification tools for the low vision community. Complex images of text cannot be conveyed meaningfully via alternative text, as there is no way to convey headings and list structures. Images of text cannot respect high contrast mode or dark mode. And finally, images of text prevent any user from copy pasting that content for personal notes or other purposes.

Now, I wanted to show a quick example of an image of text that was actually converted to content on a web page, so it is accessible now. And a good example-- an image of text that people tend to use a lot is an org chart. And so in this case, this is an admin and finance org chart. And the org chart might appear to be an image.

But actually, if you highlight a name-- let's say, Michael Durkin, Chief Procurement Officer-- all that content is reachable. This is not an image. It's content on the page. And behind the scenes, there are semantics where it's showing the hierarchy of the org chart for screen reader users. I'm not going to show the screen reader experience this time around, but I do want to show some other benefits to this org chart.

I use dark mode all the time. I have light sensitivity, so I have a dark mode browser plugin called dark reader, and I'm going to make sure that it converts to the site to dark mode. I can turn it on and off for demo purposes. And now, I've converted the site to dark mode, and the actual org chart respects dark mode.

And so I'm not faced with this bright org chart on the page. If it had been kept as an image, I would have been faced with a bright white background. So it respects my dark mode, and it also respects light mode for people that are using light mode.

So if I click that off, the other thing I wanted to show is browser zoom. And so for the low vision community, testing via browser zoom and designing content with browser zoom in mind is key. This also makes it mobile responsive. So when I zoom in, eventually, it flattens out, and it becomes mobile responsive. I can still follow the org chart in this mobile responsive style.

I can still see who reports into Lisa, and then if I scroll down, I can see who reports into LeeAnn. And so that is how it also responds to browser zoom. And so those are just two examples I wanted to provide. With content, when you design it with accessibility in mind, it becomes a better experience for all nonsighted users and sighted users.

If you design any graphics for the website, you also want to make sure they meet color contrast guidelines. When designing a graphic, you should always ensure the foreground elements have enough color contrast up against the background of the graphic. This can be tested by using the Web AIM Contrast Checker, which will be available as a resource in the learning path.

Please note that you should work with the Digital Experience team if you would like to add icons to your site. Icons often have a transparent background and are not designed with high contrast or dark mode in mind. The Digital Experience team can work with you to ensure your icons support high contrast mode and dark mode.

Another factor to keep in mind is that you should not use emojis for university websites. They should only be used for social media posts. Emojis should not be used for professional content. Emojis dispersed throughout content on a website will create accessibility issues for screen reader users.

Emojis are fine for social media and Slack when added to posts following emoji accessibility best practices. That's a key thing to note, that even when using emojis on social media or Slack, there are accessibility best practices with those, but please avoid using them on our university websites.

Videos posted to the university websites should always follow video accessibility best practices. Departments that already create videos should complete the intro to video accessibility training course, which provides several best practices around video accessibility, including key effective communication elements, such as captions, transcripts, and audio descriptions, and other key video design considerations, such as designing videos with epilepsy and vestibular disorders in mind.

If your department does not post videos at this time, but plans to in the future, please complete the training prior to developing a video.

The last topic we'll go over under this section is animations. You should always engage the Digital Experience team if you would like to add animations to your site. Animations can trigger various health issues, including migraines, vertigo, and seizures. Never use the following animated content, regardless of if a site respects reduced motion, as these animations can trigger a health condition for the first time.

Do not use flashing, blinking, and strobing effects. Do not use any disorienting movement. For example, handheld video shake, spinning movements, pinch and zoom effects, or horizontal slide effects. If animations are needed and essential for a specific marketing campaign, please work directly with the Digital Experience team to incorporate accessible animations into the website. We would need both the animation and the still photo so we can respect reduced motion settings.

Now, let's go over web forms and data analytics. You should use only the approved form products to post a form to the website. The following form tools can be used to build forms that are linked to from the website. Note that in all three cases, you should ensure you follow the associated training to develop a form that meets Accessibility Guidelines. The three tools are DocuSign, Drupal Webforms, and Form Assembly.

Form tools you should not use on the website. Smartsheet forms. At this time, Smartsheet forms are not accessible, and anyone using assistive technology will run into barriers. We ask that no one link to Smartsheet forms on the website. And Qualtrics. Qualtrics is meant for communicating research surveys and requires significant work to ensure the surveys are accessible. Please do not use Qualtrics for intake forms.

If using data analytics on your website, you should only use the approved data analytics products for interactive data analytics. Approved data analytic tools. Highcharts. Highchart graphs meet the Web Content Accessibility Guidelines and provide more advanced support, such as sonification.

Do not use the following tools. Tableau. At this time, Tableau dashboards cannot meet the Web Content Accessibility Guidelines, and thus cannot be made accessible to disabled employees, students, or the public.

Now, I'll go over accessible chart best practices briefly. However, note that if you choose to use Highcharts, you will get formal training on how to build an accessible chart. If any departments decide to add accessible charts to the website, you should ensure the following.

Use familiar and simple charts when possible. Bar and pie charts are often the easiest charts for anyone to follow. Always provide a chart title. Ensure charts do not rely on color alone. Provide clear data labels and access titles. Provide a chart description below the chart for anyone that needs the data delivered in a text based format.

Note that Highcharts is accessible to assistive technology users, but based on universal design, the chart description is for anyone that prefers to learn through text rather than visuals. Finally, use an accessible color palette. Work with the Digital Experience team to identify an accessible, monochromatic color palette.

Now, we'll briefly go over document accessibility training. A reminder that all documents you post to the website should be accessible. Please ensure you have completed the relevant document accessibility training that is listed on the Inclusive by Design website. Please work with your department on when to complete this training.

Note that Canva generated documents should not be posted to the website, as they can not meet accessibility guidelines at this time. No Canva files other than actual basic graphics should be uploaded to the website.

In 2025, Canva confirmed they have no current plans to make their document creation process accessible after several universities have noted the legal requirements of public institutions. If you have any questions about how to properly remediate a specific document or to discuss a better solution, please set up time with the Digital Experience team.

Now, let's talk about redesigning inaccessible content. You should reach out to the Digital Experience team for guidance. Sometimes, the way content was originally designed will never meet accessibility standards. The Digital Accessibility team has developed various options for creating accessible content, including data visualization charts and graphs, decision trees, interactive checklists, HTML organizational charts, and web based forms.

However, making a choice on what solution to use depends on how the content itself will be redesigned from a usability and accessibility standpoint. Please reach out to us to work on the best solution for your content.

A quick reminder to monitor your content with DubBot. All content editors have access to department site dashboards in DubBot. Content editors should fix any issues that DubBot identifies. DubBot identifies about 30% of accessibility issues. Those issues are measured up against the Web Content Accessibility Guidelines, WCAG, the compliance standard for Section 504 of the Rehabilitation Act and Title II of the Americans with Disabilities Act.

However, do not rely on DubBot to catch all issues. There is no way to automatically detect all accessibility issues. Here are two examples of accessibility issues that can't be automatically detected. There is no way to automatically measure whether the alt text for an image is accurate. There is also no way to detect if a video has captions, transcripts, or audio descriptions.

Always ensure you are using the Web Content Accessibility Checklist to confirm you have met all the requirements of the Web Content Accessibility Guidelines. We'll go over that checklist in a minute. Also, if you have any questions about issues that are identified in DubBot and how to fix them, please contact the Digital Experience team.

Our final topic is a reminder to leverage the Web Content Accessibility Checklist. You should save the Web Content Accessibility Checklist as a favorite. There is a lot to learn about web content accessibility, and it can be easy to forget a step.

We've created an interactive checklist you can reference when creating web content. You can access the checklist through the LinkedIn Learning course now that you have completed the video portion of this training. You can also access all of our checklists through the home page of the Inclusive by Design website on umassp.edu.

Thank you so much for completing the create accessible web content training course. If you have any questions, please don't hesitate to reach out to the Digital Experience team at dxteam@umassp.edu.