Power BI: Accessibility Tips

Editor's Notes

• #2: Hi everyone, I’m Matthew Deeprose. Thanks to Mike for inviting me to talk with you about accessibility.
• #3: I’m going to introduce the session by [progress] telling you a bit about who I am, why accessibility is important, and how we know what “good” looks like. [Progress] The bulk of our presentation will be about different aspects of accessibility relating to PowerBI, starting with some visual aspects like alternative text and colour. [Progress] Then we’ll cover some aspects of how users interact with PowerBI reports. [Progress] And then other aspects like descriptive links, and using titles, labels and avoiding abbreviations where possible. [Progress] We’ll conclude by looking at some possible next steps including options for automated testing. To make the most of our time please save questions to the end. I have to go to another meeting at 10:30 but we can continue the discussion in Teams
• #4: In terms of who I am [Progress] I’ve been learning about accessibility since 2018 and am slowly building up my knowledge. [Progress] But in terms of PowerBI I know nothing other than I have used one PowerBI report, so please keep that in mind and have patience with me. Having looked through the community on Teams, I’m in awe of your level of knowledge and community spirit. I’ve tried to make this presentation relevant to the PowerBI community, but it’s coming from a place of Power BI ignorance. I use one PowerBI report as an example, but this is not meant as criticism of those who made the report – it’s just the one report I have experience of using.
• #5: Why is accessibility important? I’d like to open with something that Gareth Ford Williams recently said, Gareth was the head of accessibility at the BBC. {progress} No one is disabled
• #6: until
• #7: Someone designs something
• #8: that does not consider their needs. Keep this in mind whilst designing PowerBI reports, how can we make sure we’re not putting up barriers that prevent someone from getting the most out of our work?
• #9: You may have seen this illustration from Microsoft Design before. While Almost 1/5 of UK adults have a disability all of us will be affected by temporary impairments like a broken arm, or a migraine, and frequently we will encounter situational impairments such as trying to read what is on a screen whilst experiencing screen glare. 1/12 men are colour blind 74% of people in the UK either wear corrective eyewear or have had laser eye surgery to help them see better.
• #10: Ensuring our content meets accessibility guidelines makes it better. The top frustrations that users report when using the web map to accessibility issues. https://a11y-collective.com/blog/blind-people-dont-visit-my-website/
• #11: But how do we know what good looks like?
• #12: The Web Content Accessibility Guidelines is a standard that helps us to know when we are succeeding in accessibility. There are more than 50 guidelines, and these are broken down into four sections. Perceivable is about catering to our senses. Information and user interface components must be presented in a way that all users can recognise and understand. Operable is about our ability to use a site, for example using a keyboard if we cannot use a mouse or touchpad. Understandable means that content is readable and predictable, not only to people but also to any assistive technologies they use. Robust means that content is compatible with user agents, including those not yet invented. This is mainly about conforming to web standards. We’ll be looking at the first three of these in this presentation, as this is what you have control over when creating Power BI reports.
• #19: We’re going to examine some aspects from “Perceivable” first.
• #20: When creating PowerBI reports it might be quite rare that you add a picture. But if you do it’s important that those who do not see the picture do no lose the meaning that was behind it. [progress] This benefits those who cannot see the image, or have turned off images to save bandwidth, as shown in the screenshot on the right.
• #21: First we can consider whether alternative text is required for an image. [progress] We do need to provide alternative text if the image contains text that is not also represented nearby. Or if it’s an image that is used as a link, for example you select the image in order to go to a different web address. Or if the image contributes to the meaning of the page and if the picture was not on the page at all that an vital part of the meaning the user was expected to get would be missing. [progress] We don’t need to add alternative text if the image is just being used for decorative purposes or if the image is just reinforcing or duplicating meaning held elsewhere on the page.
• #22: A good way to approach writing alternative text is to imagine you were describing the image over the phone to someone… what you say? [progress] Or consider how you would describe in in conversation with someone, what details would you need to cover so that someone who is not looking at the image can understand it?
• #23: You can provide alt text for any object on a Power BI Desktop report. The Alt Text textbox in PowerBI has a limit of 250 characters. [progress] I don’t know anything about this but according to Microsoft you can use DAX measures and conditional formatting to create dynamic alt text.
• #24: Next we’re thinking about colour, we shouldn’t use colour alone as the only way to convey meaning. Imagine that you are submitting a piece of work and you see two buttons. [Progress] Now if you had red/green colour blindness which is the most common type of colour blindness it would be difficult to know which button you were meant to press..
• #25: It’s great to see that you have been discussing this already within your community.
• #26: There are options to simulate color blindness in into Chrome and Edge dev tools, you can also use browser plugins to simulate colour blindness. https://developer.chrome.com/blog/new-in-devtools-83/#vision-deficiencies
• #27: They main method I recommend is to not rely on colour alone. For example here I added Yes and No labels, that make clear the purpose of the buttons.
• #28: Using markers and labels in graphs is a good example. On the right I have added labels to show details.
• #29: Now when we look at the graph in black and white we can understand the graph on the right still thanks to its data labels, but the graph on the left is going to be very difficult to use. A good practice is to test any content in grey scale to be sure you are not relying on colour alone for meaning.
• #30: Here’s another example in the case of a line graph. On the right I’ve made the graph use markers and dotted lines to differentiate the two lines.
• #31: You can the difference clearly in grey scale.
• #32: Power BI has a handy “show marker” feature you can turn on.
• #33: Next as we continue thinking about “perceivable” [progress] take a look at these four text boxes. Does the text seem easy to read to you?
• #34: I expect these examples are much clearer. In these examples we’re using more contrast and text is legible.
• #37: Screen glare is an example of a situational impairment, and in the photo I’m sharing you can see how screen glare makes those earlier examples more difficult to read. {progress} Now we have the examples where the text has sufficient contrast. Although screen glare still makes it difficult to read I think most would agree that it is easier.
• #38: A rule of thumb is that light text on a dark background should be easier to read and conversely dark text on a light background is easy to read.
• #39: It can get a bit more tricky when we look at specifics. Here are 9 text boxes of varying colours in three rows.
• #40: The top row, most would probably agree is hard to read
• #41: The bottom row most would probably agree is easy to read.
• #42: But what about the middle row?
• #43: The Web Content Accessibility Guidelines provide a method for us to ensure that when we use colour we can do so in a way that is accessible. It involves comparing the relative luminance of the text colour with the background colour.
• #44: The result is a “contrast ratio” from 1:1 to 21:1. The higher the number the better. For text we should aim at least at 4.5:1 contrast ratio.
• #46: There are many sites online that can calculate contrast ratios, my favourite is who can use .com The way they work is you paste in two colour codes and it tells you the contrast ratio. Usually these are “hex” codes. How do you know what the codes for your colours are?
• #47: I recommend using Microsoft’s free “PowerToys” suite of utilities.
• #48: It has a very handy colour picker tool that you can turn on and then use by pressing a key combination.
• #49: It will tell you the html, rgb and hsl values for a colour that you select from on screen.
• #50: In terms of the contrast ratios you need to remember. [progress] For parts that don’t contain text, like icons or symbols, the colour of the icon should have a contrast ratio of 3:1 or higher to the background colour. [progress] For text 4.5:1 is the minimum level of contrast. [progress] There is also an enhanced guideline aiming at a minimum of 7:1 or higher.
• #51: If we go back to our nine examples, here you can see the contrast ratios. That middle row of examples were all below 4.5:1 and therefore should not be used for presenting text.
• #53: I saw a question in the PowerBI community about your json file.
• #54: This has a selection of colours from the University brand, and they have been assigned to different aspects of a PowerBI template.
• #55: I analysed all of the colors and possible combinations in your JSON file. I shared the link in the chat earlier. In the table G means it’s ok for graphical objects – the contrast is 3:1 or highter AA means it’s ok for text or graphical objects at 4.5:1 or higher AAA means it meets the enhanced level for text or graphical objects of 7:1 or higher.
• #56: I’ve picked out a few things to consider. Using the mobile view you can view tables for each colour, one at time. This section is about the background colour. Only 6 colours used in the theme have a 4.5:1 contrast ratio or higher
• #57: The colour used for titles, callouts, headers, and labels has good contrast with 11 of the other colours used, whilst the foreground colour only has sufficient contrast with 3 other colours in the theme. Of course I don’t know the context of how these colours are used. I would suggest as a next step to consider what colour combinations are likely, for example will the data colours have labels and what colour is planned for those labels, then you might want to adjust the data colours until you have found shades that will have sufficient contrast.
• #58: Next we’re going to consider some “operable” aspects, in particular using the keyboard.
• #59: Not everyone will use a mouse or touch pad, so it’s important that we can use a keyboard to interact with PowerBI reports too. The Keyboard is also the interaction layer through which other assistive technologies like switch devices navigate pages.
• #61: Using the keyboard to navigate a webpage will typically involve using the tab key to move between links, and the enter key to select something, the space bar is used to perform an action, and the cursor keys move between radio buttons or list items.
• #65: Further keyboard shortcuts are available for PowerBI, these are shown to keyboard users early when the start navigating a report. More at https://docs.microsoft.com/en-us/power-bi/create-reports/desktop-accessibility-keyboard-shortcuts
• #66: Many of us will have only used a mouse or touchpad, and will be familiar with a screen that looks like this. [progress] How effective would be if the mouse pointer was not visible?
• #67: Keyboard users don’t have a mouse pointer, but a “focus indicator” usually a box, appears around the element they have navigated to. Here is an example over a check box. [progress] Here is an example around a select menu. Both of these are fairly clear because the focus indicator is black and the background in these screenshots is white. [progress] But here is a focus indicator around a dropdown menu. The background is a kind of turquoise blue. Now it’s less easy to see due to there being less contrast between the focus indicator and the background. [progress] It looks like you cannot set the colour of the focus indicator, it seems to be fixed to black, so be aware as you use colour in your PowerBI reports that if you use darker colours to fill in parts of your report it may make the focus indicator hard to see, so try to keep this in mind, maybe lighter background colours with dark text are better? There is a feature in Edge to make the focus indicator EXTRA visible. I’ve put a link to this in the notes of the slide: https://support.microsoft.com/en-us/microsoft-edge/accessibility-features-in-microsoft-edge-4c696192-338e-9465-b2cd-bd9b698ad19a#bkmk_high_visibility_outline
• #68: So we covered being able to see the focus indicator, the other consideration is that as you use the tab key to move around a report that you should be moved around in a logical sequence. [progress] I’m going to show you a video I recorded using the accessibility insights browser plugin, it will visualise where the focus is moving. [press play] It’s going to start at the University logo, then the report title, then the academic year drop down as it continues the focus order does not appear particularly logical
• #69: Fortunately we can set the tab order in Power BI. In the Selection pane, selecting Tab order displays the current tab order for your report. You can select an object, then use the up and down arrow buttons to move the object in the hierarchy, or you can click and drag with the mouse. Selecting the number next to an object hides the object from the tab order. If you're including decorative shapes and images in your report, you should remove those from the tab order.
• #70: Next we’re going to consider aspects of “understandable”.
• #71: When we put links in our reports we should make it clear within the name of the link what will happen when we select it. This is useful for everyone.
• #72: For those who can visually see a page, it’s common to scan over what you see without looking too much at the detail.
• #73: Imagine that we visually scanned the links of a website and this is what we saw – it’s not clear where any of these links will take us.
• #74: We have to read the surrounding text to understand the purpose of these links.
• #75: But if we write descriptive links, we can much more easily scan the page and find what we want.
• #76: Without having to read the surrounding text.
• #77: This is even more the case for those who use screen readers. An analogue for that visual scanning is that screen readers can generate a list of links on a page. But if the links say “click here” or “read more” that’s not useful. [progress] In comparison in this example each of the links is unique and is understandable in isolation.
• #78: It’s also important to underline your links, don’t rely on the colour of the link alone to express the meaning that something is a link, just underline it.
• #79: Here’s two examples. In both cases the word “here” is underlined. Now that you know not everyone uses a mouse, you know not everyone will be “clicking”. You may have noticed I try to say the word “select” rather than click. We could rewrite the first link to “Email the Data Analytics and Insight team”. We could rewrite the link on the right to “Visit the Data Analytics and Insight SharePoint site”. You might also have noticed that the text in these boxes is center aligned.
• #80: When text will run over more than one line I recommend you avoid centre aligning text. Compare the passage on the left with the passage on the right. I have marked where each line begins. By left aligning the text we make it much more readable. This benefits everyone in terms of readability and reading speed but can particularly help readers with dyslexia.
• #81: We're going to finish with a few tips that might be obvious but are worth mentioning. These are all taken from Microsoft's very useful accessibility guide for PowerBI reports. [progress] We should try to avoid jargon or acronyms. [progress] As you can see in this example CY has been expanded to Current Year. I've noticed that some of our PowerBI reports have an explanation page which looks to be a nice way to add this kind of information in complex reports. [progress] We should aim to include titles, axis details, and data labels. [progress] In this example the horizontal and vertical axis labels have been added, as well as data labels for the line graph. [progress] And when we add the data labels we should take care when positioning them in this example it isn't clear which labels refer to which graph. [progress] In this version the labels for one line have been set to show above the line, and for the other line the labels are below. Note also the way that one line is dotted, and the other solid, to help differentiate them.
• #82: Now we’re heading to our conclusion
• #83: Microsoft provides a free browser based tool for accessibility testing. There are many similar tools, I like this one because the interface is fairly clear. You can use to run a “fast pass” on your powerbi report.
• #84: It will point out lots of issues that may be false-positives and are definitely not something you can do anything about, but the colour contrast checks are useful.
• #85: You can set a filter to only show certain issues [progress] It will explain the details, in this case insufficient contrast [progress] And show you where on the report this issue occurs. You might find this is too verbose or confusing, but some may find it useful.
• #86: In terms of next steps I would recommend making contact with the disability staff network and ask about their experiences with PowerBI. In the past some members of this group have offered to help test things and give feedback. https://sotonac.sharepoint.com/teams/UoSDisabilityStaffNetwork
• #87: If you’re interested in learning more I collate my accessibility presentations and blog posts on my website. I always include a very large bibliography of links and resources for each one. [progress] And our Accessibility Community of Practice is open to all. This year it has been difficult to keep momentum because we don’t have any volunteers to produce peer tutorials, but you can view our recording and be the first to hear about forthcoming plans to re-animate the community over the next months. https://matthewdeeprose.github.io/ https://teams.microsoft.com/l/team/19%3af18e35da49dc4361ad6b06cc94b70234%40thread.tacv2/conversations?groupId=0b49ec6f-66f9-4795-bc19-e5430ae979a9&tenantId=4a5378f9-29f4-4d3e-be89-669d03ada9d8
• #88: So we’ve covered a lot in this session, and I hope you’ve found at least some of it relevant and useful, even though I don’t know anything about PowerBI. This is the start, we can continue the conversation in teams and in follow-up community sessions, I may not have the answers but I have a big network of contacts
• #89: My slide deck has links to follow up resources to check out, and I posted more in the chat earlier.
• #90: And now I can try to answer any questions you have.