Making Content Accessible to People With Disabilities: A Beginner's Guide

1. Beginner's Guide to Digital Accessibility: In this course, you'll learn what digital accessibility is and how it benefits you and your audience. We'll explore universal design, the idea that designing from the ground up to make things accessible for people with disabilities makes a better default experience for everyone. While we won't dive into the detailed accessibility standards, we'll explore the various areas of focus that you can address to meet the standards. In the US, companies and organizations are regularly sued for having inaccessible content, so working to meet the accessibility standards is incredibly important. Standards are set by an international consortium, so this training is applicable to content creators from any country. The focus of this course is the things that beginners can do to make their content accessible without knowing coding or detailed web configurations. Most software supports accessibility best practices. You just need to learn what to look for. We'll consider how to make text and images in documents, webpages, and apps accessible. Specific items like hyperlinks and tables that have their own considerations will be covered. Making video or audio media accessible requires some planning, and this is explored. We'll look at the basics of making documents and online content accessible to people using keyboard navigation. And finally, we'll do an overview of accessibility checkers in common software. Thank you for taking the time to learn how to remove barriers to your content. 2. Introduction to Accessibility and Universal Design: In this training, you will learn about the need for digital content to be accessible to all and how the principle of universal design makes things better for everyone. Then you will explore guidelines for making different types of content accessible. Accessibility can be defined as removing barriers for as many people as possible. In the physical world, we may think of ramps and sign language interpreters. In the digital world, there are many considerations to being sure everyone can access your content and services, and there are no barriers preventing anyone from getting all of the information. Unfortunately, many times creators, developers, and educators create their content without considering accessibility and only go back to address a specific problem after someone encounters barriers in their finished product. As a physical example, consider an old building designed with stairs everywhere. Perhaps accessibility was added later, but the ramps and elevators are hard to find and take wheelchair users around the back of the building. A digital equivalent might be a website that can't be navigated without being able to click or tap on the screen. Treating accessibility as an afterthought limits access and can create large headaches and legal trouble. It's essential that accessibility is built into the plan and not an afterthought. All people involved in creating digital services and content should practice universal design, which is including accessibility for all people in the plans and using best practices from the start. Universal design for a building would be using a ramp instead of stairs at the main entrance and having elevators right next to any internal stairs. In a digital environment, we need to design everything we build with accessibility best practices at all stages. The result is a seamless experience for people who need assistance and more options for everyone. A key concept of universal design is that it results in a better default experience for all users. In the US, the legal drive behind physical and digital accessibility comes from the Americans with Disabilities Act or ADA. As part of this act, all businesses must be accessible, and this includes their web presence. This includes non profits, schools, and informational sites. Essentially, every website and app must be accessible to people with any disability. Businesses small and large are regularly sued for inaccessible websites, and there are people out there searching for inaccessible sites to sue. So you may be wondering how a website is deemed accessible. There is no single pass fail test, but the best bet is to follow the web content accessibility guidelines from the worldwide web consortium. Most content and websites, not manned by accessibility experts will fall short in a few areas. But there are many web accessibility checkers that can run a scan of your website or app against these standards and professional services you can hire. Both of these would let you know what needs to be fixed and how to fix it. The standards can be complex, but this training won't focus on specific standards. Instead, you will learn about the basic areas of focus for accessibility and beginner friendly best practices that you could implement today. These will be useful if you are making documents, websites, apps, or multimedia pieces. Throughout the training, you'll explore many specific best practices, but they all fall under this umbrella. Someone using your website should be able to get all of the information and complete all of the processes without seeing the screen, without hearing the audio and without using mouse clicks or screen taps to navigate. This brings us to assistive technology. This is any technology that helps someone with a disability, and it is highly variable for individual users. Users with limited mobility may not be able to click a mouse or tap on a screen. They may have to tab through the content, whether that is by literally hitting the tab key on a keyboard or by using other assistive technology customized to their needs. One tool you will hear a lot about in this training is a screen reader. This will read the text in invisible labels to the user so they do not have to see the screen. However, there are less common tools, such as a refreshable Braille display that have similar needs to screen readers so that non visual users can access the content. This training will mention at least one purpose for every accessibility guideline given, but understand that there are likely overlapping purposes for different needs. As mentioned, a screen reader is a common assistive tool. If a website is designed properly, everything that a fully sighted person can take in at a glance will also be read to a person using a screen reader. This means that invisible labels must be added to images and diagrams and interactive elements like forms and buttons. The site must also be structured properly so that the user can tab through the elements on the site and know where they are. If you would like to try a screen reader yourself to get the experience or to test your content, you can get the non visual desktop assistant for free from enviccess.org. One quick caution as we get started. At several points, you may see an issue described with the recommended best practice for accessibility and be aware of a new technology that works around the problem. Do not assume that this means you do not have to follow the WCIG guideline or use best practices. As a general rule, the creator cannot assume that the user has the latest technology. There also may be specific reasons that a given technology won't work for everyone. If it becomes a viable universal solution, the guidelines will be updated. Until then, follow the guidance as written. In the next lesson, you will learn beginner friendly guidelines for specific areas of your content. So please continue on. 3. Making Text Content Accessible: In this section, you will learn about best practices for making basic text accessible. Web editors, app builders, and word processors, such as Microsoft Word and Google Docs, have style features that let you designate text as headings. Using these gives the text an invisible label that identifies it as a heading. Screen readers can use these labels to jump from heading to heading for fast navigation through the page. The user can go right to the specific information they are looking for without waiting for all of the body text to be read. So it is important to use the actual heading styles rather than making regular text larger to appear as a heading. That method would help sighted people understand the page at a glance and know where to look, but it would not break the page up for people relying on assistive technology. Headings are simple to use, but keep this in mind. When you are making a document or a webpage, as you add headings and subheadings, be sure not to skip any levels. So begin with heading one as the main title, then be sure you don't use heading three if you don't have a heading two. This could confuse screen readers. Once you have applied a heading, you can change the appearance of the font. You don't have to use the default typeface, color, or size that your program gives to headings. Those things don't matter as long as it is recognized as a heading by the invisible labels. So for example, I have this script document in Microsoft Word. All of the text is normal style by default. I will use heading one for the title and subheadings for each section title. I like heading three more than heading two because it's bold, but I will still use heading two for each of the section titles. Now I will simply change the font to bold and make some other changes, but that won't change the fact that the document still sees this text as heading two. I can even modify the default heading styles so that heading two will always match the appearance I created. Now, when I select heading two for the other subject titles, they will match. They will all be read as heading level two by the screen reader. Be sure that your text is high visibility, so it is easy for everyone to see, including people with low vision and using small screens. Remember that just because it is clear for you doesn't mean it is clear for everyone. So the guidelines here are to use simple typefaces without Serifs for all of your text. Use a font size 12 or larger. Make this spacing between the lines at least 1.15, which is the default in Microsoft Word and Google Docs. For text that is in a video, make it as large as you can. The absolute minimum size for text in a video is 14, but make an effort to keep the text larger if possible. Choose the colors for your text and background carefully. Even if given a branding guide or template, check that the colors you pair together have a lot of contrast. One quick way to ballpark it is to squint and see if you can still read it. If you try that on this screen, you should see that the two options in the middle are likely okay, but the options on the far left and far right are definitely not. Then, to be sure, you would also get the color codes and put them into a color contrast checker. There is one linked in the resource document. Screen readers recognize bulleted list and numbered list. So use the actual list tools in your software to make them. Do not create your own bulleted list by simply putting asterisks, dashes, random symbols, or anything else before each line of normal text because the screen reader will not know it is a list and will read those symbols out loud. Instead, just click the bulleted list icon to make the list. You can then customize the symbols that are used to make them match the style you want. Similarly, be sure to use the numbered list tool to make number list or outlines instead of just typing numbers in front of normal text. In some programs such as Microsoft Office, if you type numbers and periods, it will recognize that you are typing a numbered list and auto format it for you, making an accessible list. Screen readers also recognize hyperlinks. The text for a hyperlink must be a description of the page or document it is linking to. Using click here or similar non descriptive words is not helpful because if someone is using assistive technology, they won't get the context of where that link goes. However, you should not leave the link displaying the whole URL, or the user will have to listen to the screen reader read each individual character, and URLs are often not descriptive. For example, the one on screen is clearly a YouTube video, but gives no idea what the topic or source is. The best practice is to just make the link text an explanation of what the link is. For example, linking to YouTube with the text accessibility playlist from adapting site. In the next lessons, you will learn beginner friendly guidelines for specific areas of your content. So please continue on. 4. Using Alt Text to make Images and Objects Accessible: In this section, you will learn about best practices for making images, buttons, and other on screen objects accessible. Remember that the goal of digital accessibility efforts are to make sure that all users can get all of the information. Images and other objects such as video files, tables, and interactive buttons are used to convey information visually. These objects are given alternative text, which can be read by a screen reader to give users the information. For any object, the text must describe what the user would perceive from it. So let's consider ways to make visual information accessible to all users. Here is a graphic from a bakery showing the percentage of people that voted for their blueberry pie, apple pie, and peach pie. For anyone that can see the screen, it's an effective, simple graphic. But for those who can't, Alt text is needed. There are four acceptable choices for Alt text. The ideal way to handle this is to add regular text to the page that describes the takeaways from the image. You might have a paragraph that says, we ask customers which pie we should feature next month, and the clear winner was Blueberry with 65% of the vote. 20% voted for apple pie and 15% for peach pie. Consider this as beneficial universal design. For bost people, the information is given in two different ways, making it easier for them to understand and remember. This might not seem important for a simple graphic about pie flavors, but can be very helpful with more detailed information. Another good way to provide the text is in the image caption. If your software provides a way to caption an image, the text will be attached to that image. This is a good choice if the text can be concise. A caption should not be more than three sentences. Next option is an Alt tag. An Alt tag is invisible text that is attached to the object with code. The screen reader will state that it has encountered an object and read the Alt text. This must be short. For some screen readers, it is a max of 125 characters, including spaces. If your software gives you the option to provide Alt text for an image, what it's doing is creating an Alt tag. We will explore adding Alt tags in some common software later in the training. While this simple chart about pie flavors can be sufficiently described with the other methods for very detailed diagrams that have a complex structure, another option may be needed. A long text description that gives the details clearly is also an accessible option. Because this would take up a lot of space if it was placed on the page with the image, this can be a link to a text document. If you do this, also provide a short summary of the key takeaways of the image using one of the other methods. Then clearly explain that the link is going to a detailed description of the image. This way, the user knows what it is and can decide if they want to go listen to the whole thing. Whenever a screen reader encounters an image or other object, it announces it. It will try to read the Alt tag. So it can be very confusing to the user if the screen reader announces that there is an image, but the Alt tag is blank. They may think they are missing some important information. So images that are decorative or nonsense images that don't provide any information still need to be addressed. Images like this sunset, which may be on a page as eye candy, but doesn't provide information. The blue box behind the text, which is just there to provide contrast and shouldn't even be noticed, or the orange dash line, which is a visual divider between columns of text should all be marked as decorative. Marking them decorative will cause this green reader and other assistive technology to completely ignore them, reducing confusion. Similarly, if an image has already been described in the text or caption, an Alt tag may be redundant. So if you aren't using an Alt tag, be sure to mark the image as decorative so that the screen reader isn't announcing an image with dough description. We've been focusing on images, but Alt text is also needed for interactive objects. This includes buttons, forms, and video players. The Alt text should indicate what the object does. For example, in the rating scale above, each star would have Alt text, such as button two radar service one out of five stars. Button two radar service two out of five stars, and so on. So if Alt tags are invisible labels, how are these Alt tags created? Most programs actually make it easy. In Microsoft Office programs, simply right click on the image or other object and select View Alt text. A panel will come up on the right with a box where you could add the Alt text. Whatever is in this box is what is used as the Alt tag. Tags in Google Docs follows a nearly identical process. Most social media platforms have the ability to add lttext for an image. Unfortunately, some don't prioritize this and it can be hard to find. For example, when making a new Instagram post, you would have to select more options from the bottom and then scroll to the bottom option of write Alt text. Then you get a place to write the Alt text, which will become the Alt tag on the image. Since these platforms are always evolving, you should look up how to add Alt text on whatever platforms you use, especially for business or educational purposes. In website or app building programs, accessibility is often prioritized. So when you upload or add an image, you may be asked to provide Alt text. In the platform shown, it asks for an Alt tag every time you add an image. When you choose the image, it asks, how would you describe this image to someone who can't see it? There is also a checkbox that can be used to market decorative, which removes the Alt tag. When writing Alt text, be sure it is effective. Many people have been incorrectly trained that Alt text can simply describe the type of image without giving the information. When making a document with the pie chart from earlier, they might think it is acceptable to write something like a pie chart or a pie chart comparing flavor preferences. In reality, a description like this is pretty useless. The purpose of the chart is to show which flavor people voted for the most. So the Alt tag needs to give that information as well. Basically, the Alt text should give the information that a person viewing the image would be perceiving and write it concisely. Think of the earlier screenshots from Instagram showing how to make a post accessible. Effective Alt tags would give a brief description of the steps to take in the process. For an interactive object like a button, the Alt text should indicate what the button does. Here's a quick recap of this lesson on Alt text. The purpose is to make sure people who can't see the screen get the information being given in images and other objects. Alt tags are invisible text that stays in the code to be read by screen readers or other assistive technology. To work effectively with assistive technology, images and objects either need to have Alt tags or be marked as decorative, which means they will be skipped over. There are several options for Alt text of an image. Describing the image in the main text can be beneficial for everyone by giving the information in multiple ways. Describing the image in a caption is also effective. The third option is to use Alt tags only. The final option is to attach a document with a long text description, which is useful for making complex images accessible without adding a lot of text to the page. Pair this with one of the other methods, so a brief description is on the main page. No matter which method you choose, All text must effectively describe the information that a fully sited user would perceive. In the next lessons, you will learn more beginner friendly guidelines for specific areas of your content. So please continue on. 5. Making Tables Accessible: Tables are a challenge for screen readers, so be sure to structure them carefully. Start by setting up your table to have a header row and possibly a header column. This tells the screen reader to read those headings first when navigating to a new cell. This helps the user know how the information in each cell is categorized. For example, in this table, if the user navigated to the third column, second row, the screen reader would announce successful sales, April 14. Without the designations, it would just say column three row 214. In Microsoft Office, the table design tab includes a checkbox to designate a header row. Unfortunately, at the time of recording, there is no option for this in Google Docs, and web content editors vary in their ability to structure tables this way. In any software, once you have designated the header row, it's okay to change the appearance of the text and background. The header is designated by invisible code that the screen reader will interact with. When creating your table, ensure no cells are left blank, which can confuse a screen reader. Enter NA or zero or something else to indicate if there's no value in the cell. Avoid merging or splitting cells. Doing either can really confuse a screen reader and prevent them from reading the rest of the table. As an example, consider this table showing pet adoptions from a small shelter. In this version of the table, there doesn't seem to be a header row. There is no category listed for the first column. This screen reader will just start reading cell by cell, making it unclear what data is being presented. There is another blank cell which can confuse the screen reader. And while it starts with separate rows for birds, reptiles, and small mammals, in the next columns, those cells are merged. So that data is combined into one number. This will definitely throw off the screen reader. In this improved version, there is a header for every column. If this is designated as a header row, a screen reader will announce what column a cell is in as the user navigates the table. Since there was no data for cats in the first year, they wrote, not applicable in the cell instead of leaving it blank. And finally, instead of three separate rows that had merged cells, they chose the solution of only having one row for this combined data so that the screen reader can easily navigate. Of course, tables should also have Alt text. Consider that a screen reader will read each and every cell out loud. For large tables, this could take forever and may not be necessary. So Alt text that gives an overview of the table allows someone relying on assistive technology to get the main ideas and choose whether or not they want to actually listen to each cell. In Microsoft Office, you can add Alt text in the form of an Alt tag. Simply right click on the table, select table properties, and fill a description in on the Alt text tab. In software where this is not an option, provide the alt text in the paragraph before the table. So when the screen reader encounters the table, the user knows what to expect and can decide whether to listen or skip it. In the next lessons, you will learn more beginner friendly guidelines for specific areas of your content, so please continue on. 6. Accessible Audio, Video, and Animations: Repetitive animations, particularly objects that flash or blink can cause seizures or other physical responses. The official role is to avoid anything that flashes more than three times per second, but it's safest to avoid flashing, blinking or repetitive animations altogether. Remember, animations of all types need alternative text in the content or in the captions. As we get into audio and video, you'll need to know these two terms. Transcripts provide a text alternative to media in a separate document. Often they are a verbatim account of the media's audio. For visual media with no audio, transcripts describe what is happening on screen. They could also have additional descriptions, explanations, and comments that are beneficial to listeners. Captions provide a text alternative to media audio that is synchronized with the media. Captions allow the learner to coordinate the transcribed words with the video's visual content. When are captions and transcripts required, it's simple and straightforward. Any media that is audio only or video only needs a transcript. Any media that has audio and video needs captioning. And best practice is to also include a transcript. Having captions available is helpful to many people, including those with hearing disabilities, people still learning the language, people with learning difficulties or processing disorders who prefer reading to listening, and even people who are in public or noisy place and don't happen to have their earphones with them. Again, the principle of universal design is that making your content more accessible creates more options and a better default experience for everyone. When designing videos, ensure that your visuals leave space on the bottom center of the screen so that the captions don't obstruct any important content. Always keep in mind that someone who can't see the screen needs to get the same information as someone who can. So don't reference a visual on screen without explaining it. For example, if there is a graph with pie flavors, and you only say, This graph shows people's favorite pie flavor. Someone who can't see the screen can't tell which flavor that is. Instead, say, This graph shows that people prefer blueberry pie to peach or apple. Similarly, in a tutorial, describe each step verbally rather than assuming people are watching the screen. Don't say click here to add an image as you perform the action. Instead, say something like to add an image, click Insert, then select pictures as you take those steps. When creating a video, think of the text on the screen like an image. It's going to become part of the video file and be resized by being stretched or squished with the video. For the best visibility, use a typeface without serifs that is very clear and straight. Never let the font size get below 14 points and try to keep it larger if possible. Remember, just because you can see it clearly on your screen doesn't mean that a person viewing on any phone will be able to see it just as well or that all viewers have clear vision. If you have an audio file with no visuals, it must have a complete word for word transcript available. The audience should have the option of reading while listening or instead of listening. Again, this provides more options and assistance for everyone. Another benefit of universal design. When you provide captions or a transcript, it must be accurate. The standard is 99% accuracy. This may seem high, but remember that a few wrong words can make content stop making sense. Automatic captions or captions created by AI are a great starting point, but they are generally not accurate enough. Many automatic caption tools average only 80% accuracy, which leaves the captions nearly useless. If one out of every 20 words is incorrect, it would be very confusing and hard to get any meaning out of. So anytime you use a caption tool like this, the result absolutely has to be reviewed and revised by humans for complete accuracy. Accurately transcribing speech can be very time consuming. So when making content, remember that having a script and sticking to it is the fastest way to have an accurate transcript and will also make your content more professional. In the next lesson, you will learn more beginner friendly guidelines for specific areas of your content. So please continue on. 7. Planning for Accessible Navigation Options: Not all users can navigate by using a mouse to point and click or tap on a touchscreen to make selections. Consider that there are mobility and motor control issues that would prevent people from holding a mouse or making the necessary movements. Also, users with low vision or no vision can't navigate in these ways because they cannot effectively see the screen. Instead, these users use the tab key on a keyboard to navigate through the elements on a page or use assistive technology that works in a similar way. A keyboard user typically uses the tab key to navigate through interactive elements on a webpage or document, including links, buttons, fields for inputting text, and more. When an item is tabbed too, it has a keyboard focus, and another keystroke such as Enter will cause an interaction with that object. A cited keyboard user must be provided with a visual indicator of the element that currently has keyboard focus. Focus indicators are provided automatically by web browsers, generally as an outline around the object. When a screen reader is being used, the focus is announced. Objects that aren't interactive such as blocks of normal text should not get a focus indicator. The order that objects receive focus should follow the flow of reading left to right, and top to bottom. This is generally how it will be created by default, but the order can be messed up if objects are moved or the page structure isn't standard. Check the tab order by starting at the top left of the page and clicking Tab repeatedly. You should be able to navigate through the entire page, and check that the order makes sense, and no interactive elements are left out. Be sure that clicking Enter when a link is in focus, opens the link, Spacebar selects a checkbox, and the other keyboard inputs described on the web AM keyboard accessibility page function correctly. Solving these issues if you find them is more in depth than we want to get to in this training, but you can use the linked page as a reference. The tab order is also important in documents that you create. Slide shows are especially challenging because they are built from many text boxes and objects. For PowerPoint, there is a function in the accessibility checker called check Reading Order, which shows the tab order for each slide and allows you to change it. You can make sure the order makes sense and uncheck any objects that should be ignored. You can find out more at the Reading Order article from Microsoft Support linked in the resource document. There is a similar feature for Google slides, and a support article has also been linked in the resource document. For word or Google Doc, simply tab through your page and adjust the layout as necessary. For web development and any other software that you are using to create content for others, you'll need to do a bit of research. Search for checking and adjusting tab order, reading order or focus order to find out if your software has these features. Certain other actions that require a keyboard and mouse are also not accessible. For example, allow for an alternative to drag and drop for moving files. If you need to use interactive questions that involve drag and drop to put things in a sequence or put them into categories, you'll need to provide an alternative question format, such as multiple choice that covers the same content. In the next lesson, you will learn a bit about using accessibility checkers and summarize what you've learned throughout the course. So please continue on. 8. Using Accessibility Checkers and Summary: Most major online tools, productivity software and creative software have an accessibility checking feature. Note that these features don't fix the problems for you. They alert you to potential problems and give you suggestions on how to resolve the concerns. In Microsoft Office, the accessibility checking tool is found by selecting the review menu at the top, then check accessibility from the ribbon at the top. A panel opens on the right with a list of items that have been checked. If no issues were found with an item, it will be graded out with a checkmark. For items where a concern was found, it will list the number of instances of the problem. Click on the description of the problem to be taken to it and given suggestions. Unfortunately, the Google Works base apps don't have a native accessibility checker. Instead, you could use their documentation to get help on checking it yourself. When creating or working with a PDF, you could use the accessibility tools in Adobe Acrobat. Open the PDF. Use the global bar in the upper left to select all tools, select view more, and then select prepare for accessibility. Follow the prompts in the prepare for accessibility panel to view the details and make fixes. When creating websites, apps or other online content, research whether there is an accessibility checker built into any platform that you use. Check websites using a web accessibility evaluation tool, which will alert you to issues you need to correct. The free tool from web aim is very easy to use and is linked in the resource document. Consider the option of hiring a professional tester to check for accessibility issues that they will discuss with you. As you discover issues, make changes from the foundation up. Meaning go back to your design practices and make changes so that the issues don't happen again. You should do frequent accessibility checks as you go rather than waiting to check the finished product. Consider hiring experts to help you build your content accessibly from the start and help you create templates that are accessible. An additional note here is that some companies will sell what they call an accessibility overlay, claiming it will make inaccessible web content accessible with barely any work. These are not actually effective and should not be used. In summation, there are many things to consider when making content that is accessible for everyone, but there are many tools to help you. The biggest factor is making a commitment to do these things. Design with accessibility in mind, check for issues, effectively fix any issues, and plan to avoid them next time. Thank you for working to remove barriers so that everyone has equal access to your content.