1 / 17

Browser Toolbars You Shouldn’t Do Without

Browser Toolbars You Shouldn’t Do Without. How the WAT and WDT Can Help You Design Accessible Websites. Overview. What are the WAT and WDT? Where can you get them? How can they help? How do they work ?. What Are the WAT and WDT?.

aurelia-allison
Download Presentation

Browser Toolbars You Shouldn’t Do Without

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Browser Toolbars You Shouldn’t Do Without How the WAT and WDT Can Help You Design Accessible Websites

  2. Overview • What are the WAT and WDT? • Where can you get them? • How can they help? • How do they work?

  3. What Are the WAT and WDT? • Both are web browser toolbars designed to make developing websites easier. • The Web Accessibility Toolbar (WAT) runs on Internet Explorer and Opera. • The Web Developer Toolbar (WDT) runs on Firefox and Chrome.

  4. Where Can You Get Them? • Web Accessibility Toolbar:www.paciellogroup.com/resources • Web Developer Toolbar:chrispederick.com/work/web-developer

  5. How Can They Help? • They CAN make it easier to evaluate the accessibility of a web page. • They CAN’T make subjective judgments.

  6. How Do They Work? Let’s look at how each toolbar can help you evaluate the most importantaccessibility checkpoints.

  7. Title and Headers • WAT • Doc Info, Page Information • Structure, Headings/Heading Structure • WDT • Information, View Page Information • Information, View Document Outline

  8. Cascading Style Sheets (CSS) • WAT • CSS, Disable CSS • CSS, Disable inline styles • WDT • CSS, Disable Styles • CSS, Display CSS By Media Type

  9. Skip Nav and Hyperlink Text • WAT • Doc Info, List Links • WDT • No equivalent feature. Information, View Link Information only displays a list of URLs.

  10. Alternative Text • WAT • Images, List Images • Images, Show Images • WDT • Images, Display Alt Attributes • Images, View Image Information • Images, Replace Images With Alt Attributes

  11. Color • WAT • Colour, Greyscale • Colour, Juicy Studio Contrast Analyser, Contrast Analyser – all tests • WDT • Disable, Disable Page Colors

  12. Font Size • WAT • IE, Text Size • WDT • No equivalent feature

  13. Tables • WAT • Tables, Table Headers • Tables, Table Cell Order • WDT • Information, Display Table Information • Information, Display Element Information

  14. Scripts • WAT • Doc Info, JavaScript / New Window Links • Doc Info, List Applets / Scripts • WDT • Information, View JavaScript

  15. Plug-ins and Multimedia • WAT • Doc Info, List Downloadable Files • Doc Info, List Multimedia Files • WDT • Information, Display Object Information

  16. Forms • WAT • Structure, Fieldset / Labels • WDT • Forms, View Form Information • Forms, Display Form Details

  17. Questions?

More Related