Help CenterDigital Accessibility
An overview of block accessibility on Tilda websites and the features within the blocks to improve it
Most of the blocks in Tilda's Block Library are already optimized to be used by people with constant, temporary, or situational disabilities. In this article, we'll explain what possibilities exist and what settings you may want to configure to improve the accessibility of your website.
A Brief Checklist For Improving Website Accessibility
- 1Check if SEO titles are set for heading blocks
- 2Set alt-texts for images and ensure that they reveal the content of the image
- 3Check if the menu blocks are located on the header page and the footer is on the footer page
- 4In the Content settings for the blocks with online forms, check if each field has a field heading, and if the success message after the form is submitted is specified
- 5Check the contrast of the website's fonts and make sure there are no texts against a background of similar color or imagery that makes it less legible
- 6Check if the project language is set in the Site Settings → More
- 7Check the accessibility guidelines for elements in Zero Block
Screen Reader Optimization
A screen reader is software that voices out what is displayed on the screen. Often screen readers are already pre-installed and are used through accessibility settings in the operating system.
Tilda blocks are either automatically optimized to work with screen readers or include the necessary settings to mark up content so that it is properly voiced by the screen reader.
Tilda blocks are either automatically optimized to work with screen readers or include the necessary settings to mark up content so that it is properly voiced by the screen reader.
H1-H6 Titile Tags
If the website content has a clear structure, you can set H1, H2, and H3 tags for headings. Headings of different levels will help the screen reader to better interpret the structure of the page, as well as to switch between content using the keyboard.
You can set H1-H3 tags in the settings of any block that has a title under "SEO: Title Tag." In other blocks, for example, in subheadings for cards, you can set headings of other levels up to H6.
You can set H1-H3 tags in the settings of any block that has a title under "SEO: Title Tag." In other blocks, for example, in subheadings for cards, you can set headings of other levels up to H6.
Important. There can only be a single H1 tag on each page. You can have any number of tags of other levels, as long as the hierarchy is respected (e.g. no H2 titles within H3).
Alternative (Alt) Text For Images
Alternative text for images is readable by the screen reader, so it is worth setting it so that visually impaired people can understand what the image is about. Alternate text is also displayed in case of other accessibility limitations, such as slow connection.
To set alt text for an image, open the Content tab of the block and click on the three dots next to the uploaded image.
To set alt text for an image, open the Content tab of the block and click on the three dots next to the uploaded image.
If the image is simply decorative, such as a background for some element on the page, it may not need alternative text, take this into consideration.
To add an alt tag for images in blocks from the "Gallery" category, open the Content tab and click "Text" next to the uploaded image. Then in the "Image alt for SEO" field specify the image description.
Here's how to specify the alt text for an image in the Content tab of a block on Tilda
To increase accessibility, alternative text should precisely communicate the content of the image and address visitors who may not be able to see the image for one reason or another.
Let's take this photo as an example:
Poor examples of alt texts:
"Dog"
"Poodle."
A good alt text example:
"An poodle puppy is sitting on the grass in the backyard of a brick house"
Poor examples of alt texts:
"Dog"
"Poodle."
A good alt text example:
"An poodle puppy is sitting on the grass in the backyard of a brick house"
Tips For Designing Footers And Headers
Blocks in the header and footer are automatically marked in a way that allows the screen reader to recognize that a visitor is currently in such a block. For example, in the header, you can skip reading all the menu items and go straight to the main content of the page.
Blocks containing the header and footer must necessarily be on separate Header and Footer pages for proper markup.
Blocks containing the header and footer must necessarily be on separate Header and Footer pages for proper markup.
To set it up correctly, watch this video tutorial or check the Header and Footer article in the Help Center.
Tips On Filling In Online Forms
Most of the input fields in blocks from the "Forms" category are accessible to the screen reader. Success or error messages are voiced by the screen reader.
Also, be sure to specify the input field titles, so that it is clear for each field exactly what needs to be typed into it.
Also, be sure to specify the input field titles, so that it is clear for each field exactly what needs to be typed into it.
The process of customizing form fields and pop-up messages about successful form completion is described in our video tutorial on setting up online forms.
Tips on Contrast And Font Size
Sufficient font contrast helps visitors perceive the text on the website more easily. It's not only important to follow contrast guidelines because you may have visually impaired visitors, the proper contrast improves the user experience in general.
There is a standard on the web for determining background and text contrast, which is based on the WCAG (Web Content Accessibility Guidelines). According to this standard, contrast is defined as the number of times the brightness of the lightest and darkest color differs and is written as the ratio of that brightness: 3:1, 4.5:1, 10:1. The lower the value, the lower the contrast (the maximum contrast ratio is 21:1).
To make the website accessible to visually impaired people, you should increase the contrast of fonts, some specific ranges of values for elements are described below.
You can use the background contrast and font color tool to derive the contrast value and check it against the values below. To do this, simply copy the background and color values from pre-designed blocks or Zero Block, add them to the service specified below, and get the contrast ratio.
There is a standard on the web for determining background and text contrast, which is based on the WCAG (Web Content Accessibility Guidelines). According to this standard, contrast is defined as the number of times the brightness of the lightest and darkest color differs and is written as the ratio of that brightness: 3:1, 4.5:1, 10:1. The lower the value, the lower the contrast (the maximum contrast ratio is 21:1).
To make the website accessible to visually impaired people, you should increase the contrast of fonts, some specific ranges of values for elements are described below.
You can use the background contrast and font color tool to derive the contrast value and check it against the values below. To do this, simply copy the background and color values from pre-designed blocks or Zero Block, add them to the service specified below, and get the contrast ratio.
For regular text, the minimum contrast value needed to make the text distinguishable is 4.5:1. Values of 7:1 and above will already mean that the text has increased contrast (in the standard categories - AAA).
For larger texts (such as headings), the minimum contrast value is 3:1. As of 4.5:1, the text is considered enhanced, i.e., suitable for use by people with visual impairments.
For non-text elements (buttons, navigation controls, etc.) it is necessary and sufficient to maintain a contrast ratio greater than 3:1.
For larger texts (such as headings), the minimum contrast value is 3:1. As of 4.5:1, the text is considered enhanced, i.e., suitable for use by people with visual impairments.
For non-text elements (buttons, navigation controls, etc.) it is necessary and sufficient to maintain a contrast ratio greater than 3:1.
You can also use the Wave (Web Accessibility Evaluation Tools) online service to check the contrast and accessibility of a page. It visually shows possible problems with contrast and accessibility of website elements. However, not all recommendations provided by this service can be relevant and correct, in particular, not all elements may require alternative text.
How To Specify the Website Language
For better accessibility, be sure to specify the website language in Site Settings → More. This will help third-party software to better interact with the website.
Navigating Between Website Blocks Using the Keyboard
For some types of limitations, it is more convenient to use the keyboard to navigate through the content of the website. Tilda blocks are designed to help with keyboard navigation, specifically:
- When navigating with the keyboard, there is a colored focus frame to understand what element is currently being interacted with
- Blocks with menus, submenus, forms, tiles, video players, tabs, sliders are automatically labeled so that they can be navigated using the keyboard
Accessibility Tips For Zero Block
Currently, work on the accessibility of all Zero Block elements is still in progress. However, it is important to follow the general guidelines described below.
Keep the layers in the right order. For visitors who interact with the page using the keyboard, the correct order of focus points is essential.
When moving through elements using the Tab key, the elements will be selected in the order they appear in the page layout. To make sure this order is correct, place the elements in the right order. The navigation will take place in the reverse order from the one specified in the layers, from the last element to the first one.
When moving through elements using the Tab key, the elements will be selected in the order they appear in the page layout. To make sure this order is correct, place the elements in the right order. The navigation will take place in the reverse order from the one specified in the layers, from the last element to the first one.
Don't leave empty elements, especially if they have a semantic role, such as the H1 tag. Include links, SEO tags, and text inside elements. For images that are not decorative, use alternative (alt) text.
