Applied Accessibility -3 Wrap Content using appropriate element

 Wrap Content using appropriate element  

 


HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include main, header, footer, nav, article, and section, among others.

By default, a browser renders these elements similarly to div. 
However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.

The main element  is used to wrap the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page.  

<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content

 The header element  adds semantic meaning and improves accessibility . It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.

header shares the embedded landmark feature  allowing assistive technologies to quickly navigate to that content.


Note
header is meant for use in the body tag of your HTML document. This is different than the head element, which contains the page's title, meta information, etc.


The nav element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page. If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a nav tag as well. Using a footer tag is sufficient.

the footer element  has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.

source

Comments

Post a Comment

Popular posts from this blog

ES6 : 5 Prevent Object Mutation

As seen in the previous post declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function Object.freeze() to prevent data mutation. Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error. let obj = { name:"FreeCodeCamp" review:"Awesome" }; Object.freeze(obj); obj.review = "bad"; //will be ignored. Mutation not allowed obj.newProp = "Test"; // will be ignored. Mutation not allowed console.log(obj); // { name: "FreeCodeCamp", review:"Awesome"}
Read more

ES6: 1 Explore Differences Between the var and let Keywords

One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error. var camper = 'James'; var camper = 'David'; console.log(camper); // logs 'David' As you can see in the code above, the camper variable is originally declared as James and then overridden to be David . In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidentally overwrite a variable that you did not intend to overwrite. Because this behavior does not throw an error, searching and fixing bugs becomes more difficult. A new keyword called let was introduced in ES6 to solve this potential issue with the var keyword. If you were to replace var with let in the variable declarations of the code above, the result would be an error. let camper = 'James'; let camper = 'David'; // throws an error This error can be seen...
Read more

CSS Grid: Reduce Repetition Using the repeat Function

 When we used grid-template-columns and grid-template-rows to define the structure of a grid, you entered a value for each row or column you created. Lets say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the repeat function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat. Here's an example that would create the 100 row grid, each row at 50px tall. grid-template-rows: repeat(100, 50px); You can also repeat multiple values with the repeat function, and insert the function amongst other values when defining a grid structure. Here's what I mean: grid-template-columns: repeat(2, 1fr 50px) 20px;  this will be translated to :            grid-template-columns:1fr 50px 1fr 50px  20px;   1fr 50px is repeated t...
Read more