**The Importance of Accessibility in Web Development**

As web developers, we often focus on creating visually appealing websites that showcase our creativity and skills. However, it's essential to remember that not everyone has equal access to the internet, and a website's accessibility can greatly impact its usability for people with disabilities. In this article, we'll explore some common accessibility issues that can be found on a webpage and provide solutions for developers.

**Identifying Accessibility Issues**

One of the first steps in making a website accessible is to identify potential issues. A simple way to do this is by using online tools such as WAVE Web Accessibility Evaluation Tool or Lighthouse, which can highlight areas of non-compliance with web accessibility guidelines. For example, on the surface, the webpage may look good, but upon closer inspection, there are several accessibility violations hiding in the code. It's up to us as developers to identify these issues and make the necessary changes.

**The Case Study**

Let's take a look at a real-world example of a website that needs improvement. The webpage in question has a placeholder text that is difficult to read due to its light gray color on a white background. We should add contrast to this element to ensure it's readable for everyone. Additionally, we notice an image without an ALT tag, which is crucial for screen readers and other assistive technologies. We also have a form with several accessibility issues, including lack of labels, ambiguous button text, and inadequate semantic HTML.

**Semantic HTML**

One of the most critical aspects of web development is using semantic HTML to structure our content in a way that's easy to read and understand by search engines and screen readers. In this case study, we see that the main div lacks a main tag, which should be used to wrap the page's content. We also have an H2 heading instead of an H1, which is incorrect and should be corrected. Furthermore, font sizes are defined in pixels rather than REM units, which can lead to inconsistent styling across different devices.

**Fixing Accessibility Issues**

Now that we've identified the accessibility issues, it's time to fix them! First, we update the placeholder text color to ensure a AAA level of contrast. This makes the text easier to read for people with visual impairments. Next, we add an ALT tag to the image, which provides descriptive alternative text that screen readers can use to convey the content of the image.

**Labels and Button Text**

We also need to add labels to our form fields, which is essential for users who rely on assistive technologies to interact with the website. We identify the input field's ID and create a corresponding label, ensuring that the user can easily identify what each field is for. Additionally, we update the button text to make it more descriptive and clear.

**Semantic HTML Revisited**

Now that we've corrected the accessibility issues, let's revisit our semantic HTML structure. We add the main tag to wrap the page's content, making it easier to read by screen readers and search engines. We also change the heading from H2 to H1, ensuring that we're using the correct heading level for the main content of the page.

**Best Practices**

Finally, let's cover some best practices for web development that can help ensure accessibility in our projects. First, always prioritize contrast when designing text and background colors to ensure readability for users with visual impairments. Second, include an ALT tag for all images to provide descriptive alternative text for screen readers. Third, use labels for form fields to make it easier for users to identify what each field is for.

**Conclusion**

Developing accessible websites is a superpower that can make you and your future projects stand out from the rest. By identifying and fixing common accessibility issues, we can ensure that our websites are usable by everyone, regardless of their abilities. Remember, accessibility is important, and it's up to us as developers to create inclusive and welcoming online experiences for all users.

"WEBVTTKind: captionsLanguage: enlearn how to make the web a better place for everyone in this course you'll dive into what it truly means to build accessible websites and why it's important instructor and web developer Frederick ritfolk will teach you the fundamentals of accessible development like understanding contrast ratios exploring the accessibility tree getting familiar with wcag levels and much more Hello amazing coders and welcome to this course on accessible development when we are developing anything we are creating content and we say that content is accessible when it is available and its functionality can be operated by anyone therefore accessible development means to develop with everyone in mind including all the users who have some sort of disability developing accessibly isn't just the right thing to do but any future employer will want to know that you have all their users in mind when making decisions and it's also the law in some countries here's a website which is currently suffering a lot of accessibility issues in this course it'll be your job to save this website you will of course not be alone my name is Frederick and I will be your teacher together we will learn how to get some easy wins to help improve accessibility with minimal effort you will also find that many of these techniques will help you create interfaces that are more pleasant and easy to use for all users by the end of this course you will have the skills to to help build a more inclusive digital world before we get coding I want to show you some of the various types of assistive Technologies and how our accessibility improvements work we'll also touch on accessibility testing methods there are various types of assessive technologies that benefit from accessible web content these include but are not limited to screen readers speech recognition software screen magnifiers and alternative input devices designed for people with motor skill impairments screen readers are one of the most common types and they rely heavily on headings links and form labels for navigation at the heart of web accessability is the accessibility tree a key part of how browsers interact with assisted Technologies this tree is a simplified representation of the page focusing on elements important for accessibility like headings links and form labels this could be our code and the browser translates that into a visual UI but at the same time it also translates our code into an object called the accessibility tree which contains a lot of important information and context in text form the improvements we are going to make in this course will make our components available inside this accessibility tree and provide assistive Technologies with this important context here are two buttons that look the same in the visual UI because we style them the same but in the accessibility tree the button made using a div tag lacks information and context when you use semantic HTML that is the right element for the right purpose the browser automatically feeds the correct information into the accessibility tree this helps assistive Technologies to navigate and interpret the content accurately keyboard accessibility is another Cor Corner Stone of web accessibility and by using correct HTML elements like button tags a tags and form elements you sort of get keyboard accessibility for free this means these elements are naturally focusable and operable with a keyboard no extra coding required we will get some hands-on experience with this later in the course here is how we can access the accessibility tree in our web app in my example I'm using Chrome as my browser and if we open up our developer tools there will be a tab called accessibility click on that and click on enable full page accessibility tree your developer tools will ask you to reload and when you do that you will see an accessibility button popping up if you click on it you will see the accessibility tree this is not exclusive to Chrome other browsers like Firefox also gives us access to viewing the accessibility tree I'll leave you with a link to a complete guide on how to work with the accessibility Tree in Chrome dep tools so how do we test our accessibility well the first way is quite straightforward we can experience our own site using for example a screen reader to understand how our content is presented there are tools like contrast Checkers that help ensure our text is readable against its background we also have automated tools at our disposal like lighthouse in Chrome accessibility inspector in Firefox or a software called called axe these softwares can help identify common accessibility issues and we can also use AI assistants to test our code in terms of accessibility for example we can supply our code to the AI and ask if it detects any poor color contrasts or missing labels or if we have used the wrong native HTML element for the job I myself use chat GPT daily for this and much else if you are using Chrome as your browser you can find Lighthouse by opening up your Dev tools and going to the lighthouse tab up here there you can select what you want Lighthouse to do for example to test your s's accessibility on desktop then you just press analyze page load when Lighthouse is done analyzing we will get a score of 0 to 100 on how accessible our ctis not shown here is also a detailed walk through of any accessibility issues that light house found so that we can identify them and fix them it's time for some Hands-On learning let's head into some code and learn about accessible color contrast see you in the next lesson before we start we need to know what is considered accessible there are well-defined requirements on things like text images the HTML code and so on these are called the web content accessibility guidelines these guidelines have different levels called a able a and AA a the a level means it's not accessible the able a level is considered accessible but what we really want to achieve is the highest grade AAA whenever possible let's look at our first specific example color contrast for text as in the contrast that text has against its background black text against the black background has a contrast ratio value of one 1: one it's the same color the highest contrast ratio is black and white that has a ratio of 1:21 this light gray text against the bronze background has a value of a bit over two the dark gray text against the silver background has a value of a bit over four and the black text against the gold background has a value of almost 19 to demonstrate further here's a rainbow with dark blue text inside each strip and similar to what we just saw the contrast values are written in each stripe this dark blue text on this red background has a ratio of 3.32 it's not very good and difficult to read we can easily check the contrast value of text against its Background by visiting an online contrast Checker like this one and this is a link you can click on or if we for example are using Chrome as our browser we can check such a value by pressing control shift C on PC or command shift C on Mac and then hovering over the text under accessibility you will see the contrast value similar functionality exists in other browsers like Firefox and Edge if you using something else than Chrome I recommend looking up if and how your browser can analyze color contrasts I want you to pause here and give this a go and check that the contrast values are indeed what I have written here by hovering over each and every text great so now you might be wondering what color contrast values are good to be accessible normal text should at least have the value of 4.5 and at least three for large text but what we really want to achieve are these AAA requirements it's time for your first challenge I want you to change the color of each text so that they they all fulfill the wca's ablea requirements which is a contrast ratio of 4.5 pause now and try this out okay hopefully you gained some insights if you tried black in white text you probably noticed how they had good contrast on different backgrounds in fact you probably managed to achieve a contrast value of over seven for most backgrounds which is the best possible achievement but no no matter which text color we use white or black or anything else the contrast values can't reach seven for the red and green backgrounds pause quickly here and think about how you would solve this so in this case you would need to either change the background color or make the text bigger I have a challenge waiting for you on this but while on the topic of colors I want to show a brief example of another aspect to think about when using color in an accessible manner follow me into the next lesson I want to give you a little heads up on using colors in your apps because while colors are a super way to communicate information we should not rely solely on color instead we should combine color with shapes or with text or ideally both here we have two simple user cards quite similar to what we often see in chat applications they have a profile picture a name and an indicator to communicate if the user is online or offline indicated with either green or red color I want you to have a think about how you could improve this indicator using shape and text pause here did you cheat and looked up a chat app you use to see how they do it if so perfect that's exactly what I would have done a simple way to make this more accessible is to pair the color indicator with an icon as well as to add the status text so that it looks something like this there might sometimes be cultural differences as well in how colors are interpreted but with these changes alone the over 300 million people with some degree of color blindness in the world will thank you for this consideration now it's time to test our knowledge of accessible color contrasts now let's apply what we just learned on this website's homepage the website belongs to a company that delivers groceries to your window by drones quite futuristic sounding but perhaps how we will get our onions and soy sauce one day soon but as you can probably already tell some big mistakes with color contrast are currently being made here's your challenge identify any parts of the page where the text contrast is poor and then change those parts so that they fulfill the AAA requirements and just so you remember you have your AAA requirements right here there are actually multiple ways to solve this accessibility issue I leave it to you to choose how to do it pause now and give this a sh I am really curious to know how you went about making these text contrast improvements the first part of the challenge was to identify any parts of the page where the text contrast isn't good enough this is obviously the case here with the word eats which is green and it sort of Blends into the background of of the Green in the image behind it and it doesn't really solve anything to change the color of this word to uh black color uh because the contrast will will still be poor on top of the image and if we change it to White well it will be uh impossible to see outside the image one way you might have gone about solving this challenge is to find the the selector for that specific word which is right here and then added display block and look at that what that does is it forces the word to be on its own separate line it takes up the maximum width and that solves our text contrast issue another way to solve this and perhaps my own preferred way is to instead of making the title of our homepage two lines I would simply focus on the hero image and maybe make that a little bit smaller something like that and that does it although it looks a little bit awkward so I'm going to push it down a little bit from the top something like that that's one part the other part of the page you probably immediately recognized as having poor text contrast is the footer dark green on dark gray is going to be hard for just about anyone to read so we go down to the footer in our CSS and this is where our icons and text get their color and if we change this to white or FFF FFF that looks so much better so much much easier to read and I think we are ready for a new section on our homepage now we have an about section where we are told the background story of the company and how the higher of AI and Robotics Ariana Grande founded the company but once again there's a huge issue in seeing what the text actually reads so one more time we need to make the text much much more readable by improving the text contrast this is a bit tricky because it's a background image but tricky is the word and we have a trick up Our Sleeve I want to introduce to you a CSS property that you may or may not be familiar with here's your challenge I want you to practice your Google Fu and search for background blend mode it's a CSS property and see if you can figure out how to make make the background image in our about section brighter so that the text is much more readable pause here and give this your best chot if you figured out how that is amazing now let's do it together we go up to where we find the background image being stated and we are going to add two CSS properties round color I'm going to make this white and then a stands for Alpha and here you can set a value of 0 to 1 and we're going to do a high number 0.85 so far nothing has changed now we use background blend mode and we write lighten and did you see that all of a sudden it got lighter so it Blends the background color with the background image cool right maybe this seems limiting at first maybe you love the colors pink and white and wanted to build a website with those colors and then I come along and ask you to rethink that well Einstein famously talked about how how he limited his wardrobe to just a few select options so that he wouldn't get overwhelmed by all the options which he called option paralysis so much like Einstein may have omitted pink and white outfits in his wardrobe we can omit pink text on white background or vice versa in web development next up we will move on to making images accessible to everyone see you there when we add images to a web page we should consider the fact that some users cannot see images they need a text alternative and as we will see this text is simply added inside the images HTML tags as attributes the text given here is not visually displayed on the page but is hidden in the code to be accessed by screen readers and search engines like Google so what is best practice when writing alternative text for images this first example is way too wordy we want to be as concise as possible we also shouldn't start by writing an image off because the screen reader will say it's an image anyway the second example here is great but you may wonder do we have to add alternative text to all images well yes and no we need to add the alt tag to all the images in our HTML but if an image is purely decorative we don't need to write any descriptive text the reason we do this is because without it a screen reader May read out the image file name instead and that can be quite annoying alternative texts mainly help people with little or no vision people who have turned off images to save data and it also helps search engines like Google to find appropriate content to practice this we have a website displaying a collection of strange digital art which currently isn't very accessible okay time for a challenge I want you to add appropriate alternative text to all the images on this web page have a look at the Batman duck example the uh second one when trying to write descriptive text the text needs to be concise but still communicate the important parts of what the image shows so pause here and give this a try okay I hope you had a good time trying to uh describe these very strange images we have on our page I know I had so let me show you what I came up with I will look at the first image here the astronaut and then go to our HTML and here we find it what I'm going to do is add the alt attribute and I came up with the text an astronaut suspended in midair by a dark cloud over a field of purple grass I'm not sure that's an astronaut but it looks like it to me and for the second image down here I came up with a chair with a small Cloud hovering over it in the desert next to a dark Rock and finally this image here I wrote dark cubes and cylinders floating in the air along with two glowing orbs but if you noticed we skipped an image this right here is an image as well and we find that up here in the hero section so this was also a challenge to try to describe it's very strange my best take on it was a hand made of metallic liquid dripping upwards again you might have described these very differently but the important part is that you got practice in applying an ALT tag in your HTML to every image and writing a concise or as concise description as possible and finally one thing I tend to do when writing alternative text is to end with a period as you can see this is not something you need to do but it makes a screen reader do a brief pause which can be helpful when listening to it describe all the content on a page I have one last question for you which is what if this hero section had a background image like this one should we add an alternative text to this image the answer is no not all images should have an alternative text if the image for example has a label or an adherent text that describes the image an alternative text becomes redundant we also shouldn't give decorative images like this one an alternative text decorative images don't add informational content but are purely for Aesthetics examples include stylistic flourishes background images or images used for spacing for such images it's best practice to use an empty alt attribute like we see here having an empty alt attribute tells the screen readers to skip the image in the absence of an old attribute some screen readers May default to reading out the file name of the image in our case here the screen reader might read out background.jpg this can be confusing for users who rely on screen readers as file names often don't provide meaningful information about the image this is just one example but another very common type of decorative image that should have an empty alt attribute are icons combined with text think for example of the magn glass in a search field finally we should understand that alternative text is important for everyone not just those using assestive Technologies firstly alternative text enhances the user experience in situations where images don't load due to slow internet or other technical issues so let's break our own image this is how it will look like if our image here fails to load for whatever reason luckily we have an alternative text that describes the content so that we don't miss out on any information the image conveys if we remove it we are left with merely a broken image link before moving on from this website we will also look at how we can make the links in here more accessible see you in the next lesson labels for control elements like links and buttons are very useful to all users but getting them right is particularly important to users with disabilities for links you should use the a tag in your HTML and your links should be recognizable as links and easy to find and finally they should have nonambiguous textt what I mean by that is that anyone should be able to understand understand where the link will take them even out of context the links are in so don't just use click here or more for your labels as screen reader users sometimes navigate through links without reading the context let's look at a few examples the first link is not very accessible why because color alone is not sufficient to indicate the presence of a link underlines are a popular commonly understood way to communicate the presence of Link content however the text here is still ambiguous uh we don't understand it outside of its context so this is much better we can clearly see it's a link and we understand where the link will take us even out of context now I have a challenge for you I want you to update all the links in the website so that they meet the following requirements one they can be identified as links by more than just color alone and secondly the link text is not ambiguous as in we understand where the link will take us even out of context pause here give this your breath shot and afterwards I will show you how I would do it okay I hope that went well so we have a link in each paragraph here's one here's one and here is one so we have three links to identify and the eight tags are currently only wrapping the he word what I would do is to make sure that the a tag is wrapping this whole last sentence actually like that now this whole sentence is a link that can be understood outside of context next up I'm going to apply the same principle to the second paragraph and make the whole last sent sentence a link and for the third link we do the very same thing we transform the full sentences into links but it's still only communicated by color so we have to go into our CSS and there are actually multiple ways of making the links more accessible one could be to make the text more bold than the text around it but in another way as we saw in our example here giving it an underline is a commonly understood uh way to communicate that something is a link so if we change text decoration none to underline we Achi an appearance that definitely to me looks like a clickable link in fact text decoration underline is the default for a elements so we could actually just remove this and the default styling is still there let's have a quick look at some less traditional links let me show you an example here I've turned our section into a card and now the whole card is link to more work from the artist when making an advanced link like this we need to do a bit more to make sure the link is accessible because quite often accessibility issues arise from how they're built commonly using the a tag to wrap the whole component like we have done here this is totally understandable as an approach because it succeeds in making the whole thing clickable but it negatively affects the screen reading your experience if we move to the card using a screen reader a very long string of text content will be read out and only after this and I told the card is linked which is a bit slow and maybe a bit confusing plus elements like images included in the card might not be specifically announced as image either any nested structure is lost within the link instead the link should be positioned inside the card without wrapping any text now I'll will show you how to do this we just improved accessibility greatly and by cheating using either CSS or JavaScript we can make the whole card clickable just like it was before feel free to pause and check out my CSS solution which you uses absolute positioning and a pseudo selector the CSS is a bit Advanced and out of scope for this lesson but as you develop your skills it's important for you to know what the correct approach is it could also be a good idea to add a hover effect to the whole card like we did here to make sure the cursor is a pointer and also to modify the call to action text so that the user understands that the whole card is now clickable the card should also be focusable if we tab through the page since I mentioned modifying the call to action text we should also make that update this is much better communication additionally I added something called an ARA label and I added it to the link inside the card this will be read out by screen reader and it's an accessible feature to use when the link lacks a descriptive text as in our example here we will cover area labels in their own scrim later on in the course at this point you have already learned some of the most important ways to make a website accessible in the next lesson we are going to return to our Skynet eats website and apply our new skills see you there we are back with our drone food delivery app and we have introduced a news section with some general info and statistics about the company but the website lacks alternative text for its images and some of its links are not accessible enough this is where you will swoop in to save the day your task is simple update our images so that they have appropriate alternative texts and update any links that are either not recognizable as links or they have ambiguous texts this requires you to have a look around and work both in our HTML and CSS pause here and give this Your Best Shot okay I hope that went well if you were still unsure about anything I will now show you exactly how I would do this let's start with updating our images with alternative text the first image is this one here we find the hero image which is where I will add the alt tag and the text that I chose to write reads food delivery Dron saying I come with peace and remember when text is part of an image a screen reader won't be able to read it therefore if it conveys important information which I think in this case it does because it communicates humor we should add it to our alternative text that's image one for our new section we have this image here of a drone we find it right here I'll add the all tag and I decided to Simply and concisely call this a flying Skynet drone maybe you just wrote a flying drone and that's okay my thought was that this might be skynet's own unique design of a drone that this is an image of and therefore it makes sense to be specific did you notice that I left out one thing I didn't add any period to the end of the sentence which I am a fan of so I'm going to do that here and also up here I'm adding a period by the end to give the screen reader some pause when reading the alternative text amazing now to the second part of the challenge which involved our links this link here isn't very accessible so first I'm going to take this a tag and wrap it around that's better we still haven't done anything to the CSS and we will get there but first this is another link and while it does a pretty good job communicating that it's a clickable link the text is still ambiguous so let's change that we go down here and then here we have to change it to something else it will take us to their about page so how about we just write about Skynet I think that makes a lot of sense now we head to into our CSS to update this link right here I want it to be underlined so I'm going to go up to the info section and this selects the link giving it a green color let's do text decoration underline and there we have it immediately recognizable as a link but there's one more thing we can do remember everything we learned about text contrast well these small headlines drones customers and Cat conflicts their text contrast is not great we would love them to have a contrast value of seven or above so let's see if we can identify these selectors in the HTML we see that they have the class stat heading which is right here in our CSS and this is the color if we change that to a lighter gray then immediately it became much more readable and the contrast value is now 7.86 and you can check that yourself by going into the dev tools as we talked about in a previous lessons and hovering over these headlines give yourself a huge pad on the back for all the work that you've done you know so much already and I'm really excited about our next lesson together see you there labels in all forms are a hugely important part of EX accessible development unfortunately elements like input Fields often lack labels and are replaced by placeholder text let's look at two common designs of input Fields this first example has a placeholder but has no label and the second example has a label but is missing the placeholder text according to the wcag the accessibility guidelines placeholder text is not an accessible replacement for the label element the placeholder should only be used as a brief example of the text to be entered mainly because of inconsistent support for screen readers best case scenario an input field has both a label and an exemplary placeholder let's have a look at the signup page for our Skynet eats app seeing this you might think that this looks like a very standard signup form and you're right unfortunately it's common place to see forms like this out there that lacks labels so your challenge should you choose to accept it is to First add an ID attribute to each input field secondly add labels for each input field in the form I want you to search yourself how to associate a label with an input field so that when clicking the label the input field gets focused alternatively you could head over to our HTML and look at our input radio buttons because they actually have labels finally I want want you to change the placeholder names to be exemplary user inputs for example Obama for a surname field pause now and make this sign up page accessible to everyone okay if you manage to do this all on your own I am super impressed either way let's do it together we solved this challenge in our HTML and the first thing that I want to do is add an ID attribute to each input field like this beautiful nothing has changed yet now let's add our label elements and I want them to be on top of their Associated input fields and hopefully you manag to figure out that the way to associate it with an input field is to use the four attribute and then write the ID of that specific input field as the for name like that there we have the label and if you click on it make sure that it focuses the input field that you had in mind let's apply a label to all the input field let's save and have a look beautiful every single input field now has a label and it's associated with the correct input field now for the final part of the challenge it makes no sense to have the placeholder name be the exact copy of the label so what we want instead is to write an example of a full name here and here an example of an address and so on so we are going to be Sherlock Holmes let's try this and voila we have an accessible signup page and if you noticed we also have an image and the image has an ALT text a woman seeing a drone approaching better yet our button says send message which is very non-ambiguous and clear this form featured input Fields as well as radio buttons another common element you will see in forms are drop- down selection lists but do not fret because we make them accessible the same way we do input Fields now the city input is a selection menu instead and we work with labels the same way here as with input Fields the four attribute matching the ID attribute on the select tag finally I want to mentioned that the text inside links and buttons actually acts as labels providing an accessible name in the browser's accessibility layer if for whatever reason we want to create a custom button without using the button element we would need to add a so-called Ariel label attribute that substitutes the regular button label I will show you the difference in code here quickly this button is using the native HTML element while this button is our custom widget making custom button widget accessible includes not only providing an accessible name through Arial labels but also implementing keyboard accessibility and JavaScript functionality it's often simpler and more accessible to use the standard button element when possible as it inherently comes with many accessibility features built in we will stop here because we will dedicate a whole lesson on Ara labels later on in the course for now awesome work as always see you in the next lesson before we move on from this form here you should know that the radio buttons could have even more semantically correct HTML than they currently have we should use the field set and Legend tags to group The set and provide a context for screen reader users when a screen reader encounters a field set tag it typically announces that the user has entered a new group or field set this helps users understand that the following elements are related and should be considered as part of a group and when a screen reader encounters a legend tag it usually reads it out as title or description of the group time for a quick challenge pause here and look up how to apply the field set and Legend tag then come back back here and try to make the appropriate update to our code you don't need to add any new elements you just need to update the tags we already have in place give this a try okay if you manage to do this you might have noticed that the styling of our form changed that's because the field set and Legend tags come with inherent styling let me catch up to you there and this styling isn't very consistent with the rest of our form if you want take a moment to play around with styling the field set element and then I'll do it too I hope that was a fun little break from the accessibility work we've been doing I myself came up with this that's much more consistent now let's get excited cuz it's time to return to our sky eats app see you soon here we go we have the final section of our futuristic food delivery app in place it's a sign up form to get notified when the Skynet drones start delivering pizza to your window I myself want to be notified when that day comes cuz I can't wait for such Airborne glutenous Delight you probably already predicted what your challenge will be I want you to make this form accessible in the same manner as you did in the previous lesson we want to add labels for each input field in the form then we want to change the placeholder names to be as accessible and helpful as possible and finally we want to update the button text to be less ambiguous currently it's just a check mark symbol which is quite poor communication pause here and make this notification form accessible okay I hope that went well now let's do it together first we will go to our HTML and add the labels on top like this we need the four attribute but what do we need to put in the four attribute well we need the ID of the input field that we're going to associate it to which we don't have yet so make an ID call it name and then write name up there it full name that should be it and we have the labels but now the placeholders need updating as well so let's write an example here okay much better now we need to make the button much less ambiguous than this so we remove this symbol I'm going to write notify me because that's exactly what I want to happen when I press the button great finally I hope you also went into our CSS and found this selector for the placeholder and updated this color because currently it's light gray and difficult to see so let's make it a darker gray beautiful wasn't that easy and pretty effortless join me in our next lesson where we will have a recap of semantic HTML see you there want to know an awesome fact 96.5% of websites have accessibility issues that you can prevent by just knowing the fundamental the very same fundamentals that you're learning here in this course next we will have a brief recap of semantic HTML which is the use of descriptive tags in our HTML you might wonder why descriptive tags are so important after all you can use a combination of CSS and JavaScript to make just about any HTML element behave in what whatever way you want but it makes sense to use the correct element for the job the major benefit is that certain assisted technologies will use different HTML tags to navigate through a website semantic HTML doesn't take any longer to write than non-semantic markup if you do it consistently from the start of your project even better semantic mark markup has another benefit Beyond accessibility in that search engines like Google give more importance to keywords inside headings links Etc than keywords included in non-semantic divs so your content will be more findable by potential users we have tags that are so-called Landmark regions and they can be a nav a header main a section and footer and they help communicate the layout and important areas of a page and can allow quick access to these different regions because this is a bit of a recap for you I will challenge you to apply what you know about semantic HDML straight on our homepage your task is to update our code with descriptive tags using the landmark regions nav main section and footer secondly your task is to update our submit button to be a button element and I'm talking about this submit button in our form right here pause here and show off your descriptive tag skills welcome back I hope that semantic HTML is starting to make sense to you let's do the challenge together now this is our nav currently coded as a div tag so let's change that very simply we write nav next we have the main content which is always positioned between the nav and the footer so we changed this to Main and this is the end tag beautiful finally here's our footer closing tag excellent remember that our challenge was to also use sections so this is a good start but in our main content we have several different sections here's one place where it makes sense to use The Landmark region section and here here as well amazing nothing changed on the surface but behind the curtains it's much more accessible finally we have a submit button here but it's coded as a div tag it should be a button like this fantastic that's all we need to do for now are changes manifest in easier navigation using assistive Technologies like screen readers because they can quickly identify these landmarks and provide shortcuts or navigation commands to jump directly to these sections for example a user can skip directly to the main main content or quickly access the navigation menu this reduces time and effort required to navigate through unnecessary content enhancing the efficiency of the user experience Landmark regions also help users understand the layout and organization of a page so when a screen reader enters a new section it can announce the type of landmark like navigation or main content this contextual information is crucial for users who cannot visually perceive the page layout using standard landmarks across websites creates a predictable browsing experience users become familiar with common landmarks knowing where to expect certain types of content like a footer for contact information I suggest looking up screen reader demos online to get a better sense of the user experience with and without semantic HTML onwards and upwards coders you are doing amazing ly see you in the next lesson where we will write accessible lists this is a continuation of applying descriptive tags to our HTML and here we are going to focus on lists any consecutive items in our code should be either an ordered or unordered list with list items not just a bunch of repeating divs your challenge is pretty straightforward identify any connected consecutive items secondly update the sections to be unordered lists thirdly wrap each item with a list item tag and finally add the necessary CSS to maintain the style of the sections there are several places on our homepage where we have connected consecutive items that need to be turned into lists so so pause here and give it a go okay I hope that went well now you can watch me do the same the first place we have consecutive items is in our nav bar with our nav links so let's go to our HTML and find our Navar and this container right here should be made into an un ordered list now I'm just going to Sidetrack briefly and tell you about a neat little trick if you press contrl D on a PC or command D on Mac after highlighting any text in your code it will additionally highlight the very next place in your code where you have the same text so I highlighted both the opening and the closing tag of the div now I can just write the unordered list tag another neat trick is to hold down the ALT key on PC or the option key on Mac and press in multiple locations this allows you to type in multiple locations at once like this it's a really handy time saer and here the closing tags now if we save we see that we have made the naar into an unordered list and we see that by these markers now we don't want these markers to be there but they are default styling of list items we will remove them later first we will focus on adding all of our lists in this section we have our next set of connected consecutive items these stats right here and we find them here and finally our footer has connected consecutive items so this should also be a list and we wrap each link in a list item tag now if we save we see that the list applied but we want to remove these markers so we head into our CSS and up at the top where we Define our general selectors I will add a new one this is for all unordered lists and there is a property called list style type and if we add none the markers disappear of course it would have been possible to Simply use a series of div elements but remember how we in the previous lesson talked about semantic HTML and how it involves using HTML elements for their given purpose this practice is key in making content accessible for all users including those using assisted Technologies when encountering a list screen readers announce the start and end of lists as well as information about the number of items helping users grasp the content structure however when using div tags for listing items we lose this semantic Clarity and that's why we should love using list tags instead amazing work as always and I'm really excited to talk about font size in the next lesson I don't know about you but I actually have pretty bad eyesight nothing that lenses or glasses can't fix which makes me very fortunate but at my normal viewing distance when sitting in front of my computer this is how our homepage looks to me without lenses or glasses but this is how our website would look for some people even with visual aids okay let's go back to normal for people that prefer it they can change the default text size setting in their browser to make all text bigger and easier to read without needing to use the browser Zoom tool the problem is that the pixel unit we commonly use is a fixed unit of measurement and it does not scale with changes in the browser's default font size to reiterate using the pixel unit is compatible with zooming in and out but in order to accommodate user settings we can instead use a unit in CSS called REM spelled out like this as you may know by now the default font size is 16 pixels that's the font size of our paragraphs even before we added a font size property one Rim is equal to our default font size in this case 16 pixels the reason we want to write for example one Rim instead of 16 pixels is so that users can change the default size to be say 32 pixels instead of 16 pixels when they do that our text with one R all of a sudden becomes 32 pixels large alleviating our users from manually having to use the zoom tool in the Brower and with that I have a task for you simply change all font size properties from Pixel to REM units right here in the CSS and you'll need to do some simple calculations here if you need a calculator divide the pixel size with 16 and you'll get how many Rim it should be see you in a bit okay I hope that it didn't cause too much headache to do the calculations working with units is definitely something that comes natural over time let's do it together from the top down okay I think we have our first font size here to change this is 16 pixels so that translates to one R then we have 80 pixels that should translate to five R here's 1.20 five R three Ram 1.25 2.5 three RAM and finally one r and if we go back to our website and have a look the font sizes remain unchanged if you want you could change the default text size in your browser and see how it affects our text amazing work as always I'll see you in the next lesson when I was starting to code something stuck with me and something sadly didn't headings was one of these things I skipped headings I used paragraph tags instead of heading tags you name it this graph shows how screen reader users mainly navigate websites and headings is by far the most common way therefore it's super important that we apply them properly fortunately it's really simple we just need to be mindful of three main rules heading numbers should be consecutive 1 2 3 4 and so on we should only use one H1 per page and finally we should apply them for structure not style the style we can change however we like in our CSS our homepage is currently not following these rules your challenge is to apply headings correctly throughout our HTML make sure of the following first there's one H1 heading no more no less secondly heading levels are not skipped they are consecutive and finally headings always introduce new content sections pause here and update the homepage okay I hope you managed now I will do what you just did luckily as you probably noticed list there is really only one section that we need to make changes to and it's the info section right here remember how we should only have one H1 heading per page well in this section we already have one for our Skynet eats text so this should not be another H1 change that to H2 and then in our list down here we have H4 tags and H2 straight into H4 is not a consecutive pattern so we want to change all of these h3s we apply headings for structure and never style that's it and because we style our headings in our CSS nothing has changed by changing the heading tags in our HTML really fantastic work you are the superhero of the hour and that's all you need to know on descriptive tags we're really getting close to the end now next we will have a look at something called Arya so see you there in earlier lessons I briefly mentioned something called Arya Arya stands for accessible Rich internet applications Arya is a set of attributes that you can add to HTML elements to provide more context and information to assist Technologies it helps fill in the gaps where html's Native semantics fall short let me show you an example these two buttons look identical right well I made one of them using the semantic HTML button element and the other is just a regular div element that I style to look exactly the same but here is where they currently differ the but Buton element is inherently keyboard accessible and focusable when users navigate the web page using a keyboard they can reach an activate the button using the Tab Key and Enter space key respectively screen readers inherently recognize button elements as interactive controls along with the button label and the button element does not require additional ARA attributes to be recognized as a button since it has built-in semantics when we use the button element we get all this accessible functionality for free but when we decide to make a custom button like this we lose out on that functionality so we need to use ARA to reintroduce some of its functionality you can already tell that in most cases it is way easier for us to just use the semantic HTML tags this is known as the first rule of ARA is don't use ARA well that's a bit contradictory isn't it what it means is that if you can use a native HTML element or attribute with the semantics and behavior you require already built in instead of repurposing an element and adding an ARA Ro state or property to make it accessible then do so to make this div accessible it would need additional attributes such as roll button to Define its Ro as a button and tab index zero to make it keyboard focusable even with these attributes it might still lack some of the built-in accessibility features of a native button in this case an Arial label attribute would probably be redundant because the sign up label is explanatory enough but what's a typical use case then for ARA well they include elements like toggle switches sliders and non-standard labels I just added a common type of toggle switch to our website a dark theme toggle these elements sometimes lack native semantics making it challenging for assisted Technologies to interpret them correctly which is true for our toggle right now so here's a challenge for you I want you to add the three ARA attributes that do the following first define the role of the toggle switch then make the toggle switch keyboard focusable and lastly communicate the state to assisted Technologies in some way in our case that the toggle is on or off you might need to look up what value to use for the role attribute here and that gives us a chance to practice searching for information which is a big part of any developer's job pause here and give this a go did you figure it out no worries if you didn't that's why we're doing this together here the role attribute defines the role of an element to assist of Technologies in the context of this custom toggle switch roll switch indicates that the element is intended to be used as a switch similar to a checkbox but typically used for onoff States if we omit the role attribute here assisted Technologies may not recognize it as an interactive element the ARA checked attribute here tells the screen reader whether the switch dis activated or not without area checked there's no accessible way for assestive Technologies to determine the state of the custom switch and tab index introduces keyboard accessibility to summarize we want to use ARA when we're creating a UI component that doesn't exist in HTML we need to provide additional information or context to assistive Technologies which can't be achieved with HTML alone however avoid using ARA if the same functionality can be achieved with Native HTML elements as we wrap up remember that ARA is a powerful tool for enhancing accessibility but it should be used judiciously and thoughtfully its role is to complement HTML and not replace it great job and see you in the next lesson ARA live regions are part of a web page marked to be dynamically updated when content changes in these regions it is announced by screen readers without the need for the user to navigate to the changed content common use cases for ARA live regions include realtime notifications like these or such as status messages after form submissions and updates resulting from on page filtering or searches we use an attribute called ARA controls to connect the cause element with the effect element and we can also choose between different settings for how these changes are announced for this we use an attribute called ARA live when it has the value off that is the assumed default for elements so it should not be necessary to set this explicitly ARA live polite is by far the most common one to use any region which receives updates that are important for the user to receive but not so rapid as to be annoying should receive this attribute the screen reader will announce this change when there is a natural pause in their speech are alive with the value of assertive should only be used for time sensitive or critical notifications that absolutely required the user's immediate attention generally a change to an assertive live region will interrupt any announcement a screen reader is currently making as such it can be both annoying and disruptive and should only be used sparingly let's look at an example once the submit button here is clicked we have a JavaScript function that replaces it with this paragraph originating from right here thanks to using the ARA controls attribute here we point assistive Technologies towards an ARA live region the element with the ID of submit message match in the ID here a screen reader for example would thereby detect the change in the content of the ARA live region and read its content but we want to do so politely as in we want the screen reader to announce the new content when it has time in between reading other content so I have a challenge for you update the code so that pressing the submit button politely announces the new revealed submit message pause here and do this now okay so we should use the attribute Ariel live we should put it in this element that we create when we press the submit button let's do it right here and it should have the value polite great job now there's one more thing we could do to make life easier especially for users with assistive Technologies there's a concept called programmatic Focus management this technique involves controlling the browser's focus in response to certain user actions like opening a menu or dialogue programmatic Focus management should be used when opening models or menus to direct the user's attention after completing actions like form submissions to bring Focus to relevant content or controls or to maintain a logical flow of navigation especially for keyboard users notice how number two here describes exactly what we are doing in our web page because of that I want you to try to do this for our web page all on your own so I want you to add Focus to the home link when the user submits a message by selecting the correct element and adding the focus function call to it you will add a line of code up here in the function and you will need to add something to the HTML as well and I want you to try to figure out what that is but it involves somehow getting the home link element in the same way as we get the submit button pause here and give this a go did you figure it out regardless I will do it with you now I will start by adding an ID to the link tag here let's call it home link then I will get access to the home link in the same way I get access to the submit button up here let me actually just copy this and then we want to call the focus function on the home link like so now if you try it out it works beautifully when we press the submit button not only do we get this message informing us that the form was submitted successfully but screen readers are informed of this too without having to navigate to this new informational element first focus is also placed on a link to the homepage which makes sense since we are probably done here on the form page and this helps users with assist of Technologies a lot it's important to note that we should only use live regions for essential updates and avoid overuse of focus management as it can easily disorient users if not done logically so in summary ARA live regions and programmatic focus management are Advanced Tools in your accessibility tool kit used effectively they can greatly enhance the user experience for screen readers and keyboard users alike keep these techniques in mind as you develop more interactive and accessible web applications and I will see you in the next lesson functions are red for Loops are blue scrim by is great and so are you I wanted to end on something fun and this is something that you can impress anyone with and hopefully helps you think more creatively about accessibility we will make a hidden link for skipping straight to the main content of our homepage have you ever looked up a recipe on a recipe site and because of the long introduction there's a link saying something like go to recipe and when you click on it you get to skip all the stuff you weren't interested in that's exactly what a skip navigation link does for users that navigate by tabbing through focusable items on a site it can be frustrating to tab through all the navigation links before arriving to the main content therefore we will offer a link that skips straight to the main content this is a website for coding poetry and it has a long list of navigation links try pressing your tab key now and notice what happens you may need to refresh your little browser window I'll wait did you see that our skip navigation link suddenly appeared from the side and if we click the link it takes us down to the main content and disappears again I think this is super cool by now you are well aware how links work but how are we making it appear and disappear there are several ways to hide an element and in this case some of them are not accessible and some of them are the reason these approaches are not accessible is because we can't focus the elements but with one of these on our right we can I have a couple tasks for you the first one is to make this into an accessible link and you'll need to apply the knowledge you've learned about links from our previous lessons there are more than one way to make it into an accessible link so use your creativity pause now and give this a go I hope that went well now let's do it together it would be enough to Simply make the link blue and uh say apply an underline but I will do something slightly different I will add a border and some padding and Border radius now if we take a look we see that something is sticking out here and I styled it with the intent to shift it a bit more to the left just like this and then we also need to change it here and now if we have a look I think that looks pretty good excellent work feel free to play around with it some more when you're ready to move on we will look at one potential issue with our link see you in the next lesson while our skip navigation link looks great there is still a problem if we decide to hide it like this it's not great if it just jumps in and out of you like this since a user may not expect it they might quickly tap past it not knowing it was ever there one solution to this is to apply a transition period this is your challenge look up the transition CSS property and make it so that our skip navigation link takes 1 second to appear when focused and 3 seconds to disappear when no longer focused pause now and try to figure out how to do this if you managed to do this I am beyond impressed if not don't worry I'll show you so that you can do it with ease in the future all we have to do is add the transition property to our skip navigation link and add one second like that with second being represented by an s this means that it will take 1 second to transition from this state to the state we Define in our pseudo class and because we want the transition to be slightly different when we no longer focus on the element we add it here as well with 3 seconds instead of one pause quickly here and see what this did now you see that even if we tap quickly past our skip navigation link it won't immediately disappear and users will therefore know that it is there this is not the most important accessibility feature to have on a website but it can definitely be fun awesome work when you feel ready I will see you back at our homepage welcome back I will send you off on a quest straight away your challenge is to build your very own skip navigation link for our homepage there are two requirements its default State should be visually hidden yet accessible to all keyboard users and secondly it should utilize the transition property pause now and follow these five steps good luck and I'll be waiting for you on the other side you are incredible and I hope this got your creative juices flowing the first step was to add the skip navigation Link in our HTML and we put it here right above the logo then we want to add an hre attribute and we want to point it to our main content which is here to connect them this needs the ID same name as we put up here great but right now it's displacing our whole navbar so let's apply some CSS I simply added the same CSS as we did in the previous lesson in fact you have now learned the essentials of accessible development and we have finally ared at your last big challenge when you feel ready I will see you there in this final challenge we are presented with a brand new contact page of our drone food delivery site that on the surface might look good for many however there are several accessibility violations hiding in the code of this page and it's up to you to identify them write them out as a comment right here to make sure that you have identified everything there is when you can't find any more accessibility violations we will go through this together pause here and happy searching I am sure you found a lot of them let's have a look you may have noticed that the placeholder text is kind of difficult to read with this light gray color on a white background so we should add that here furthermore we see we have an image here and when we have an image it needs to have an ALT tag if we go into our HTML we find our image down there and it does not have an ALT tag currently so we add this to our list that's hugely important now we have a look again and not only are the placeholder names difficult to read but this form has several accessibility issues another being the complete lack of labels and what about this button a button that just says done is a little bit ambiguous so that's also something we would prefer changing I think that's it from what we can see by just looking at a page but we need to head into our HTML to see how the code is structured we have the body tag here but while this div has an IDE of main it lacks the main tag on top of that the page starts with an H2 instead of an H1 heading finally if we head to our CSS file we notice that font sizes are defined in pixels and not R so we will first add that semantic HTML is lacking and finally that the font sizes are defined in pixels rather than R okay that should be all of them let's start fixing this is the moment we've been waiting for apply your amazing coding skills and knowledge of accessible development to make this page delightful for everyone to use by fixing each and every one of these accessibility issues issues pause now and I will see you very soon okay I hope most of that was now effortless for you let's fix these issues one by one in order first we need to update the placeholder text color so that the contrast has a AAA level accessibility here's the color for the placeholder text and I checked in advance and this color on a white background will give us a great contrast value and as we see it's so much easier to read next up the alternative text for our image is missing so let's go into our HTML and we have our image down here and we'll just add the alt tag that description makes sense to me beautiful next next we do not currently have labels for our input Fields so let's add those and this is connected to the ID of our input field which it doesn't currently have so we need to add the ID and name it whatever we put here let's write full name that works let's add the labels for the other input fields and this text area should have a label to now here's a part that I intentionally left out do you notice how the placeholder name and the label are currently the same when you thought about what to name your labels your ideal solution would have been to name the labels like this and then change the placeholder names to be a appropriate examples for instance and if we do that we don't have any repeating text moving on the button text was definitely a little bit ambiguous so instead of just saying done let's describe the action like this that's better now we need to look at our semantic HTML and make sure that we are using descriptive tags the first issue we saw was that this was just a div when it should be a main tag secondly the main heading of our new page should be an H1 not H2 we should not skip heading numbers and finally font sizes should not be defined in pixels but rather we should Define them in REM here we have the first one and this is PR this is 1.25 REM and this is one Rim that's it you're done you made both the homepage and the contact page of Skynet eats website accessible to all users phenomenal work you did it you were able to step by step take a website and make it much more accessible let's do a brief recap of what we have learned so far we learned the importance of text contrast and the different accessibility grades AAA being the best we learned to always include an ALT tag for images in our HTML and how to write descriptive alternative texts we learned how to code accessible links form fields we got a recap on semantic HTML and even got to code a link that skips straight to the main content of a page being able to develop accessibly is such a superpower and something that will make you and your future project stand out from the rest I'll leave you with a little rhyme accessibility is important that much is true the scrimba community is great and you're part of it too best of luck in your next endeavorlearn how to make the web a better place for everyone in this course you'll dive into what it truly means to build accessible websites and why it's important instructor and web developer Frederick ritfolk will teach you the fundamentals of accessible development like understanding contrast ratios exploring the accessibility tree getting familiar with wcag levels and much more Hello amazing coders and welcome to this course on accessible development when we are developing anything we are creating content and we say that content is accessible when it is available and its functionality can be operated by anyone therefore accessible development means to develop with everyone in mind including all the users who have some sort of disability developing accessibly isn't just the right thing to do but any future employer will want to know that you have all their users in mind when making decisions and it's also the law in some countries here's a website which is currently suffering a lot of accessibility issues in this course it'll be your job to save this website you will of course not be alone my name is Frederick and I will be your teacher together we will learn how to get some easy wins to help improve accessibility with minimal effort you will also find that many of these techniques will help you create interfaces that are more pleasant and easy to use for all users by the end of this course you will have the skills to to help build a more inclusive digital world before we get coding I want to show you some of the various types of assistive Technologies and how our accessibility improvements work we'll also touch on accessibility testing methods there are various types of assessive technologies that benefit from accessible web content these include but are not limited to screen readers speech recognition software screen magnifiers and alternative input devices designed for people with motor skill impairments screen readers are one of the most common types and they rely heavily on headings links and form labels for navigation at the heart of web accessability is the accessibility tree a key part of how browsers interact with assisted Technologies this tree is a simplified representation of the page focusing on elements important for accessibility like headings links and form labels this could be our code and the browser translates that into a visual UI but at the same time it also translates our code into an object called the accessibility tree which contains a lot of important information and context in text form the improvements we are going to make in this course will make our components available inside this accessibility tree and provide assistive Technologies with this important context here are two buttons that look the same in the visual UI because we style them the same but in the accessibility tree the button made using a div tag lacks information and context when you use semantic HTML that is the right element for the right purpose the browser automatically feeds the correct information into the accessibility tree this helps assistive Technologies to navigate and interpret the content accurately keyboard accessibility is another Cor Corner Stone of web accessibility and by using correct HTML elements like button tags a tags and form elements you sort of get keyboard accessibility for free this means these elements are naturally focusable and operable with a keyboard no extra coding required we will get some hands-on experience with this later in the course here is how we can access the accessibility tree in our web app in my example I'm using Chrome as my browser and if we open up our developer tools there will be a tab called accessibility click on that and click on enable full page accessibility tree your developer tools will ask you to reload and when you do that you will see an accessibility button popping up if you click on it you will see the accessibility tree this is not exclusive to Chrome other browsers like Firefox also gives us access to viewing the accessibility tree I'll leave you with a link to a complete guide on how to work with the accessibility Tree in Chrome dep tools so how do we test our accessibility well the first way is quite straightforward we can experience our own site using for example a screen reader to understand how our content is presented there are tools like contrast Checkers that help ensure our text is readable against its background we also have automated tools at our disposal like lighthouse in Chrome accessibility inspector in Firefox or a software called called axe these softwares can help identify common accessibility issues and we can also use AI assistants to test our code in terms of accessibility for example we can supply our code to the AI and ask if it detects any poor color contrasts or missing labels or if we have used the wrong native HTML element for the job I myself use chat GPT daily for this and much else if you are using Chrome as your browser you can find Lighthouse by opening up your Dev tools and going to the lighthouse tab up here there you can select what you want Lighthouse to do for example to test your s's accessibility on desktop then you just press analyze page load when Lighthouse is done analyzing we will get a score of 0 to 100 on how accessible our ctis not shown here is also a detailed walk through of any accessibility issues that light house found so that we can identify them and fix them it's time for some Hands-On learning let's head into some code and learn about accessible color contrast see you in the next lesson before we start we need to know what is considered accessible there are well-defined requirements on things like text images the HTML code and so on these are called the web content accessibility guidelines these guidelines have different levels called a able a and AA a the a level means it's not accessible the able a level is considered accessible but what we really want to achieve is the highest grade AAA whenever possible let's look at our first specific example color contrast for text as in the contrast that text has against its background black text against the black background has a contrast ratio value of one 1: one it's the same color the highest contrast ratio is black and white that has a ratio of 1:21 this light gray text against the bronze background has a value of a bit over two the dark gray text against the silver background has a value of a bit over four and the black text against the gold background has a value of almost 19 to demonstrate further here's a rainbow with dark blue text inside each strip and similar to what we just saw the contrast values are written in each stripe this dark blue text on this red background has a ratio of 3.32 it's not very good and difficult to read we can easily check the contrast value of text against its Background by visiting an online contrast Checker like this one and this is a link you can click on or if we for example are using Chrome as our browser we can check such a value by pressing control shift C on PC or command shift C on Mac and then hovering over the text under accessibility you will see the contrast value similar functionality exists in other browsers like Firefox and Edge if you using something else than Chrome I recommend looking up if and how your browser can analyze color contrasts I want you to pause here and give this a go and check that the contrast values are indeed what I have written here by hovering over each and every text great so now you might be wondering what color contrast values are good to be accessible normal text should at least have the value of 4.5 and at least three for large text but what we really want to achieve are these AAA requirements it's time for your first challenge I want you to change the color of each text so that they they all fulfill the wca's ablea requirements which is a contrast ratio of 4.5 pause now and try this out okay hopefully you gained some insights if you tried black in white text you probably noticed how they had good contrast on different backgrounds in fact you probably managed to achieve a contrast value of over seven for most backgrounds which is the best possible achievement but no no matter which text color we use white or black or anything else the contrast values can't reach seven for the red and green backgrounds pause quickly here and think about how you would solve this so in this case you would need to either change the background color or make the text bigger I have a challenge waiting for you on this but while on the topic of colors I want to show a brief example of another aspect to think about when using color in an accessible manner follow me into the next lesson I want to give you a little heads up on using colors in your apps because while colors are a super way to communicate information we should not rely solely on color instead we should combine color with shapes or with text or ideally both here we have two simple user cards quite similar to what we often see in chat applications they have a profile picture a name and an indicator to communicate if the user is online or offline indicated with either green or red color I want you to have a think about how you could improve this indicator using shape and text pause here did you cheat and looked up a chat app you use to see how they do it if so perfect that's exactly what I would have done a simple way to make this more accessible is to pair the color indicator with an icon as well as to add the status text so that it looks something like this there might sometimes be cultural differences as well in how colors are interpreted but with these changes alone the over 300 million people with some degree of color blindness in the world will thank you for this consideration now it's time to test our knowledge of accessible color contrasts now let's apply what we just learned on this website's homepage the website belongs to a company that delivers groceries to your window by drones quite futuristic sounding but perhaps how we will get our onions and soy sauce one day soon but as you can probably already tell some big mistakes with color contrast are currently being made here's your challenge identify any parts of the page where the text contrast is poor and then change those parts so that they fulfill the AAA requirements and just so you remember you have your AAA requirements right here there are actually multiple ways to solve this accessibility issue I leave it to you to choose how to do it pause now and give this a sh I am really curious to know how you went about making these text contrast improvements the first part of the challenge was to identify any parts of the page where the text contrast isn't good enough this is obviously the case here with the word eats which is green and it sort of Blends into the background of of the Green in the image behind it and it doesn't really solve anything to change the color of this word to uh black color uh because the contrast will will still be poor on top of the image and if we change it to White well it will be uh impossible to see outside the image one way you might have gone about solving this challenge is to find the the selector for that specific word which is right here and then added display block and look at that what that does is it forces the word to be on its own separate line it takes up the maximum width and that solves our text contrast issue another way to solve this and perhaps my own preferred way is to instead of making the title of our homepage two lines I would simply focus on the hero image and maybe make that a little bit smaller something like that and that does it although it looks a little bit awkward so I'm going to push it down a little bit from the top something like that that's one part the other part of the page you probably immediately recognized as having poor text contrast is the footer dark green on dark gray is going to be hard for just about anyone to read so we go down to the footer in our CSS and this is where our icons and text get their color and if we change this to white or FFF FFF that looks so much better so much much easier to read and I think we are ready for a new section on our homepage now we have an about section where we are told the background story of the company and how the higher of AI and Robotics Ariana Grande founded the company but once again there's a huge issue in seeing what the text actually reads so one more time we need to make the text much much more readable by improving the text contrast this is a bit tricky because it's a background image but tricky is the word and we have a trick up Our Sleeve I want to introduce to you a CSS property that you may or may not be familiar with here's your challenge I want you to practice your Google Fu and search for background blend mode it's a CSS property and see if you can figure out how to make make the background image in our about section brighter so that the text is much more readable pause here and give this your best chot if you figured out how that is amazing now let's do it together we go up to where we find the background image being stated and we are going to add two CSS properties round color I'm going to make this white and then a stands for Alpha and here you can set a value of 0 to 1 and we're going to do a high number 0.85 so far nothing has changed now we use background blend mode and we write lighten and did you see that all of a sudden it got lighter so it Blends the background color with the background image cool right maybe this seems limiting at first maybe you love the colors pink and white and wanted to build a website with those colors and then I come along and ask you to rethink that well Einstein famously talked about how how he limited his wardrobe to just a few select options so that he wouldn't get overwhelmed by all the options which he called option paralysis so much like Einstein may have omitted pink and white outfits in his wardrobe we can omit pink text on white background or vice versa in web development next up we will move on to making images accessible to everyone see you there when we add images to a web page we should consider the fact that some users cannot see images they need a text alternative and as we will see this text is simply added inside the images HTML tags as attributes the text given here is not visually displayed on the page but is hidden in the code to be accessed by screen readers and search engines like Google so what is best practice when writing alternative text for images this first example is way too wordy we want to be as concise as possible we also shouldn't start by writing an image off because the screen reader will say it's an image anyway the second example here is great but you may wonder do we have to add alternative text to all images well yes and no we need to add the alt tag to all the images in our HTML but if an image is purely decorative we don't need to write any descriptive text the reason we do this is because without it a screen reader May read out the image file name instead and that can be quite annoying alternative texts mainly help people with little or no vision people who have turned off images to save data and it also helps search engines like Google to find appropriate content to practice this we have a website displaying a collection of strange digital art which currently isn't very accessible okay time for a challenge I want you to add appropriate alternative text to all the images on this web page have a look at the Batman duck example the uh second one when trying to write descriptive text the text needs to be concise but still communicate the important parts of what the image shows so pause here and give this a try okay I hope you had a good time trying to uh describe these very strange images we have on our page I know I had so let me show you what I came up with I will look at the first image here the astronaut and then go to our HTML and here we find it what I'm going to do is add the alt attribute and I came up with the text an astronaut suspended in midair by a dark cloud over a field of purple grass I'm not sure that's an astronaut but it looks like it to me and for the second image down here I came up with a chair with a small Cloud hovering over it in the desert next to a dark Rock and finally this image here I wrote dark cubes and cylinders floating in the air along with two glowing orbs but if you noticed we skipped an image this right here is an image as well and we find that up here in the hero section so this was also a challenge to try to describe it's very strange my best take on it was a hand made of metallic liquid dripping upwards again you might have described these very differently but the important part is that you got practice in applying an ALT tag in your HTML to every image and writing a concise or as concise description as possible and finally one thing I tend to do when writing alternative text is to end with a period as you can see this is not something you need to do but it makes a screen reader do a brief pause which can be helpful when listening to it describe all the content on a page I have one last question for you which is what if this hero section had a background image like this one should we add an alternative text to this image the answer is no not all images should have an alternative text if the image for example has a label or an adherent text that describes the image an alternative text becomes redundant we also shouldn't give decorative images like this one an alternative text decorative images don't add informational content but are purely for Aesthetics examples include stylistic flourishes background images or images used for spacing for such images it's best practice to use an empty alt attribute like we see here having an empty alt attribute tells the screen readers to skip the image in the absence of an old attribute some screen readers May default to reading out the file name of the image in our case here the screen reader might read out background.jpg this can be confusing for users who rely on screen readers as file names often don't provide meaningful information about the image this is just one example but another very common type of decorative image that should have an empty alt attribute are icons combined with text think for example of the magn glass in a search field finally we should understand that alternative text is important for everyone not just those using assestive Technologies firstly alternative text enhances the user experience in situations where images don't load due to slow internet or other technical issues so let's break our own image this is how it will look like if our image here fails to load for whatever reason luckily we have an alternative text that describes the content so that we don't miss out on any information the image conveys if we remove it we are left with merely a broken image link before moving on from this website we will also look at how we can make the links in here more accessible see you in the next lesson labels for control elements like links and buttons are very useful to all users but getting them right is particularly important to users with disabilities for links you should use the a tag in your HTML and your links should be recognizable as links and easy to find and finally they should have nonambiguous textt what I mean by that is that anyone should be able to understand understand where the link will take them even out of context the links are in so don't just use click here or more for your labels as screen reader users sometimes navigate through links without reading the context let's look at a few examples the first link is not very accessible why because color alone is not sufficient to indicate the presence of a link underlines are a popular commonly understood way to communicate the presence of Link content however the text here is still ambiguous uh we don't understand it outside of its context so this is much better we can clearly see it's a link and we understand where the link will take us even out of context now I have a challenge for you I want you to update all the links in the website so that they meet the following requirements one they can be identified as links by more than just color alone and secondly the link text is not ambiguous as in we understand where the link will take us even out of context pause here give this your breath shot and afterwards I will show you how I would do it okay I hope that went well so we have a link in each paragraph here's one here's one and here is one so we have three links to identify and the eight tags are currently only wrapping the he word what I would do is to make sure that the a tag is wrapping this whole last sentence actually like that now this whole sentence is a link that can be understood outside of context next up I'm going to apply the same principle to the second paragraph and make the whole last sent sentence a link and for the third link we do the very same thing we transform the full sentences into links but it's still only communicated by color so we have to go into our CSS and there are actually multiple ways of making the links more accessible one could be to make the text more bold than the text around it but in another way as we saw in our example here giving it an underline is a commonly understood uh way to communicate that something is a link so if we change text decoration none to underline we Achi an appearance that definitely to me looks like a clickable link in fact text decoration underline is the default for a elements so we could actually just remove this and the default styling is still there let's have a quick look at some less traditional links let me show you an example here I've turned our section into a card and now the whole card is link to more work from the artist when making an advanced link like this we need to do a bit more to make sure the link is accessible because quite often accessibility issues arise from how they're built commonly using the a tag to wrap the whole component like we have done here this is totally understandable as an approach because it succeeds in making the whole thing clickable but it negatively affects the screen reading your experience if we move to the card using a screen reader a very long string of text content will be read out and only after this and I told the card is linked which is a bit slow and maybe a bit confusing plus elements like images included in the card might not be specifically announced as image either any nested structure is lost within the link instead the link should be positioned inside the card without wrapping any text now I'll will show you how to do this we just improved accessibility greatly and by cheating using either CSS or JavaScript we can make the whole card clickable just like it was before feel free to pause and check out my CSS solution which you uses absolute positioning and a pseudo selector the CSS is a bit Advanced and out of scope for this lesson but as you develop your skills it's important for you to know what the correct approach is it could also be a good idea to add a hover effect to the whole card like we did here to make sure the cursor is a pointer and also to modify the call to action text so that the user understands that the whole card is now clickable the card should also be focusable if we tab through the page since I mentioned modifying the call to action text we should also make that update this is much better communication additionally I added something called an ARA label and I added it to the link inside the card this will be read out by screen reader and it's an accessible feature to use when the link lacks a descriptive text as in our example here we will cover area labels in their own scrim later on in the course at this point you have already learned some of the most important ways to make a website accessible in the next lesson we are going to return to our Skynet eats website and apply our new skills see you there we are back with our drone food delivery app and we have introduced a news section with some general info and statistics about the company but the website lacks alternative text for its images and some of its links are not accessible enough this is where you will swoop in to save the day your task is simple update our images so that they have appropriate alternative texts and update any links that are either not recognizable as links or they have ambiguous texts this requires you to have a look around and work both in our HTML and CSS pause here and give this Your Best Shot okay I hope that went well if you were still unsure about anything I will now show you exactly how I would do this let's start with updating our images with alternative text the first image is this one here we find the hero image which is where I will add the alt tag and the text that I chose to write reads food delivery Dron saying I come with peace and remember when text is part of an image a screen reader won't be able to read it therefore if it conveys important information which I think in this case it does because it communicates humor we should add it to our alternative text that's image one for our new section we have this image here of a drone we find it right here I'll add the all tag and I decided to Simply and concisely call this a flying Skynet drone maybe you just wrote a flying drone and that's okay my thought was that this might be skynet's own unique design of a drone that this is an image of and therefore it makes sense to be specific did you notice that I left out one thing I didn't add any period to the end of the sentence which I am a fan of so I'm going to do that here and also up here I'm adding a period by the end to give the screen reader some pause when reading the alternative text amazing now to the second part of the challenge which involved our links this link here isn't very accessible so first I'm going to take this a tag and wrap it around that's better we still haven't done anything to the CSS and we will get there but first this is another link and while it does a pretty good job communicating that it's a clickable link the text is still ambiguous so let's change that we go down here and then here we have to change it to something else it will take us to their about page so how about we just write about Skynet I think that makes a lot of sense now we head to into our CSS to update this link right here I want it to be underlined so I'm going to go up to the info section and this selects the link giving it a green color let's do text decoration underline and there we have it immediately recognizable as a link but there's one more thing we can do remember everything we learned about text contrast well these small headlines drones customers and Cat conflicts their text contrast is not great we would love them to have a contrast value of seven or above so let's see if we can identify these selectors in the HTML we see that they have the class stat heading which is right here in our CSS and this is the color if we change that to a lighter gray then immediately it became much more readable and the contrast value is now 7.86 and you can check that yourself by going into the dev tools as we talked about in a previous lessons and hovering over these headlines give yourself a huge pad on the back for all the work that you've done you know so much already and I'm really excited about our next lesson together see you there labels in all forms are a hugely important part of EX accessible development unfortunately elements like input Fields often lack labels and are replaced by placeholder text let's look at two common designs of input Fields this first example has a placeholder but has no label and the second example has a label but is missing the placeholder text according to the wcag the accessibility guidelines placeholder text is not an accessible replacement for the label element the placeholder should only be used as a brief example of the text to be entered mainly because of inconsistent support for screen readers best case scenario an input field has both a label and an exemplary placeholder let's have a look at the signup page for our Skynet eats app seeing this you might think that this looks like a very standard signup form and you're right unfortunately it's common place to see forms like this out there that lacks labels so your challenge should you choose to accept it is to First add an ID attribute to each input field secondly add labels for each input field in the form I want you to search yourself how to associate a label with an input field so that when clicking the label the input field gets focused alternatively you could head over to our HTML and look at our input radio buttons because they actually have labels finally I want want you to change the placeholder names to be exemplary user inputs for example Obama for a surname field pause now and make this sign up page accessible to everyone okay if you manage to do this all on your own I am super impressed either way let's do it together we solved this challenge in our HTML and the first thing that I want to do is add an ID attribute to each input field like this beautiful nothing has changed yet now let's add our label elements and I want them to be on top of their Associated input fields and hopefully you manag to figure out that the way to associate it with an input field is to use the four attribute and then write the ID of that specific input field as the for name like that there we have the label and if you click on it make sure that it focuses the input field that you had in mind let's apply a label to all the input field let's save and have a look beautiful every single input field now has a label and it's associated with the correct input field now for the final part of the challenge it makes no sense to have the placeholder name be the exact copy of the label so what we want instead is to write an example of a full name here and here an example of an address and so on so we are going to be Sherlock Holmes let's try this and voila we have an accessible signup page and if you noticed we also have an image and the image has an ALT text a woman seeing a drone approaching better yet our button says send message which is very non-ambiguous and clear this form featured input Fields as well as radio buttons another common element you will see in forms are drop- down selection lists but do not fret because we make them accessible the same way we do input Fields now the city input is a selection menu instead and we work with labels the same way here as with input Fields the four attribute matching the ID attribute on the select tag finally I want to mentioned that the text inside links and buttons actually acts as labels providing an accessible name in the browser's accessibility layer if for whatever reason we want to create a custom button without using the button element we would need to add a so-called Ariel label attribute that substitutes the regular button label I will show you the difference in code here quickly this button is using the native HTML element while this button is our custom widget making custom button widget accessible includes not only providing an accessible name through Arial labels but also implementing keyboard accessibility and JavaScript functionality it's often simpler and more accessible to use the standard button element when possible as it inherently comes with many accessibility features built in we will stop here because we will dedicate a whole lesson on Ara labels later on in the course for now awesome work as always see you in the next lesson before we move on from this form here you should know that the radio buttons could have even more semantically correct HTML than they currently have we should use the field set and Legend tags to group The set and provide a context for screen reader users when a screen reader encounters a field set tag it typically announces that the user has entered a new group or field set this helps users understand that the following elements are related and should be considered as part of a group and when a screen reader encounters a legend tag it usually reads it out as title or description of the group time for a quick challenge pause here and look up how to apply the field set and Legend tag then come back back here and try to make the appropriate update to our code you don't need to add any new elements you just need to update the tags we already have in place give this a try okay if you manage to do this you might have noticed that the styling of our form changed that's because the field set and Legend tags come with inherent styling let me catch up to you there and this styling isn't very consistent with the rest of our form if you want take a moment to play around with styling the field set element and then I'll do it too I hope that was a fun little break from the accessibility work we've been doing I myself came up with this that's much more consistent now let's get excited cuz it's time to return to our sky eats app see you soon here we go we have the final section of our futuristic food delivery app in place it's a sign up form to get notified when the Skynet drones start delivering pizza to your window I myself want to be notified when that day comes cuz I can't wait for such Airborne glutenous Delight you probably already predicted what your challenge will be I want you to make this form accessible in the same manner as you did in the previous lesson we want to add labels for each input field in the form then we want to change the placeholder names to be as accessible and helpful as possible and finally we want to update the button text to be less ambiguous currently it's just a check mark symbol which is quite poor communication pause here and make this notification form accessible okay I hope that went well now let's do it together first we will go to our HTML and add the labels on top like this we need the four attribute but what do we need to put in the four attribute well we need the ID of the input field that we're going to associate it to which we don't have yet so make an ID call it name and then write name up there it full name that should be it and we have the labels but now the placeholders need updating as well so let's write an example here okay much better now we need to make the button much less ambiguous than this so we remove this symbol I'm going to write notify me because that's exactly what I want to happen when I press the button great finally I hope you also went into our CSS and found this selector for the placeholder and updated this color because currently it's light gray and difficult to see so let's make it a darker gray beautiful wasn't that easy and pretty effortless join me in our next lesson where we will have a recap of semantic HTML see you there want to know an awesome fact 96.5% of websites have accessibility issues that you can prevent by just knowing the fundamental the very same fundamentals that you're learning here in this course next we will have a brief recap of semantic HTML which is the use of descriptive tags in our HTML you might wonder why descriptive tags are so important after all you can use a combination of CSS and JavaScript to make just about any HTML element behave in what whatever way you want but it makes sense to use the correct element for the job the major benefit is that certain assisted technologies will use different HTML tags to navigate through a website semantic HTML doesn't take any longer to write than non-semantic markup if you do it consistently from the start of your project even better semantic mark markup has another benefit Beyond accessibility in that search engines like Google give more importance to keywords inside headings links Etc than keywords included in non-semantic divs so your content will be more findable by potential users we have tags that are so-called Landmark regions and they can be a nav a header main a section and footer and they help communicate the layout and important areas of a page and can allow quick access to these different regions because this is a bit of a recap for you I will challenge you to apply what you know about semantic HDML straight on our homepage your task is to update our code with descriptive tags using the landmark regions nav main section and footer secondly your task is to update our submit button to be a button element and I'm talking about this submit button in our form right here pause here and show off your descriptive tag skills welcome back I hope that semantic HTML is starting to make sense to you let's do the challenge together now this is our nav currently coded as a div tag so let's change that very simply we write nav next we have the main content which is always positioned between the nav and the footer so we changed this to Main and this is the end tag beautiful finally here's our footer closing tag excellent remember that our challenge was to also use sections so this is a good start but in our main content we have several different sections here's one place where it makes sense to use The Landmark region section and here here as well amazing nothing changed on the surface but behind the curtains it's much more accessible finally we have a submit button here but it's coded as a div tag it should be a button like this fantastic that's all we need to do for now are changes manifest in easier navigation using assistive Technologies like screen readers because they can quickly identify these landmarks and provide shortcuts or navigation commands to jump directly to these sections for example a user can skip directly to the main main content or quickly access the navigation menu this reduces time and effort required to navigate through unnecessary content enhancing the efficiency of the user experience Landmark regions also help users understand the layout and organization of a page so when a screen reader enters a new section it can announce the type of landmark like navigation or main content this contextual information is crucial for users who cannot visually perceive the page layout using standard landmarks across websites creates a predictable browsing experience users become familiar with common landmarks knowing where to expect certain types of content like a footer for contact information I suggest looking up screen reader demos online to get a better sense of the user experience with and without semantic HTML onwards and upwards coders you are doing amazing ly see you in the next lesson where we will write accessible lists this is a continuation of applying descriptive tags to our HTML and here we are going to focus on lists any consecutive items in our code should be either an ordered or unordered list with list items not just a bunch of repeating divs your challenge is pretty straightforward identify any connected consecutive items secondly update the sections to be unordered lists thirdly wrap each item with a list item tag and finally add the necessary CSS to maintain the style of the sections there are several places on our homepage where we have connected consecutive items that need to be turned into lists so so pause here and give it a go okay I hope that went well now you can watch me do the same the first place we have consecutive items is in our nav bar with our nav links so let's go to our HTML and find our Navar and this container right here should be made into an un ordered list now I'm just going to Sidetrack briefly and tell you about a neat little trick if you press contrl D on a PC or command D on Mac after highlighting any text in your code it will additionally highlight the very next place in your code where you have the same text so I highlighted both the opening and the closing tag of the div now I can just write the unordered list tag another neat trick is to hold down the ALT key on PC or the option key on Mac and press in multiple locations this allows you to type in multiple locations at once like this it's a really handy time saer and here the closing tags now if we save we see that we have made the naar into an unordered list and we see that by these markers now we don't want these markers to be there but they are default styling of list items we will remove them later first we will focus on adding all of our lists in this section we have our next set of connected consecutive items these stats right here and we find them here and finally our footer has connected consecutive items so this should also be a list and we wrap each link in a list item tag now if we save we see that the list applied but we want to remove these markers so we head into our CSS and up at the top where we Define our general selectors I will add a new one this is for all unordered lists and there is a property called list style type and if we add none the markers disappear of course it would have been possible to Simply use a series of div elements but remember how we in the previous lesson talked about semantic HTML and how it involves using HTML elements for their given purpose this practice is key in making content accessible for all users including those using assisted Technologies when encountering a list screen readers announce the start and end of lists as well as information about the number of items helping users grasp the content structure however when using div tags for listing items we lose this semantic Clarity and that's why we should love using list tags instead amazing work as always and I'm really excited to talk about font size in the next lesson I don't know about you but I actually have pretty bad eyesight nothing that lenses or glasses can't fix which makes me very fortunate but at my normal viewing distance when sitting in front of my computer this is how our homepage looks to me without lenses or glasses but this is how our website would look for some people even with visual aids okay let's go back to normal for people that prefer it they can change the default text size setting in their browser to make all text bigger and easier to read without needing to use the browser Zoom tool the problem is that the pixel unit we commonly use is a fixed unit of measurement and it does not scale with changes in the browser's default font size to reiterate using the pixel unit is compatible with zooming in and out but in order to accommodate user settings we can instead use a unit in CSS called REM spelled out like this as you may know by now the default font size is 16 pixels that's the font size of our paragraphs even before we added a font size property one Rim is equal to our default font size in this case 16 pixels the reason we want to write for example one Rim instead of 16 pixels is so that users can change the default size to be say 32 pixels instead of 16 pixels when they do that our text with one R all of a sudden becomes 32 pixels large alleviating our users from manually having to use the zoom tool in the Brower and with that I have a task for you simply change all font size properties from Pixel to REM units right here in the CSS and you'll need to do some simple calculations here if you need a calculator divide the pixel size with 16 and you'll get how many Rim it should be see you in a bit okay I hope that it didn't cause too much headache to do the calculations working with units is definitely something that comes natural over time let's do it together from the top down okay I think we have our first font size here to change this is 16 pixels so that translates to one R then we have 80 pixels that should translate to five R here's 1.20 five R three Ram 1.25 2.5 three RAM and finally one r and if we go back to our website and have a look the font sizes remain unchanged if you want you could change the default text size in your browser and see how it affects our text amazing work as always I'll see you in the next lesson when I was starting to code something stuck with me and something sadly didn't headings was one of these things I skipped headings I used paragraph tags instead of heading tags you name it this graph shows how screen reader users mainly navigate websites and headings is by far the most common way therefore it's super important that we apply them properly fortunately it's really simple we just need to be mindful of three main rules heading numbers should be consecutive 1 2 3 4 and so on we should only use one H1 per page and finally we should apply them for structure not style the style we can change however we like in our CSS our homepage is currently not following these rules your challenge is to apply headings correctly throughout our HTML make sure of the following first there's one H1 heading no more no less secondly heading levels are not skipped they are consecutive and finally headings always introduce new content sections pause here and update the homepage okay I hope you managed now I will do what you just did luckily as you probably noticed list there is really only one section that we need to make changes to and it's the info section right here remember how we should only have one H1 heading per page well in this section we already have one for our Skynet eats text so this should not be another H1 change that to H2 and then in our list down here we have H4 tags and H2 straight into H4 is not a consecutive pattern so we want to change all of these h3s we apply headings for structure and never style that's it and because we style our headings in our CSS nothing has changed by changing the heading tags in our HTML really fantastic work you are the superhero of the hour and that's all you need to know on descriptive tags we're really getting close to the end now next we will have a look at something called Arya so see you there in earlier lessons I briefly mentioned something called Arya Arya stands for accessible Rich internet applications Arya is a set of attributes that you can add to HTML elements to provide more context and information to assist Technologies it helps fill in the gaps where html's Native semantics fall short let me show you an example these two buttons look identical right well I made one of them using the semantic HTML button element and the other is just a regular div element that I style to look exactly the same but here is where they currently differ the but Buton element is inherently keyboard accessible and focusable when users navigate the web page using a keyboard they can reach an activate the button using the Tab Key and Enter space key respectively screen readers inherently recognize button elements as interactive controls along with the button label and the button element does not require additional ARA attributes to be recognized as a button since it has built-in semantics when we use the button element we get all this accessible functionality for free but when we decide to make a custom button like this we lose out on that functionality so we need to use ARA to reintroduce some of its functionality you can already tell that in most cases it is way easier for us to just use the semantic HTML tags this is known as the first rule of ARA is don't use ARA well that's a bit contradictory isn't it what it means is that if you can use a native HTML element or attribute with the semantics and behavior you require already built in instead of repurposing an element and adding an ARA Ro state or property to make it accessible then do so to make this div accessible it would need additional attributes such as roll button to Define its Ro as a button and tab index zero to make it keyboard focusable even with these attributes it might still lack some of the built-in accessibility features of a native button in this case an Arial label attribute would probably be redundant because the sign up label is explanatory enough but what's a typical use case then for ARA well they include elements like toggle switches sliders and non-standard labels I just added a common type of toggle switch to our website a dark theme toggle these elements sometimes lack native semantics making it challenging for assisted Technologies to interpret them correctly which is true for our toggle right now so here's a challenge for you I want you to add the three ARA attributes that do the following first define the role of the toggle switch then make the toggle switch keyboard focusable and lastly communicate the state to assisted Technologies in some way in our case that the toggle is on or off you might need to look up what value to use for the role attribute here and that gives us a chance to practice searching for information which is a big part of any developer's job pause here and give this a go did you figure it out no worries if you didn't that's why we're doing this together here the role attribute defines the role of an element to assist of Technologies in the context of this custom toggle switch roll switch indicates that the element is intended to be used as a switch similar to a checkbox but typically used for onoff States if we omit the role attribute here assisted Technologies may not recognize it as an interactive element the ARA checked attribute here tells the screen reader whether the switch dis activated or not without area checked there's no accessible way for assestive Technologies to determine the state of the custom switch and tab index introduces keyboard accessibility to summarize we want to use ARA when we're creating a UI component that doesn't exist in HTML we need to provide additional information or context to assistive Technologies which can't be achieved with HTML alone however avoid using ARA if the same functionality can be achieved with Native HTML elements as we wrap up remember that ARA is a powerful tool for enhancing accessibility but it should be used judiciously and thoughtfully its role is to complement HTML and not replace it great job and see you in the next lesson ARA live regions are part of a web page marked to be dynamically updated when content changes in these regions it is announced by screen readers without the need for the user to navigate to the changed content common use cases for ARA live regions include realtime notifications like these or such as status messages after form submissions and updates resulting from on page filtering or searches we use an attribute called ARA controls to connect the cause element with the effect element and we can also choose between different settings for how these changes are announced for this we use an attribute called ARA live when it has the value off that is the assumed default for elements so it should not be necessary to set this explicitly ARA live polite is by far the most common one to use any region which receives updates that are important for the user to receive but not so rapid as to be annoying should receive this attribute the screen reader will announce this change when there is a natural pause in their speech are alive with the value of assertive should only be used for time sensitive or critical notifications that absolutely required the user's immediate attention generally a change to an assertive live region will interrupt any announcement a screen reader is currently making as such it can be both annoying and disruptive and should only be used sparingly let's look at an example once the submit button here is clicked we have a JavaScript function that replaces it with this paragraph originating from right here thanks to using the ARA controls attribute here we point assistive Technologies towards an ARA live region the element with the ID of submit message match in the ID here a screen reader for example would thereby detect the change in the content of the ARA live region and read its content but we want to do so politely as in we want the screen reader to announce the new content when it has time in between reading other content so I have a challenge for you update the code so that pressing the submit button politely announces the new revealed submit message pause here and do this now okay so we should use the attribute Ariel live we should put it in this element that we create when we press the submit button let's do it right here and it should have the value polite great job now there's one more thing we could do to make life easier especially for users with assistive Technologies there's a concept called programmatic Focus management this technique involves controlling the browser's focus in response to certain user actions like opening a menu or dialogue programmatic Focus management should be used when opening models or menus to direct the user's attention after completing actions like form submissions to bring Focus to relevant content or controls or to maintain a logical flow of navigation especially for keyboard users notice how number two here describes exactly what we are doing in our web page because of that I want you to try to do this for our web page all on your own so I want you to add Focus to the home link when the user submits a message by selecting the correct element and adding the focus function call to it you will add a line of code up here in the function and you will need to add something to the HTML as well and I want you to try to figure out what that is but it involves somehow getting the home link element in the same way as we get the submit button pause here and give this a go did you figure it out regardless I will do it with you now I will start by adding an ID to the link tag here let's call it home link then I will get access to the home link in the same way I get access to the submit button up here let me actually just copy this and then we want to call the focus function on the home link like so now if you try it out it works beautifully when we press the submit button not only do we get this message informing us that the form was submitted successfully but screen readers are informed of this too without having to navigate to this new informational element first focus is also placed on a link to the homepage which makes sense since we are probably done here on the form page and this helps users with assist of Technologies a lot it's important to note that we should only use live regions for essential updates and avoid overuse of focus management as it can easily disorient users if not done logically so in summary ARA live regions and programmatic focus management are Advanced Tools in your accessibility tool kit used effectively they can greatly enhance the user experience for screen readers and keyboard users alike keep these techniques in mind as you develop more interactive and accessible web applications and I will see you in the next lesson functions are red for Loops are blue scrim by is great and so are you I wanted to end on something fun and this is something that you can impress anyone with and hopefully helps you think more creatively about accessibility we will make a hidden link for skipping straight to the main content of our homepage have you ever looked up a recipe on a recipe site and because of the long introduction there's a link saying something like go to recipe and when you click on it you get to skip all the stuff you weren't interested in that's exactly what a skip navigation link does for users that navigate by tabbing through focusable items on a site it can be frustrating to tab through all the navigation links before arriving to the main content therefore we will offer a link that skips straight to the main content this is a website for coding poetry and it has a long list of navigation links try pressing your tab key now and notice what happens you may need to refresh your little browser window I'll wait did you see that our skip navigation link suddenly appeared from the side and if we click the link it takes us down to the main content and disappears again I think this is super cool by now you are well aware how links work but how are we making it appear and disappear there are several ways to hide an element and in this case some of them are not accessible and some of them are the reason these approaches are not accessible is because we can't focus the elements but with one of these on our right we can I have a couple tasks for you the first one is to make this into an accessible link and you'll need to apply the knowledge you've learned about links from our previous lessons there are more than one way to make it into an accessible link so use your creativity pause now and give this a go I hope that went well now let's do it together it would be enough to Simply make the link blue and uh say apply an underline but I will do something slightly different I will add a border and some padding and Border radius now if we take a look we see that something is sticking out here and I styled it with the intent to shift it a bit more to the left just like this and then we also need to change it here and now if we have a look I think that looks pretty good excellent work feel free to play around with it some more when you're ready to move on we will look at one potential issue with our link see you in the next lesson while our skip navigation link looks great there is still a problem if we decide to hide it like this it's not great if it just jumps in and out of you like this since a user may not expect it they might quickly tap past it not knowing it was ever there one solution to this is to apply a transition period this is your challenge look up the transition CSS property and make it so that our skip navigation link takes 1 second to appear when focused and 3 seconds to disappear when no longer focused pause now and try to figure out how to do this if you managed to do this I am beyond impressed if not don't worry I'll show you so that you can do it with ease in the future all we have to do is add the transition property to our skip navigation link and add one second like that with second being represented by an s this means that it will take 1 second to transition from this state to the state we Define in our pseudo class and because we want the transition to be slightly different when we no longer focus on the element we add it here as well with 3 seconds instead of one pause quickly here and see what this did now you see that even if we tap quickly past our skip navigation link it won't immediately disappear and users will therefore know that it is there this is not the most important accessibility feature to have on a website but it can definitely be fun awesome work when you feel ready I will see you back at our homepage welcome back I will send you off on a quest straight away your challenge is to build your very own skip navigation link for our homepage there are two requirements its default State should be visually hidden yet accessible to all keyboard users and secondly it should utilize the transition property pause now and follow these five steps good luck and I'll be waiting for you on the other side you are incredible and I hope this got your creative juices flowing the first step was to add the skip navigation Link in our HTML and we put it here right above the logo then we want to add an hre attribute and we want to point it to our main content which is here to connect them this needs the ID same name as we put up here great but right now it's displacing our whole navbar so let's apply some CSS I simply added the same CSS as we did in the previous lesson in fact you have now learned the essentials of accessible development and we have finally ared at your last big challenge when you feel ready I will see you there in this final challenge we are presented with a brand new contact page of our drone food delivery site that on the surface might look good for many however there are several accessibility violations hiding in the code of this page and it's up to you to identify them write them out as a comment right here to make sure that you have identified everything there is when you can't find any more accessibility violations we will go through this together pause here and happy searching I am sure you found a lot of them let's have a look you may have noticed that the placeholder text is kind of difficult to read with this light gray color on a white background so we should add that here furthermore we see we have an image here and when we have an image it needs to have an ALT tag if we go into our HTML we find our image down there and it does not have an ALT tag currently so we add this to our list that's hugely important now we have a look again and not only are the placeholder names difficult to read but this form has several accessibility issues another being the complete lack of labels and what about this button a button that just says done is a little bit ambiguous so that's also something we would prefer changing I think that's it from what we can see by just looking at a page but we need to head into our HTML to see how the code is structured we have the body tag here but while this div has an IDE of main it lacks the main tag on top of that the page starts with an H2 instead of an H1 heading finally if we head to our CSS file we notice that font sizes are defined in pixels and not R so we will first add that semantic HTML is lacking and finally that the font sizes are defined in pixels rather than R okay that should be all of them let's start fixing this is the moment we've been waiting for apply your amazing coding skills and knowledge of accessible development to make this page delightful for everyone to use by fixing each and every one of these accessibility issues issues pause now and I will see you very soon okay I hope most of that was now effortless for you let's fix these issues one by one in order first we need to update the placeholder text color so that the contrast has a AAA level accessibility here's the color for the placeholder text and I checked in advance and this color on a white background will give us a great contrast value and as we see it's so much easier to read next up the alternative text for our image is missing so let's go into our HTML and we have our image down here and we'll just add the alt tag that description makes sense to me beautiful next next we do not currently have labels for our input Fields so let's add those and this is connected to the ID of our input field which it doesn't currently have so we need to add the ID and name it whatever we put here let's write full name that works let's add the labels for the other input fields and this text area should have a label to now here's a part that I intentionally left out do you notice how the placeholder name and the label are currently the same when you thought about what to name your labels your ideal solution would have been to name the labels like this and then change the placeholder names to be a appropriate examples for instance and if we do that we don't have any repeating text moving on the button text was definitely a little bit ambiguous so instead of just saying done let's describe the action like this that's better now we need to look at our semantic HTML and make sure that we are using descriptive tags the first issue we saw was that this was just a div when it should be a main tag secondly the main heading of our new page should be an H1 not H2 we should not skip heading numbers and finally font sizes should not be defined in pixels but rather we should Define them in REM here we have the first one and this is PR this is 1.25 REM and this is one Rim that's it you're done you made both the homepage and the contact page of Skynet eats website accessible to all users phenomenal work you did it you were able to step by step take a website and make it much more accessible let's do a brief recap of what we have learned so far we learned the importance of text contrast and the different accessibility grades AAA being the best we learned to always include an ALT tag for images in our HTML and how to write descriptive alternative texts we learned how to code accessible links form fields we got a recap on semantic HTML and even got to code a link that skips straight to the main content of a page being able to develop accessibly is such a superpower and something that will make you and your future project stand out from the rest I'll leave you with a little rhyme accessibility is important that much is true the scrimba community is great and you're part of it too best of luck in your next endeavor\n"