Transcript accessibility webinar




00:00 - 00:08 >> GLYNNIS: Hello everyone, welcome to this webinar from Conversion Crew. It's all about accessibility today. 

00:00 - 00:08 >> Glynnis is looking at and speaking to the camera. A slide show presentation is being shared on the screen. The slide contains a blue background and in white the heading: How to make your website accessible.

00:08 - 00:13 >> GLYNNIS: I'm Glynnis from Conversion Crew and I am here with my colleagues Saar and Skye. 


00:13 - 00:28 >> GLYNNIS: This week is all about accessibility in the Netherlands and that is why we are providing this video for you. With some practical instructions to make your website either within or outside of HubSpot more accessible.


00:28 - 00:39 >> GLYNNIS: Before we get started, Saar will explain a few things you need to know about The Web Content Accessibility Guidelines. So Saar, go ahead. 

00:28 - 00:39 >> A new slide appears on the screen. The slide content is: A blue background and in white a table of contents. Paragraph 0.1  Introduction is orange.

00:40 - 00:57 >> SAAR: Thank you Glynnis, The Web Content Accessibility Guidelines are  established by World wide web. The first version was established in 1999, since then the guidelines have been updated.

00:40 - 00:57 >> Saar appears on the screen, speaking to the camera. The slide changes to other text, with the title: Introduction.  Saar will explain the content in the audio part.

00:57 - 01:22 >> SAAR: The guidelines are divided into three sections level A, level AA and triple A. Most of the times we want to strive for level AA, but for now we will start with a criteria from level A, then you can start your accessibility journey here. 


01:22 - 01:35 >> SAAR: Let's get started! For now, I will show you how you can automatically test your website on improvements for accessibility. 

01:22 - 01:35 >> Saar facing the camera starts explaining . A new slide appears on the screen. The slide content is: A blue background and in white a table of contents. Paragraph 0.2  Testing is orange.

01:35 - 01:52 >> SAAR: I recommend two tools to use, we have the Axe DevTools and Google Lighthouse. For now, I will show you how to use Google Lighthouse. I find Axe DevTools can be seen as quite overwhelming and quite technical.

01:35 - 01:52 >> The slide changes to other text, with the title: Testing.  Saar will explain the content in the audio part.

01:52 - 02:16 >> SAAR: I will show you how this works. This is an example of a page on our website. So you click on the right mouse and click inspect. Or command + option + C on a mac.

01:52 - 02:16 >> A video from a website page. In the video are the steps that Saar explains in the audio part. 

02:16 - 02:33 >> SAAR: Now you will see all this code, but don't worry about this we are not going to do anything with it. Go into the top right bar, go to “lighthouse” and make sure accessibility is checked. Now analyze page load.


02:33 - 02:41 >> SAAR: This can take a few seconds. If this has loaded, you will be able to see your accessibility weaknesses and strengths. 


02:41 - 02:52 >> GLYNNIS: Saar, I think you need to go to a different tab.

02:41 - 02:52 >> Glynnis appears on the screen, facing the camera.

02:52 - 03:21 >> SAAR: Oh, one second. Here you will see the results. I will do this again for you, so you can see how I have done it.

02:52 - 03:21 >> Saar now appears on the screen talking to the camera. Saar shares a different screen. The screen  is a video from a website page. In the video are the steps that she explains in the audio part. 

03:21 - 03: 51 >> SAAR: So again, you click on the right mouse and click inspect. You now see all the code. Go to “lighthouse” and make sure accessibility is checked. Analyze page load. You will now see your accessibility score for Google. 


03: 51 - 04:09  >> SAAR: Please note this is a score for Google, an automatically measured score and not a manual measured score, so there may be a lot more improvements than Google say there is. 


04:09 - 04:27 >> SAAR: Here for example, Google says there is not enough color contrast. You will then see you have to update this. But, later on Glynnis will tell you more about color contrast.


04:27 - 04:32 >> GLYNNIS: Yes, so if you could go back to the slides.

04:27 - 04: 32>> Glynnis appears on the screen. She is smiling while she starts explaining. 

04:32- 04:48  >>SAAR: Yes.

04:32- 04:48  >> Saar appears on the screen. She is looking at the camera. A new slide appears on the screen. The slide content is: A blue background and in white a table of contents. Paragraph 0.3  Use of color is orange.

04:48 - 05:08  >> GLYNNIS: Great, I will first start off with the use of color. The usage of color on your website is very important. Looking at your design, it is preferred to have your corporate identity colors on your website. However, that is not the only reason why it is beneficial to have the right colors on your website. 

04:48 - 05:08  >> A new slide is presented on screen. This slide contains the heading: Use of color. Glynnis will explain the content in the audio part.

05:08 - 05:48 >> GLYNNIS: You may not or may be aware of this, but there are many people with visual disabilities. This group of people can really benefit from viewing your website when it has the right color contrast. As you can see in the picture, the right color contrast needs to be 9.22. You can see it’s often very light colors in the back, or very dark colors in the front, or the other way around. You can also see in the other picture, the orange background and black letters do not have enough contrast.


05:48 - 06:00  >> GLYNNIS: You can check if your website has the right color contrast via Colorable. We will share that link in the description for you.


06:00 - 06:22  >> GLYNNIS: Color sets the tone of your website and provides emphasis to various designed elements. Color should not be the only way information is communicated, to ensure that users with any level of color deficiencies are able to recognize the visual elements or text we can do other things to communicate this information.


06:22 - 06:41  >> GLYNNIS: Some visual elements rely on color to communicate information, for example; required form fields highlighted in blue ; or warning messages in red. But, people with visual disabilities may not find these warnings enough to understand.


06:41 - 07:00  >> GLYNNIS: To use the right type of color, it is not necessary to change the color, it is important to have secondary identifiers alongside the color. This would enable users with color perception difficulties to make the necessary changes requested by that element. 


07:00 - 07:27 >>GLYNNIS: As a developer you have to ensure that any users are made aware of any errors that occur and that they understand what the error is. Error messages that pop-up in form submissions are not enough for identification of the error. Especially users with screen readers are not able to identify the error this way.


07:27 - 07:43  >> GLYNNIS: Solutions for this problem may be to program an alert or message of any error that is shown in the form, this is what you can do for understanding the error.


07:43 - 08:15 >> GLYNNIS: The next chapter, thats text alternatives. It is key to provide text alternatives for any non-text content so that it can be changed into other forms people need, such as transcripts or speech. There should be an alternative for text

that serves the equivalent purpose. 

07:43 - 08:25  >>A new slide appears on the screen. The slide content is: a blue background and in white a table of contents. Paragraph 0.4  Text alternatives is orange. Next to the slide is Glynnis. The slide changes to a slide with text that Glynnis will discuss in the audio part.

08:15 - 08:40 >>GLYNNIS: This can simply be thought of as providing an appropriate alt-text description for screen readers. We most of the time only think of this for images, but this applies to all elements other than actual text. For example, graphic icons like an email symbol also need an appropriate label or description.


08:40 - 08:57  >> GLYNNIS: But how can you create alternatives?  In HubSpot you can add alt text for all images and icons when placed within a standard HubSpot image module or inserting an image in text. Saar will show you what this looks like.


08:57 - 09:20 >>SAAR: So for an example, this is one of our custom modules. There is an image within the module, and beneath that image you can add alternative text.

08:57 - 09:20 >> A video from a HubSpot portal. In the video are the steps that Saar explains in the audio part. 

09:20 - 10:01 >> GLYNNIS: Great, so that is alt text in HubSpot. You can also do other things to create alternatives. For example; placing images with raw HTML, be sure to include the alt="description" attribute in the code. If the element you are trying to add a description to does not have a way to add alt text, you can insert a span element and apply an aria-label.  

09:20 - 09:  >> Glynnis appears back on the screen, she is talking to the camera.

10:01 - 10:31 >> GLYNNIS: There are some exceptions to this with decoration, formatting and invisible. If non-text content is only for decoration, used only for visual formatting, or not presented to users, then it is implemented in a way that it can be ignored by assistive technology, so you do not have to use alt text for those decorations.


10:31 - 11:20  >> GLYNNIS: Then we go over to multimedia. There may be circumstances when you have text that you want to also deliver as an audio or video. For example, you have an article that is long and may be difficult for some to get through. As an alternate way of delivering the content, you record a slow and clear audio version of the article. In this instance, the audio version itself is the media alternative to text, so the audio does not need its own alternate version required by 1.2.1.

10:31 - 11:20  >> A new slide appears on the screen. The slide content is: a blue background and in white a table of contents. Paragraph 0.5  Multimedia is orange. Next to the slide is Glynnis.  The slide changes to a slide with text that Glynnis will discuss in the audio part.

11:20 - 11:57 >> GLYNNIS:

With that in mind, we can simplify this criteria to: Prerecorded Audio-only; An alternative is provided that presents equivalent information. Prerecorded Video-only, either an alternative text or an audio is provided that presents equivalent information. This criteria simply requires that no content is exclusively delivered as audio-only or as video-only. There must be an alternate way to access the same content.


11:57 - 12:10 >> GLYNNIS: For example, with the webinar we are doing today, we also have to deliver alternative content, either a transcript or subtitles.


12:10 - 12:39  >> GLYNNIS: If you have content that is being delivered by prerecorded audio-only or prerecorded video-only, you will want to include an alternate text version. This could be simply adding a transcript of text describing the audio or video. Be sure to include all dialogue, as well as descriptions of sounds and visuals that are part of the story.


12:39 - 12:50  >> GLYNNIS: Take a moment to read this quote.

12:39 - 12:50  >> A new slide appears on the screen. The slide content is: a blue background and white writing. The writing reads : Captions are provided for all pre recorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.

12:50 - 13:25  >> GLYNNIS: Then we can continue. This criteria, the one you have just read, applies specifically to websites that include audio and video. Captions must be added to all media files with sound so that they are accessible to people who are deaf or hearing impaired. This includes videos, podcasts, audio and more.

12:50 - 13:25  >> The slide changes to a slide with text that Glynnis will discuss in the audio part. Next to the slide is Glynnis explaining the content. 

13:25 - 14:11  >> GLYNNIS: To make the caption the best it can be for deaf and hard of hearing users, ensure the following, that is points on the screen: The caption should be presented at the same time the audio is delivered. The caption should present the same exact content as the audio track. 

Present captions using enough contrast to be easily readable. Captions should not cover important images or visuals. Give the user the ability to toggle captions on/off. Identify who is speaking. Include descriptions of background sounds, sound effects, etc, as I have just mentioned as well.


13:25 - 14:11  >> This slide contains the heading: Multimedia. Glynnis will explain the content in the audio part. 

14:11 - 14:50 >> GLYNNIS: Imagine you're watching an educational video on how to use the HubSpot CRM. The speaker in the video is walking you through different web pages, talking and showing you screenshots at the same time. For blind and visually impaired users, they may end up missing out on a lot of important content that is visual-only. The purpose behind this is to ensure that all users can access all information in a synchronized media file, not just the audio content.


14:50- 14:55 >> GLYNNIS: So there are actually two ways you can ensure this: The first one is create an audio description.


14:55- 15:07 >> GLYNNIS: Then you have to insert audio descriptions during pauses. Within your media file another speaker can describe visual information in between talks.


15:07 - 15:17 >> GLYNNIS: This information will include things such as a scene description, and the characters or people in the scene.


15:17 - 15:40 >> GLYNNIS: The second one is media alternative, so you provide a text version as I have already discussed. Depending on your use case, it may be challenging to insert additional audio descriptions into the video, or confusing for your listener to follow. So, your second option is to provide a text-based alternative.


15:45 - 15:48 >> GLYNNIS: Oh sorry, you need to go back a slide I think. 


15:48  - 15:55 >> GLYNNIS: Then a small thing to notice is the pause, stop and hide. 


15:55  - 16:11 >> GLYNNIS: That is the pause, stop and hide functionality. You want to give users the option to pause, stop or hide any content that shows motion. Some examples include, moving pictures, animations, scrolling news updates etc.  


16:11  - 16:35 >> GLYNNIS: Content that moves or updates automatically can cause issues for people who have trouble reading, so that is why you need to include this function in in your website. 

16:26 - 16:32 >> A new slide appears on the screen. The slide content is: a blue background and a white table of contents. Paragraph 0.6 Writing is orange. Next to the slide is Glynnis smiling to the camera.

16:35 - 16:42 >> SKYE: Okay, so in this part of the webinar I will give you a short overview of what to consider when writing accessible texts. 

16:32 - 17:30 >> The slide changes to a slide with text that Skye will discuss in the audio part. Next to the slide is Skye explaining the content. 

16:42 - 16:53 >> SKYE: One, avoid the use of  difficult words and jargon. If you choose to use difficult or complex words that are necessary for you and your organisation, provide synonyms or additional explanations for them.


16:53 - 16:57 >> SKYE: Two, stay consistent with your words throughout your content.


16:53 - 17:08 >> SKYE: Three, try to avoid using passive sentences with words like: be, will, have, etc. For users with cognitive disabilities, these words can result in a lack of clarity. 


17:08 - 17:33 >> SKYE: For instance, if you say, “Your question will be handled” it does not provide clarity of who will be handling the question, when it will be attended too, and so on. It is also best practice to use an active voice, as this provides a more wholistic and clear structure. Rather say, “A customer representative will handle your question within the next 2 working days'' as this offers more details and feels far less ambiguous.


17:33 - 17:45 >> SKYE: Four, avoid unclear imagery. Images can convey multiple meanings, so ensure the images you use, portray the message in the way you want it to be portrayed.

17:30 - 20:34 >> The slide changes to other text, with the title: Styling tips. She will discuss this later on in the audio part.  

17:45 - 17:51 >> SKYE: The next thing I am going to discuss is 2.2.4. Link purpose.


17:51 - 18:03 >> SKYE: When using links on your website it is essential to provide a clear description of where they go. Making sure your link text indicates where the link is taking the website user should therefore be taken into consideration.


18:03 - 18:07 >> SKYE: Other tips when using links on your website include:


18:07 - 18:19 >> SKYE: As mentioned before, your link text describes where the link is taking the website user. You can additionally include a title attribute on the link if the text may be considered unclear.


18:19 - 18:27 >> SKYE: Try to avoid text that is vague such as “Go”, “Start” or “Learn more”, unless these links are placed under clear content.


18:27 - 18:39 >> SKYE: The use of multiple links containing the same link text across your website must all lead to the same direction, unless you have used an aria label to differentiate them.


18:39 - 18:46 >> SKYE: Are you using a link wrapped around an image? Ensure that alt text is provided and present.


18:46 - 18:58 >> SKYE: The key takeaway from this lesson, clear and descriptive links are an easy way to ensure accessibility.


18:58 - 19:04 >> SKYE: Here, I am going to just provide 6 tips for styling a website when you have accessibility on your mind.


19:04 - 19:12 >> SKYE: One, make your line height, which is your line spacing, to at least 1.5 times the font size.


19:12 - 19:18 >> SKYE: Two, space after each paragraph should be at least 2 times the font size.


19:18 - 19:24 >> SKYE: Three, spacing must be at least 0.12 times the font size.


19:24 - 19:30 >> SKYE: Four, word spacing is required to be at least 0.16 times the font size.


19:30 - 19:46 >> SKYE: The next section's focus is all about 2.4.6 Headings and labels. When creating content for your website, it's important to remember that headings and labels should be clear and must follow some sort of hierarchy.


19:46 - 20:04 >> SKYE:  A standard rule is to ensure that headings increase and decrease by one. So H2 would follow H1 and so on. A heading is typically used to break down your website's content into sections, these headings do not need to be lengthy, the priority here is they provide clarity. 


20:04 - 20:15 >> SKYE: Take a look at your website, can a user navigate your pages easily using the headings you have provided? If your answer is no, it may be time to make some adjustments.


20:04 - 20:27 >> SKYE: Just a pro tip, when you are trying to emphasize a line of content or text for the purpose of making it aesthetically pleasing, don't use headings use a class instead. 


20:32 - 20:38 >> SAAR: Thank you Skye. For now, I want to talk about the page settings. 

20:34 - 20:38 >> A new slide appears on the screen. The slide content is: a blue background and a white table of contents. Paragraph 0.7 Page setting  is orange. Next to the slide is Saar.

20:38 - 20:55 >> SAAR: According to criteria 2.4.5 Multiple ways and  3.2.3 Consistent Navigation, it is crucial to have multiple ways to access your website and have consistent navigation. 

20:38 - 21:46 >> The slide changes to a slide with text that Saar will discuss in the audio part. Next to the slide is Saar explaining the content. 

20:55 - 21:21 >> SAAR: Let's first dive into 2.4.5 Multiple ways, this is a criteria for level AA. When you start optimizing your website for accessibility you might not initially think about level AA, but here are some of these examples that are easy to implement, or you might find you already have installed .


21:21 - 21:35 >> SAAR: Examples of navigating through multiple ways: navigation in the footer and header, search function, site maps, table of contents or a breadcrumb.


21:35 - 21:39 >> SAAR: You are doing this for the following reasons.


21:39 - 22:01 >> SAAR: For users with cognitive disabilities who would have a preference for a table of contents or sitemap to navigate through a website. Additionally, the use of  a search function so they don't have to understand the complex hierarchy of a website.

21:46 - 22:54 >> The slide changes to other text, with the title: For who.  Saar will explain the content in the audio part.

22:01 - 22:16 >> SAAR: Then, for users who are blind, a search function may be a faster way to find what the user is looking for. A menu, for example, can be too long to go through. 


22:01 - 22:29 >> SAAR: Keep in mind that having multiple ways to navigate your website is convenient for all users. This helps to navigate a website faster so users can easily and quickly find what they are looking for.


22:29 - 22:48 >> SAAR: Criteria 3.2.3 Consistent Navigation is also a level AA, but this is very easy to implement, especially for HubSpot users. To make sure users can effectively navigate through your website, keep the navigation consistent. 


22:51 - 23:05 >> SAAR: For example, if the contact button is in the last part of your header, make sure  it is also last in your footer.

22:54 - 23:15 >> The slide changes to examples, one image of a header, where the contact button is at the end of the menu and another image of a footer menu, where contact is also the last in the list. 

23:10 - 23:30 >> SAAR: Now I will show you how this works in HubSpot. When you are in your HubSpot account go into settings > go to tools > website > navigation.

23:15 - 23:47  >> A video from a HubSpot portal. In the video are the steps that Saar explains in the audio part. 

23:30 - 23:43 >> SAAR: Here, you can make and edit your default menus that you can use throughout your website.


23:43 - 24:03 >> SAAR: We can continue 2.4.2 page title and 3.1.1 Language of Page. It is mandatory to have a page title on every website page, this falls under criteria Page title.

23:47 - 25:27 >> The slide changes to other text, with the title: Language of a page.  Saar will explain the content in the audio part.

24:03 - 24:17 >> SAAR: For HubSpot users it is required to fill in a page title. I will show you how to fill in the title later on in this video. There are 2 ways to describe your page title.


24:17 - 24:30 >> SAAR: Write a page title with the most important information at the beginning of the sentence. So for example: How to make an accessible website by Conversion Crew.


24:30 - 24:46 >> SAAR: The second way is: You can additionally write a page title and divide it into parts. For example, Conversion Crew | video | How to make an accessible website.


24:46 - 25:07 >> SAAR: In the criteria 3.1.1 Language of Page, describes why it is important to add the language of the page. In almost every CMS and website platforms you can set a default language for a page. Later in this video I will show you how to do it, in HubSpot.


25:07 - 25:22 >> SAAR: Always enter the language in which your website is written. If you do not fill this in or you fill it in incorrectly, screen readers might read the text incorrect.


25:22 - 25:52 >> SAAR: Now, I will show you how you can do this in HubSpot. So go to the page you want to edit. Click edit > go in the top bar to Settings > In this part you can fill in the page title > and here you can fill in the language you want.

25:27 - 25:55 >> A video from a HubSpot portal. In the video are the steps that Saar explains in the audio part. 

25:52 - 26:10 >> SAAR: This was the webinar about website accessibility, if you have any questions we are happy to answer them.

25:55 >>A slide with a blue background and content written in white. The content includes; The logo from Conversion Crew, Thank you text, a phone number: +31 10 808 0052, an email address:, and a location: Van Nelleweg 1, 3044 BC Rotterdam.

Wil je meer wetenover onze diensten?

Benieuwd wat inbound marketing kan betekenen voor jouw bedrijf? Neem meteen vrijblijvend contact op of vraag een demo aan. We komen graag bij langs om te laten zien wat HubSpot allemaal voor jou kan betekenen!

Bekijk de pakketen

Meer weten?
Stuur ons een bericht.