Transcript
[00:00] Let's do an accessibility review of the Summit Adventure Park website for this trampoline park here in my town of Bellingham Washington because I really am curious about going and jumping on trampolines at some point but I haven't
[00:16] gone yet and their website is it's got some accessibility issues so let's talk about them. I've loaded the website in Safari and the first thing I see is a modal dialog for a $20 monthly membership offer. It is showing an
[00:33] auto-playing video in the background which is even when it's darkened is pretty distracting so an issue with some auto-playing motion that should not be not be auto-playing but if I hit the tab key I am gonna go through the Safari
[00:51] toolbar at first but then I am tabbing through content that I can't really see and I can see it start to scroll the content in the background but not get into this modal so there's this classic issue with a modal dialog not preventing
[01:10] focus and interaction from content in the background and if I control click to inspect what's in this modal it let's see I see a div for this pop-up wrapper
[01:25] the pop-up dialog the close button is an image it does have alt text for close but image is not an interactive element so even though it might have a JavaScript event handler to close I wasn't able to reach or operate that
[01:44] close button with the keyboard so I'm blocked from getting to the main part of this page if I can't use a mouse just straight off the bat because of this modal dialog offer but let's keep going so I'm gonna go back to the top of the
[02:01] page there's this super distracting auto-playing video which in my system preferences on my Mac if I go under accessibility display and turn on reduce motion the website really should tap into that so that it can automatically
[02:20] suppress autoplaying video if I say I've got a disability where I have a seizure risk or vestibular disorder maybe ADHD and I get really distracted it would be
[02:33] great to not have this autoplaying video because it's it's hard to watch so let's keep tabbing through the page to see what else we can discover about the accessibility of this website so I'm hitting tab and as we already found with
[02:52] behind the modal there's no visible focus indicator for any of these keyboard accessible items there's one on a video there's a play button but none of this main navigation which has a hover menu I was unable to see my focus
[03:11] point on any of those items so if I can't use a mouse or a trackpad I really can't follow along with this user interface so I've inspected one of those links up in the navigation menu and it is an anchor with an href to the home
[03:26] page and it's inside of an unordered list so semantically we've got the right element but there's something in the styling that's keeping this from showing the focus outline so I can go in here in Safari or in Chrome or Firefox and force
[03:45] an element style such as focus and if I scroll down in the styles pane I'm looking to see what is causing that and I found there is a matching style for this quad menu navbar nav the items when those anchors are focused they have a
[04:05] text decoration of none and an outline of none if I turn that outline zero off then I can see where I am on the screen so now if I tap through here I can see my focus point if I go and turn that style off so that would be the first
[04:21] recommendation I would make is to go and turn that outline zero off super common on websites unfortunately but also not an incredibly hard thing to fix now the sub nav here on about what might be a bit more involved because it's probably
[04:40] using JavaScript if I inspect this item it is also an anchor it's got a class of quad menu drop-down toggle hover intent so there's some scripting code that probably needs to be revisited so when this element gets focused it will show
[04:59] these sub items because otherwise I can't reach these items with hours park rules or cleaning protocols let's see the sub items they are when they're not
[05:13] showing they have an opacity of zero and a webkit transform that moves their y axis so it's possible that I could maybe reach these items but I can't see them when they're back there so if I tab through these items I go straight from
[05:32] home to about two activities so when the about drop-down menu is closed I am not reaching those items so I really can't get to that that item oh actually I can I can go on to the about menu item now I can't see where I am again because that
[05:52] focus style reset and so it's potential that I could get on to this menu and get into these items when it's open but I can't activate it without going to the about page so it's it's half it's part of the way there and I think if this site
[06:11] was tested with the keyboard there's some big improvements that could be made hopefully you know in a few hours or one day maybe so that's promising but let's open up this site in Chrome as well or yeah let's let's check out Chrome so if
[06:30] I go to summit Bellingham's about page in Chrome where I have other tools that I can check for accessibility let's open up the axe extension so I'll do command option I on my Mac keyboard to open developer tools and down here in the dev tools toolbar there's a little carrot I can go to the axe dev tools
[06:50] extension and run scan all of my page it came up with 33 automatic issues including 12 that need human review but if we go through these items there are
[07:03] some social links that apparently need discernible text so there's a link for Facebook that has the word Facebook in it but it's saying and acts that it doesn't have any discernible text so let's inspect it in the dev tools and
[07:21] see what's going on there so I've got the the anchor for this social link highlighted in the DOM and if I do control click I can scroll it into view so I can see at the bottom that it's got an icon if I drill down into the anchor
[07:37] the icon is applied it's an icon font on a before pseudo element with CSS and then the span with the Facebook text has a display of none so that's why this anchor
[07:52] is not getting its accessible name or discernible text as axe called it it's not getting the span with the word Facebook because of that display none style and I can also take a look at this in Chrome dev tools under the
[08:08] accessibility tab it's over here to the right of styles computed layout and so on in the Chrome dev tools I can look at it in the accessibility tree and find that the anchor is just showing a little rectangular box for an icon and not the
[08:27] word Facebook and that's because the span with that display none style is not being rendered it's hidden from everybody not just visually so the thought was it's like part way there like I think the the hiding technique
[08:43] on this text for Facebook just needs a little bit of adjustment like if it had opacity zero or a visually hidden CSS class maybe or maybe the anchor could have an ARIA label so there's other techniques that we could use it just
[09:00] needed a bit more testing so if we come back over here to axe dev tools that's the first one of those links the Twitter link looks like it's the same treatment and there's some other issues like some color contrast issues that probably well
[09:17] their needs review so they need to be checked manually but we could go to highlight and see so it's the items up in the top nav which is a white text over an orange background and axes color contrast algorithm is having trouble
[09:33] determining what the foreground and background colors are so if I find this it is worth looking at even though axe can't quite tell with a pass fail we can use another tool to find out so on my Mac I'm going to do command space and
[09:52] type in CCA for color contrast analyzer this is a desktop application that I really like because I can sample colors on all kinds of applications I can sample the background color which is this orange I can sample the foreground
[10:08] color and make sure I get in the middle of the text so I'm not getting this anti-aliased pixels kind of on the edge but this main white color so I can see
[10:22] that this white or just barely off white over the orange does not pass color contrast for WCAG 2.1 we need a ratio between the foreground and background
[10:34] colors of 4.5 to 1 for text and this text is failing at 2.4 to 1 so it fails for regular text for large text and unfortunately you know it's it's off
[10:50] white but pretty darn close I don't think changing it to a solid white would be enough of a change to make this pass so that means this orange color needs to darken or the text needs to become black which is odd because to our eyeballs the
[11:09] black over orange at least for me doesn't look like much brighter but there's something about this color contrast algorithm that black over orange often will pass where white won't so you'd have to test it but the
[11:25] recommendation I would make and I'd have to go back to my team and talk about it as a somewhat of a more major change would be this orange needs to get darker because the white can't get much whiter so something else has to change to create enough of a ratio difference between these two colors so that it
[11:43] stands out more so a darker orange or maybe a different color something maybe these the text like if the orange really has to stay because it's a brand color maybe the navbar items get put in each one is in a black box or something so
[12:02] the white can stand out more you've got some options but that's a tool that I often use when acts can't tell these colors for whatever reason I use the the tip-off that there's something that I should inspect but I can use other tools
[12:20] like the color contrast analyzer so there's a color contrast item let's see what else we find in here there's an input without a label so a search and
[12:31] if I run the inspect on this search field I can see let's go I can in the dev tools again I can do control click to get into the context menu and scroll it
[12:46] into view but I don't actually really see this displayed on the screen it this input does have a placeholder which as I can see in the accessibility inspector here in Chrome it gives us something so placeholder is sort of a fallback in
[13:05] this case for a label but it really should have a label element but let's go back to axe dev tools and they're really saying that it needs a visible label which you know fair enough that is true keeping going through our axe results we
[13:24] are missing a main landmark wrapping our page content so that would be a good thing to add this is under best practice so it is not a technically a WCAG violation but it still would be a helpful thing to do we have a nav
[13:40] landmark that isn't labeled and axe is reporting that there's more than one of these so under element source we see a nav for the top menu nav and then down below there's a second instance so I can go inspect where's the other one so oh
[13:58] and they're actually nested so this is probably not intentional I mean what is intentional with accessibility issues sometimes but having a nav within a nav tells me that maybe this code got is getting included dynamically or just
[14:17] certainly not tested so getting rid of one of these navs would be good because you don't need two of them nav is a landmark with meaning or an element with meaning as opposed to something generic like a div so we only need one of those and you could put an aria label on whichever ones you do have to make them
[14:37] unique looks like zooming and scaling is disabled so there's a meta viewport tag that is disabling user scaling which can be really problematic on a mobile device so if you to be able to pinch and zoom if you can't quite read the text
[14:55] because it's too small taking this changing this content attribute in this meta name viewport tag so content what I would put in is just the width device width initial scale one getting rid of maximum scale and user scalable zero
[15:14] will re-enable pinch and zoom but it will still load it at the regular like responsive view size on a mobile device and then there's another best practice rule here about landmarks so with some keyboard testing and a run through of
[15:33] the axe extension we found a number of accessibility issues that could make this site so much better and with more time I'm sure we could uncover more but there's there's some quick wins here and maybe a potential fun outing to go jump
[15:48] on some trampolines