View
0
Download
0
Category
Preview:
Citation preview
1 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Accessible HTML Training
Creating the Template
1. Open HTML program.
2. Select File – New – HTML – Create.
(This is how the document should look)
3. Where it says <html>, add the language English like this: <html lang=”en”>
4. After the meta tag (<meta charset=“utf-8”>), include this other meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=5.0, user-scalable=yes">
5. Where it says <title>, include the Module # + the type of document. For video
lectures include the module title.
(e.g. “Module 2 – Reading: What is Disruptive Innovation” and “Module 7 -
Case Study: Yahoo!”)
For video lecture use: Module # + Course title
6. After the <title> tag, add the <style> tag like this:
2 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
<style> table, td, th {border: 1px solid gray;} </style>
7. After the <body>, write <div role="main"> and before </body> write </div>
Everything should look like this:
8. Between <div> and </div>, you can start creating the document
**Saving the File** HTMLs for the eLearning Office should be saved using the
standardized format, Course Name + Module #. Like this:
BADM 590 Digital Media and Marketing Strategies Module 3
Adding information
1. Headings. The first step is to add headings. Heading levels will be determined
based on the document. For example: for readings (in most cases) use
a. Heading 1: Module # and course title
b. Heading 2: “Couse reading: …”
c. Heading 3: Source + Date, Authors, and sub-headings inside the
reading
d. Heading 4: Activities inside the reading
3 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
For video lectures:
a. Heading 1: Module # and course title
b. Heading 2: Lesson
c. Heading 3: Sub-lesson
d. Heading 4: Slide title + slide #
Note: Video Lecture slides need unique titles in HTML. If slides
appear with the same title (back to back) we must add (# of #) to the
end. Like this: Vanity Metrics (1 of 2) – Slide 11
e. Heading 5: Transcript title
For live session:
a. Heading 1: Live Session # and course title
b. Heading 2: Extra title (if applicable) and by (professor’s name)
Note: Heading 2 should also be used for sub-section titles. The
image of the sub-section title slide is not necessary. See example
below.
c. Heading 3: Slide # + slide title
Note: You can NEVER skip headings. <h1> should be followed by <h2> and <h2>
followed by another <h2> or an <h3> and so on… If less than five heading levels
are used that is OK.
2. Paragraph. Represented by the tag <p> </p>. <p> needs to be placed at the
beginning of the information and </p> at the end.
If there are multiple paragraphs, each of them needs to start with <p> and
end with </p>.
4 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Lists. Lists should be used only when there is more than one item in a level. If
there is only one item, add it to the end of the item it belongs to. It should look
like this:
3. Unordered list. Represented by the tag <ul> </ul>. <ul> needs to be placed
at the beginning of the list and </ul> at the end. The unordered list is shown as
bullet points. In order to create the list to show up every piece of information,
every item has to have <li> </li> tags. It should look like this:
This is how the HTML looks:
Whenever there are nested items inside an item of the list, the </li> of this
item needs to be placed at the end of the nested list. It should look like this:
5 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
This is how the HTML looks:
Note 1: Sometimes nested items can be confusing for some students using screen
readers. If the students feel it is easier for them to understand just one level lists,
try to arrange the list by using the “bigger” item as a paragraph. For example:
4. Ordered list. Represented by the tag <ol> </ol>. <ol> needs to be placed at
the beginning of the list and </ol> at the end. The ordered list is shown as
numerical or alphabetical. In order to create the list to show up every piece of
information, every item has to have <li> </li> tags. It should look like this:
6 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
When using the <ol> tag, the default type is numbers. If you want to use
letters, you have to include type=“…” inside the <ol> tag. In the example
below, the ordered list was alphabetical, so this had to be specified in the
tag as type=“A”.
This is how the HTML looks:
Similar with an unordered list, whenever there are nested items inside an
item of the list, the </li> of this item needs to be placed at the end of the
nested list. Please refer to Note 1 in the previous step for additional
information about nested items.
5. Description list. Should only be used when words are listed with true
definitions. Represented by the tag <dl> </dl>. <dl> needs to be placed at the
beginning of the list and </dl> at the end. Each term must be accompanied by
<dt> and </dt> and each definition by <dd> and </dd>. It should look like this:
6. Sometimes the information uses both a paragraph form and an unordered
or ordered list. In this case, the <p> tag needs to be placed at the beginning
of the paragraph information and </p> tag where the paragraph ends. <p> tag
should NEVER be included inside the ordered or unordered list. It should look
like this:
7 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
This is how the HTML looks:
7. Figure descriptions are usually presented in a paragraph form. Figures
include: diagrams, flowcharts, graphs. The description should include all the
information from the figure. Here is an example:
Note: Sometimes professors and TAs send these descriptions because they have
the necessary knowledge to accurately describe the images. Ask your
supervisor.
8. Image description. Make a short description of what you are seeing in the
image and include it below the slide image. DO NOT included it in the alt text
inside the image tag of the slide.
Note: Images that do not add context do not need descriptions such as
decorative clipart.
How the HTML looks
8 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
9. Tables. To add a table, click on Insert – Table. A window will pop-up asking
for table size, header, and accessibility.
In table size, write the number of rows and columns needed. Choose the
header that best represents the table you are creating. In accessibility –
caption, write a UNIQUE table title.
If one table is appearing multiple times in the same document, use something
to differentiate them at the end of the table title. Example: For video lectures
you can use the slide#
9 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
• The program will automatically start with the tag <table width: “…”
border=“1”>. DELETE the width and the border attributes and just
leave the <table> tag.
• No width should be included in any part of the table.
Note: In Dreamweaver, you can write either directly on the table (the view
must be on design) or in the codes section.
If you don’t have this HTML editor, manually write the table headers, table
rows, data cells, and any other additional (necessary) codes used below.
For simple tables, this is how a table should look:
Each table row is defined with the <tr> tag, the table header is defined with
the <th> tag, and the data/cell is defined with the <td> tag.
<th> tag should always have the scope information inside the tag. When
there are column headers use a scope of “col” and when there are row
headers use a scope of “row.”
This is how the HTML looks:
10 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Whenever you need to merge rows, use the tag rowspan=“(number of rows
to merge)” inside the <th> or <td> tags. Whenever you need to merge
columns, use the tag colspan=“(number of columns to merge)” inside the
<th> or >td> tags. It should look like this:
In Dreamweaver, to merge cells, you can also select the cells in the table,
right-click, and select table-merge cells.
Make sure to change the empty headers from <th> to <td>. Nothing should
be inside these <td> unless it is the merging codes.
For complex tables with both rows and columns headers, include UNIQUE ids for
each header, even if you have to repeat the table several times. They should
appear inside the <th> tag as id=“…”
DO NOT use symbols like &, # % or () as part of the id.
11 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Once the ids are created, include the pertinent header information inside the
data cells. They should appear inside the <td> tag as header=“…” To
determine which headers to include in each cell, go back to the table and
look for the row(s) and column(s) headers that belong to each particular cell.
It should look like this:
This is how the HTML looks:
If there are multiple row and column headers, the second-level header
should specify to which first-level header it belongs. Inside the <th> tag,
include the headers=“…” It should look like this:
12 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
This is how the HTML looks:
Sometimes, the first-level headers and the second-level headers can be
combined for better understanding. For example, in the example before you
can include just one level of headers like this:
Sometimes, organizational charts and flowcharts can be done in table formats.
Here are some examples:
First-level header
Second-level
header
13 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Note: When doing these tables, it is common not to have headers if they are not
determined in the charts.
10. Website link can be added by selecting the website link and clicking Insert –
Hyperlink (Dreamweaver). A window will pop-up asking to insert text and the
link. If you select the website link first, the information will automatically come
out. Then, click OK.
14 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
This is how the HTML and the code look when using a hyperlink.
If you don’t use Dreamweaver, use the format in the previous image to create
the hyperlinks.
Whenever there is a group of links presented together, use <div
role="navigation" aria-label="top management"> and </div> at the beginning and
end of the links’ list. Do not use it when there are just one or two links.
11. Mathematical terms. Whenever there is a mathematical term, use the
following website to search for any needed terms. Then, add the tag between
& and ; into the document and the term will show up in the HTML file.
https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_refe
rences
For subtracting ALWAYS use − for multiplying × for dividing ÷
Note: If the expressions are complex, including subscript and superscript items,
this means you need to use additional sources to create these expressions. Ask
your supervisor.
15 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
12. Excel. When the courses include Excel spreadsheets (e.g. BADM 572
Statistics) make sure to include a link to the Excel documents. Use the
following code:
<p><a href="Excel_Document_Title.xlsx" target="_blank">Download the Excel
Title excel file <img src="Images/new-window.png" alt="Opens in a new window"
width="13" height="13"/></a></p>
It should look like this:
Make sure to include this image in the “Images” folder with the name “new-
window.png”.
13. Excel descriptions. When describing Excel instructions make sure to always
write the functions in capital letters. (e.g. =MEAN, =STD.DEV, =AVERAGE).
In this description, AVOID using the word “Click”. Instead use words like choose,
open, select.
14. Local links. When mentioning the source of the data, create a local link that
would allow people to go directly to it. (e.g. The slide shows the same
information as the one presented in Slide# 17).
Here, the local link will allow the person to go back to slide 17 and look for the
information. To do so:
Write <a href=”#slide17”> whenever slide 17 is mentioned. Then, go to slide 17
and inside the corresponding heading include an ID. In this case, the ID should
be the same as the one used in the <a> tag, but without the #. It should look like
this:
16 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Make sure the local link is clickable.
15. When the slide has the same information of a previous slide use the aria-
describedby code. Example: The slide shows the same histogram as the one
presented in the previous slide. Here, the histogram is the item that is
repeated, therefore use an <a href=“#...” aria-describedby=“…”> tag around
this item. It should look like this:
The slide shows two of the <a href="#histogram" aria-
describedby="histogram">histograms</a> presented in the previous slide.
Here, the href and aria-describedby names are the same. The only difference is
the # sign.
Then, go to the previous slide that talked about the histogram and write an ID with
the same name used in the href and aria-describedby codes, but without the #
sign.
It should look like this:
16. Table of content. To create the TOC, make a list of the sections you want to
include in the table. Each element of the list should have the <a href=”#...”>
tag with a UNIQUE name. This name should also appear in the ID of the
pertinent section in the HTML. It should look like this:
17 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
For video lectures use the same procedure previously described and include the
following information:
➢ Inside the <style> tag add this information:
#toc_container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
width: auto;}
.toc_title {
font-weight: 700;
text-align: center;}
18 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
#toc_container li, #toc_container ul, #toc_container ul li{
list-style: outside none none !important;}
#skip a {
background: transparent none repeat scroll 0 0;
border-bottom: 1px solid white;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid white;
color: white;
font-size: 0.9rem;
left: 40%;
padding: 6px;
position: absolute;
top: -48px;
transition: top 1s ease-out 0s, background 1s linear 0s;
z-index: 100;}
#skip a:focus {
background: #fff none repeat scroll 0 0;
color: black;
left: 40%;
outline: 0 none;
position: absolute;
top: 0;
transition: top 0.1s ease-in 0s, background 0.5s linear 0s;}
19 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
➢ Start the TOC with:
<a href="#h2_1">Skip the table of Content</a>
<div id="toc_container">
<h2 class="toc_title">Contents</h2>
<div class="toc_list">
➢ Then use <h3> tag for heading 2s and ordered lists for heading 3s. It should
look like this:
All this information creates a particular design to the table of content and allows to
skip the table if wanted.
The href used for every item should also appear in the ID of the pertinent section in
the HTML.
DO NOT FORGET to close the TOC by adding </div></div> before continuing the
document.
20 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
This is how the HTML looks:
17. Capital letters. Whenever there are words in capital letters that are not
acronyms, write the following code with the word in lower case letters. Like
this: <span class="uc">always</span>.
Make sure that at the beginning of the HTML, inside the <style> tag, it says: “.uc
{text-transform:uppercase;}”
With this information the word will look in capital letters (ALWAYS), but the screen
reader will read it as a whole word and not as an acronym (A-L-W-A-Y-S).
18. Acronyms and abbreviations. Whenever there is an acronym use the span
sr-text tag around the acronym. Provide the full name or definition of the
acronym when introduced the first time with the acronym in parentheses. Like
this: American Institute of Certified Public Accountants <span class=”sr-
text”>(A I C P A)</span><span aria-hidden=”true”>(AICPA)</span>
This tag will only work if you add the following code inside the style tag:
.sr-text{
position: absolute;
overflow:hidden;
clip: rect(1px, 1px, 1px, 1px);
width: 1px;
height: 1px;
}.
21 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
There is also the <abbr> tag that can be used for abbreviations and acronyms,
but this tag does not code for the entire word or definition to be read aloud by
screen reader. When the learner hovers over the abbreviation/acronym, the
word/definition is shown. The <abbr> tag looks like this:
<abbr title=”Mister”>Mr.</abbr>
<abbr title=”World Health Organization”>WHO</abbr>
The abbr tag is typically recommended, but for the eLearning Office we are
using the sr-text tag instead because it fits our accessibility needs.
19. References. For slides that have numbers connected to a reference in the
document, use the following information.
➢ Inside the <style> tag add this information:
footer {
margin-top: 50px;
border-top: 1px solid silver;
}
footer ol {
padding-left: 20px;
}
counter {
vertical-align: super;
font-size: 0.5em;
margin-left: 2px;
color: blue;
text-decoration: underline;
22 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
cursor: pointer;
}
[aria-describedby="Ref-label"] {
text-decoration: none;
color: inherit;
cursor: default;
outline: none;
}
[aria-describedby="Ref-label"]::after {
vertical-align: super;
font-size: 0.5em;
margin-left: 2px;
color: blue;
text-decoration: underline;
cursor: pointer;
}
[aria-describedby="Ref-label"]:focus::after {
outline: thin dotted;
outline-offset: 2px;
}
[aria-label="Back to content"] {
font-size: 0.8em;
}
23 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
footer :target {
background: yellow;
}
.visually-hidden {
position: absolute;
clip: rect(0 0 0 0);
visibility: hidden;
opacity: 0;
}
➢ Then, go to the part of the slide that has the number of the reference. Each
number should have the <a href=”#...” aria-describedby=“…” id=“…”> tag
with a different name for each of the portions of the tag. It should look like
this:
<a href="#Ref1" aria-describedby="Ref-label" id="Ref_1">
The only name that will not change throughout the entire document is the aria-
describedby portion of the tag. The rest of the names must be UNIQUE across the
document.
➢ After writing these tags, use the <counter>[ ]</counter> tag. This tag should
appear after the <a> tag described before. Inside the square brackets write
the number that corresponds to each reference. It should look like this:
<a href="#Ref1" aria-describedby="Ref-label"
id="Ref_1"><counter>[1]</counter></a>
➢ Now, go to the reference list created at the end of the document.
o The reference title should have an ID with the same name used for
the aria-describedby portion.
24 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
o The list item that corresponds to each of the numbers should have an
ID with the same name used for the href portion, but without the #
sign.
o At the end of each reference write: <a href="#Ref_1" aria-
label="Back to content">↩</a>. Here, the href is the id portion of
the <a> tag.
➢ DON’T FORGET to include the <footer> tag at the beginning of the
reference list and </footer> tag at the end of the reference list.
This is how the HTML should look like this:
20. Additional information.
25 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
a. Use <strong> for bold information rather than <b> and <em> for italics
rather than <i>. If all text on a slide is bolded/italicized, there is nothing
to emphasize and we can skip these tags.
b. NEVER use underline in HTML. Underline means “link” to a screen
reader. Use <em> to create italicized information whenever the content
is underlined.
c. Whenever there is a source reference, use the <cite> code between
the title of the reference. (e.g. Bandura, A. <cite>Self-efficacy
mechanism in human agency.</cite> 1982. American Psychologist, 37,
122-147.)
d. Use the <blockquote> tag for long quotes. Include <p> tag within the
<blockquote> tag to indicate each separate paragraph. It should look
like this:
e. For video lectures: When there is no transcript provided for any of the
slides, write: “No instruction provided during this slide.”
Adding images
1. In the same level where the document is saved, create a folder called
“Images.”
2. In the HTML use the code: <img src= “Images/???.png” width=“…”
height=“…” alt=“”>
• In most cases the width is 450 and the height is 250. However, if these
dimensions do not fit the image’s proportions, try to adjust them
proportionally.
• Before the .png write a unique name for the image. This name needs to
be consistent with the name you give the image in the “Images” folder.
26 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Example: For video lectures use module number-lesson number-sub-
lesson number_slide(slide number).
• The alt text needs to be empty.
• Do not include any title in the image tag. This can be confusing for
screen reader users.
3. Finally, there are several ways to insert the images into the HTML document.
• First option: First, while adding the information, change the name of the
image in the image tag. Then, go to where the image is located. Make a
right click and select the “save image as” option.
Go to the Image folder you created and save the image(s) with the same name as
the one you wrote in the HTML. After this process, the images will appear in the
HTML document.
• Second option: First, go to where the image is located and select it. Then,
paste it in the designated space of the HTML document. A window will pop-
up asking for the image optimization. Select PNG 8 in the format option and
click OK.
Module 2 – Lesson 1 - Sub-lesson 1_slide1
27 eLearning Office in the College of Business at the University of Illinois at Urbana-Champaign
Once you click OK, another window will pop-up asking to “save as” the
image.
Select the corresponding folder and save the image with the same name as
the one you wrote in the HTML. Finally, adjust the width and the height.
• Third option (JUST FOR PPTs): Download the PPT for the document you
are working on. Then click:
Home – Save as – select the folder - change the type option to PNG –
click save.
A window will pop-up asking which slides you want to export. Click “All the
slides” option. Once making this process, change each image’s name with
the same name as the one you wrote in the HTML.
Recommended