CATEGORY: DesignsAccessibility

Smart Editor: Accessibility Preview

The accessibility widget tool allows the user at any moment in the design creation process to preview their design and address any WCAG AA accessibility issues that have been flagged.  

 

Where can you find the accessibility preview? 

To find the accessibility issues within your design, first you will need to preview the design. You can do this either from within the design or from the existing designs page as shown below. 

Once you have previewed the design you will be taken to the below page

On this page you will now find the accessibility tab on the right-hand side of the page. When you click onto this tab. All the issues e-shot has picked up will be listed. You can see an example of this below.  

As you can see it has listed my design has issues with colour contrast. It has picked up this is a serious issue and occurs twice within my design. If you are unsure what the issues are that have been picked up, you can click the ‘Details’ link. Doing so will open a new tab with some details on this issue. 

How to know where the issue are in your design 

Next to each issue you will see there is a button labelled ‘Highlight’. 

Upon clicking this button, on the preview of the design a red box will be put around all instances of that issue, as you can see below with my two colour contrast issues. 

You can click highlight on as many of the highlighted issues as you like, to un-highlight them, just re-click the button. 

This allows you to go back into the editor and fix these issues if you wish.  

*Please note: the issues highlighted are just there for a warning and although we advise you to fix these issues, we will not prevent you from sending the design if you prefer not to.