ACCESSIBILITY An Introduction. Accessibility Accessibility is the degree to which a product, device, service, or environment is available to as many people.

Slides:



Advertisements
Similar presentations
AHEAD HTML Accessibility Topics: Keyboard Accessibility Content and Structure Links Headings and Lists Images in HTML Pages Tables Forms.
Advertisements

HTML popo.
Introduction to HTML & CSS
XHTML Week Two Web Design. 2 What is XHTML? XHTML is the current standard for HTML Newest generation of HTML (post-HTML 4) but has many new features which.
Creating Pages in XHTML
1 HTML Standards & Compliance. 2 Minimum Required HTML tags: (must go in this order!)
XHTML Basics.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 3: XHTML Coding © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page.
Site Development Foundations © 2004 ProsoftTraining All rights reserved.
Beginning Web Site Creation: Dreamweaver CS4 Noreen Brown XHTML CODING -- TAGS.
XHTML II DIGITAL MEDIA: COMMUNICATION AND DESIGN F2007.
HTML Introduction HTML
IV. “Regular” Web Pages: HTML A Web Accessibility Primer: Usability for Everyone Office of Web Communications.
Tutorial 3: Adding and Formatting Text. 2 Objectives Session 3.1 Type text into a page Copy text from a document and paste it into a page Check for spelling.
HTML Code HTML can be written on the simplest text programs. A web page is defined by the tag.
Introduction to HTML. What is a Web site? A collection of "pages" or files linked together and available on the World Wide Web What do you need to create.
Chapter 9 Collecting Data with Forms. A form on a web page consists of form objects such as text boxes or radio buttons into which users type information.
Basics of HTML.
CpSc 462/662: Database Management Systems (DBMS) (TEXNH Approach) HTML Basics James Wang.
HTML & XHTML Introduction. First HTML 1992 Marked-up text to represent a hypertext document for transmission over the network The hypertext mark-up language.
Headings, Paragraphs, Formatting, Links, Head, CSS, Images
DAT602 Database Application Development Lecture 14 HTML.
Week 1.  Phillip Chee   Ext.1214 
CS 299 – Web Programming and Design Introduction to HTML.
HTML (HyperText Markup Language)
Chapter 2 HTML Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
XHTML. Introduction to XHTML What Is XHTML? – XHTML stands for EXtensible HyperText Markup Language – XHTML is almost identical to HTML 4.01 – XHTML is.
Title, meta, link, script.  The title looks like:  The tag defines the title of the document in the browser toolbar.  It also: ◦ Provides a title for.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
XP Dreamweaver 8.0 Tutorial 3 1 Adding Text and Formatting Text with CSS Styles.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
Design and Construction of Accessible Web Sites Michael Burks Chairman Internet Society SIG For Internet Accessibility for People with Disabilities June.
USABILITY An Introduction. Usability “..usability really just means making sure that something works well: that a person of average (or even below average)
XP Tutorial 9 1 Working with XHTML. XP SGML 2 Standard Generalized Markup Language (SGML) A standard for specifying markup languages. Large, complex standard.
 2008 Pearson Education, Inc. All rights reserved Introduction to XHTML.
INTRODUCTORY Tutorial 1 Using HTML Tags to Create Web Pages.
WEB ACCESSIBILITY. WHAT IS IT? Web accessibility means that people with disabilities can use the Web. Web accessibility encompasses all disabilities that.
HTML: Hyptertext Markup Language Doman’s Sections.
Lesson 4.
CPT 499 Internet Skills for Educators Session Ten Class Notes.
1 Web Application Programming Presented by: Mehwish Shafiq.
L. Anne Spencer (c) 2001 Basic Web Design Document, text, & layout formatting tags & attributes.
Tutorial 3 Adding and Formatting Text with CSS Styles.
Adobe Dreamweaver CS3 Developing a Web Page. Planning the Page Layout Use White SpaceUse White Space Limit media objectsLimit media objects KISSKISS Use.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Basic Document Structure.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML tags and attributes By: Dennis Champagne. List of tags.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Web Design – Week 2 Introduction to website basics Website basics: How the Web Works Client / server architecture Packet switching URL components.
Tutorial #1 Using HTML to Create Web Pages. HTML, XHTML, and CSS HTML – HyperText Markup Language The tags the browser uses to define the content of the.
HTML Tutorial. What is HTML HTML is a markup language for describing web documents (web pages) HTML documents are described by HTML tags Each HTML tag.
Chapter 4 and 5. Objectives Introduce markup: elements and attributes How browsers interpret HTML documents Basic structure of HTML document What do style.
Introduction to HTML Dave Edsall IAGenWeb County Coordinator’s Conference June 30, 2007.
HTML for web designing short course. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file must have an htm or html file extension.
XP Including Comments in an HTML Document On a new blank line in an HTML document, type the start code for a comment:
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 1 Using HTML to Create Web Pages.
Finally getting to html and CSS… Tim Berners-Lee, the writer of the software program that makes him the inventor of the WWW, defines the Internet as a.
INTRO TO WEB DEVELOPMENT html
XHTML Basics.
XHTML Basics.
XHTML Basics.
Creating Accessible Electronic Documents
XHTML Basics.
Understand basic HTML and CSS terminology, concepts, and basic operations. Objective 3.01.
Common Page Design Elements
Pertemuan 1 Desain web Pertemuan 1
XHTML Basics.
Lesson 2: HTML5 Coding.
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Presentation transcript:

ACCESSIBILITY An Introduction

Accessibility Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. Accessibility can be viewed as the “ability to access” and benefit from some system or entity.

Accessibility Use up-to-date, well-formed HTML and CSS Use all recommended tags (!DOCTYPE, title, meta, etc.) Make sure all tags are properly nested and closed Make sure styles written correctly Don’t use deprecated tags like, Don’t use deprecated attributes like align=“” See

Accessibility Make sure each page has a unique, descriptive title Poor Good

Accessibility Provide metadata that identifies author, type of content, keywords, character set, etc.

Accessibility Make proper hierarchical use of headings (h1 first, followed by h2 for the first level of subheading, etc.).

Accessibility Mark up quotations properly; use tags around quotes and around actual blockquotes. Do not use quotation markup for formatting effects such as indentation. Place the tag with a title attribute around any (and every) abbreviation. For example: KISS. Use real horizontal rules, not images.

Accessibility Make sure all images have alt attributes. For example:

Accessibility Clearly identify the target of each link. For example, don't write: “For more information about baseball click here.”click here Instead write something more specific like: “ See more information about baseball.” See more information about baseball

Accessibility Add title attributes to link tags, especially if the target of the link is not clear from the context. For example: See more information about baseball

Accessibility Navigation menus should be grouped and labeled. For example, use an ordered or unordered list with an ID Another possibility is surrounding a group of links with a either a set of tags or tags with an ID

Accessibility Provided non-link, printable characters (surrounded by spaces) between adjacent links. For example: Home | Search | Contact –or– [Home] [Search] [Contact] [Site map] HomeSearchContactHomeSearchContactSite map

Accessibility Use navigation mechanisms in a consistent manner— navigation menus should look and behave the same on all pages (persistent navigation). Don’t use images as links

Accessibility If you choose to use graphic text—whether it be page titles, site ID's, fancy headings or buttons—make sure there is a text alternative, either visible on the page, or hidden in such a way that it will become visible when images are hidden and/or CSS turned-off. One way we can accomplish this by using a CSS-based image replacement method.

Accessibility Use high contrast for text. GoodBad

Accessibility Dark text on light backgrounds is preferable to light text on dark backgrounds GoodBad

Accessibility Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.

Accessibility Put navigation links and menus after the page's main content in the markup. You can reposition the navigation using CSS.

Accessibility Put navigation links and menus after the page's main content in the markup. You can reposition the navigation using CSS.

Accessibility Put navigation links and menus after the page's main content in the markup. You can reposition the navigation using CSS. Alternatively, you could provide a "skip to main content" link at the top of each page.