We are starting a podcast! 1st topic: Accessibility with Jon Sasala of Morey Creative Studios

dennisedson
Community Manager

Hey friends!  

I am going to be doing a little experiment and I am hoping that you come along for the ride.

I am going to attempt to put out a monthly video podcast!

The podcast will feature fellow HubSpotters and a guest who will be a subject matter expert on whatever topic we are featuring that month.  

 

Here is how it is going to work:

  • Every month, I will introduce the topic for the podcast as well as our guest.
  • You can then reply to this post with any topic related questions or thoughts.  
  • At the end of the month, my co-hosts and I will sit down with our guest and have a conversation about what is going on at HubSpot, what we are finding interesting in the world of coding and, lastly,  discuss the topic of the month using the questions that you asked.

 

Once we get everything edited and put together, I will share the video to the Community.

 

This will be an evolution and I will do my best to inform you as it evolves.  If you have suggestions or would like to participate, feel free to send me a direct message or email me at community+devpodcast@hubspot.com.  Make sure to include "Developer Podcast" in the subject line!

 

With that, I would like to introduce our first guest and topic to the podcast!  

 

This month, @jmclaren , @TScales  and I are going to take a deep dive into the world of accessibility with @Jon_Sasala of Morey Creative Studios .  

Accessibility has always been important, but has largely been overlooked.  In recent years, that has started to change.  With the pandemic, accessibility is even more important as the digital world further replaces our physical interactions.

@jonsasala1 and the team at Morey Creative have built accessibility into the foundation of their company.  They believe in it so much that they have built inclusionhub.com.  

The team built the site powered by HubSpot tools including CMS Hub EnterpriseHubDB and Custom Objects were used extensively for the project and, if it wasn't obvious, the site was built with accessibility in mind.

 

Let's take advantage of this resource and ask Jon any questions we have about how his team used HubSpot to make an incredibly accessible site!  I am excited to see what comes of this adventure!

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
13 Replies 13
Jon_Sasala
Top Contributor | Diamond Partner

Thanks for putting this together, @dennisedson . I am honored to be part of the podcast, especially on your inaugural episode, and super excited to spread a bit of awareness around digital accessibility. In addition to covering the basics, I hope to leave people with a few actionable items they can take back to the websites they manage. 

 

To give a little peek behind the curtain, and get this conversation started, we are going to look at the top five barriers inaccessible websites present people: Color Contrast, Alt Text, Empty Links, Form Markup, Document Language. These are issues found on 98% of all websites, and, for the most part, can be pretty easily fixed. 

 

I also hope to discuss the specific tools in HubSpot that are currently inaccessible, the workarounds we use, and plans for improving them in the future. But let's let the community drive the conversation. What HubSpot accessibility questions can we explore further?

Looking forward to your questions!

 

Jon


Jon Sasala (He / Him)
President
Phone: 516-284-3333moreycreative.com
575 Underhill Blvd., Suite 216, Syosset, NY 11791

Morey Creative Studios Logo

Facebook Icon

LinkedIn Icon

Instagram Icon

Twitter Icon

Podcast Microphone Icon

jonchim
Guide | Diamond Partner

woohoo! excited for this podcast! 






Jon Chim
Design Director
Morey Creative Studios


check Did my post help answer your query? Help the Community by marking it as a solution
nickdeckerdevs1
Participant

HI! LONG TIME LISTENER, FIRST TIME CALLER HERE.
I've recently started doing work for a regional bank.  I have TWO items I want to mention. One is likely more of a Dennis/HubSpot question, the other is a question for you Jon! 
1) I'm in need of some tools that can really do a good job of giving me actionable items/tasks for me to complete. I'm very open to a paid platform (saas) and even posisbly browser extension would be a good quick little thing that I could use to check when editing individual pages.

2) I'm going through their code base in HubSpot, and the amount of javascript needed to make the navigation menus / other elements in HubSpot is HUGE. I'm talking about full 100% accessibility score they get in lighthouse. They even have keyboard navigation, aria labels, etc. It is super in depth. Does HubSpot have any plans to make their websites more accessible in default like menus? If you want to discuss details on what i'm doing or see the portal, hit my DMs with a quickness! There is quite a bit that is going on that HS doesn't cover

Jon_Sasala
Top Contributor | Diamond Partner

Hey @nickdeckerdevs1 , Thanks for kicking this off! Happy to address both questions, but leave it open for @dennisedson@jmclaren and @TScales to take the question about future iniatives.

 

Testing Tools

There are many auditing and testing tool that can bring your attention to issues, both paid and free:  Compare them all here.

 

I would recommend starting with the free ones to see what obvious or easily detectable issues can be surfaced. These should help focus your efforts and start the journey. Use one tool, run through and fix as much as you can, then use another and see if it reveals additional issues.

 

In order, I use 1) WebAIM WAVE , 2) Lighthouse  3) Ax Chrome Extension.

 

I am also a huge fan of AudioEye which allows access to their tools for free (though it is not listed on their website), but there is a bit of a learning curve.

 

As far as paid audit tools, I do not have experience with the following, but the most popular seem to be SiteImprove, eSSENTIAL Accessibility and Deque.

 

Keep in mind that all of these tools do not surface ALL issues and may misidentify issues. For example, see my answer to your second question. Tools will recommend adding an appropriate parent aria-role which would make the error go away, when the real solution is much simpler than that.

 

 

HubSpot Navigation Issue

Likely the errors you are getting are something like 'role="menuitem" requires an appropriate parent role' or something along those lines. After some research, the fix appears to be to apply a role of "menu" or "menubar" to the parent element, but because we cannot edit the code of navigations created with the menu tool, we look to javascript to apply an overlay remediation. It's starting to get complicated, but you get it to work. While this makes the error in Lighthouse go away, it is not actually making the navigation more usable.

 

First, a websites navigation is not a menu. HubSpot tries to insert aria-labels appropriate for a menu ("menu" and "menu-item") but this is over-complicating things. A navigation should simply be built as a <nav> and require no additional aria clarification. This will be super clear for assistive technologies and errors go away.

 

I do expect this is on HubSpot radar. The fact they started adding aria-labels indicates effort is being made. But I leave it to the  HubSpot crew to confirm.


Jon Sasala (He / Him)
President
Phone: 516-284-3333moreycreative.com
575 Underhill Blvd., Suite 216, Syosset, NY 11791

Morey Creative Studios Logo

Facebook Icon

LinkedIn Icon

Instagram Icon

Twitter Icon

Podcast Microphone Icon

melindagreen
Contributor | Gold Partner

Definitely also interested in the KB navigation part, Nick.

And that also goes for use of the CMS, not just use of sites built with the CMS. Are there plans to do things like make dialog boxes close with the return key instead of having to dive for the mouse every time I want to do something?

And is there a way around alt text pre-populating with the image filename? A lot of our content editors decide "well, as long as there's something there, it's fine," and leave an ugly filename as alt text. Is it better to have nothing and have it flagged than have something useless and un-flagged, where we won't know about it?

Jon_Sasala
Top Contributor | Diamond Partner

I agree @melindagreen, there are things on the backend of HubSpot that the interface could do to empower people to build more accessibly. I am sure we will get there. Your example of not prepopulating alt text for images from the file name is a great one. Leaving this blank (but required) would encourage a thoughtful description. A tooltip explaining what a good description means would be great too. Plus, the control of being able to mark images as decorative when appropriate right there on the module! Now we have an image module setting us up for success.


Jon Sasala (He / Him)
President
Phone: 516-284-3333moreycreative.com
575 Underhill Blvd., Suite 216, Syosset, NY 11791

Morey Creative Studios Logo

Facebook Icon

LinkedIn Icon

Instagram Icon

Twitter Icon

Podcast Microphone Icon

dennisedson
Community Manager

Want to get some of our community champions in here to see if there is anything that they would like to see us discuss around accessibility 😄

@tjoyce , @Stephanie-OG , @Anton , @Kevin-C , @Bryantworks , @MatthewShepherd , @stefen , @amwilie , @jpsanchez 

Starting with you all - you guys have been working with HubSpot and building sites for some time.  Is there anything involving accessibility that you would like to see covered? 

Thanks,

Dennis



Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
stefen
Key Advisor | Partner

@dennisedson Here are few ideas for issues I've ran into recently:

  • the best accessibility practices regarding offering different languages on a website
  • menu and mobile menu accessibility tips/tricks on HubSpot CMS sites
  • a purely decorative image - how to keep it from being marked as an SEO issue if it doesn't have an alt tag
  • Inline SVG accessibility - is a `title` tag good enough with current browser/screen readers?
Stefen Phelps, Community Champion, Kelp Web Developer
Jon_Sasala
Top Contributor | Diamond Partner

Great topics, @stefen . Thanks for contributing to the conversations. These are all pretty next level and I hope we can go deeper on the episode. Quickly though, a few thoughts:

 

1. Multilingual

This is an interesting component of inclusivity. If you are trying to be more inclusive, doesn’t that also mean accounting for multiple languages—selling to and supporting people regardless of native tongue? Accommodating multiple languages, can expande your market share but it also has an expense if you want to do it properly (Google translate doesn’t really cut it). The solutions I have worked with are localizejs.com, to not have to manage multiple pages in different languages, and HubSpots multi-language page variations. Happy to dive deeper into these options.

 

2. Menu and mobile menu

On HubSpot, there are things you can do to make a navigation more usable, as I mentioned above in response to @nickdeckerdevs. Mobile components may present entirely new barriers. One common issue is the HubSpot mobile menu not communicating their expanded/collapsed state. Relatively simple to add in if your menu is built with HTML. A little harder to control if you are using the HubSpot Menu tool.  We can discuss how javascript, or a tool like AudioEye, can be used to add this markup after the DOM loads.

 

3. Decorative Images

Some people think delivering an equatable web experience for all, regardless how they are accessing your content, means describing every image on a site. This is actually not a great experience for someAssistive Technology (AT) users. Hiding images that communicate nothing of value helps improve the UX for AT. To mark an image as decorative, it is recommended to include an alt of nothing (alt or alt=""). This would, however, signal an SEO error, as you suggest. A little additional markup demonstrates this was a purposefully left off. In addition to the empty alt description, include a role=“presentation” and aria-hidden=“true”. 

 

4. SVG accessibility

This, I feel, I am not fully equipped to answer. Yes, a title is necessary, as is including a role=“img” if it is an image. The reason I think there is much more to the answer though is how dynamic SVGs can be, especially as they become more and more utilized. There are probably animation components or clickable components of SVGs that could require additional markup that I can’t speak to. Just like Image Maps use to be common accessibility offenders, I expect SVGs are vulnerable to the same oversight.

 

Open to comments if others have a more comprehensive answer or resource.

 

Thanks again!!


Jon Sasala (He / Him)
President
Phone: 516-284-3333moreycreative.com
575 Underhill Blvd., Suite 216, Syosset, NY 11791

Morey Creative Studios Logo

Facebook Icon

LinkedIn Icon

Instagram Icon

Twitter Icon

Podcast Microphone Icon

Ntbrown
Contributor

@Jon_Sasala Inclusivity is a broad term in a multi language context as I'll point out. Accessibility would have been a better term there, but even then accessibility and multi language content goes far beyond this

You have writing system considerations, east asian and other tetragrams being a small example, the semantics of breaking said tetragrams and other typographic considerations especially in kanji / cjk, is your content logically positioned, and many other things.


Arguably you *should* have multiple pages, or more accurately trees, as it's highly unlikely all but the simplest of design schemas work for international content. Sure you can adjust rtl etc but what happens when you go vertical? I doubt your layout really looks good in mongolian. Ideally your design system takes this into account but I have yet to see one that is truly effective. And yes I'm aware of logical properties.

Its why any fortune 500 - let's say mcdonald's - has fully redesigned websites for said markets. Then you also have the interesting design implications of color schemas etc for Inclusivity, rather than accessibility, and their cultural significance affecting reception. So, I'd actually go a step further and say inclusive multi language content should also include palette adjustments taking these things into account.

This also doesn't include media queries such as reduced transparency, reduced data, color schemas, forced colors, high contrast, and the plethora of others. Mixing those considerations with aforementioned typographic and other ajdustments such as optical effects of boldness etc. In coming specs there's an interesting resurgence or aural features. ::past, ::current, and ::future with aural features would be a significant advancement if it ever gets there.

 

But of course, this is what hypothetically should be included the limiting factor always being laziness to achieve said implementations and how much money someone has to burn.

 

Sjardo
Contributor | Diamond Partner

Hi!

 

I woud love to see more about structured data within HubSpot. From my previous job at Yoast, it's was one of the core things to focus on. I would love to see more input for/from HubSpot on structured data. 

We build our own structured data modules for:

  • Breadcrumbs and the correct schema
  • Google Jobs
  • Default page schema any site needs
  • Products
  • FAQ
  • How-to

And more are in development! I would love to help!

Sjardo Janssen, Bureau Vet
Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution
Jon_Sasala
Top Contributor | Diamond Partner

That is awesome @Sjardo. Are those modules available for other HubSpot users to leverage in the App Marketplace or anywhere people can see your work? 

 

This is something I have heard a lot of others express interest in (link to structured data idea on the forum).

 

We published an article giving a sitewide Schema template, but it does not go into page or item-specific schemas.


This would make a great episode. +1

 


Jon Sasala (He / Him)
President
Phone: 516-284-3333moreycreative.com
575 Underhill Blvd., Suite 216, Syosset, NY 11791

Morey Creative Studios Logo

Facebook Icon

LinkedIn Icon

Instagram Icon

Twitter Icon

Podcast Microphone Icon

0 Upvotes
Sjardo
Contributor | Diamond Partner

Hi Jon,

 

We got simulair schema up and running om some sites, working with JSON LD and loading it from a module or site header 🙂
For example, the Google Jobs schema is a big "form" to fill in as a module on your page, and will output this as JSONLD. Yet, the FAQ is with microdata and read trough the input of the default questions and answers.

We are working on expanding the modules with the plan of adidng this to the App Marketplace, or simply give out some for free!

Best regards,

 

Sjardo Janssen | Sjardo.com

Sjardo Janssen, Bureau Vet
Bureau Vet - Sjardo.nl

Did my post solve your question? Help the community by marking it as a solution