Semantic HTML and a11y Flashcards

1
Q

Practice Resource: Semantic HTML

A

https://learn.shayhowe.com/html-css/getting-to-know-html/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Resource: HTML Dog : Tags, Attributes and Elements

A

http://www.htmldog.com/guides/html/beginner/tags/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Resource: Mark Pilgrim’s Dive into HTML

A

http://diveinto.html5doctor.com/

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Mozilla’s Developer Network (MDN)

A

https://developer.mozilla.org/en/docs/Web/HTML/Element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is Semantic HTML?

A

The practice of choosing an HTML element to wrap content that most clearly aligns with the meaning of your content.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are some elements that can strengthen the Semantic HTML on your document?

A

When you’re writing HTML, strive to use elements that communicate the meaning of your document’s structure

To name a few: <p>,, , , , , and others when appropriate.</p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Resource: Mozilla’s HTML Element Reference

A

https://developer.mozilla.org/en-US/docs/Web/HTML/Element

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is A11Y or a11y?

A

It stands for “accessibility” and its a principle that every programmer should be thinking of when building code.
It is the practice of making web pages accessible to both able-bodied and disabled users.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Why is A11y so important? (1/2)

A

The web has user of every stripe, including many with disabilities. The web should be made with everyone’s usability in mind.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Why is A11y so important (2/2)

A

Web crawlers index content on the pages you code to make it appear in searches.. The better the semantic html code, the better the SEO results.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Define a mouse user:

A

usually not visually or dextrously impaired. Uses the mouse or touchpad for most web navigation

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Define a keyboard user:

A

Primarily uses the keyboard or keyboard and mouse combo, like a power user.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Define a screen reader user:

A

Are visually impaired people who have websites read to them by a screen reader, which is an assistive technology that reads the contents of a web page out loud.
Screen reader users may not be blind but still benefit from audio to help them process the websites they use.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Resource: Valid HTML Language Codes

A

https://www.w3schools.com/tags/ref_language_codes.asp

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

How can the lang attribute be used? (1/2)

A

It can be used in the opening tag .
This will tell the whole page to orate in whatever language defined. THIS SHOULD BE DONE EACH AND EVERY TIME YOU CODE.

ex:

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How can the lang attribute be used? (2/2)

A

It can also be used on a specific element on an html document.
For example, if a paragraph is written in spanish,
You want an orator on the page with spanish dialect and way of speaking, not english

<p> Yo soy Maria. Qual es tu nombre?</p>

17
Q

What is a “role” attribute?

A

Roles tell a browser, “This is the kind of job my content is supposed to do.” They make it easier for screen reader users to understand what is on the page and how to use it

18
Q

Are there lots of types of “roles”?

A

Yes, there are. Here is a resource:

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

19
Q

Resource: Mozilla ARIA and Roles

A

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques

20
Q

What does ARIA stand for?

A

Accessible Rich Internet Applications

21
Q

What is ARIA used for?

A

Screen readers use ARIA to help people who use assistive technologies understand and use web sites.

22
Q

What element is the “banner” role used for?

A

It is used with the element
It is an HTML5 section role

Example: Content here

23
Q

What is the proper codeout for a role?

A

The role should always be surrounded by quotation marks.

Ex: Menu

24
Q

What element is the “navigation” role used for?

A

It is used with the element
It is an HTML5 section role

Example: Quicklinks

25
Q

What element is the “main” role used for?:

A

It is used with the . element
It is an HTML5 section role

Example: Content here

26
Q

What element is the “contentinfo” role used for?

A

It is used with the . element
It is an HTML5 section role

Example: Phone: 555.12.12

27
Q

What element is the “region” role used for?

A

It is used with the . element
It is an HTML5 section role

Example: Content here

28
Q

What’s the point or importance of using roles in my HTML coding?

A

Its important because roles give implicit instructions in the HTML document .
There is no mistaking/confusing the purpose of an element if there is role attached to it.
This makes code easier to read and render, thus making the best possibility for users who may need to use assistive technology.

29
Q

Roles can be defined as ARIA landmarks. Why?

A

Through their roles, these elements serve as ARIA landmarks for visually impaired people.
Think of ARIA landmarks as a list of shortcuts.
Just as you can quickly glance around to find a part of a page you want, a screen reader user can quickly cycle through landmarks to get where they want to go.

30
Q

But isnt the use of roles redundant since the element defines what its supposed to be anyway.

A

Yes it is redundant, but is good redundancy.

Also, older browsers don’t know the implicit roles of HTML5 elements like , , , and so we have to help them out by explicitly setting redundant roles using the role attribute.

31
Q

Can I have more than one “banner” role per HTML document?

A

NO, you should not.

Since you should not have more than one element per page, it follows reason that you should not have more than one “banner” role per page since
that role is explicitly used for the element.

32
Q

For the best code always do the following:

A

– use structured, semantic HTML
– set the lang attribute on the opening HTML tag
– set the role attribute where appropriate, especially for sectioning elements like:
for site-wide headers
for navigation elements
for main elements
for your site’s footer