ACC100

Topic Objectives (1 of 8)

Topic Objectives

Topic Overview

The goals of this topic are to give you the basic tools and information to construct and evaluate your course pages using the proper accessibility standards. Complying with the proper HTML structure may not mean that the code complies with accessibility standards or best practices. We will see examples of both properly and improperly formed HTML with respect to the accesibility standards.

Alt and LongDesc Attribute (2 of 8)

Alt and LongDesc Attribute

Image Alt & Long Description Attribute

Alt Attribute

Whenever an image is included within instructional materials, it should always include some accompanying information to help describe the image and it’s significance to a vision impaired user. When we talk about images in web design, we have many methods available to add accessibility. The foremost of these methods is to add alt tags to all images that we have included.

Alt tags are included as an attribute of the <img> tag. The alt attribute is read buy assistive technologies such as a screen reader but not printed to the computer screen. An alt tag attribute should include a description of the image it is attached to. When a screen reader comes to an image, regardless of it having an alt tag attribute, it will verbally say “Graphic” followed by the alt tag’s included description. If the alt tag is not included, the user will simply hear, “Graphic” with no explanation of what the graphic is. The description of the image can vary depending on its context.

Alt tags should be no longer than 125 characters (including whitespace), otherwise JAWS screen reader will subdivide the description. If your description is going to be longer than the 125 characters, you will need to use the Long Description attribute.

(Insert code in action)

Long Description Attribute

Long Description (longdesc) allows authors to provide a longer description of an image that you can with the alt attribute by using a separate HTML page. Rather than inserting the description in the quotations provided after the longdesc attribute, you would put a URL in its place. The URL will point to a separate page that can accurately provide the description without length or content restriction.

(Insert code in action)

Hyperlink Tag Index (3 of 8)

Hyperlink Tag Index

Tab Index

Tab indexing is a way of numbering links and controlling the way a keyboard will navigate to links on a page. This is done by adding the tab index attribute within the hyperlink's code. Elements that support the tabindex attribute are; link (a), area, buttons, input, object, select, and textarea.

<a href="" tabindex="1"></a>
<area href="" tabindex="1" type="rect" coords="" />
<button tabindex="1" name="" value="" id="" />
<input tabindex="1" name="" value="" id="" />
<object tabindex="1" name="" value="" id="" />
<select tabindex="1" name="" value="" id="" ></select>
<textarea tabindex="1" cols="30" rows="4"></textarea>

Title Attribute (4 of 8)

Title Attribute

<a href="" title="Resources">Resource Page</a>

CSS and Scripts (5 of 8)

CSS and Scripts

Elements like CSS and scripts should exist separately from the HTML code itself.

CSS

All styling should be handled externally from the HTML by using CSS. The CSS code should also live externally in a separate .css file that the HTML simply includes within the head tags.

Java Script*

The JavaScript functions should live externally from the HTML in a .js file. Calls to the .js file and functions should be the only JavaScript code included within the HTML file itself.

When using JavaScript in a page, the Page and content should continue to be available, accessible, and functional when JavaScript is disabled. An example outside of navigation and linking to content in new windows would be to have the answer to a question hidden until the user initiates an action to reveal the answer such as clicking on a button. When JavaScript is disabled, you may loose the intended purpose however, the answer should reveal itself in the initial rendering of the page.

Tables (6 of 8)

Tables

Table Types

Tables can be used in a few different ways. One is to use them to structure your web page which is considered a layout table. Layout tables are discussed more in depth in Lesson 2: Structure and Style. Since we want to talk about the HTML aspect of tables we will cover data tables and the importance of utilizing all the proper elements HTML has to offer.

Data Tables

Properly formatting data tables will ensure that assistive technologies such as screen readers can access and navigate the tables as well as ensure that the user is receiving the best possible understanding of the information that the data table contains. A well-formatted table will include a few basic elements beyond the typical table row (tr) and table data (td) tags. Other tags often forgotten include <caption>, <thead>, <tbody>, <tfoot>, and <th>. A properly formatted table resembles the basic structure of an HTML page. Much like the <html> <head> </head> <body> </body> </html> scheme, a table has a <table> <thead> </thead> <tbody> </tbody> </table> scheme. To pass as a functional web page, the structure for the html elements, are mandatory. A table that does not have these elements exactly as described in the following sections are not mandatory to print the table out to the page. For a data table to be accessible however, these elements are very important.

Table Caption and Summary

Caption

All tables should include a <caption> tag that gives the table a title so that assistive technologies can properly identify and navigate among them. This becomes very important when a page contains multiple data table. Without the <caption> tag, a screen reader will identify the table with one long string of all the contents it holds. When a page contains multiple table, the user can navigate from one table to the next with a keyboard shortcut. Because of this, it is important to have a <caption> tag so that the user can hear the titles and chose the table relevant to what they are searching for.

Summary

Much like the alt attribute used for images, tables use a summary attribute within the opening <table> tag that should describe the information that the table contains. This description is meant to be a generalized overview of the contents and not a detailed report. The summary attribute will not visibly appear on the web page but screen readers will be able to access and read the descriptions to the user.

Table Headers, Body & Footer

Headers

There are two different types of tables elements that are considered a head. There is the table head <thead> and a header cell <th>. The header cell tag, <th>, is used in place of the <td> tags when the contents of the cell are meant to define the data to follow in either a row or a column. If the header cell defines a column, the <th> tag should include the attribute scope=”col”. Likewise, if the header cell defines a row, the <th> tag should include the attribute scope=”row”. For headers that are long, you can use the “abbr” attribute for an abbreviation. For a heading that is Chiquita Bananas the abbreviation could appear as follows: <th abbr=”bananas”>Chiquita Bananas</th>

Often, the first row of a table will be made of headers for the columns and there are now row headers in the table. In this case, it is acceptable to omit the scope attribute from the <th> tag. Even if there are row headers included, if the first row of cells are all column headers, they should be contained within the table header tags <thead>, much like <head> is used for an html page structure. The row header cells will then still be contained outside the <thead> tags. The big difference between the table head tags and the head tags used for the html information is that anything within the <thead> tag will render on the screen, with the exception of the summary attribute.

Body & Footer

The majority of the table data, including the row headers, will be contained within the <tbody> tags. The body tags are used to group the main data content together. The <tfoot> tag can be used to hold an additional row of the header cells and display them at the bottom of the table.

<table border="1" cellpadding="0" cellspacing="0" summary="Example table of a student's schedule" width="67%">
        <caption>COURSES</caption>
        <thead>
            <tr>
                <th id="course" scope="col" width="20%">
                    <p>Course</p>
                </th>
                <th id="section" scope="col" width="20%">
                    <p>Section</p>
                </th>
                <th id="time" scope="col" width="20%">
                    <p>Time</p>
                </th>
                <th id="location" scope="col" width="20%">
                    <p>Location</p>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th headers="course" id="biology331" scope="row" width="20%">
                    <p>Biology 331</p>
                </th>
                <td headers="section biology331" width="20%">
                    <p>001</p>
                </td>
                <td headers="time biology331" width="20%">
                    <p>1:15 M W F</p>
                </td>
                <td headers="location biology331" width="20%">
                    <p>214 Willard</p>
                </td>
            </tr>
            <tr>
                <th headers="course" id="biology412" scope="row" width="20%">
                    <p>Biology 412</p>
                </th>
                <td headers="section biology412" width="20%">
                    <p>003</p>
                </td>
                <td headers="time biology412" width="20%">
                    <p>1:45 T Th</p>
                </td>
                <td headers="location biology412" width="20%">
                    <p>112 Willard</p>
                </td>
            </tr>
            <tr>
                <th headers="course" id="math21" scope="row" width="20%">
                    <p>Math 021</p>
                </th>
                <td headers="section math21" width="20%">
                    <p>005</p>
                </td>
                <td headers="time math21" width="20%">
                    <p>3:45 M W F</p>
                </td>
                <td headers="location math21" width="20%">
                    <p>008 Sparks</p>
                </td>
            </tr>
            <tr>
                <th headers="course" id="english15" scope="row" width="20%">
                    <p>English 015</p>
                </th>
                <td headers="section english15" width="20%">
                    <p>001</p>
                </td>
                <td headers="time english15" width="20%">
                    <p>8:15 M W F</p>
                </td>
                <td headers="location english15" width="20%">
                    <p>012 Burrows</p>
                </td>
            </tr>
            <tr>
                <th headers="course" id="history100" scope="row" width="20%">
                    <p>History 100</p>
                </th>
                <td headers="section history100" width="20%">
                    <p>002</p>
                </td>
                <td headers="time history100" width="20%">
                    <p>11:30 M W F</p>
                </td>
                <td headers="location history100" width="20%">
                    <p>035 Thomas</p>
                </td>
            </tr>
        </tbody>
   </table>

COURSES
Course	Section	Time	Location
Biology 331	001	1:15 M W F	214 Willard
Biology 412	003	1:45 T Th	112 Willard
Math 021	005	3:45 MWF	008 Sparks
English 015	001	8:15 MWF	012 Burrows
History 100	002	11:30 MWF	035 Thomas

Empty Table Cells

If it is possible, you should avoid including empty cells within your tables. Sometimes empty cells are used to separate headers from the table data but screen readers will voice the word “blank” when they come to an instance of an empty cell. If a table is a collection of data where some information is either not provided or unknown, then the empty cell is useful in showing missing data and a screen reader will convey that by voicing the word “blank”.

COURSES
Course	Course Number	Section	Time	Location
Biology	331	001	1:15 M W F	214 Willard
Biology	412	003	1:45 T Th	112 Willard
Math	021	005	3:45 MWF	008 Sparks
English	015	001		012 Burrows
History	100	002	11:30 MWF	035 Thomas

Add "Hear it read"

Lists (7 of 8)

Lists

Lists are a great way to organize short, key points and data. Lists should not be used for large amounts of information that is in a paragraph form. If you are going to use a list, it should make sense for the content to be in a list form. Lists are best used for short and quick information. The type of lists should make sense for the information you are presenting. If it is a list of steps you need to take, an ordered list makes sense. If you have a list of ingredients in a recipe, then an unordered list would make sense. Lists can also be good when used for giving key terms and their definitions at the start or the end of a lesson. If you use a list format for key terms and definitions, be sure to use a Definition List style markup.

Definition lists

Example:

Key Terms/Concepts

Articles of Incorporation: (also known as the Certificate of Incorporation) the legal documentation required by the incorporating state that identifies the business name, purpose, location, incorporators, stock provisions, and so on. Once the incorporation is approved by the state, the articles and the state’s approval become the Corporate Charter.
C-Corporation: a standard corporation under the law with limited liability for its stockholders. The corporation is taxed as a legal entity and the stockholders are taxed for the income earned in the form of stock dividends they receive.
Corporation: a legal entity formed under law with separate, independent liability from its owners. An artificial entity that is owned by stockholders or shareholders whose liability is limited to the extent of their investment in the business.
Franchise: a business agreement where a parent company (the franchisor/franchiser) gives exclusive rights to certain products/services, business name, product concept, or business system to a local business (the franchisee) in exchange for fees, royalties, and some control over certain aspects of the local business operation.
General Partnership: all partners share in managing and operating the business and assume personal liability for the acts of the other partners and the business debts.
Joint Venture: a temporary partnership formed by two or more organizations for a specific, limited profit-making purpose.
Limited Liability Company: a relatively new form of ownership that combines the individual tax benefits of a partnership with the limited liability benefits of a corporation.
Limited Partnership: a business which is managed by and is the unlimited responsibility of the general partner(s). Limited partners do not participate in the management of the business and are financially liable only to the extent of their investment into the business.
Partnership: a legal association of two or more individuals to co-own a business, for the purpose of earning a profit for the owners.
Partnership Agreement: (also known as the articles of partnership or co-partnership) the legal document developed at the onset of the partnership outlining the rights, duties and responsibilities of the partners. If no such document exists, the partnership will be governed by the Uniform Partnership Act.
S-Corporation: a special corporation that can be established under the Internal Revenue Service Code if certain provisions are met. It retains all of the rights of a C-Corporation but does not have double taxation. Corporate income is passed on to the owners and taxed at the individual rates.
Sole Proprietorship: a business owned and managed by one individual. It is the oldest and most popular form of business ownership.
Unlimited Liability: the business owner is personally responsible for the debts of the business.

Example Code:

<h1>Definitions List: Key Terms/Concepts</h1>
<dl>
   <dt>
        <strong>Articles of Incorporation </strong></dt>
   <dd>
        (also known as the Certificate of Incorporation) the legal documentation required by the incorporating state that identifies the business name, purpose, location, incorporators, stock provisions, and so on. Once the incorporation is approved by the state, the articles and the state's approval become the Corporate Charter.</dd>

   <dt>
        <strong>C-Corporation</strong></dt>
   <dd>
        a standard corporation under the law with limited liability for its stockholders. The corporation is taxed as a legal entity and the stockholders are taxed for the income earned in the form of stock dividends they receive.</dd>

   <dt>
        <strong>Corporation</strong></dt>
   <dd>
        a legal entity formed under law with separate, independent liability from its owners. An artificial entity that is owned by stockholders or shareholders whose liability is limited to the extent of their investment in the business.</dd>

   <dt>
        <strong>Franchise </strong></dt>
   <dd>
        a business agreement where a parent company (the franchisor/franchiser) gives exclusive rights to certain products/services, business name, product concept, or business system to a local business (the franchisee) in exchange for fees, royalties, and some control over certain aspects of the local business operation.</dd>

   <dt>
        <strong>General Partnership </strong></dt>
   <dd>
        all partners share in managing and operating the business and assume personal liability for the acts of the other partners and the business debts.</dd>

   <dt>
        <strong>Joint Venture</strong></dt>
   <dd>
        a temporary partnership formed by two or more organizations for a specific, limited profit-making purpose.</dd>

   <dt>
        <strong>Limited Liability Company </strong></dt>
   <dd>
        a relatively new form of ownership that combines the individual tax benefits of a partnership with the limited liability benefits of a corporation.</dd>

   <dt>
        <strong>Limited Partnership</strong></dt>
   <dd>
        a business which is managed by and is the unlimited responsibility of the general partner(s). Limited partners do not participate in the management of the business and are financially liable only to the extent of their investment into the business.</dd>

   <dt>
        <strong>Partnership</strong></dt>
   <dd>
        a legal association of two or more individuals to co-own a business, for the purpose of earning a profit for the owners.</dd>

   <dt>
        <strong>Partnership Agreement</strong></dt>
   <dd>
        (also known as the articles of partnership or co-partnership) the legal document developed at the onset of the partnership outlining the rights, duties and responsibilities of the partners. If no such document exists, the partnership will be governed by the Uniform Partnership Act.</dd>

   <dt>
        <strong>S-Corporation </strong></dt>
   <dd>
        a special corporation that can be established under the Internal Revenue Service Code if certain provisions are met. It retains all of the rights of a C-Corporation but does not have double taxation. Corporate income is passed on to the owners and taxed at the individual rates.</dd>

   <dt>
        <strong>Sole Proprietorship</strong></dt>
   <dd>
        a business owned and managed by one individual. It is the oldest and most popular form of business ownership.</dd>

   <dt>
        <strong>Unlimited Liability</strong></dt>
   <dd>
        the business owner is personally responsible for the debts of the business.</dd>
</dl>

Links (8 of 8)

Links

Naming Links

You can use one of two formats.

1. If you are going to use an in-line link, make the link descriptive to what you are linking to.
Example: For more information, you can visit the Penn State Home page.

In this example the link is named in a meaningful way to tell you where the link is taking you but also flows well within the sentence.

2. You can list the link outside of the sentence itself.
Example: For more information, you can visit the Penn State home page. Penn State Home

In this case, you also want to make the link name something meaningful to where the link takes you, not just the URL. The difference here is that the link name itself is not constrained to making the sentence flow well.

Example: More information on Penn State's Admissions statistics can be found at the following link: Admissions Statistics for Penn State

In this case, we lead with "Admissions Statistics" in the link name due to the way users of assistive technology search for links. If they read that sentence and know that they want to find enrollment statistics, and they are already on a Penn State web page, a larger percentage of uses just assume the Penn State involvement in the statistics, therefor they will use the links shortcut key and press the first letter of the expected link name, which in this case would be A for Admissions statistics. If we lead the link name with Penn State, they would not be able to get to the link quickly and would have to listen through all links until they heard the link that states enrollment statistics.

In all cases, you will want to be sure to include the title attribute for the link (title="Penn State Home"). This will in most cases match the link name shown if that name properly states what the link points to.