Optimising your Sitecore site for accessibility

In recent years, there's been a major shift in what is expected in a website with regards to device support/responsive design, browser support, search engine optimisation (SEO) and accessibility. Out of each of these, the one that gets the least love and the attention it needs to be done to a suitable standard is accessibility. There is a great deal of content readily available on what you should and shouldn't do to support accessibilty including the official W3C standards. This article is a quick look at just a few ways in which you can enforce accessibility standards and best practice within Sitecore.

Content Management Systems and Maintaining Accessibility Standards

As the name suggests a Content Management System (CMS) empowers Content Authors to be able to manage the content of a website without necessarily being savvy web developers. In Sitecore, this (hopefully) takes the form of a Content Author assembling pages using a swag-bag of individual components, adding them to a page and then inserting their content into numerous content fields to finally be published to their end-users.

Limit the use of Rich Text fields in your Components

Rich Text field types empower a content author to insert rich text in the form of HTML into a content field. This is a very powerful thing to be able to do however it should be used sparingly as this is a big glaring hole in a potentially beutifully accessible website as Content Authors may not understand or have the skills to insert additional markup attributes or adhere to the accessibility standards. Adding Single Line Text fields (for example) which are rendered out into your Views between the HTML tags you choose ensure components are consistently using your accessible markup.

Use Semantic Markup

As developers, we can ensure that we've used nice semantic markup to assist with screen readers. Some of the more common HTML5 semantic markup tags are shown below. This is low effort but enables screen readers to jump to parts of the page more simply and give context to someone using a screen reader.

<!-- A container used for the web page header -->
<header></header>

<!-- A container used for the web page footer -->
<footer></footer>

<!-- A high-level container used to contain all of the content that is unique to a single page and not common to all pages (such as your header/footer) -->
<main></main>

<!-- A container used to contain blocks of navigation links. Usually placed in the Header or Footer or an aside -->
<nav></nav>

<!-- A container used for blocking off larger sections of a page's content -->
<section></section>

<!-- A container used to denote content that is related to the main content on the apge but not part of the primary flow of a page's content. Eg. a glossary or a related advert -->
<aside></aside>

<!-- A container used to denote reusable content sections such as a blog post or technical article -->
<article></article>

<!-- Headings should be nested correctly to help assistive technologies identify section headings and nav structures -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Sitecore field-level validation

If you can't make them... Make them!

One of the simplest things an accessibility-concious content author can do is to simply add some 'alt text' to an image when they are uploaded. This helps a screen reader provide context to a user. By default, Sitecore will display a red validiation alert on the screen in a couple of places to indicate that alt-text is missing.

Error level validation for missing alt-text on a Sitecore image

The 'type' of validation error configured doesn't stop a user from being able to avoid saving the image without supplying an alt-text value however so what we can do is to locate the rule in question and either update the existing one, or apply a new one which will not allow you to save the item without supplying an alt-text value.

Note: Please be mindful of changing any default sitecore settings. It may be fine to do so, but if in doubt, you should always add your own setting and apply that instead.

Sitecore Image Template Alt Text field validation

There are a number of Validation rules which ship with Sitecore (some shown below). Here you can see how these can be configured. If you want to add your own rule, as with most Sitecore functions, it just needs to inhert the appropriatie "type" and then be referenced in the template with your own class and it's corresponding .dll

Example of where the Alt Required rule is defined and how

When we have a quick look at the types defined in the Sitecore Kernel, you can see some handy comments telling us what will happen when you set the different validation results.

A look at the Sitecore dll file to see what they're doing

Validation rules can be applied to individual template fields by locating the field item and then scrolling down to find the validiation section and selecting the rule you want as shown a couple of images above.

You can make validation rules as simple or as complex as you need, just consider whether or not it's a nice to have, or an absolute must have before selecting the type of rule or risk the wrath of your Content Authors!

Accessibility review in your Workflow

If possible, employ the use of a Sitecore Workflow and a workflow approval step which goes to a content author who is your accessibility reviewer. This doesn't need to be any more complicated than that. Simply have a Content Approver who knows what they're doing and can help make any neccessary adjustments and get on with your day..

There are also options for submitting your content to an API or 3rd party service to do a review, this just would require creating a custom workflow step (similar to how we created a new validation rule above). Please reach out if you need help or further information on this front.