Free Web Development Tools: The Accessibility Toolbar

Transcription

1 Free Web Development Tools: The Accessibility Toolbar Free Web Development Tools: The Accessibility Toolbar By Many people find that learning a new web language like CSS or XHTML is tricky from a book which is heavy on the theory, and find they learn best by looking at other people s sites and seeing how they work. Of course, you can always view source in the browser to see the mark-up and check the location of the CSS file to download it, but, as Dreamweaver users, we tend to like the visual approach. Well, now for those using IE under Windows, there s a free toolbar that offers many options for visual, oneclick investigations of the structure of sites, developed by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS), Australia. Don t be fooled by the name - even if you re not designing accessible sites, it s a great way to develop your CSS and HTML skills as well, of course, check accessibility. It gives you all kinds of information about the structure and styles of the site you re visiting invaluable if you re wondering how they made that stylesheet, or learning modern coding techniques. It s free to download from This is what it looks like after the two-minute installation (and at 450K it s a fast download, too): Clicking on many of the menu options causes a window to pop-up with the information that you need (so, if like me, you re running the Google toolbar as well, you ll need to temporarily enable pop-up windows). Going left to right across the toolbar, the options are Accessible Info Solutions. o his leads to the developers web site, National Information Library Service, and their services o Help and Update the Toolbar (currently in beta 0.9) o Uninstall toolbar. (As an aside, I love applications which have an easy-tofind uninstall mechanism. How come every app doesn t do this?) o Help, About, and Contact Us which fires up your mail client. Validation This is a great timesaver, as it allows you to submit the currently browsed URL to the W3C validators for (X)HTML, CSS, as well as P3P (privacy) validation and the Page 1 of 10

2 Web Design Group s HTML validator. As you know, you can validate your own sites in Dreamweaver, but this is a great way of testing to compliance of competitor s sites. Resolution This is a handy way of checking how much of a site can be seen in a browser of certain common screen resolutions 640 x 480, 800 x 600 and 1024 x 768. It doesn t change your display characteristics, but resizes the browser to that resolution, allowing you to see what is above and below the fold in those different sizes. Styles Now things get really interesting! With this button you can: o Turn CSS on or off, which is helpful to see how a non-css browser will render a page (e.g., PDA, ancient browsers, screen readers). Here s with the CSS on, then off and even without styling, you can get all the in formation and it all reads in the correct order: Zeldman.com with CSS (IE6 Win) Page 2 of 10

3 Zeldman.com, unstyled. o Toggle all inline CSS on/ off o Report any deprecated HTML. This redisplays the page, with any deprecated HTML tags shown in red. Here s the homepage of amazon.com: Amazon.com with deprecated tags highlighted as you can see, there s a couple of <center> tags and two <font> tags. o Show style sheet. Ever wanted to see how other people do their stuff? Make sure your pop-up blocker is off, if you have one, and select this option. Here s DMXzone: Page 3 of 10

4 DMXzone s stylesheet pops up in a new window. Sometimes, the style sheet doesn t show because it s in a different directory. For example, if you try Zeldman s site, a window pops up url( /c/z.css );. Hacking the URL to will allow you to see the CSS. Assuming Dreamweaver is on your system with its default set-up, the system will automatically fire up Dreamweaver and import that CSS. Obviously, I don t need to point out that CSS files are copyright, just like designs or HTML and JavaScript; the fact that you can see them doesn t mean you can borrow them, unless a comment in the file explicitly says that you can. o Test StyleSheet. A very cool option; a window pops up and you can input your own CSS rules and watch them amend the site you re browsing! Here s my own site with a new CSS rule turning my beautiful text into evil Comic Sans MS. Page 4 of 10

5 Yikes! It s Comic Sans! Nooooooo! Fortunately, the changes only show when the rule-input window is open and, of course, only affect your machine s local copy of the site. Phew! Fun to play with and see how someone else s site works; if you can t see what a rule does, change it to something daft and see the results. Images Options under this menu are: o Image List, which spawns a new window, displaying each image used in the page, the html of each <img> tag, the real pixel dimensions of the image (not necessarily the dimensions it is displayed with in the tag) and the size of the image in bytes. o Toggle Image/ Alt turns off images and replaces them with their <alt> text, so you can check for accessibility of a site s images. o Show Images this option displays the img alt text in red next to the image. Document Structure The next option allows you to see various structural items in the current page. If you click on each one after the other, the page will soon fill up with red tags. If, after looking at one set of structural items, you want to clear them before looking at another set of structural tags, hit refresh. Page 5 of 10

6 o Headers. This shows you all <h1> to <h6> tags, Looking at the Amnesty International site, shows an interesting structural anomaly. Headers in amnesty.org The first header an <h1> - says Stop Child Executions, and is followed by an <h2> with further details. This is followed by two subsequent <h2> tags about North Korea and Germany. The fact that they re under the Child execution header suggests that they re in that subject matter but they re not. They should be <h1> tags in their own right. (Other schools of thought suggest that there should only be one <h1> tag per page, and everything else should be under that. Either way, the Amnesty site s headers are incorrectly marked up.) o List items. This shows all list tags. If we look at Molly s personal site, molly.com, we can see that she does indeed practice the Web Standards mark-up that she preaches. There s two lists in the screenshot below, the left-hand list being navigation, styled to omit bullets: Page 6 of 10

7 List items in molly.com o The next interesting items are those to do with Tables. Here s Microsoft.com with the Simple Date Table item chosen: of nested table cells in further Table options are show table borders which is great if you re trying to strip out nested tables and replace them with CSS as Rachel describes in her Page 7 of 10

8 article Taking CSS Further. Here s the BBC site with coloured lines describing the table structure: The BBC website with table borders coloured in. A great option to help you develop Accessible pages is the Linearize: Remove Tables, which shows you the order that your site would be read out using a screenreader. o Show DIVs. On sites with CSS, this option shows the order that the DIVs appear in the source (not necessarily anything to do with their positions on the screen), and therefore the order that a screen-reader would read them. On my own site (again, yes I know, but I knew it would fit the example!) you can see that, although the navigation is on the left, before the main content, the nav is div 3 and the content is div 2, meaning that the content would be read out first: Page 8 of 10

9 Order of DIVs in source (not on-screen order) displayed. o Colours. This option is mostly for accessibility development; you can see a site in greyscale, get an analysis of the contrast of a site (so expect a rebuke for those designery grey-text-on-white-background sites!). A useful function lists all the (html) colours in a page so you can quickly get the hex codes for some colours that take your fancy but only if they re in the mark-up or css; coloured graphics don t get listed. Here s the listing for google; note that the red, green and yellow in the logo aren t listed as they re contained in a graphic. Tools this is another option aimed predominantly for the accessibility designer; the option to submit the current page to various accessibility evaluators (Bobby, Page 9 of 10

10 Cynthia Says etc). There s useful options to (temporarily) disable mouse clicks, JavaScript etc to see if your page will still work, and a useful links analyser from Juicy Studios that tests every link in your page. Meta Information shows Metadata, page weight, lists links, tables, PDFs etc References quick links to W3 specs, a JavaScript, CSS, HTML, XHTML reference, and web accessibility references. Summary This is an excellent tool for designers looking to see how CSS and Accessibility works in the wild. I found it very useful to see how other web sites that I admire are constructed, and the fact that it s free is an excellent bonus. Recommended. Page 10 of 10