Tip:
Highlight text to annotate it
X
Okay so now what I'm going to do is show you some of the cooler features that are new inside
the current beta for FireEyes. The first I'm going to show you is one which is very unique
to FireEyes in that we don't know another product that can do this. And that's this
focus.. visible focus indicator analysis. So really what this button does is when you
press this what it'll do is analyze all of the elements on the page and it will show
you the elements for which it could not detect a visible focus indicator. Now visible focus
indicator is really something that tells the user, the sighted user in this case but sighted
user that may not have the ability to use the mouse or may be using a screen reader
in combination with a screen magnifier or something who still wants to be able see the
elements that they are interacting with or needs to see the elements they're interacting
with they may be using the keyboard to get to them. And so, if something doesn't have
a visual focus indicator obviously a bad issue. So what we found here by clicking the highlight
button over here, it'll actually highlight for us all the elements for which it could
not find the visual focus indicator. So you can see the Facebook image over here must
have anchor tag or something behind it that's focusable. These input - the email and password
elements over here, the login button itself does not have a focus indicator. All of these
input elements over here do not have a focus indicator. Interesting that some of them do.
And then the signup button itself does not have a focus indicator. So let's actually
look at this. What happens if we try to be a keyboard user and navigate through this
page. So we go to the email. We'll put the focus into that and notice that it shows the
caret but really that is not enough of a visual focus indicator to really help the user with
sight issues to actually determine that. If we actually tab into the next one, the password
field, the same thing. And then when we tab, it takes me to that checkbox and then another
tab and now we don't know where the focus is gone so now for.. obviously for, you know,
somebody using a screen magnifier or somebody who's slightly, you know, without the ability
to use a mouse, this is a very confusing situation to get into. If we tab again, we still don't
know where we are. We tab again. Oh, now we're on the "Forgot your password?" link. Tab again
and we go into these elements which also have the caret but that's not really enough of
a focus indicator for people with sighted issues. Then into the dropdown, which has
a focus indicator. It's not a very good one but it is one. Then into the signup and the
signup as you'll notice also does not have a visual focus indicator. So what this feature
allows you to do is to very quickly hone in on those (elements), in this case on this
page, which do not have a good enough visual focus indicator to be noticeable by the users.
So that's a new feature. Let me show you another feature. I'm going to clear everything here.
I'm going then to go to the yahoo.com page. Now, Yahoo! is actually a pretty good company
when it comes to accessibility. They're one of the pioneers with ARIA. And what we've
implemented in the new version beta 4 of FireEyes is enhanced ARIA analysis rules and so I'm
going to do that. I'm going to click this ARIA button and what it's going to do is analyze
statically for me all the ARIA attributes, all the ARIA roles, and make sure the dependencies
work. So what you'll notice here if I open up the issues list and look at the details
for this is that it's telling me that a required ARIA attribute is missing. Now in this case,
we can go through this and look for what that might be. Look at this one over here - details.
It's telling me that an.. this element has an ARIA attribute with an invalid value. Now,
this means that the value (rather than) not the correct type is referencing the value
( that id) does not exist. So if we look here, the only ARIA attribute which it has here
is "ARIA labelledby" and the value is "pa -u" blah blah blah. So what I'm going to do
is I'm going to copy this. I'm going to inspect this using the Firebug inspector and see if
I can find that element with that ID and as I search through the document here going from
next to next, you'll see there's only one occurrence of that and that is an actual ARIA
'labelledby' reference itself. So what Worldspace FireEyes is showing you is that very quickly,
you can analyze a very complex page because this Yahoo page is very complex, very big,
got a lot of ARIA stuff in it. You can analyze this big page and hone in on the one -two
small issues that you have and you'll see that in this case, there are 2 different types
of issues on the ARIA page - one where there required ARIA attributes that are missing
and those have to do with roles and certain roles require certain attributes. And the
other one which is quite comprehensive and quite ubiquitous on this page is that there
are "labelledby"s that are pointing to IDs that don't exist on the page. So once again
FireEyes allows you to quickly hone in on those issues, figure out what's going on with
them and fix them.