Semantic HTML & ARIA

What is ARIA?

ARIA is an abbreviation that stands for Accessible Rich Internet Applications. ARIA according to mdn web docsopen in new tab  is a set of Roles and Attributes that define ways to make web content and web applications more accessible to people with disabilities. But the first rule of ARIA is not to use ARIA unless it is needed. Accessibility features are actually present in a growing list of Semantic HTML Elements by default. In many cases it is more cumbersome and can be less accessible to try to add ARIA instead of just using the right tool, in this case the right HTML Element, for the right job.

In Webflow there are a variety of ways to access these HTML Elements. We can use native elements such as navbars, headings and lists. Or we can select HTML tags to turn a div into an HTML element, Landmark Regions are a perfect example of this. Lastly, we now can use the webflow custom element which allows us to access a variety of HTML elements we never could before without custom code or embeds, including an actual Button.

This allows us to add a high level of accessibility into our webflow projects without a ton of extra effort. By choosing the right HTML Element for the job, most if not all the accessibility features are already built in. In some case minor tweaks may be needed and we can take that accessibility further by adding in ARIA but we don't have to second guess if the base accessibility is present.

Semantic HTML Elements

When we talk about Semantic HTML we are saying that both the developer and web browser can identify the meaning and content of an element. Some elements such as Divs and Spans have no meaning this often works well for wrappers but a lot of the elements used in web development do convey meaning that is important for understanding and navigating a webpage or app. The most common in terms of accessibility are Headings, Links, lists and buttons.

Heading Elements

Heading elements are easily used in webflow by choosing the Heading Element and then selecting H1 through H6 to apply the tag. They are one of the simplest ways to apply heirarchy to content. When used in sequential order in a section they create understandable order and structure. Screen Readers and assistive devices use headings frequently as a way to quickly navigate a webpage to find the content a user is interested in. This makes the usage of them vital in building in accessibility.

It is important to note. While sometimes headings size can establish visual structure that is not always the case. Therefore care must be taken when developing designs that use unconventional visual sizing to understand the heirarchy and apply classes to alter their appearance rather than changing the tag. Simply put, heading tag does not equal heading size.

Link Elements

Links or HTML Anchor Elementsopens in new tabopen in new page  are one of the most common HTML elements. Links access web pages, files, email addresses, locations in the same page, or anything else a URL can address. Links take a user somewhere or to something. In Webflow there are many options for using links. There are text links, link blocks, inline link creation and even the webflow "Button", which is a stylized link not a true HTML button element. A very important distinction to understand as Links and Buttons do different things and have different built in accessibility properties. To meet accessibility guidelines the content in a Link should indicate where they go to even out of context.

There are a few examples of Link usage below. Links by default get their accessible name from the text within the link. But there are a few examples where an aria-label or other helper information may also be necessary. In the first example the link within the paragraph we have done a few minor tweaks to improve the accessibility. First the text is descriptive "According to Google" informs the user where they can expect the link to take them to. We set the style Decor to underline and on hover removed the underline. We have also added an outline for keyboard focus on ALL LINKS Html Tag. This link is also set to open in a new tab so we converted two additional spans. One text span inside the link with an sr-only (visually hidden) class that informs the screen reader the link opens in a new tab. And one text span after with a font awesome icon that gives a visual cue. The span has aria-hidden="true" so the screen reader doesn't try to read the font icon. Webbae has a great video for adding font icons in webflow opens in a new tab. opens in a new tab

Links by default should open in the current tab but there are situations where you don't want to confuse or have a user leave the website and then have to navigate back. Adding some visually hidden text and a visual clue like an icon are common ways to inform users a link will be opening in a new tab. Depending on the level of accessibility you are aiming for you may use one or both these methods.

Text Link 1 below is a Webflow native "Button" and it is, and has always been an Anchor Element. Text Link 2 is a Text Link. The logiipsum image is a Link Block as is the Learn More "Button". They all are represented in the HTML code the same way as Anchor <a></a> elements. But each variation requires a little bit different implemenation to ensure optimal accessibility.

If a Link is not descriptive or descriptive enough it can be overridden with an aria-label. The aria-label value is used by a screen reader to replace the content in a link. For instance a link containing an image such a a logo in a navbar, a screen reader may read the alt-text as the content. But that would give no clear idea of where the link is supposed to go to. Instead we add an aria-label with a value like "Company Name Home" so the user knows clicking this link will take them to the homepage. Another example is a static Webflow "Button" ideally you will have some descriptive text even for sighted users but you may want to enhance that by using an aria-label to write a longer descriptive text. A good thing to note is the screen reader will already read out the type of element so that does not go into the aria-label.

For webflow dynamic collection lists it is very important to use an aria-label or other accessibility option for repetitive links. If a assistive device user tabs through a collection list without them, they will not be able to differentiate what each link is for. Each link will read out identical identical text. Currently Webflow allows dynamic data to be selected as a value in custom attributes. One strategy is to add a field for the aria label in the collection or use an existing field such as name if appropriate. Another option is to create a link from a Link Block that contains both static and Dynamic data for ultimate clarity. Because this method is text based and not attribute based language translation will also work. You can explore the various methods employed in the link examples below. Regardless of which method you use it is vitally important to make sure links are descriptive for accessibility.  

Link Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. According to Googleopen in new tab.  Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Link 1 opens in new windowText Link 2

Learn More

about something specific

Button Elements

Before the ability to use custom elements creating actual HTML Buttons outside of the Form Submit Button in Webflow was complicated and as a result the accessibility of sites suffered. The Webflow "Button" Element Anchor element was frequently used as a trigger for animations and visually operated like a button but without any of the built in HTML Element attributes and accessibility features.

The purpose of a Button Element is for a user to take action and is often tied to javascript onclick() method. It is an instantly recognizable interactive element that is activated by a mouse, keyboard, voice command or other assistive device. A screen reader announces it as a button and a user expects it to do something. Unlike a link, where a user expects it to take them somewhere. 

In Webflow we can now create a button HTML element by using a custom element and giving it the HTML tag of button. Buttons by default are all submit type so we should add type "button" to the custom attributes for specificity. Unlike the native submit button other elements can be placed inside of a button which gives it a ton of flexibility for styling and animating. The button below is used to open a Dialog Modal. A secondary button is inside the modal to close it. Similarly to Link elements the Button gets it's meaning from the button content and can be overridden or enhanced with the same methods as links. This simple example uses the texts "open modal" and "close".

Now that the actual HTML Button Element is available to us right in webflow we can finally use the right tool for the right job without jumping through hoops to achieve the same result. A button is a button, and a link is a link.

List Elements

Lists, lists and more lists. Web content is filled with lists.

• Features or benefits
• Teams
• Menus
• Post groups
• Tags
• Testimonials
• Social links
• Services or products
• Social links
• Sliders or carousels
• and more...

In Webflow we can easily access lists by using the list element and choose between unordered lists and ordered lists. And by default dynamic CMS collection lists are, you guessed it HTML List Elements. An HTML List element has two elements that work together the List and the List Item. List elements are important for accessibility. They can be used as another quick navigation tool for assistive devices. They can navigate through lists and list items on a page with very simple commands and announce the number of items within a list. Lists are also a visual cue to mark groups of things. As we covered earlier Divs do not carry any semantic meaning, so while grouping things visually is helpful for sighted users it does nothing to provide clarity for others using assistive devices. It is another case of being able to use the right tool for the job to automatically add accessibility to a website. 

Like other elements we can enhance the accessibility of lists by adding a simple aria-label or aria-labelledby to the List. This is helpful for navigating lists on a page as they add a bit more information to the user what to expect in a particular list. This is not required for a list in a Nav as it already carries a semantic meaning but is a helpful addition to other lists.  

ARIA Roles and Slots Lists

With Webflow's new feature Slots we can still use Lists but we don't have access to the HTML Element of List. A slot by default is a div block with no semantic meaning. But we can give it semantic meaning by adding an ARIA Role. ARIA Roles allow us to give list and listitem roles to the slot and components within them.  This gives us the flexibility of adding a dynamic number of list items to an element still recognized as a list.

Tagline

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Tagline

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Tagline

Medium length section heading goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Other HTML Elements