Accessibility Review of WTA

[00:00] Let's talk about the Washington Trails Association website for accessibility or WTA.org. I love WTA. They have a website with a ton of information about local hikes and things outside here in Washington State and I was really

[00:14] excited to see that they launched a part of their hike finder map where you can filter by wheelchair-friendly hikes. So super awesome, really stoked that they added that. It did make me wonder about accessibility for the rest of the

[00:31] website since that tends to be something that gets missed quite often. So in this session we're going to start at the WTA homepage and take a poke around with some accessibility workflow steps starting with the keyboard. When I'm testing a website for accessibility I often start with my keyboard by pressing

[00:49] the tab key. On WTA's website there is a skip to content link in the first tab stop which is awesome, stoked to see that. If I hit the enter key that takes me further down the page and lets me skip past the header. So cool, glad to see that.

[01:06] There is an issue though when I tab through the content there are no visible focus outlines and so when you're navigating this website with a keyboard alone, yes we do see a skip to content link but I don't get any visual

[01:22] feedback about where my keyboard cursor is on the screen. So that's issue number one. And for links that could be as simple as turning off some part of the style sheet. So let's go look at what's going on with those links. In the header

[01:40] there are these anchors for things like our work, go outside, get involved, and donate. In the Chrome developer tools if I click this little button to force the element state I can force on its focus state and see if there are any styles

[01:56] that match. And yes there is a style in the style sheet that says a colon focus and it's also matching for a colon target. This style for a colon focus with outline none important needs to go. It's problematic because it makes it so

[02:15] we can't see our focus indicator on the screen and it's also stomping out this previous style for a colon focus of an outline that's thin and dotted. If we turn that one off we should get the browser default but I'm also not seeing

[02:32] that either. So I guess this if we leave the outline thin dotted on that would be better than no visible focus style. So letting the browser default for focus indicators live on in your style sheet is a really great approach. So we've

[02:49] looked at this focus style so obviously there's some improvements that can be made to CSS to make keyboard accessibility a bit easier. Let's take a look at this mega menu as well because there are these drop downs and I've got

[03:04] the dev tools open to the first item for our work and it's obviously got some accessibility stuff attempted here. So this anchor it is reachable with the keyboard because it has this href value. It's got a role of button, aria has pop

[03:21] up of true and aria expanded of false and I'm not really quite sure why because I can't get to any of the items in the drop down menu. One thing that is kind of cool oh yeah is when one thing that is kind of cool is when this menu

[03:40] is not open it has display none so I'm not forced through these menus that I can't see when they're not open so good job there. But I can't get to these items either so they're only accessible with the mouse which is a bummer. So what we

[03:58] really need when we're tabbing through this page is I need to be able to get onto these items I need to be able to hit the enter key and have it toggle the drop down instead of taking me to say the get involved page. If get

[04:15] involved really needs to be a top-level link then perhaps we need an additional button for each one of these menu items. So maybe our work could be a link go outside could be a link and get involved and then for each one of those maybe it

[04:30] has a little button that follows that has an accessible label to say something like our work expand menu you know some little toggle button that would give us an independent item to keyboard focus on that could indicate things like ARIA has

[04:46] pop-up and ARIA expanded of true or false because as it stands right now these links can't do both things they can't navigate us to those pages and toggle menus from the keyboard or screen reader for that matter. So the mega menu could use some work because I don't know how you would get to these pages

[05:04] otherwise like maybe there they are repeated down here in the footer at least on some pages so that's good that's good news there's ways to get to these but if you're gonna go to all the work of having a mega menu might as well

[05:21] make it accessible to keyboards and screen readers it's actually really fun to do so part of my plan with the session is to come in and give some feedback to WTA because the reason I do this is not to pick on WTA it's really to be an educational resource and to highlight how we can improve things and

[05:40] there's a quite a few things that we could improve here something I'm keying into right now just by looking at it is I'm curious about this white text color over a green background and if I gosh it's a little bit hard because the menu

[05:57] doesn't stay open so when the menu is open maybe I can force it open so I'm going to turn this display none off manually over here in my styles panel and that gives me the opportunity to come in here and inspect this text which

[06:15] is white over a green background Chrome can't give me the contrast information right here in the color picker for whatever reason it's not able to sample this green background color but I have another tool I can use it's

[06:31] called CCA or color contrast analyzer I can come in here use my color picker to sample the green background color and the white foreground color just in case it's like a off-white shade or something which hey look at that it's FEFFFE for

[06:50] the hexadecimal color value so I sampled that and color contrast analyzer sure enough is telling me that this text of white text over a green background fails contrast requirements I kind of had a feeling just looking at it and so the

[07:08] issue that this has is for folks who are low vision or have you know their way that their brains perceive color we have minimum contrast requirements so that we can make text easier to see for more people right now this white text on a

[07:25] green background has a contrast ratio of 2.7 to 1 for the minimum for this type of text we really need it to be at least 4.5 to 1 so because the text is white I

[07:40] can't get much whiter I think what needs to happen is either the text needs to be darker like maybe if it was black instead of white we could play with that that would pass the minimum for the web content accessibility guidelines this

[08:00] criterion for contrast minimum that would pass if the text was black instead of white or something close to it otherwise we're looking at darkening the grit the green which you know the green is pretty prominent here on WTA org I

[08:16] think that's going to be more of a discussion often that's a brand color and it's harder to get folks to make those changes so perhaps yeah it might be an easier sell getting this text to change to black instead of darkening the

[08:30] green so a bit of color contrast feedback we could do more color sampling like that I really like that CCA tool because I can sample colors independently you know and Chrome DevTools isn't working for me I can use other tools for

[08:48] that so let's check out another page such as the hike finder map this one's interesting because it has this really interactive map on it so sort of data visualization with all of these hike locations and this is the page that has

[09:05] the wheelchair friendly accessibility settings so let's apply that I was able so I used my mouse for that and I think that's obviously how the site was built and tested but if you can't use a mouse you might have some issues navigating

[09:23] this so the focus outline issue is still a thing so for example right now I'm focused on the old map link but I don't see it so I need that visible focus outline for all of these interactive items I can't see this little dotted

[09:39] underline for trail features and ratings so while better than nothing making that more pronounced would help it would really make it stand out more so that way if I navigate onto this with my keyboard I can see it a little easier I

[09:53] am able to operate this drop-down which is great so now that it's open I can hit tab once to get into this drop-down with all of these trail features and other things other settings and I can hit tab to go between all of these checkboxes

[10:10] now they do have a visible focus style but it's really hard to see so right now I'm focused on waterfalls and it has a blue outline on the checkbox it's as opposed to a black outline on the rest of the checkboxes so really I think

[10:26] making that more pronounced would help a lot like maybe give it a bolder outline just some you know maybe a different color glow around it or something to make it more obvious we try to show focus and you know differentiate things

[10:45] with more than just color so keep that in mind but it is really cool that I'm able to tab through these items at least I can reach them so if I wanted to find wheelchair-friendly hikes with waterfalls for example I could select

[11:01] that I need to use the correct key for checkboxes which is a spacebar so if I checked the waterfalls checkbox and I hit enter to apply it there's a few there's a couple of wheelchair accessible hikes with waterfalls around

[11:19] Washington but not that many so if I wanted to go through and figure out where these are this is where more of my problems come in so I've tabbed onto the map it has a tab stop on it so I can get to the map and I can use my arrow keys

[11:35] up down left and right to move around the map but if I hit tab again I am now on a map box link I can only tell because of this link down in my status bar if I hit tab again I'm on to the button map control buttons on the side

[11:54] and a couple more map box links and now I'm back up to the top so oh there is a button I can get through to see some of these items so cool there is a way to

[12:10] actually pull up some of these that does not rely on trying to get into the data visualization because we couldn't actually reach or operate any of these circles with numbers on the map itself but I am able to get into this little

[12:26] drawer thing so what we found with color contrast up in the mega nav still applies here it's a even more so where this button is green with a white arrow and it the green over the green of the map is pretty hard to see like I'm really

[12:43] happy this has a nice visible focus outline that's the browser default I believe so that's awesome I can actually kind of see where I am but I couldn't see it quite as easily if I'm not focused on it like it the green on green is pretty hard to see so I think maybe making that giving that a black

[13:03] background that would make it more obvious to folks like say they can use a mouse but they're more low vision or you know need extra help identifying where this button is it's pretty hard to see so some contrast over the map would help

[13:18] but it's really awesome that I was able to get to this this button so I'm going to try and get back down here I think making it earlier in the tab order could be useful like put it before the map maybe since we can't really get into the

[13:35] map to get to any of these circles with numbers making this you know make it come earlier in the map page could be helpful but that's pretty awesome we can get in here so from here what I'd love to do is inspect a little bit further

[13:54] let's see what's going what else is going on on this page so I'm going to open up my developer tools on Chrome with my Mac using command option I and I can use this little icon in the Chrome DevTools toolbar to select an element in the page to inspect it so let's go look at how this map is made it's made with

[14:13] canvas which is a two-dimensional drawing tool in the web platform and so it's essentially pixels two-dimensional pixels and so there's not any accessibility information for this map it does have a label of map and a role

[14:31] of region but in terms of detail to say this is a map of Washington or that you know getting to these items that you can hover over can't really do anything from a keyboard or screen reader perspective so that's where this little drawer that

[14:51] has more information is so important one thing I did notice so when I was tabbing through these items in the drawer they when I hover over them I get a hover on the map to kind of show where this item is on the map if I'm navigating by

[15:09] keyboard however I don't get that same hover feature so that's something that would be really nice is if I'm focused on one of these items not just mouse hover I should at least be able to highlight the the item on this canvas

[15:24] map when I'm focused on these items as well if you're seeing that pop up it was because my mouse cursor was over the item so trying to make a bit more of a one-to-one experience for mouse users and keyboard users would be really great

[15:39] I think that could be some great improvements even if we can't do as much with the data visualization on the map itself like that would require a different approach maybe using SVG or you know some other technique to make

[15:56] that map more accessible than its current canvas version but there's ways around it you know I think we do have this drawer with these hikes on the side and so having that information means that people can actually get the

[16:11] information at all and so there's approaches to get the information to the people and make it as interactive as possible even if you know try and have fully accessible canvas that might not be something that that the team could

[16:27] could do so some thoughts I guess now that we're here in dev tools we've looked a little bit at the map let's see what else we can find so one tool I use quite frequently is the axe dev tools extension I've got it installed here in

[16:46] my Chrome browser so I can scan this page and have it pull up a number of accessibility issues including when this little drawer is open so axe will run with the page run on the page in whatever state it's in so if I haven't

[17:02] opened any drawers or open any menus it will only evaluate the page at that moment in time now if I open a menu or open a drawer it will run it and evaluate the markup that's visible at that time so right now we've got this

[17:17] drawer open there's some issues around color contrast so things like this the login link up at the top has a contrast ratio of 3.4 2 to 1 so as we saw it needs

[17:32] to be 4.5 to 1 and if I want to know where that link is I can have axe pointed out to me using the highlight feature so that is this login link on the my backpack called action up here oh which I didn't even realize has a menu

[17:48] as well so these items under my backpack should really be keyboard operable as well and axe can't really tell us about that that's something we need to test with our keyboard ourselves axe is not going to test that kind of thing but it will tell us about things like color contrast the way the things are

[18:07] structured so we've got some other color contrast things that come up axe is saying these are things that humans need to review it couldn't quite tell whether that's an issue or not so there's a number of those contrast issues there's

[18:23] some ID attributes that need to be unique so things on SVG looks like there's some images without alternative text so in this case there's a little arrow separator in the breadcrumb which is pretty decorative so I think adding

[18:40] an empty alt attribute would suffice since that arrow is you know it could be considered decorative if it actually had meaning we would add an alt attribute with a value within the quotes so image alt equals and then giving it a value

[18:57] but for this one I'd call it decorative and leave it the value empty so continuing on see what else there are two of those breadcrumb separator images we've also got some aria usage that's getting flagged as potentially a problem

[19:15] so we've got some inputs for the menu so more menu stuff that's a bit peculiar so there's a checkbox that's got a roll of button and I didn't even see that checkbox I think that's something that's supposed to make the menu work maybe

[19:35] it's related to mobile because I didn't see it at all so when I have axe bring my attention to something what I often will do is turn off the highlight I'll go and inspect it and see what's going on so this element has a display none

[19:49] and my hunch is that maybe that is for smaller viewport sizes so if I dock my dev tools over the right and I slide this over I'll close our little drawer

[20:01] friend here yes I think this is what those checkboxes are for so checkbox not really sure so we've got a menu button here now our menu did collapse into this

[20:17] little button so I'm going to try and select it yes label for menu so our menu

[20:29] button we cannot I can't quite tell where how to get there I don't know I'm not sure I think that checkbox being displayed none means that no one can use

[20:43] it so there's a label here and the label element is visible but it's not an interactive element it's supposed to pair with this checkbox that has a role of button I think this the whole pattern needs to get rethought because we need

[21:02] if if this checkbox element this input is supposed to be the interactive thing but it has display none on it it's like nobody can use it and so label element you know well it might be clickable with the mouse it's not something that we can use from the keyboard or from a screen reader when it's when the inputs got

[21:21] display none and I think a button would be fine you know maybe you've got two buttons instead of these two labels like let the button be the visible thing and just have more than one get rid of the checkbox because it's not actually working for anybody but you might find when you're testing stuff if you're like

[21:38] why is this element in here chances are if you make your viewport smaller you part of the story will become revealed and my hunch was correct but it didn't make any difference in terms of usability so unfortunately this pattern

[21:52] needs to be rethought so our menu coming back to axe dev tools let's see what else we find so there there was a tip-off here from axe that we should look at this element for the menu definitely needs some attention our map

[22:11] box there's an anchor that for a map box that has a role of list item and that's a bit peculiar so it's got a role of list item for something that's really

[22:26] just a link so that should go away this the role of list item should go away because it's not it's yeah it doesn't really do anything so I'm going to close this come down here look at this link so what happens when I click it it at least

[22:42] if that's the right link that takes me to a map box page so we really don't need the list box roll on there maybe there was some reason why that got added not really sure why but it can go away so we saw that one we've also got

[23:01] another one for open street map that follows this same item for some reason it's got a role of list item so list items are like in an unordered list when you have a list of items and they're they're static content they're not meant to be interactive so that is both of these instances is replacing the role

[23:21] for these anchors which have a role of link and they need that role of link so that when a screen reader user lands on these these anchor tags that they are announced as link and they work and behave as links that navigate the user

[23:36] somewhere so these roles need to go there's one more here this anchor for map box improve map this one also has role of list item so all those roles need go away and yeah so we always want to leave the roles that that an element

[23:56] comes with unless we have a really darn good reason and in this case taking off the interactive role of link and putting list item on there is the wrong way to go now it's possible that might be coming in from that box like WTA team

[24:12] might not even have control over those so then that feedback I need to go give that to map box but it's helpful when you're implementing third-party stuff like if I'm building a site with map box I can be on the lookout for stuff like this and then go give feedback to the team or you know maybe there's some

[24:31] setting I can change really this should never this role of list item should never be there for anyone or under any reason but you might not have control over it I'll have to say so let's see what else is in here we have multiple

[24:50] banner landmarks we only need one of those and so that's the top level header element so if I highlight it you can see we've got a header I can see what the

[25:02] second one is by going to inspect node so we've got two headers not really sure what they are I'm going to stop highlight here and come back to elements

[25:15] so I can see in the dev tools we've got the portal top that one's got some looks like Facebook type stuff so that one probably shouldn't be a header element

[25:30] it's making it so that our content that does go into the actual header with the page content now we have two headers so this first one should probably just be a div or something so if I change that you know functionally speaking the tag name

[25:47] because this is containing like analytics scripts and Facebook stuff it really should not be marked up as a header element which is a landmark element that a screen reader user can use to navigate content none of the stuff in here is content that's meaningful so we should really let this

[26:06] header down below that's the top level landmark that screen reader users will actually use to navigate content so that was a good tip from axe there's also a we need a main landmark to wrap content so anything that's not in the header or

[26:23] not in the footer we need to wrap in a main landmark so that would be a good thing and make sure you only have one main and that it's not nested inside of any other landmarks so it shouldn't be within header it shouldn't be within

[26:39] anything else it needs to be top level so looking at this markup we've got header we've got a you know various things one thing I could do is use my little selector here to identify what is the page content so I think a lot of

[26:59] these divs like this view it above content that's got potentially some content in it I don't quite see anything valuable but this portal column content div that could definitely go in a main landmark we just want to make sure we

[27:16] get it all so we've got a footer at the bottom currently has display none on it but that would be our top level footer landmark and then anything that's not in header or in footer that's content would go into a main landmark so I think these

[27:31] footer portlets these various elements so if we've got a template we can wrap all this stuff we want to combine it all together in one landmark to act as kind of a signpost from the main part of the page so we have another issue with our

[27:47] multiple headers good to know we can only have one banner landmark and then this last one about page content should be contained by landmarks the skip link that's the question of whether that really should be and that could be in

[28:02] the header ideally in that one top-level banner header landmark ideal but as for the rest of the stuff should really go into either header main or footer so a lot of stuff that we could find in here and I love using tools like axe because

[28:22] I didn't have to go and find all these issues with my my eyeballs which you know I'm the luxury of being able to see stuff but that's a lot of detail to pour over so this makes my job a little bit easier so much for my next steps I'll be

[28:38] giving some of this feedback to the WA team and I really want to encourage folks to realize that this isn't unique to WTA so I definitely don't want to pick on you all but with some feedback and some testing so testing with the

[28:53] keyboard and testing with screen readers and testing tools we can make the most accessible trails websites known to humankind so I'm Marcy Sutton thanks

[29:05] for joining me in the accessibility review of WTA org