Accessibility Testing Favlets/Bookmarklets

[START OF TRANSCRIPT]

alrighty what is up everyone in this video I'm going to be showing you how to use a Favlet or sometimes also known as a bookmarklet and so join me on to the website that I've created I created a blog post talking about accessibility tests and Favlets.

and so a Favlets is essentially a piece of code that is saved as essentially like a script or a bookmarklet that we're just planning on running so I have these saved they're also provided here on the content you can even actually just click on these items if I click on this ANDI link down here there's an ANDI link in the main content now I have andy running because the piece of code that powers ANDI is activated and so it's so I don't have to click on this special link provided here you could save it into your bookmarklet or as a bookmark

and run it there

so if I click on Favlets, aria -Favlet now I'm actually able to see all these items the way I like to do this

is I'm going to make a test folder

all right

so here I have an empty bookmarklet, unfortunately, you can't see it on the screen all you have to do is one by one drag these to your bookmark and that is how you're going to have all these Favlets one of my favorite Favlets is maybe using like the heading Favlets it'll show you all the different headings available on the screen here we have an h1 and you can do this you use these tablets as you're testing for accessibility they're very uh handy sometimes you'll run into a page it doesn't have a focus outline and so you could use the focus rectangle Favlets to add an easier to see uh focus outline so now it's red that was due to the Favlets I actually inspect the code we'll see that these Favlets are actually just links with javascript that'll actually just run on the page there you have it that's how you download a Favlets thanks for watching!

[END OF TRANSCRIPT]