LIST OF WEB ACCESSIBILITY TOOLS GRANT MUKAI

WEB BROWSERS

FIREFOX To illustrate the functionality of these tools, I will be using the following website as an example: You can download Firefox from

LYNX Lynx is a text-based web browser which allows you to experience a website as text-only without styling, scripting or images. Instead of images, alt tags will be displayed and text will be colorcoded based on their HTML tags. In this example, the tag has a blue background, the text is white, images are yellow and links are green. To navigate, press space to go to the next page. The up and down arrows navigate between links. Press the right arrow to follow a link and the left arrow to go back. Press G to go to a new page, / to search a page and Q to quit. If a webpage has cookies, the load will halt and you will have to press Y to accept the cookie.

DOWNLOADING LYNX Lynx runs natively on UNIX systems (Mac OS X and Ubuntu for example). To get Lynx on Windows, you will need to download Cygwin at Download and run the installer. After choosing a mirror from which to download the program, you will get a screen asking you what you want to install. Scroll down to the Web option and click the plus sign next to Web. Scroll down and in the Package column, you will look for a listing that says Lynx. Click the circular arrow icon to the left of Skip and then click next. Once the installation is finished, open Cygwin and, at the command prompt, type “lynx” followed by a space and then the website you wish to visit. For example, I typed in “lynx to arrive at my website.

ADDING EXTENSIONS TO FIREFOX Now you need to add accessibility extensions to Firefox:  Web DeveloperToolbar   Fangs 

WHAT CAN YOU DO WITH THE FIREFOX WEB DEVELOPER TOOLBAR? Note: There are too many functionalities to list so this is an overview of some of the features we are most likely to use.

DISABLE JAVASCRIPT The only Javascript I have is the drop down menus which now no longer work

DISABLE CSS

MAKE IMAGES INVISIBLE AND DISPLAY ALT TEXT

VALIDATE CSS

VALIDATE HTML

VALIDATE LINKS

VALIDATE SECTION 508 COMPLIANCE VIA CYNTHIASAYS.COM Note that the specific piece of legislation is quoted. For example, I do not have alt text for the header image which does not comply with (a)

FANGS FANGS IS LIKE A TEXT-VERSION OF JAWS. IT SHOWS HOW A SCREEN READER WOULD VIEW YOUR SITE BUT, INSTEAD OF SPEAKING THE OUTPUT, IT PRINTS IT AS TEXT ON THE SCREEN.

Once Fangs is installed, you can right-click any page and choose “View Fangs” This site is not easily accessible via a screen reader. If there were skip navigation links, they would appear at the top. Instead, Fangs reads all the menu items with no option to skip to the content.

TOOLS TO BOOKMARK Colorblind Web Page Filter Vischeck color blindness emulator for images Colour Contrast Check Juicy Studio Readability Test

COLORBLIND WEB PAGE FILTER The most common colorblindness is red-green (or potanopia. Because my site is mostly blue, as a demonstration I am going to test for tritanopia (blue- yellow colorblindness). This is what my website looks like to someone with tritanopia. Note: Pages will take a while to load as the tool will need to re-render all the images

VISCHECK COLORBLINDNESS EMULATOR

THE COLOR CONTRAST CHECK ALLOWS YOU TO TEST DIFFERENT COLORS FOR WEB ACCESIBILITY

THERE ARE THREE RESULTS YOU COULD END UP WITH: NO! Sort of YES!

JUICY STUDIO READABILITY TEST The Flesch Reading East rates your page content between The higher the number, the easier the content is to read. The score between is recommended. My website is a little lower so my biography might not be the easiest to read. With Gunning Fog index, a lower number means easier readability. So for comparison, TV guides and the Bible are a 6. Academic papers and government documents are over 20. My site is a which is between The Wall Street Journal (11) and the Guardian (14). Very fitting for a journalism background.