Insights
Bringing our best ideas and thinking to you.
Blog Post
April 28, 2017
Share this page:
Designing Accessible Websites with Sitecore
By Chris Arcand
Accessibility is an important factor when designing websites and in some jurisdictions, it's a legal requirement, for instance with the Accessibility for Ontarians with Disabilities Act (AODA). Accessibility on the web ensures that people with disabilities can use the online services provided by a business. The standards which enable this are outlined on the Web Content Accessibility Guidelines (WCAG) 2.0 page which describes what accessibility features a website needs to make the content accessible to a wider range of people with disabilities.
These standards, when put in to practice, can present some technology-specific challenges. In this article, we'll look at two challenges we have run into while building websites on the Sitecore web content management system.
ASP.NET Webforms
Sitecore is based on the ASP.NET platform, which presents challenges in how the underlying technology uses the form tag. In webforms, all dynamic elements must be written inside a form tag, even if the page itself has no forms. Nevertheless, accessibility requirements state that these forms should be labeled.
When designing Sitecore implementations using webforms, many pages can use the same layout, putting a form on every page that uses that layout. What this means is that every page has a form, and that the form will have a different context depending in where it is rendered.
A hard-coded solution around this not viable, but instead we have found a solution in adding a label to the form tag. To preserve page-specific context, make use of a label, such as the page title, so that the tag label on the base layout renders a different label for each page.
Coveo For Sitecore
Coveo for Sitecore is a third-party Enterprise search tool that we have used extensively in our Sitecore implementations. One of its features is fully-functional, out of the box front-end controls (search interface components) that accelerate the development and implementation of search pages. Unfortunately, these out of the box controls may not meet the accessibility standards for your website.
One solution to this is to design your own controls. Coveo offers a JavaScript library and API that allows you to override and design your own controls, replacing the controls that Coveo provides while still allowing access to their search engine. This option works well if you have the time and money to invest into recreating various controls, but may not be feasible with controls that offer more complex functionality, like the Coveo facets.
Another option is to create plugins that run on top of the out of the box Coveo components and make modifications. Most of the Coveo controls have the elements needed for accessibility, with only some key attributes missing. These attributes can easily be added without affecting the existing functionality of the controls, giving you all of the out of the box functionality while also meeting accessibility requirements. This is done by writing JavaScript that runs during the deferred query success event, since this allows for the Coveo controls to finish drawing themselves.
Conclusion
Designing for accessibility is an important aspect of any website development project, including Sitecore implementations. Depending on your project, you may encounter different challenges in meeting accessibility standards, especially when using third party components. Don't let this deter you! Meeting those challenges to find a solution takes a little time and consideration, but ensures the advantages of both Sitecore and third party components are accessible to all website visitors.
--
Chris Arcand is a Senior Developer in our digital practice, with over eight years of experience in business requirements gathering, functional specifications and software development related to IT projects. He has recently lead web content management system (WCMS) implementations for several clients using Sitecore and the Coveo for Sitecore integration.