Hi, @domin8tor, first, thanks for the kind words about using Webflow, we think it is pretty cool too
Second, about optimizing your site for screen readers, how you design your site, as you have mentioned, is the key factor, and the good news is that Webflow can help support you to make these updates.
I would first check this article:
And use this article as a checklist for screen readers, and check off each item you have addressed and provide this to your client, to show them, that the site has been optimized for Screen Reading from a content creation point of view, this will help to install confidence
Lets look at a few major points in this article, and see how Webflow can help you here in this situation:
One way is to use the Tab key to jump from link to link. This gives the user an idea of where the page links to, and can be a useful way to run through the content if the user is looking for a specific link. A related technique is to obtain a list of the links on the page, arranged alphabetically. The drawback of these methods is that the user does not hear any of the non-link content, and may miss important information this way.
Implication: Links should make sense when read out of context. Also, the distinguishing information of the link should be at the beginning of the link.
– You can check your links in your Webflow site, make sure they are descriptive and you follow the advice to keep your links contextual to the linked subject matter. Try to use similar keywords in your links as in the target content.
Another way to skim the page to get an overall impression of a page's content is to jump from heading to heading. Users can hear an outline of the page's main ideas, then backtrack to read the parts they are most interested in. The main drawback to this technique is that too many pages lack headings. Without headings, this method of skimming through content is completely useless.
Implication: Authors should organize content with headings. To the extent possible, the headings should represent an accurate outline of the content.
– Use the H1-H6 links appropriately. The H1 links could highlight your sections, your H2 could highlight your Containers, your H3 could highlight your divs etc.
Landmarks and page sections
Users can navigate via ARIA landmarks and HTML5 sectioning elements, such as <main>, <nav>, <header>, etc.
Implication: Define appropriate ARIA landmarks and use HTML5 elements appropriately.
– Webflow makes using html 5 elements a breeze. You can see all the html element types when you go to add a new Section or DIV to a page, and then change the element type to what you need:
It’s best to use html5 element tags, in their proper usage and purpose. See this article for some good information that describes the html5 tag set:
Paragraphs and page elements
Users can jump from paragraph to paragraph, listening to the first sentence or two before moving on to the next paragraph. This technique is most like the visual skimming technique used by some sighted people. Users can also jump from element to element, such as <div> tags, links, form elements, list items, or other units of content.
Implication: When possible, place the distinguishing information of a paragraph in the first sentence.
– Webflow does not control the screen reader to jump from paragraph to paragraph, but you can give each of your key Paragraph each their own unique IDs to enable the screen reader to be able to see clearly, the content bits that each have their own unique ID, this will help the screen reader to know the begin and end of some element content.
"Skip navigation" links
Skip links at the top of the page which allow users to skip over the navigation links aren't exactly a method of skimming the content, but they are a method of getting straight to the main content of the page. Such links speed up the reading process and help users distinguish between the main navigation and the main content.
Implication: Where appropriate, allow users to skip over repetitive navigation links.
– Again, in Webflow, we support you, by letting you create links to content in a variety of ways:
By external url or url to another Webflow page on same domain using full http://mypage.mydomain.com syntax
By linking to a page on your Webflow site, using Page linking that generates a relative url link to your pages
By linking to a section with a given unique ID entered into the Settings tab for the section. This will also enable smooth scrolling action when used with the Webflow NavBar
By creating links to Email addresses
By creating links to Phone numbers
So there is lots of ways to make links. You can also make links using the Embed widget and any standard html link code.
In addition to the methods above, screen reader users can also navigate by tables, lists, buttons, forms, links, images, etc.
Implication: Use proper HTML semantic structure with elements marked up appropriately.
– For other elements, make sure you have Alt tags setup for images, and if you are using other types of elements on your page, try to keep the design as simple as possible, without too many nested elements, to make it easier for the screen reader to access the content. Also make sure your html5 tags are used in a logical way, for example, use sections as your main page sections, containers and divs where appropriate, but within sections and the same rule of thumb applies to other elements you might put on your pages.
Keeping things as simple as possible for the screen reader is a good thing to do. Also, if you have any dynamic content, such as content created by a script or something, it can be that the screen reader may not be able to access that dynamically generated content, so keep that in mind as a potential thing to look for when designing your site.
Hopefully this helps you to plan your Website accessibility features in your own design. Cheers !