Wrapping up the Front End Development video tutorial collection

Greetings fellow learners!

Here it is, the final installment in the "Front End Development" series. In this last batch of videos, we look at what ARIA tags are, how they can improve the accessibility of your site, and how to implement them. We also take a look at a tool for Firefox that scans your site for accessibility issues and offers suggestions for fixing them.

This has been our longest video series by far, and for a good reason. Going from a mockup to a functioning template requires a ton of knowledge and awareness of numerous angles. I hope that if you've been a watcher of the series that you've seen your toolset grow and been able to put some pieces together that might have been difficult to put together on your own.

Thanks as always for watching!

 

About using meaningful images as CSS backgrounds and accessibility New!

About using meaningful images as CSS backgrounds and accessibility

Chromes Accessibility Developer Tools gives us a warning to check if we're using meaningful images for CSS backgrounds where they're hidden from screen readers. We are, and we discuss some alternatives to make sure our textual browser users get the meaning of these images.

How contrast ratios and WCAG ratings work New! (This one's FREE!)

How contrast ratios and WCAG ratings work

The contrast between the foreground and background color can be a big factor in readability. In this video we use the accessibility audit as a jumping off point for discussing what contrast ratio means, and how it is one factor in seeking a higher WCAG rating.

Reviewing links with unclear link text New!

Reviewing links with unclear link text

Our accessibility audit turned up a few links that had potentially unclear text. We review these and describe how we're making these elements more accessible.

How to run an accessibility audit with Firefox's AInspector Sidebar add-on New! (This one's FREE!)

How to run an accessibility audit with Firefox's AInspector Sidebar add-on

Chrome's accessibility audit tools are concise and quick, but the "AInspector Sidebar" add-on for Firefox is more complete. We get this installed and open up the sidebar to see what our Chrome audit might have let slip through the cracks.

What ARIA is, how "landmarks" work and adding a "main" landmark New! (This one's FREE!)

What ARIA is, how "landmarks" work and adding a "main" landmark

ARIA (Accessible Rich Internet Applications) is a specification that helps us create rich interfaces for our websites without sacrificing usability for screen readers. Most of what's covered in ARIA's scope is beyond what we need at this point in our site development, but there are a couple techniques we'll end up using, the first being adding landmark roles to our site to more easily identify the role of each element.

How and why to use the "navigation" role on HTML "nav" elements New!

How and why to use the "navigation" role on HTML "nav" elements

Even though the "nav" element pretty clearly has a navigation role, some browsers don't add that role by default. Here we reference a useful web page that lists possible elements and default ARIA roles and explain why sometimes we have to be so explicit.

Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles New!

Adding container elements with ARIA roles and why to use HTML tags instead of ARIA roles

Many HTML elements have roles built-in, and whenever possible, using a specific HTML tag instead of setting the role of a generic HTML tag makes the HTML more readable and reduces redundancy. In this video we knock out another accessibility violation of our site by adding container elements and discuss the benefits of using HTML tags when we can.

How and why to add ARIA landmark labels New! (This one's FREE!)

How and why to add ARIA landmark labels

In order to pass our accessibility audit, we look into adding ARIA labels to distinguish landmark elements on the page with the same ARIA role.

How to add a language code to your web page New!

How to add a language code to your web page

Here we make it explicit that our site's language is English.

Reviewing our other "Styles / Content" accessibility audit checks New!

Reviewing our other "Styles / Content" accessibility audit checks

Having conquered all of the violations for our site in the "Styles / Content" section of our audit, we explain how the "manual check" line items work and move on.

Reviewing our AInspector Sidebar "Links" accessibility violations New!

Reviewing our AInspector Sidebar "Links" accessibility violations

Here we see that an issue that came up in our other accessibility audio with our link text not being descriptive, and again we move on.

How to add text in a link for accessibility but hide it from view New!

How to add text in a link for accessibility but hide it from view

We saw in the Flexslider navigation how it's possible to add text to a link but hide it from view, and here we do the same thing to the empty submit button in our search form. It's a nice trick to know.

Fixing an accessibility issue with our hidden labels New!

Fixing an accessibility issue with our hidden labels

An earlier decision we made to hide any labels with the CSS "display" property that weren't supposed to be visible in graphical browsers threw a red flag in our accessibility audit, so we explore another approach to hiding them visibly that gets a pass.

How to use the "fieldset" and "legend" HTML tags for input groups New!

How to use the "fieldset" and "legend" HTML tags for input groups

Our accessibility audit suggested the use of a "fieldset" tag around our group of radio buttons, so we add one in along with a caption like "legend", and get it styled to match our mockup.

Wrapping up our accessibility audit review New!

Wrapping up our accessibility audit review

In this video we address a few odds and ends from our accessibility audit.

Congratulations on completing "Front End Development!" New!

Congratulations on completing "Front End Development!"

Holy cow! Did you really make it through the entire "Front End Development" series? That's no small feat, and the skills you have now put you in a great position to work on virtually any web based project as a front end developer. Great work!

Bonus: How to add a favicon to your site New!

Bonus: How to add a favicon to your site

Even though we've covered an incredible amount of material throughout this series, I thought we should leave the series in a spirit of learning, since you'll find yourself constantly learning more as you further develop your skills. Good luck moving forward!

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.