Requirements
Instructional Barriers – Marked Elements
Here, we begin to get technical on you. It's good to work with your local media specialist or instructional designer if this stuff has you feeling a little nervous.
Yes, digital media can be marked. We can set timers in video and audio recordings and create a table of contents. We can tag elements in hypertext (the base language for web material) so everything that's a <p> (paragraph) or <h1> (header level 1) appears the same way and is easily navigable with a screen reader.
However, it takes some understanding of both the technology and design (including visual design) to do this well. Let's cover some basic concepts, though.
Marked Elements
Consistency and good visual design are two necessary components. You really have to think through what are your main headers, subordinate headers, possibly third-level headers, and other elements. How will each be treated so they are consistent? And how will you design each of those elements so it is clear which is first, second, third order and so on?
The first part is to ensure you tag every element on a web page appropriately and consistently. You can tag some words as <p> but then stylize those words to look exactly the same as something that's a level-2 header.
Example: This is our paragraph.
The code behind the text
<p>Example: Here is our paragraph.</p>
Notice the <p> tag on both ends. In the CSS, a separate file, we define what these different tags should look like when they are displayed on the webpage. For example, we can change the color of the text, the font, the size, the spacing, and even the positioning. We could give it a background color. For example, in this website, there is a separate definition for text on this page that is actually HTML code so we can highlight it for instructional purposes. In the text above that looks like a different font and has the yellow background, that HTML code looks different:
<p class="code"><p>Example: Here is our paragraph.</p></p>
Notice the class="code" description. That calls upon a single definition in the CSS that looks like this:
.code {
color: #625e6d;
background-color: ##FFECB1;
font:"Courier New", Courier, mono;
}
We "tag" the words or lines on this page in the HTML with the CSS definition. However, that definition only has to reside in one place now for us to call upon from any page we want in the website, and anytime that definition is used, it will always be the same. This aids in consistency, and also makes modifications to styles easier because you only have to change it in one place.
This all works because the web page links to, or calls upon, the style sheet in the beginning as the page loads. The following line of code in the Header portion of the HTML code calls the spreadsheet styles:
<link href="UDL.css" rel="stylesheet" type="text/css">
This entire page is driving by one large CSS (feel free to take a look at our CSS!).
Why is this important?
For blind or visually impaired learners, this is critical. Screen recognition software, such as JAWS (learn more link) can identify only those elements tagged with a certain tag. Just as a sighted user might skim content by skipping through the bolded headings, so a learner with a screen reader can skim content by skipping through the headings tagged with an H1 or H2 and so on. They can also skim all the links (tagged with <a>) in a single shot. This allows for great flexibility in manipulating content and sorting it cognitively.
For sighted users, this means there is consistency in the material(s) of what is main ideas, subordinate ideas, etc. Let's look at that component.
For more, see our Tutorial on Creating Accessible Websites or run a search for CSS tutorials online. There are many great resources out there.
 |
 |