Semantic HTML and a11y Flashcards
Practice Resource: Semantic HTML
https://learn.shayhowe.com/html-css/getting-to-know-html/
Resource: HTML Dog : Tags, Attributes and Elements
http://www.htmldog.com/guides/html/beginner/tags/
Resource: Mark Pilgrim’s Dive into HTML
http://diveinto.html5doctor.com/
Mozilla’s Developer Network (MDN)
https://developer.mozilla.org/en/docs/Web/HTML/Element
What is Semantic HTML?
The practice of choosing an HTML element to wrap content that most clearly aligns with the meaning of your content.
What are some elements that can strengthen the Semantic HTML on your document?
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>
Resource: Mozilla’s HTML Element Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
What is A11Y or a11y?
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.
Why is A11y so important? (1/2)
The web has user of every stripe, including many with disabilities. The web should be made with everyone’s usability in mind.
Why is A11y so important (2/2)
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.
Define a mouse user:
usually not visually or dextrously impaired. Uses the mouse or touchpad for most web navigation
Define a keyboard user:
Primarily uses the keyboard or keyboard and mouse combo, like a power user.
Define a screen reader user:
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.
Resource: Valid HTML Language Codes
https://www.w3schools.com/tags/ref_language_codes.asp
How can the lang attribute be used? (1/2)
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 can the lang attribute be used? (2/2)
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>
What is a “role” attribute?
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
Are there lots of types of “roles”?
Yes, there are. Here is a resource:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
Resource: Mozilla ARIA and Roles
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
What does ARIA stand for?
Accessible Rich Internet Applications
What is ARIA used for?
Screen readers use ARIA to help people who use assistive technologies understand and use web sites.
What element is the “banner” role used for?
It is used with the element
It is an HTML5 section role
Example: Content here
What is the proper codeout for a role?
The role should always be surrounded by quotation marks.
Ex: Menu
What element is the “navigation” role used for?
It is used with the element
It is an HTML5 section role
Example: Quicklinks
