Things to Bear in Mind When Creating an Accessible Website with Webflow
When it comes to creating a website, there are many platforms that don’t require any front-end experience. However, making accessible websites using these platforms can sometimes be challenging because not all of the solutions and features are fully accessible. Sometimes you have to embed a specific code which refines elements or features and above all, improves user experience. Other times, you have no idea that you should enter some specific data into the platform settings in order to improve accessibility or SEO. You may face difficulties especially If you aren’t a developer, a designer or simply you’ve never gone through this process.
About a year ago, VIP World Services decided to change their previous hosting platform, from Wix, which provided limited accessibility solutions and features, to webflow. Webflow, besides basic lessons and tutorials, has also created a lesson entitled ‘Make your site more accessible’ that explains in an easy way which accessible practices you should use on your website. Although the created lesson takes into account a few very important questions, there are still many other points you should bear in mind.
Below, you’ll find an extended list of further points that you should additionally consider when building and designing a website on the webflow to make it accessible and meet the WCAG 2.1 criteria.
1. The title.
A descriptive title helps users understand the purpose or content of a page. Otherwise, when screen readers users open a website, they won’t get any information about the page title or they’ll get information that the page title is missing.
Understanding Success Criterion 2.4.2: Page Titled
Follow the steps below to add the page title.
Step 1: Go to the project settings.
Step 2: Click ‘general’ from the menu.
Step 3: Add a brief title to the field ‘name’ that describes the page.
2. The lang attribute.
Setting an HTML lang attribute allows screen readers to identify and read the content in an appropriate language of the page or page elements.
Understanding Success Criterion 3.1.1: Language of page
Follow the steps below to add the lang attribute.
Step 1: Go to the project settings.
Step 2: Click ‘custom code’ from the menu.
Step 3: Add a language code to the field labeled ‘language code’.
* If you are not sure which language code you should use you can check it on HTML Language Code Reference
3. The skip link.
The skip link allows users to go to the main content easily and faster. This feature helps screen readers and keyboard users omit the navigation.
Understanding Success Criterion 2.4.1: Bypass Blocks
The current version of Webflow doesn’t have a built-in content to do this quickly and easily; therefore, the skip link has to be added to your website manually and this tutorial shows you how to do it step by step.
4. The landmarks
Navigating a website is easier and more pleasant for screen readers users if the whole content is divided into basic landmarks such as: header, navigation, main or footer. A good practice is to ensure that there is only one main, header and footer landmark to navigate on the page.
Understanding Success Criterion 1.3.1: Info and Relationships
Follow the steps below to add the landmarks.
Step 1: Open the right sidebar.
Step 2: Click e.g. Navigation.
Step 3: Set ‘nav’ tag in the navigation settings.
*You can use the analogical process for the other sections in order to add proper landmarks.
5. Search
The search mechanism is one of the features which helps users to navigate sites in more than one way in order to find information faster. Webflow has a built-in search element but, unfortunately, it contains the ‘required’ attribute. How does this affect screen reader users? After carrying out a few tests with users, I found out that this attribute makes users confused. Screen readers inform users that this field is required, though it actually isn’t. The idea to improve this element is to remove the ‘required’ attribute from the code.
Understanding Success Criterion 2.4.5: Multiple Ways
Follow the steps below to remove the ‘required’ attribute.
Step 1: Create a search element in the webflow (add style, etc.) and publish your website.
Step 2: Open your website, select the search element and click inspect.
Step 3: Copy the current code to e.g. a doc file or the bracket tool.
Step 4: Remove the ‘required’ attribute.
Step 5: Copy the corrected version of the code and put it in the same place where the first version was.
Step 6: Publish the website and check the code.
6. The site map page.
Another way to meet the success criterion 2.4.5 ‘multiple ways’ is creating a site map.
What exactly is a site map? Simply speaking, a site map is a separate page which contains the organized structure of links on your web page. If your website is extended and contains a lot of links and subpages, the site map will help people to navigate your website faster as well as to understand its structure.
Understanding Success Criterion 2.4.5: Multiple Ways
Follow the steps below to create the site map:
Step 1: Create a new page on the webflow.
Step 2: Create links to each page from your navigation as well as to subpages. Remember about the heading structure which helps screen reader users navigate a page using specific shortcuts.
Step 3: If you have a lot of external links which may be valuable for the users, you can add them, too - but remember to add additional information, such as e.g. ‘this link opens in the new tab’. This information will help screen readers users understand that this link is external, and that the new tab will open. To make the map clearer, you can categorize links into groups, e.g. 'social media'.
Below you’ll find a part of the structure which was implemented on the VIP World Website’ site map:
- Site map - h1
- Home (link) - h2
- Navigation (name of group) - h3
- Travel Hands (link) - h4 (opens in the new tab)
- Accessibility Service (link) - h4
- (List of links) - optional
- VIP World Community - h4
- (List of links) - optional
- etc.
7. The contact details
One of the most annoying elements on a website is the phone number or the email address which isn’t a link. For screen readers users, having the number function like a standard text content might be tough. The second point to take into account is how many figures the number string contains. I recommend dividing the string into 3 or even 4 shorter strings, thanks to which the screen readers users can avoid hearing really big numbers, e.g. '+44 20 3966 1650'.
These practices will improve the experience for all of your visitors, because they will be able to save time and avoid having to copy and paste a specific phone number or email address. What’s more, the number string will be easier to be read out.
Another practice which was implemented on the VIP World Services and Travel Hands websites was adding aria-labels to the phone number and email address in the footer section.
How does it work? Aria-label overrides any other native mechanism: for example, if a link has both text content and an aria-label, only the aria-label value will be used. So in this case, screen readers users hear 'call us' instead of the string of numbers or 'send us email' instead of contact@vipworldservices.com.
So why did I add the aria label only to the footer and not to the header? After testing the phone number and email address elements with users, I obtained the following results. The screen readers users quite often need to know what a string of numbers or email addresses actually look like, which is the information they can get from the header. It’s not necessary to repeat this information fully in the footer, though, where you can simply put the aria-label.
Summary
Creating and designing websites which meet accessibility guidelines is not a piece of cake. Before you start designing a new website, it’s essential to find out what the most important criteria are to bear in mind during the creation process in order to avoid wasting time or maybe even money to improve it in the future.
If you decide to use a platform to design your future website, you should definitely make a list of features and solutions you'll want to implement on your page. I encourage you to do some research regarding the platforms. Read comments, check accessibility solutions and find available tutorials and instructions before paying for the subscription. Otherwise, you might be disappointed.
In spite of the fact that webflow doesn't provide all the necessary built-in elements, it still supports other alternative solutions that you can figure out on your own or just search for the information on the internet, e.g. on the Webflow forum.
Although it might not always be easy to implement accessibility features on Webflow, taking into account the WCAG criteria is always worthwhile. Doing so will improve the experience for all users, not only the disabled ones. Many features are specifically designed for people with limited abilities; however, they may still help people facing some temporary health issues or any other minor inconvenience, which may be as simple as having bright sunshine blinding them when they read from the screen.
Sources:
Recommended links:
Be a part of
