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

Slides:

Advertisements

Similar presentations

HTML III. Learning Objectives HTML Links Structuring Pages with Frames Introduction to Cascading Style Sheets (CSS)

Advertisements

HTML I. HTML Hypertext mark-up language. Uses tags to identify elements of a page so that a browser such as Internet explorer can render the page on a.

HTML Basics Customizing your site using the basics of HTML.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Introduction to HTML & CSS

Accessibility, Joomla! Markup languages and you

Ideas to Layout Beginning web layout using Cascading Style Sheets (CSS). Basic ideas, practices, tools and resources for designing a tableless web site.

Presenter: James Huang Date: Sept. 26,  Introduction  Basics  Lists  Links  Forms  CSS 2.

Making Things Look Nice: Visual Appearance and CSS CMPT 281.

WAHEP Website Check-up A Look at the Project Midway Website Evaluations.

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Sue Cullen Program Manager, CSUN Universal Design Center Accessibility Network Product Testing Coordinator for the CSU ATNetwork.

Website Accessibility Testing Todd M. Weissenberger Web Accessibility Coordinator University of Iowa

HTML 5. What is HTML5? HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. The previous version of HTML came in The web has changed.

MSc. Publishing on WWW Tables and Style Sheets. Tables Tables are used to: Organize and display tabular data To create a layout for web pages.

Online Access for all POSTGRADUATE DIPLOMA IN PUBLIC COMMUNICATION (New Media) Trinity & All Saints College April 2006 Bim Egan Web Accessibility Consultant.

CM143 - Web Week 2 Basic HTML. Links and Image Tags.

1 SC Web Testers Program Training Web Testing Using the “SC Web Accessibility Tester Questionnaire” Janet Jendron

Web Program Development1 February 23, 2011 HTML Web Page Development Debbie Bartlett February 23, 2011.

1 SC Web Testers Program Training Web Testing Using the “SC Web Accessibility Tester Questionnaire” Janet Jendron

IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.

Web Tools to Evaluate Sites Using Technology to Aid in Website Evaluations Allison Yeager.

Chapter 14 Introduction to HTML

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 1 Accessibility Testing ► Accessibility Validators – Page by Page ► Listening to Your.

Basics of HTML.

 Using Microsoft Expression Web you can: › Create Web pages and Web sites › Set what you site will look like as you design it › Add text, images, multimedia.

HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.

Web Design Dreamweaver Semester 2 ATBs. ATB #1 What is a web site?

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.

Development of Accessible E- documents and Programs for the Visually Impaired Web accessibility testing (v2010)

Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Website Development with Dreamweaver.

Alternative Views of the Web Jon Gunderson, Ph.D. Division of Rehabilitation-Education Services University of Illinois at Urbana/Champaign.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

Website Accessibility Testing. Why consider accessibility People with disabilities – Visual, Hearing, Physical, Cognitive (learning, reading, attention.

Styling and theming Build campaigns in style. What we'll look at... How a web document is structured How HTML and CSS fit together Tools you will need.

Web Accessiblity Carol Gordon SIU Medical Library.

CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.

LIST OF WEB ACCESSIBILITY TOOLS GRANT MUKAI. WEB BROWSERS.

Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.

MIS 425 Lecture 3 – HTML 5 and CSS Instructor: Martin Neuhard

1 Lesson 3 Power Techniques HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

Section 508 requirements for Federal Website Design Jon Brundage MDCFUG 4/10/01.

Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.

ADA Americans with Disabilities Act. Many people with disabilities are unable to access information on websites because of a variety of barriers that.

Intro to HTML Part 2 Kin 260 Jackie Kiwata. Overview Links Images Lists.

Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 1 Accessibility Testing ► Code Validators – XHTML & CSS ► Accessibility Validators –

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 5 Key Concepts 1 Copyright © Terry Felke-Morris.

Cascading Style Sheets CSS. Source W3Schools

TOPIC II Dynamic HTML Prepared by: Nimcan Cabd Cali.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.

Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.

CSS Hadas Kahsay. Overview  What is CSS  Basic syntax of CSS Rules  How to link CSS style to html documents  Browsers and CSS  Advantages of CSS.

Objective: To describe the evolution of the Internet and the Web. Explain the need for web standards. Describe universal design. Identify benefits of accessible.

HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …

Accessible Word Document Creation Using Microsoft Word 2010.

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

Microsoft Expression Web - Illustrated Unit A: Getting Started With Microsoft Expression Web.

Introduction to HTML Hypertext Mark-up Language. HTML HTML = Hypertext Mark-up Language Is just plain simple text marked up by “tags” You can create a.

Accessibility Basics on creating accessible websites Accessibility Seth Duffey presentation for MAG Telecommunications.

Web Page Design The Basics. The Web Page A document (file) created using the HTML scripting language. A document (file) created using the HTML scripting.

The HTML5 logo was introduced by W3C in 2010

Week-12 (Lecture-1) Cascading Style Sheets (CSS): describe how documents are presented on screens. Types of Style Sheets: External Style Sheet - Define.

Web Basics: HTML/CSS/JavaScript What are they?

Introduction to HTML.

Introduction to web design discussing which languages is used for website designing

Web Design and Development

ITI 163: Web, Mobile, and Social Media Design Introduction

© 2017, Mike Murach & Associates, Inc.

Presentation transcript:

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? 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.

Where Can You Get Them? Web Accessibility Toolbar: Web Developer Toolbar: chrispederick.com/work/web- developer

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

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

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

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

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

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

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

Font Size WAT o IE, Text Size WDT o No equivalent feature

Tables WAT o Tables, Table Headers o Tables, Table Cell Order WDT o Information, Display Table Information o Information, Display Element Information

Scripts WAT o Doc Info, JavaScript / New Window Links o Doc Info, List Applets / Scripts WDT o Information, View JavaScript

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

Forms WAT o Structure, Fieldset / Labels WDT o Forms, View Form Information o Forms, Display Form Details

Questions?