In the digital age, your website needs to provide a great user experience to everyone in your community—including people with disabilities. But you may be in the dark about how to make your website accessible to anyone, regardless of disability. There are tips you can take to make sure your website complies with the Americans with Disabilities Act (ADA).
Outlined below are things you as the webmaster can do to make your content more compliant. There's also some additional points that we as the developers can address. While these tips do not cover every single way to be ADA compliant, this guide should set you in the right direction and help you avoid most ADA complaints.
Step 1: Make Text Legible
Text on your website should be legible and easy to read. Choosing fonts like Comic Sans or Lobster could make reading difficult for your audience, especially someone who is visually impaired. We recommend using a sans-serif font. As for size, your normal text should be 14 to 18 points, while your titles should be about 24 points. These small details can help someone who can’t read very small text, which gives your website a better user experience for all your community members.
You should review your fonts manually and edit the fonts displayed in the "body" of the page, in the settings of the theme modules, as well as in the header and footer through the WordPress customizer.
Developer actions:
Some modules such as the RSS feed or calendar widget can only be edited by the developer.
Step 2: Format Text for Screen Readers
Some of your users might be visiting your site with the help of a screen reader. This is a helpful tool that reads website content aloud for visually impaired users. To include these members of your congregation, you can organize your text in a logical way, so that the screen reader can easily process your content. This includes all headings, subheadings and paragraphs. A screen reader will read verbatim what you display on your website, so being as clear as possible is a must.
Here are some helpful tips you can do to edit content yourself.
- Links should always be specific, include an action and in some cases, state their destination. For example, never type "Click here." You can say "Donate to our campaign" or "Download these instructions." If a link opens in a new window, you need to provide a warning. Adding (opens in a new tab) within the link text helps communicate to a screen reader that a link is opening in a new tab or window.
- Add a title to an iframe. Screen reader users rely on frame titles to describe the contents of an iframe (like an embedded video).
Keep in mind:
Using animations to replace any major content on your site can make a screen reader's job impossible, since there is little to no text for them to describe in the animation. It's best to steer clear of using motion graphics, so that everyone in your audience can enjoy your content.
Step 3: Label Images with Alternative Tags
Alternative tags (or alt tags) are written descriptions of images coded into a website’s HTML. When screen readers read the contents of a website aloud, they can read these descriptions, allowing visually impaired users to experience your images. Alt tags provide a description of an image in case your website has problems loading.
As you write alt tags, be as descriptive as possible. Provide the names of individuals, places, and objects. The more descriptive you are, the better your audience will be able to understand your content.
You need to review all images on all pages of your site. If an image does not have an alt tag, you must add them. Get in the habit of adding an alt tag to all new images you post on your site.
Developer actions:
There are some images, such as logos, that only the developer can add an alt tag.
Step 4: Use Contrasting Colors
Not only is it important to have legible fonts, but the background color and font color of your website could make or break your user’s overall experience. The colors of your website could especially affect colorblind users, who can only see certain colors or not see any color at all. Having a bright yellow font displayed against a white background could make reading difficult for anyone, so it’s best to pair colors that contrast each other. For example, white text displayed on royal blue is easy to read. Black text on a white background is always a good go-to color combination as well.
You have the ability to change most color options in the header, body and footer. This includes both the font color itself and the background color. The area you want to focus on though is the different modules and other content areas in the main content of your site. You can edit theme colors using the Customize panel or the Styling tab in individual modules.
Developer actions:
There are sections that are built into the theme, therefore only the developer can edit colors. This includes the URJ content section on home page, as well as some in the header and footer.
Step 5: Make Downloadable Content Accessible
Many organization websites include links to documents. More often than not, it seems easiest to display these documents as simple PDFs. However, since they’re often displayed as images, PDFs can be indiscernible to screen readers. They also pose a huge problem for users who don’t have the plugins or software to open a document.
To remedy the situation, any document on your website should have its viewing requirements listed, be clearly labeled and offer more than one file type. Having a text-based alternative, like a Microsoft Word Doc, can allow all of your users to understand the same information.
Step 6: Provide Captions and Transcripts for Video and Audio Content
The ADA requires that all videos and audio clips on a website include captions or a transcript, allowing deaf or hard-of-hearing users to have a full user experience.
Most of you use Youtube as a third party source to upload your videos and embed on site. YouTube can automate closed-captioning for videos on their platform. The company uses a software program that listens to each video and translates it into text. Any automated service like this could generate some errors, but you can fix them quickly and easily by editing their version.
The same principle goes for audio content, like podcasts. You should add captions for these too. We offer a plugin already called Seriously Simple Podcasting, which you can do this.
Keep in mind:
Automatic playback function should be turned off. Any video that plays automatically upon page load can interfere with screen readers and make it difficult for some users to find and stop playback. Allow users to initiate playback and pause or stop it themselves.
Step 7: Format Tables for Screen Readers
While data tables can be great ways to organize information, they can be difficult for screen readers to understand. When using data tables, make sure that they’re clearly labeled, proportional to the screen and simple to understand. Screen readers can easily read off the information if every cell in the data table is labeled, and all the information is in its corresponding data set.
Leaving anything blank in a data table can disorient a screen reader (which is reading the information in the order it’s displayed). Even if there isn’t information available, a simple placeholder like “N/A” can offer your user some clarity.
If you are having problems using tables throughout your website, it might be best to avoid them altogether. Most of the time, you can display information in paragraph form, without a data table.
Step 8: Make Navigation Accessible (developer action)
People who have motor disabilities (or even people with broken laptop touchpads) navigate websites with their keyboards. This is done simply by using the tab and arrow keys to reach a desired destination. However, some websites have “menu traps”—menus or pop-ups that cannot be closed without the click of a mouse. For someone using tab and arrow keys, a menu trap can make the user experience unsatisfactory and challenging. You should be able to tab through a website with little to no issue.
Source material: https://www.apptegy.com/guides/ten-tips-for-k12-ada-compliance/