Create Accessible Content

In order to help visitors with disabilities understand the structure of your pages, WCAG guidelines specify that headings (i.e. "Heading 1", "Heading 2" etc.) should be used as appropriate to denote the hierarchy of the page content and divide the page into sections. Use headings in sequential order as needed to section off portions of page content according to its priority, do not skip levels (i.e. don't place an h4 immediately after an h2, skipping h3), don't use a bold when denoting a heading, and don't use headings for emphasis. Read more about headings at the w3c website. It's important to note that the page title in Filmbot's website template has been hard coded to use a "Heading 1" (h1) tag, so you should typically not use the Heading 1 tag within the content of your page. Generally the highest level of heading tag that you should use is Heading 2 (h2).

Make sure that whenever you are putting a link or a button into a page, that the link or button text is meaningful for users who are navigating using a screen reader. This means avoiding the use of simply "click here" when creating link text, and using the aria_label attribute on button shortcodes to describe the purpose of the button. Also keep in mind that all of your visitors cannot see or use a mouse, so if you'd like to maintain sensitivity to all of your visitors, avoid using the words "see", "view" or "click" as action words.

Bad: Click here to see our food and drink menu. Good: Check out our food and drink menu.

Bad: [button url="/membership"]Purchase[/button] Good: [button url="/membership" aria_label="Purchase a Membership"]Purchase[/button]

In order to ensure that your images can be understood by visitors using a screen reader, they need to have descriptions. This is accomplished by something called "alt text" in the image tag, which screen readers will read out loud when the image is focused. You can enter your descriptive alt text when inserting images to a page or putting them into an image gallery, by using the "Alt Text" field in the Add Media window.

Also, you should avoid putting text inside images, since that text won't be read in the normal flow of a page by a screen reader. If you must use text inside an image, make sure you put a copy of the text into the Alt Text field when inserting the image to a page. Lastly, if you determine that an image is purely decorative and should be skipped by a screen reader, you can leave the alt text blank, and the image will not be described to screen reader users.

In order to ensure that your images can be understood by visitors using a screen reader, they need to have descriptions. This is accomplished by something called "alt text" in the image tag, which screen readers will read out loud when the image is focused. You can enter your descriptive alt text when inserting images to a page or putting them into an image gallery, by using the "Alt Text" field in the Add Media window.

Also, you should avoid putting text inside images, since that text won't be read in the normal flow of a page by a screen reader. If you must use text inside an image, make sure you put a copy of the text into the Alt Text field when inserting the image to a page. Lastly, if you determine that an image is purely decorative and should be skipped by a screen reader, you can leave the alt text blank, and the image will not be described to screen reader users.

Colors you use in your website must meet minimum contrast ratio requirements between the background color and text on top of the background. The minimum contrast ratio for the WCAG 2.1 AA is 4.5:1. You can check the contrast ratio between two colors using the contrast checker tool, or read more about color contrast at the WebAIM website.