Week02 02 HTML element & attribute - UX-UI-Design-Lab/DH150-UX-WebCoding GitHub Wiki
Objectives:
- understand html elements and attribute
- activity: accessibility audit (automated testing, screen-reader, manual testing)
- ARIA + tabindex attribute
- (advanced: concepts of xml, json) vs. xhtml
Now we get a bit familiar to html tags, let's try more. I will start with the semantic structure from the top and briefly cover the elements that are used in that context. It is useful to know what kind of html structure behind what you see on the website. For example, this getty research site has, nav, header (logo), side-menu(left), main contents, side-menu(right), and footer.
|
 |
If you use inspect > Elements, you can see the black menu bar (Exhibitions & Events, Special Collections, ...) has id="smoothmenu1" (and class ="ddsmoothmenu", we will learn about class next week). Inside of that <div id="smoothmenu1" ...>, you can see <ul> and many <li> and </li>. This structure is a list - and you can use it for bulleted list (= ul means unordered list). Many recent menus that may have submenu with drop-down list have this tags.
You can use ordered list <ol> for numbered list. Definition list <dl> is the specific cases when you want to provide a term <dt> with a description <dd>
https://accessibility.oregonstate.edu/lists
https://www.w3.org/TR/WCAG20-TECHS/H40.html
https://www.w3.org/WAI/tutorials/page-structure/content/
The table allows you to organize the information by 2-dimensional space. It is very visually oriented metaphor, because for the web-accessibility, or if you want to understand the information by listening (ex. Alexa, read the table ini the document), the information needs to be spread out into linear form (either following row - horizontal or column - vertical). Calendar is also the form of table, which we need to improve in terms of accessibility. so, keep in mind that weakness of tabulated data. I used a table to show the image in two columns above.
<table>
<tr>
<td> <img src="https://UX-UI-Design-Lab.github.io/DH150-UX-WebCoding/Getty-research-top.png" width="300px"></td>
<td> <img src="https://UX-UI-Design-Lab.github.io/DH150-UX-WebCoding/Getty-research-bottom.png" width="300px"> </td>
</tr>
</table>
But you may want to add more tags to make the table accessible. For that case, please check here: https://www.w3.org/WAI/tutorials/tables/
Another useful element to group the supplementary information together is <figure>. For example, the image can be presented with the captions, and figure can include the <figcaption> for the caption and the main image.
<figure>
<figcaption>G3: SpaceBear sales volume</figcaption>
<img src="…" alt="SpaceBear sales diagram, showing the huge success in Q4" longdesc="…">
<a href="…">Long Description</a>
</figure>
There are some tags used only for wrapping the contents (so, let's say, it is like a transparent-see-through- plastic bag). <div> is used for block (bulk of elements) for almost every kind of situation for grouping. <span> is, however, for fragment of text that you want to isolate from the others within the line. They are often used to apply distinguished style. We will test those <div> and <span> when we move forward to css(styling).
<p> is for paragraph - a block of text. It is supposed to be a text paragraph, so some browsers do not like to mix up with list <li> within <p>.
Guest Lecturer: Grace Zhu
activity: tab-index + screen-reader toward manual testing
It is your turn to test the museum site you choose. First, use only tab and try to navigate the site. Is there anything you feel not so comfortable with? Like, can you clearly see where you are (focus)? Can you access the major information you should be able to interact with? Do you think the order is reasonable?
Next, install and turn on the screen-reader (ex. chrome screen-reader) -- and try the tabbing. How much properly do you think the screenreader can read out loud the information you need to know? How would you like to improve?
You don't need to submit anything but leave a note for your project documentation.
We will preview a bit of ARIA, mostly concepts to understand the magic behind the scene (of screen reader). But the details with learn-by-doing will come later when we cover javascript.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
ARIA (Accessible Rich Internet Applications) is a set of attributes to help you to make the web content accessible. These are what you can do with ARIA:
- role change: reassign a new role for the (old version without semantics) element
- visibility change: update information for a visually hidden item
- state change: update status information (ex. check box, if it is checked or not)
https://www.w3.org/TR/wai-aria-1.1/#state_prop_def
tabindex is used to make the element focusable. When set to 0, the element becomes focusable by keyboard and script. When set to -1, the element becomes focusable by script, but it does not become part of the keyboard focus order.
This meta data set (microdata) is designed and developed to add contents additional contextual meanings. You can add extra information about the item, its type and properties. It is not very active yet, most browsers don't support - but at least for the search engines, it is machine-understandable version of information.
https://schema.org/docs/gs.html
https://en.wikipedia.org/wiki/Microdata_(HTML)
What is, then, xml, xhtml, or json? When do we need them, for what? I hope some of you can help me to show the example you worked with, if you are familiar with them.
- XHTML is a stricter, more XML-based version of HTML. You need to close even for the empty element like
<br /> - JSON is a text format for storing and transporting data >> ex. https://developer.nytimes.com/docs/books-product/1/overview
- XML was designed to store and transport data. >> ex. https://documenter.getpostman.com/view/3597797/RzfiFnvW
https://www.w3schools.com/xml/default.asp