What is Microsoft’s Accessibility Insights for Web?

One of my favourite things about consulting in Power Apps Portals is that I am able to step back in to the world of traditional web development temporarily, and I get to explore a whole host of tools to improve our solution.

Visual improvement tools are cool, but helping ourselves reach a wider audience whilst simultaneously improving inclusivity is even better! This is where Microsoft’s Accessibility Insights for Web tool comes in to play.

The tool can be used for any website, but in this blog post I’ll use a Power Apps Portal as an example.

Context

Accessibility in digital services is all about providing alternative navigational aids and component references for those with impairments, and they can be elements that could be visible or hidden to all users. A couple of examples include:

  • Ensuring that the colour contrast between background colour and text that sits on top is significant enough to be considered easily readable. Using two similar colours may create difficulties for those with colour blindness.
  • Defining Tab Indexes in the website’s code to explain the order of your site’s navigation, so that anyone using a screen reader can access the components (such as a navigation bar with child links) in a logical order.

Regulations came into force in the late 2010s in many parts of the world, and more specifically, in the UK all public sector organisations had to ensure that their website was considered accessible by 23rd September 2018. If this isn’t possible, the organisation needs to provide a suitable alternative.

As many of the largest suppliers of digital services now give you the ability to create your own content, whether that’s social media or the Power Platform, many of the tech giants have created tools to empower you to make your content accessible, as it would be impossible for the tech giants themselves to automatically make every single piece of digital content meet these standards.

Getting Results Quickly Using FastPass

To get started, you don’t need a Microsoft account or even need a log in for your website. This tool can be run against any website to measure the closeness to common accessibility standards, or lack of. The tool is installed as a browser extension and is available for most modern browsers here.

To run the tool, simply click the following icon within your browser’s navigation bar:

Accessibility Insights for Web icon that is visible in your browser's navigation bar. A blue heart with a white search icon.

The browser window will give you several options which are self-explanatory, but to get reasonable results fast, the ‘FastPass’ option works well enough straight away.

A notification will pop up alongside the report for automated checks which instantly gives you a visual summary of all of the issues that have been raised.

A screenshot of a web browser showing the Accessibility for Insights Web tool by Microsoft with two different errors.
This particular portal has two errors relating to HTML code.

And there you have it! Within a few minutes you now have a list of potential issues to resolve shown in Step 1, and if you’re unfamiliar with the specific results you receive, there is plenty of information from the report or the web.

A screenshot of the FastPass results, showing two issues on the homepage of the demo website, with visual indicators on the website itself.

If you keep the report open on this page, as you expand your selection in the report, it will highlight on your original web page exactly where the issue is found and it will explain how to fix in order to avoid lengthy researching or development processes for someone that is comfortable editing HTML.

Moving on to Step 2, this provides a way to understand how accessibility tools will behave on our website when using ‘Tab Stops’ to navigate the screen.

A screenshot of the tab index being recorded by the report on my demo website to tell us how a screen reader will navigate the website.
Tab Stops are flowing in a logical order on this website, moving from left to right before shifting down to the next interactive item on the page.

To enable this, you simply press the ‘tab’ key on your website linked to the report and indicators will display for all elements on the page that are included within the ‘Tab Index’, and as this is subjective, the user is expected to decide whether the current order is correct.

Full Assessment

Whilst FastPass is likely to be beneficial for most small websites, for larger audiences or those in the public sector, you may want to consider running a full automated assessment. This is the second option available from your browser’s extension, and returns a significantly larger set of results in trade-off for a slower running time.

A screenshot of the full Assessment feature being run against a website looking at every component for accessibility issues.
Full assessment being run on a website.

Once the report has been completed, you can navigate to any items on the left-hand side of the browser window, focussing on those with an X to identify where issues lie, and once opened, the conventions used for displaying issues and recommendations follows the same path as the FastPass option.

Final Thoughts

Just because accessibility regulations aren’t law for all websites, it doesn’t mean that we shouldn’t consider this within our digital assets. For someone that is comfortable with HTML, running the tool (remember, it’s free!) with the FastPass report and fixing two issues could take less than one hour to change your homepage, but it could open up your site’s usability to a whole host of new audience members, not only increasing reach, but improving the perception of your services or product for those that need accessibility features everywhere.

When you’re next on social media or working with a website that you or your organisation owns, take a look at the accessibility features and you might open up a world of seemingly hidden features to make the digital experience better for all!

Microsoft’s Accessibility Insights for Web

Useful Guidance & Tools for Digital Accessibility

Colour Hex

Expect Dataverse Deployments To Fail First Time

Whilst the process of deployment hasn’t changed too much since the days of Dynamics CRM, one thing that has changed significantly is the volume of possible components that can be included in a solution file.

Not only is this due to an increase of readily-available functionality from Microsoft, but also by the ability for end users to install their own components, which in turn creates more dependencies on (what we think) is our small solution of configuration changes to be deployed from one environment to another. This can increase the number of failures that can occur during delivery, and often, the end user error isn’t very helpful.

A generic error provided by the Power Platform when trying to deploy a solution.

Solution deployment failures don’t have to be a problem, in fact, we should expect them.

In this blog post I will help you understand how to troubleshoot a failed deployment so that you can solve the issue in an informed way.

Step 1: Download A Code Editor

We want to ensure that the output from the failure is in a readable format, and for this we need a code editor that recognises XML formatted files. My preference as a functional consultant who needs to open the occasional file is Notepad++. It’s free, and it has an XML Tools plugin which allows you to ‘pretty format’ any XML files. You can also use Visual Studio or Visual Studio Code – I suspect some of you reading this will already have one of these installed!

Step 2: Download The Solution’s Log File

Whenever someone approaches me with a failed deployment, the first thing I ask them for is the log file. When you open this file in Notepad++, use ctrl+alt+shift+B, which will ‘pretty format’ your XML file. It’ll look something like this:

A screenshot of Notepad++ with XML Tools plugin installed. The file shown here is using 'pretty format' to make the code readable.

It looks difficult to decipher to the untrained eye, but we can quickly start to understand why the solution is failing with a few tips when we break down the file.

Step 3: Understand The Dependency

Let’s take a look at the first dependency, defined by the <MissingDependency> XML tags.

A snippet of code showing a missing dependency.

You’ll notice a <Required> line and a <Dependent> line which both include a Type. This, alongside the schema name, is the most important part of the dependency, as the two combined tell us what we’re looking for.

Fortunately we don’t need to remember all of the types as Microsoft provide a handy reference guide here.

We simply need to cross-reference the numbers in our dependency, and we now know that to complete the deployment we need to include the “Offering” entity (table) for the “Service” System Form.

Step 4: Modify Your Solution

We have two choices here:

  1. Remove the Service System Form from the solution, or,
  2. Add the Offering entity (table) into the solution.

In this particular instance it would make more sense to add the Offering into the solution, but sometimes you may challenge whether the component is really needed within your deployable solution, in which case, you’d remove the System Form.

Step 5: Rinse & Repeat

Not all dependencies will be resolved within one solution modification, but that’s ok, and you may need to repeat steps 3 & 4 multiple times before you have a solution file that can be successfully deployed. The key is to remember that failures can be expected, and that they don’t always have to be a problem!

5 Reasons to Choose Power Apps Portals

As a response to lockdown, QUANTIQ created a new virtual conference named WinTEQ to promote the amazing products and services in the Microsoft cloud available to organisations of all sizes. This event takes place over three days, with presentations being delivered by some of the best consultants in the business.

The event focusses on two key themes:

  1. Thriving during a period of dramatic change.
  2. Digital transformation for the price of a coffee.

I was supposed to be getting married on the 2nd of three days when this event took place, but due to COVID restrictions, I delivered “5 Reasons to Choose Power Apps Portals” instead!

Some information delivered in April 2021 may have changed, such as tweaks to pricing of Power Apps Portals, however, the majority of the concepts remain the same.

If you like what you see, look out for event registrations over on LinkedIn early next year!

The Power Of A Great User Story

For anyone that personally knows me, they will know that I am absolutely obsessed with getting User Stories right!

On the face of it, it may seem impossible to deliver part of a business process from one single sentence, but user stories are one of the best tools you can use, right from your initial engagement through to post go-live support as long as each part adds value.

What is a User Story?

User stories can help us to define a requirement for a business user or process that needs to be included within a project or product to ensure success. Generally speaking, user stories follow the following format:

As a [persona], I want to [achieve], so that I can [action].

That is all, one seemingly simple statement. Some may feel that writing user stories are a waste of time in an agile project, particularly as an agile project is supposed to deliver technical outputs quickly, however, user stories can actually speed up the turnaround time of the solution, providing that we pay particular and collaborative attention to it’s construction.

The Construction

Let’s take a look at what we want to achieve from each part of the User Story and how we can add value. As I am a Power Platform and Dynamics 365 Customer Engagement consulting manager, I’ll be using an example from Dynamics 365 Customer Service.

As a [persona],…

It would be easy to write “As a user…” here and be done, but this doesn’t tell us anything except that this isn’t an automated process.

Particularly in the Power Platform and Dynamics 365 space, the functionality and security model can span multiple applications, so perhaps we can describe the user and the way that they’re accessing the product or feature.

As a Customer Service Representative accessing the standard Customer Service Hub application,

From the above, we can understand that:

  • The user definitely needs a Dynamics 365 Customer Service license if existing licenses do not allow access.
  • The user is likely to use the standard Security Role provided due to the persona’s role.
  • The user is not expecting a tailored sitemap experience, as they will access the application through existing means.
  • The experience is triggered by end user behaviour rather than automated processes, until we discover more about the rest of the story.

I want to [achieve],…

We now want to ensure that we describe the Customer Service Representative’s objective in this part of the user story, so that we can start to understand our scope and design our solution.

As a Customer Service Representative accessing the standard Customer Service Hub application, I want to see all of my priority ‘1 – Blocker’ Cases in a separate list sorted by oldest to newest creation date,…

To add to our previous understanding, we now know:

  • The user has a focus on Cases that need the highest amount of attention, and these should be categorised by priority. Right now we don’t know the full list of priorities, but we can add that as a known unknown in our design.
  • The user needs a new view for just the Cases categorised by this priority, and the out-of-the-box priorities are High, Medium, Low. It seems like we need to carry out Column and List configuration in Dataverse here.
  • The List that we configure needs to include the Created On date, and needs a sorting on this Column too.

So that I can [action].

The primary purpose of this part of the user story is to justify the action through behaviour. Some consider this part of the user story optional, however I like to ensure it’s included in every user story as it can significantly change the estimate required to deliver.

This part of the user story doesn’t just have design benefits, but it can also help us prioritise the user story against other user stories in the backlog when we are working in iterations or sprints.

As a Customer Service Representative accessing the standard Customer Service Hub application, I want to see all of my priority ‘1 – Blocker’ Cases in a separate list sorted by oldest to newest creation date, so that I can ensure that we do our best to meet our 1 day ‘solution or workaround’ Service Level Agreement (SLA) for blocked customers.

We now know why this design is so important, and we can deduce the following:

  • The organisation makes promises within their agreements with customers to ensure that business processes aren’t blocked for more than one day, and this needs to be a core emphasise within the design.
  • We can ask if we can further improve the design by introducing system triggered Service Level Agreement functionality.
  • Most importantly, another business initialism has been cleared up, by clarifying why the customer keeps writing SLA all over their documents!

Isn’t This Too Much Detail?

Not at all. It’s unlikely that we will every get to this level of detail within one round of workshops, however, through refinement during iterations or sprints, this can tell us almost exactly how we need to build a feature. It will also help us more accurately estimate our delivery and provide a higher chance of passing tests after deployment.

One phrase I frequently hear is ‘we don’t need to worry, it’s just out of the box functionality’, but from one sentence regarding standard functionality, we have been able to arrive at 10 conclusions with definitive design that definitely carry an associated effort.

I am sure others reading this will find additional conclusions too, and this is the great thing about user stories – multiple perspectives can help to narrow down exactly what the client is asking for, and ultimately lead to a higher quality delivery.

How To Enable ModelDrivenFormIntegration for Existing Canvas Apps

Earlier this week I found myself trying to embed an existing Canvas app into a Model-Driven app to better present information relating to the record using the flexible UI controls, but as an infrequent user of such a feature, I struggled to understand how I could reference the current Model-Driven app record’s data within the Canvas app!

All over the web I could find resources pointing towards a special type of control called ModelDrivenFormIntegration and how it works, but I simply couldn’t see it within my solution. This is where it should be:

A screenshot of a Canvas app, highlighting the ModelDrivenFormIntegration control that appears after embedding within a Model-Driven app.

The new Power Platform interface has improved so many of the existing controls and added fantastic new features, but unfortunately at the time of writing, embedding a Canvas app via the new user interface needs a little more work, and it doesn’t quite complete the job in all circumstances. There are two reasons for this:

  1. You have to associate the control with a field on the Form, and when adding the Canvas app via the new User Interface, it doesn’t configure the field control automatically leading to errors when loading.
  2. The functionality available via the ‘Customize’ button is not available in the new User Interface, which is partly the reason for this blog post!

As some of you will be aware, sometimes it’s just better to head over to the classic user interface to complete your configuration, and although I’m finding myself using this user interface less these days. In this post I attempt to bridge the gap and I’ll explain how to get things working.

What is ModelDrivenFormIntegration?

As Microsoft have explained in detail here, this control allows us to bring contextual data from the Model-Driven app that the Canvas app is utilised in.

There are a significant number of benefits to doing this, primarily because it provides you with the ability to dynamically change your Canvas app content based upon the record you’re currently viewing in the Model-Driven app.

Enable ModelDrivenFormIntegration

Step 1: From https://make.powerapps.com, navigate to the correct environment and choose the relevant Table’s Form within your solution file. Use the ‘Switch to Classic‘ button from the navigation bar straight away.

A screenshot of a Dataverse Table's Form, highlighting the 'Switch To Classic' button.

Step 2: Navigate to the required field you’ve configured for your Canvas app control and double click. You’ll notice a pop up window which provides the ability to navigate to the Canvas app control configuration. Click on ‘Controls‘ and press the ‘Customize‘ button.

A screenshot of the classic user interface that was inherited from Dynamics CRM, showing the Properties of a Mandatory field on the Controls tab, highlighting the 'Customize' button.

Step 3: Your Canvas app will now open, and you’ll notice that ModelDrivenFormIntegration is now available as the first control on the list for the first time! We’re not done yet though, we need to tell the control which Table we are using within the Model-Driven app by editing the ‘DataSource‘ Property.

A screenshot of a Canvas app, highlighting the ModelDrivenFormIntegration control's Property called 'DataSource'.

And finally the ‘OnDataRefresh‘ Property.

A screenshot of a Canvas app, highlighting the ModelDrivenFormIntegration control's Property called 'OnDataRefresh'.

We can use the plural label/friendly name of the Table here, instead of having to look up the logical name, which is a great touch in a lot of Power FX’s abilities.

Conclusion

And we’re done!

The configuration for this isn’t difficult, but finding out why the issue exists can often be challenging, especially if you’re an infrequent user of this functionality.

Remember to ‘Save‘ and ‘Publish‘ your Canvas app changes when you’re ready, but you don’t need to publish your Model-Driven app as this was simply a route into enabling the functionality with no configuration changes.

There are a few pointers to be aware of when generally configuring embedding Canvas Apps:

  1. Microsoft advise that associating your embedded Canvas app control is tied to a mandatory field, so that you can guarantee the operation of the Canvas app.
  2. Remember to share your Canvas app or make other users Co-Owners as appropriate before releasing the functionality to end users.
  3. The classic user interface is due to be deprecated in an upcoming release nearer the end of the year. I suspect this feature will still work for a short period of time, but we will have to watch and wait until such a time, and I’ll update this post if/when this happens.

Power Apps ModelDrivenFormIntegration Control

Embedded Canvas App Guidelines & Troubleshooting