Streaming live at 10am (PST)

Website Accessibility


#1

Hi,

I have a few clients on the go who operate in the disability sector, and website accessibility is a priority to them.

I was wondering if there was any general information/tips regarding Webflow's approach to accessibility and secondly, in running my current website through some 'accessibility compliance testers' the main error that appears is in regards to the HTML Language missing.

Any help would be greatly appreciated.

Cheers


#2

Hi @domin8tor, you mentioned "in running my current website through some 'accessibility compliance testers' the main error that appears is in regards to the HTML Language missing." Can you please share a link to your site in Webflow, using the public link that can be enabled in Site settings, so we can take a look how you have your site setup?

Regarding the accessibility features, are you referring to accessibility features for published sites, or accessibility features for Webflow? At the moment, most of the functions in the Webflow designer all have keyboard shortcut equivalents, which means that users can traverse the designer using keyboard, although a mouse is still needed to drag things around.

Here is an article about web accessiblity for you to look at, and use as some direction when designing your site:

http://www.w3.org/WAI/intro/accessibility.php

Webflow does not have built in components for Web Accessiblity, but depending what you are trying to do, you may be able to design your site with larger fonts, and there may be scripts out there that you can use in custom code to perform other accessibility features.

FYI, if you are looking for a way to use the Web handsfree completely with Webflow or with published site, I encourage you to look at Dragon Naturally Speaking for Windows or Dragon Dictate for Mac, which both allow you to create voice shortcuts to the Webflow designer and for published Web pages. I currently for example, control my Webflow using a combination of Dragon Dictate commands (to control all features in Webflow by voice with limited mouse movement or clicking required, or having to use keyboard shortcuts). It is something to check out.

I hope this helps. Cheers !


#3

Hi @cyberdave and thank you greatly for your fast response.

Here's the link to my site: https://webflow.com/design/domin8?preview=241b1ebb5e2ef854503f46a31a39f11d, any feedback would be ideal. Still an ongoing work in progress but coming along.

Regarding accessibility, they aren't required by me from a Webflow side of things but primarily for the front end user.

I've found a few 'decent' accessibility checkers, and the majority of the feedback from this one in particular http://fae20.cita.illinois.edu/ (which tests against WCAG) are just my rookie errors regarding specifying MAIN areas etc.

As mentioned, mainly a few newer clients would require websites to be accessible to a screen reader, and I understand that this is primarily through my design of the website, however thought I'd ask all the same to see if there were some Webflow 'best practices' that can save time later down the track.

Thanks again for the fast response! P.s think Webflow is a great program, so Kudos!


#4

Hi, @domin8tor, first, thanks for the kind words about using Webflow, we think it is pretty cool too smile

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:

http://webaim.org/techniques/screenreader/

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 smile

Lets look at a few major points in this article, and see how Webflow can help you here in this situation:

Links

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.

Headings

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:

https://developer.mozilla.org/en/docs/Web/Guide/HTML/HTML5/HTML5_element_list

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.

Others

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 !


#5

Wow, thank you so much for this extremely comprehensive feedback.

I'm going to take the time to read through it all and take it on board properly - but couldn't help but say a big thanks before hand.

Kind regards,
Dom


#6

Glad to be of help, @domin8tor. We will add this to our Help documentation also, as this information could also help others. Thank you for bringing this up, this kind of feedback also helps us to get the information that is requested and needed by our customers, published and accessible for all. Cheers !


#7

Hi cyberdave, what about ALT/title tags especially for links. Webflow does not havethis in place. Or am I missing something? We know that screen readers calls out alt/title tags for people with disability. I can't find any of this feature within webflow.


#8