Forum Discussion
WCAG 2.5.5 Target size - with different screen resolutions
Hi All,
Hopefully a simple question, with a simple answer. I am trying to make sure my buttons/links comply with WCAG 2.5.5. that they should be at least 44 x 44 CSS pixels. The bit I am confused with is what screen resolution that's for in Storyline 360? So if I create a button, then change the overall screen res, that button is then a different number of pixels. So how do I know which screen resolution is the correct pixel size, so that I can then convert and make sure it meets this minimum requirement?
Thank you in advance!
Bec Baker
So I did a little bit of reading up on the CSS pixels compared to the actual pixels, and DPR (Digital Pixel Ratio). I think for most computers it would be OK, but for mobile phones, its DPR can be up to 3 times the amount of pixels. So I would need to do 132 x 132 pixels in storyline for that (at least the target area - it is OK for the button to be smaller, but the target area needs to be bigger - so a transparent square etc. over the button would work.)
I then used the dev tools in chrome to be able to look at the different mobile phone options and see what CSS pixels it would give me. In this example you can see for a Google Pixel 7, the next button I have is actually a bit too small (I think this was 70 x 70 actual pixels in Storyline), so something I need to keep testing.
A check with an iPad and I'm almost there with this one!
It's good that Storyline are looking into this with fixing screen sizes.
Thanks again for the comments 😁
Doing a screenshot will only work if you all use the same resolution, screen size and browser window size.
the 44 pixels is a recommendation but even then they allow the button to be smaller in certain situations.
Because of the way Storyline in a browser and also how you can set your own screen aspect but cannot lock the scaling it is difficult to guarantee a button will be 44x44px. Articulates roadmap has more control over the player coming so you will be able to lock the screen size then you will be able to guarantee the size.You could make screenshots from a finished Storyline project on your LMS. Measure the buttons at 100% zoom in the screenshot. Then you know whether you are compliant :-)
Thank you for the reply Phil. I understand the need for the button to be big enough, but it's just tricky to make sure that the dimensions are going to be correct - even in a lot of the training from Articulate, it mentions the 44 x 44px, but then seems odd to not have an explanation how to achieve this, so we know we are compliant. When designing buttons, I do use common sense, I just wondered if there was something easier to help with that.
The only way you can guarantee this, is to determine the minimum device size that you are supporting. For example, if you had a tablet device, you may see the button at 44x44 in landscape view, but rotate to portrait, and the view scales and the button size would be reduced significantly.
So, if you determine the minimum device size is 1024x768, and landscape view, ensure your button is 44x44 at this minimum view, and then anything else beyond that will be larger.
You just need to make this clear to end users. It's not ideal, but since Storyline is not responsive, it is the only way you can ensure content will be accessible and meet the WCAG guidelines.
The WCAG guideline is for a web page at 100% zoom. It would be difficult to translate to a storyline course as they scale so 44 pixels on a small slide size may scale to a much larger size. In contrast you may shrink your browser window and the 44 pixel button becomes smaller than 44 pixels. The intent of the guideline is to ensure buttons are not too small to use a finger so common sense will have to prevail over this and ensure that proportionally the buttons are large enough and seperated enough
