Accessibility (a11y) is a key aspect of making your store usable by any visitor. When using Shogun content elements, along with features that are usually built into your theme, you can ensure that your pages are accessible to all audiences and also comply with ADA standards.

Case studies have shown that accessible websites have better search results, reduced maintenance costs, and increased audience reach (w3.org).

The HTML code of a page and the choices in content & design contribute to a page's accessibility. Shogun's editor provides the tools to implement these design decisions while publishing HTML code that is also user-friendly.

It is important to note that portions of your site are controlled by your theme and eCommerce platform, such as the sitemap, navigation, and search functionality within your store. These also contribute to accessibility as well. If you have any questions about the accessibility of these components, we recommend reaching out to your theme developer or eCommerce provider for clarification.

Many of Shogun's elements are coded with accessibility in mind and come with options for further customizing what is interpreted by browsers and screen readers.

Many of Shogun's elements are coded with accessibility in mind and come with options for further customizing what is interpreted by browsers and screen readers.

Control and organize your page structure by leveraging Heading ranks. Shogun's Heading, Text, and Product Title elements have options to define heading types, i.e. h1, h2, h3 etc.  
​
​https://www.w3.org/WAI/tutorials/page-structure/headings/

The Accordion element also has h4 heading tags integrated into its code by default as a means to semantically organize the code of each title & content pairing.

Our Image element provides the option to add alternate text to the images, which can be super beneficial for screen readers, as well as for SEO purposes. This field is accessible in the right-hand side menu of the element.

Note: Background images do not have the option to add alternate text because these images are added through the page's CSS; they are decorative elements that are not present in the page's HTML. If alt text is required for a specific graphic or photo, we recommend using the Image element instead of the Container element.

It is possible to use Shogun's Screen Settings feature to add content specifically for screen readers. To accomplish this, add the screen reader content to the page using the Text element. Once the content is added, use the Screen Settings option in the right sidebar to disable that Text element from all device views. This will prevent the content from displaying in the browser while still keeping its code on the page to be accessed by screen readers.

While the code of a page does have a significant impact, a large portion of accessibility depends on the design choices that are made when creating your website. Everything from the selection of colors, down to the font family that is selected in the design process of your site should be taken into consideration for accessibility.

Contrast and color use are vital for accessibility. Users, particularly users with visual disabilities, must be able to read your content with ease. Contrast and color are a large part of the WCAG 2 web standards for accessibility, and are important to note when you are designing your pages.

Similarly, it's important to take fonts and font sizes into consideration when designing your pages. Selecting legible font types and sizes will provide maximum visual clarity. Our Google Fonts integration has a wide library of fonts available, allowing you to select a font that will be comfortable for all users.

Editing text into an image's file in Photoshop prevents that text from being read by browsers and screen readers. The clarity of that text can also be affected if the image is scaled up or down. A more accessible option is to upload the image separately, then place Text or Heading elements on top. Shogun has two ways to overlay text on images using the Image and Container elements.

We have developer tools available that make it possible to create custom accessibility solutions directly in the Shogun editor. For example, our Custom Element feature can be used to create reusable elements that contain custom HTML markup and editable fields for populating additional accessible content.

We do plan to add more improvements to make Shogun elements even more accessible, such as ARIA labels and more fields for descriptive text. We are always open to feedback and would love to hear from you about any use cases that you would like us to consider.