Accessible Landing Page – Adjust Landing Page to Web Content Accessibility Guidelines

Last updated: March 1, 2023 Written by: Magdalena Dejnak
Table of contents show hide

    The Web Content Accessibility Guidelines (WCAG) are an internationally recognized set of recommendations that, when followed, make websites and online content more accessible to people with disabilities. Creating user-friendly web content is, of course, regarded as good practice globally; however, some countries may adjust their laws to WCAG differently. That being said, when creating your landing page, make sure that it is compliant with the legal standards of your country.

    Create pages using AI features to generate text, SEO and edit images to work more efficiently and publish high-quality pages.

    Check AI demos

    Table of contents show hide

      Make your landing page accessible and usable

      Following WCAG standards allows you to be certain that your landing page is understandable to the widest possible audience. WCAG-compliant pages should fulfill four major accessibility principles: Perceivable, Operable, Understandable, and Robust. This article will walk you through a few ways of making your Landingi landing page more accessible. 

      Landing page x web accessibility guidelines

      Navigation

      Your page should be easy to navigate and use without a mouse or a touchpad. Make sure that visitors can move around your landing page with a keyboard – you can check such navigation availability by pressing Tab or Shift+Tab keys. Remember to add alternative links to phone numbers, email addresses, and menus, thus this navigation method does not work with plain text.

      In Landingi, form (including all fields), buttons, or video widgets can be used with a keyboard. You do not have to configure any additional settings.

      Accessible contact data

      Check all elements' accessibility – if one of them is not usable enough, you should provide an alternative. This particularly applies to contact data.

      Contact data in a fixed menu/footer

      Phone number, correspondence address, or email address can be placed in a menu or a footer of your landing page, and pinned to the top or the bottom of the page. Fixed elements are always visible on a website, even during scrolling. Remember that you can not pin two elements at once. Read more about fixed menu in Landingi to add it to your landing page.

      Active contact links

      To make contact data available from a keyboard, write them in an active alternative link form. That way, a user navigating with Tab and Enter is able to open the default email software or start a new SMS. Check how to use alternative redirect links in Landingi.

      Alternative texts for images

      Provide text alternatives for visual content – that way, images on your landing page can be understood even by people with blindness and impaired vision. Alternative texts should briefly and relevantly describe graphic elements or their function.

      In Landingi, to add an alternative text to images on your landing page, go to the editor, click the image, and in the right-side toolbar, find the SEO / Sharing tab. Unfold it and enter your description.

      Sometimes alternative text is not enough. If your image is more complicated, add text next to it and create a more detailed description.

      Adjusted mobile version

      More and more users visit landing pages on mobile devices. Ease their experience by adapting mobile view both for horizontal and vertical orientation. In the Landingi editor, you can adjust the landing page mobile view by:

      • hiding some elements or widgets;
      • changing texts and images sizes;
      • changing elements' colors;
      • adjusting elements' placement;
      • changing the background of a section or whole landing page.

      Read more about a mobile view in the Landingi editor, adjust and publish your landing page, and check on your smartphone if your page works correctly.

      Page title

      Provide ways to help users determine where they are. For a disabled or inexperienced visitor, being capable of recognizing the page they are browsing is not mainly a matter of comfort, but first and foremost, it is their basics for web navigation.

      Page differentiating is possible with page titles – they are displayed on browser tabs. To add a title to your landing page, go to Page Settings and adjust the SEO / Social share tab.

      Limiting unexpected elements

      Surprising your visitors with unexpected sounds or moving and flashing objects may draw their attention. However, it is not recommended if you want to create a page that meets accessibility standards. For people with blindness and impaired vision or for elders, those unexpected elements are highly uncomfortable. Therefore, limit video and sound autoplay and animations on your landing page.

      Ready to grow? Let’s get started!

      Join us and create the best-converting landing pages