HTML Markup for Accessibility You Never Knew About

Transcription

1 HTML Markup for Accessibility You Never Knew About David Epler June 27, 2004

2 HTML Revisions HTML 2.0 November 1995 Base version everyone learned HTML 3.2 January 1997 Tried to reconcile browser-war tags Officially added tables and frames HTML 4.01 December 1999 Deprecated layout tags Added more table and form tags XHTML 1.0 January 2000 Made HTML 4.01 well-formed XML

3 Structural Markup Helps Accessibility Structure in your document means something Helps disabled users figure out what is important Search engines rate higher Google is the biggest blind user on the Internet

4 <h1>...<h6> are not Evil! Possibly the best tags to provide document structure Utilizing CSS, they aren't ugly Most screen readers have a mode to read just the headings on a page

5 Tags You Don't Use or Misuse Tags you've probably used <em> (2.0) - Indicates emphasis <strong> (2.0) - Indicates stronger emphasis Tags for quotations <blockquote> (2.0) indicates large quotation <q> (4.0) used for single line quotations <cite> (2.0) - Contains a citation or a reference to other sources

6 Forgotten Structure Tags Screen & Code <code> (2.0) - Designates a fragment of computer code <var> (2.0) - Indicates an instance of a variable or program argument <samp> (2.0) - Designates sample output from programs, scripts, etc <kbd> (2.0) - Indicates text to be entered by the user

7 Abbreviations, Acronyms, and Initialisms.. So what are the differences Abbreviation - letter or letters, standing for a word or phrase of which they are a part (e.g. U.S.A.) Acronym - word formed from the initial letters or by combining initial letters or parts of a series of words (e.g. radar) Initialism - an abbreviation consisting of the first letter or letters of words in a phrase (e.g. FBI) HTML 4.0 introduced <abbr> and <acronym> Lars Holst - Abbreviations and acronyms

8 SNAFU Internet Explorer doesn't support <abbr> Using Dean Edward's IE 7 fixes Work around using <span> and CSS Acrobot - Abbreviation & Acronym Generator

9 List Tags Everyone knows about <ol> - Ordered Lists <ul> - Unordered Lists The 3 rd type of list, Definition Lists <dl> - Definition List <dt> - Definition term <dd> - Definition Max Design - Definition Lists

10 Form Tags HTML 4.0 added 5 new tags for forms <button> - provides a better control than <input type= button...> <optgroup> - groups <option> <label> - defines relationship between a form control text labels <fieldset> - groups related form controls <legend> - labels a fieldset See Sandra Clark's presentation on Creating Accessible Web Forms

11 <noscript> & <noframes> Both were added in HTML 4.0 Easiest way to generate content for user agents that do not support given functionality

12 Tables HTML 3.2 officially added table support with the following tags <table> <caption> <tr> <th> <td>

13 Table Header and Footers W3C added to the functionality of tables in HTML 4.0 <thead> <tfoot> <tbody> Provide a method of grouping rows Order of the tags matter

14 Scope Attribute Used for simple data tables to provide data cell with header information Values for scope row header information from the row col header information from the column rowgroup header information from row group colgroup header information from column group

15 Header Attribute Used for complex data tables Using id attribute on <th> to give unique names for headers The ids defined are then used in the headers attribute Can have multiple ids, it is a space delimited list

16 <colgroup> & <col> <colgroup> defines a group of columns in the table and allows you to set properties of those columns Used directly after <table> and before any other tags <col> Used within <colgroup> to set properties for a specific column Cols may be defined within colgroups or outside

17 Other Table Attributes <table> summary provides a summary of the table rules specifies which rules will appear between cells within a table frame specifies which sides of the frame surrounding a table will be visible <th> & <td> abbr abbreviation to use instead axis used to create a list of category names that form the basis of a query which is executed against the cells forming the table

18 Tools W3C MarkUp Validator Web Developer Extention for Mozilla/Firefox DevEdge Netscape Sidebar Tabs Web Accessibility Toolbar for IE IBM Home Page Reader 3.0

19 Resources & References W3C HTML 4.01 Spec WebAIM Techniques UMD - Web Design Accessibility Accessify.com

20 Books Designing with Web Standards by Jeffrey Zeldman Building Accessible Web Sites by Joe Clark More Eric Meyer on CSS by Eric Meyer

21 Thank You Please fill out the evaluation Be sure to see Sandra Clark's Creating Accessible Web Forms