Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Accessibility on the web has been an issue for over a decade, and it remains a crucial--but often overlooked--element of web design. Instructor Zoe Gillenwater explains the concept of accessibility as it applies to the web, and describes how it affects the audience. She also covers how to set up accessibility testing, and how to apply accessibility principles to new and existing sites using standards-compliant markup and CSS. Exercise files accompany the tutorials.
>> Adding emphasis is not just about making certain words and phrases stand out visually, it should be a semantic markup practice as well. Emphasized words tell your users which words are more important and enhance the meaning of your text. There are two HTML elements that you can use for emphasizing text, the M tag and the Strong tag. The HTML element named M is completely different from the unit of measurement named M that we talked about earlier. The HTML M element is used to markup pieces of text you want to emphasize.
The strong element is used to markup pieces of text you want to strongly emphasize. There's no official guidance on what makes something emphasized versus strongly emphasized, so it's up to you to decide which to use. You can use both or you could just pick one and use that throughout your site. The important thing is to just be consistent in which ones you use and how you use them to markup text. Using consistent HTML elements throughout your site for the same purpose will also help you keep your style consistent for these elements as well.
Let's use Dreamweaver to add the M and Strong elements to our page. If you're following along with the exercise files, we're working on visitors.html, which is in the 04_08 folder of the chapter four exercise files. In Dreamweaver, you use the B and I buttons on the properties inspector to set text as strong or emphasized, respectively. In previous versions of Dreamweaver, the B and I buttons on the property inspector would add B and I tags for bold and italic, but those are presentational HTML elements that don't actually tell browsers what the text is.
Strong and M have the same default appearance as B and I, so strong will be bold and M will be italic, but they carry more information. Let's first add an M element to the page. Highlight over the word perfect at the top of the page, click on the I button in the properties inspector to apply the M element to this piece of text. You can see in design view that it has now become italic. But if we look down at the tag selector below the document window, we can see that the tag being used is M, not I.
Again, this is a more semantic tag that carries more information than the I tag did. Now let's add a strong tag. Highlight over the word renowned in the third sentence of the first paragraph, click on the B button in the properties inspector to apply the strong element to this text. Again, you can see that the text is now bold, but looking at the tag selector, the tag being used it strong, not B. We can use CSS to override these defaults, just like we did with heading.
Click on the new CSS rule button at the bottom of the CSS styles panel. Click on tag for selector type. Click on the arrow of the Tag Select menu and scroll down to select strong as the tag. Leave this document only selected for the define in option. Click okay. Let's keep the strong tags bold by clicking on the Weight menu and choosing bold from the options shown.
But let's also choose a color for our strong tags. Click on the color picker icon next to the color label. Let's select a bright red for the color. Choose the color CC0000 in the middle of the color palette. Click okay to accept these rules. If we now click off of the strong text so that it's no longer highlighted, you can see that it has applied the red color to the text. By setting this color in the CSS instead of in FONT tags or other presentational markup, we're ensuring that a variety of devices will know what this text is and can present it differently to their users.
If we are consistent about using the strong tag throughout the site to emphasize text, we now have a central CSS rule that will ensure that all of them are visually consistent. This will help sighted users make better sense of the page. So we've seen how to use the strong and M elements to add more semantic information about your text. Next, we'll continue adding semantic with the blockquote HTML element.
There are currently no FAQs about Web Accessibility Principles.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.