Semantic HTML / accessibility

Hi! Not sure if this is strictly a Q&A, but this seems the most logical forum section for it: I’m just trying Anvil out this evening (still in my first two hours). Loads to love about it so far!

However, it looks like it doesn’t output semantic HTML (judging by inspecting when I run the app) For instance, I can’t see a way to add headings that get marked up as a heading element. I might be missing something, but did search the docs and forum.

Am I missing something / is there any way round this?

I’m not sure I understand your question (having only done web development with Anvil), but does this address it? Introducing the RichText component

2 Likes

Ah no I don’t think so.

Semantic HTML is basically “meaningful” HTML. In other words, your HTML tags convey meaning to both browser and developer (and, importantly, to screenreaders) For instance, <h1>, <h2> etc for headings, <nav> for navigation.
It looks like Anvil supports some (<input> and <button> at least), but I can’t find a way to add proper headings, nav elements, or mark up sections (such as marking a section with <main>)

But because it does support some, am wondering if I’m just making a newbie mistake. Or if it really is limited in the elements it currently supports.

Edited to fix formatting fails.

1 Like

Are you looking to add Heading (and other semantic elements) through Anvil components? If so, that isn’t a thing for sure. *

If you’re trying to do it with pure HTML, that’s super easy either by editing the HTML that comes with the theme that you picked or in custom HTML that you make.

*I might try to see if I can mock up some code snippets that approximate it on top of the anvil components later tonight though.

1 Like

@deborah I take it back, @hugetim had the right idea with RichText. If you set it to restricted_html mode, you can use semantic markups like h1, h2, h3, etc. and also intermix anvil components if you want to.

1 Like

Thanks! I’ll have a play with rich text! And try out a blank theme - am guessing the option to write HTML may be more obvious there.

1 Like

In addition to the RichText components, you’ll find the standard html template under “Assets,” or you can can also create Custom HTML forms:

2 Likes