Falcon Online is fully accessible. However, we must ensure that content we provide via Falcon Online is also accessible. HTML is the preferred format for any online content including online course materials so let's first cover the general requirements for HTML files to include the proper use of:
All the requirements discussed are also applicable to other course content formats. So in the following sections, you will learn how to apply them to develop accessible Microsoft Office and Adobe Acrobat PDF documents.
HTML headings are titles or subtitles that you want to display on a webpage. HTML headings are defined with the <h1> to <h6> tags. The heading <h1> defines the most important heading, and <h6> define the least important heading.
Search engines use the headings to index the structure and content of your web pages. Users often skim a page by its headings. It is important to use headings to show the document structure. <h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on. Use HTML headings for headings only. Don't use headings to make text BIG or bold.
To preserve tab order and to make it easier for screen readers to read your documents, use a logical heading order.
For example, organize headings in the prescribed logical order. Use Heading 1, Heading 2, and then Heading 3, rather than Heading 3, Heading 1, and then Heading 2. And organize the information in your documents into small chunks. Ideally, each heading would include only a few paragraphs.
Heading order can be difficult to determine visually in Falcon Online; but this is one of the search criteria built into the Accessibility Checker in the HTML Editor (icon appears in the toolbar as an eye and check mark). You can also click on each heading and apply a built-in heading style to it.
Links are found in nearly all web pages. Links allow users to click their way from page to page. The HTML <a> tag defines a hyperlink. It has the following syntax:<a href="url">link text</a> The most important attribute of the <a> element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text will send the reader to the specified URL address.
By default, links will appear as follows in all browsers:
Add meaningful hyperlink text so that screen readers convey meaningful statements rather than a series of letters, numerals, and symbols. This also helps readers not using this technology to understand where they are going before they link out.
People who use screen readers sometimes scan a list of links. Links should convey clear and accurate information about the destination. For example, instead of linking to the text Click here, include the full title of the destination page.
To determine whether hyperlink text makes sense as standalone information and whether it gives readers accurate information about the destination target, visually scan your document.
In the Falcon Online HTML Editor, the fastest way to insert a meaningful link is the Insert Quicklink button of the toolbar. Place the correct URL in the space so marked, and the desired display text in the “Title” field. You can also select your target destination from this screen. As a best practice, we suggest having the page open in a new window.
HTML lists allow web developers to group a set of related items in lists. An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default.
An unordered HTML list:
An ordered HTML list:
HTML also supports description lists. A description list is a list of terms, with a description of each term. The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.
By formatting lists properly, visual readers can quickly identify relationships between text items, and screen readers will identify the list, reading items in their correct order.
Bulleted and numbered lists can be created in Falcon Online using the List button of the HTML Editor toolbar.
HTML tables allow web developers to arrange data into rows and columns. A table in HTML consists of table cells inside rows and columns.
Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything between <td> and </td> are the content of the table cell.
Each table row starts with a <tr> and end with a </tr> tag. tr stands for table row. You can have as many rows as you like in a table, just make sure that the number of cells are the same in each row.
Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag. By default, the text in <th> elements are bold and centered.
Use a simple table structure for data only (not for formatting) and specify column header information. Screen readers use header information to identify rows and columns. Screen readers keep track of their location in a table by counting table cells. If a table is nested within another table or if a cell is merged or split, the screen reader loses count and can’t provide helpful information about the table after that point. Blank cells in a table could also mislead someone using a screen reader into thinking that there is nothing more in the table.
You can visually scan your tables to check that they don't have any completely blank rows or columns.
HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values. In HTML, a color can be specified by using a color name: HTML supports 140 standard color names. You can set the background color for HTML elements <h1 style="background-color:DodgerBlue;">Hello World</h1>, you can set the color of text <h1 style="color:Tomato;">Hello World</h1>, and you can set the color of borders <h1 style="border:2px solid Tomato;">Hello World</h1>.
WCAG 2.0 requires that the foreground and background colors have a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA. You can use the WebAIM contrast checker tool to determine what the ratio is between any foreground and background color.
WCAG 2.0 also requires (at Level A) that color not be used as the sole method of conveying content or distinguishing visual elements. They further define this requirement for links with Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.” This means that if you do not underline your links (or provide some other non-color designator for links), that the links must be sufficiently different in contrast from the surrounding text.
So, if you combine these two requirements, to be Level AA conformant, your page must have all the following:
In other words, your link color must be significantly different from the background color AND the surrounding text color, which also must be significantly different from the background color.
If you start exploring this, you’ll find that this requirement leaves only a small window of available page and link colors. For example, if your page has black text on a white background and you use the standard blue color for links, the link color must be between approximately this color of blue (#6a5eff) and this color of blue (#531fff). Any lighter or darker and it will not have sufficient contrast to the adjacent black text or to the white background, respectively.
And if your text/background colors aren’t pure black and white, this significantly narrows or eliminates the window of colors with sufficient contrast.
Images can improve the design and the appearance of a web page. The HTML <img> tag is used to embed an image in a web page. The <img> tag is empty, it contains attributes only, and does not have a closing tag. <img src="url" alt="alternatetext">
The <img> tag has two required attributes:
The required src attribute specifies the path (URL) to the image. The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader). The value of the alt attribute should describe the image. Remember not to include phrases such as “picture of” in your alt text, because that information will be duplicated by a screen reader.
You can use the style attribute to specify the width and height of an image. <img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes. The width and height attributes always define the width and height of the image in pixels. <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width, height, and style attributes are all valid in HTML. However, it is often recommended to use the style attribute because it prevents styles sheets from changing the size of images.
To make an image responsive, you need to set two properties. Add image using the <img> tag and add CSS style for height and max-width to make it responsive. For example, style="height:auto;max-width:100%;"
To check the responsiveness of an image, resize the browser tab. If the image resizes correctly, then it means it is responsive.
The HTML <video> element is used to show a video on a web page. To show a video in HTML, use the <video> element. There are three supported video formats: MP4, WebM, and Ogg. Ogg files are not compatible with the Safari browser. The MP4 format is recommended by YouTube. The most common way to discover the type of a file is to look at the file extension.
Example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
The controls attribute adds video controls, like play, pause, and volume.
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.
The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.
To start a video automatically, use the autoplay attribute.
Example:
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Add muted after autoplay to let your video start playing automatically (but muted).
Example:
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Making a video responsive with CSS is no different than making an image responsive.
The HTML should look like this:
<video>
<source src="your_video.mp4">
Your browser does not support the video tag.
</video>
While the CSS to make the video responsive should look like this:
video {width: 100%; min-width: 300px;}
Normally you will just need to set width:100%;, and leave the height at auto (default) in responsive designs, but if you also want to handle content jumping problems, then you also need to define the height of the media files you are including.
For accessibility purposes, please ensure that all video elements are either closed-captioned or accompanied by a transcript. Ideally, make it a descriptive transcript that also includes text description of the visual information. Descriptive transcripts are required to provide video content to people who are both Deaf and blind. YouTube will automatically create captions for videos hosted on that site; but please review the accuracy of any captions that were generated automatically and make corrections when necessary.
Use the following link for a descriptive transcript example.
The HTML <audio> element is used to play an audio file on a web page. To play an audio file in HTML, use the <audio> element. The controls attribute adds audio controls, like play, pause, and volume. The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. Audio formats supported by HTML include MP3, WAV, and OGG. OGG is not compatible with Apple Safari. The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element. Here’s an example:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
To start an audio file automatically, use the autoplay attribute:
<audio controls autoplay>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Add muted after autoplay to let your audio file start playing automatically (but muted):
<audio controls autoplay muted>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
For accessibility purposes, please ensure that all audio elements are accompanied by a transcript that is a text version of the speech and non-speech audio information.