accessible html training - university of...

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:


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


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:



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:


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


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


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#


• 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.”



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.


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:


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:



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


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.


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.

https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references


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>


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:


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.


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:


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;}


#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;}


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



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;

}.


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;


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;

}


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.


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.


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.


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


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.

accessible html training - university of...

Documents