Learning to Code: Day 20— Applied Accessibility Part 2
Hello everyone, how are we all keeping this fine evening? Welcome back to Part 2 of Applied Accessibility. Let’s get back to where we were and look at more accessibility features in HTML..
Why can’t animations predict the future? Cause they can’t see forwards!
Ooooh deary me.
—
Better Screen Navigation — Header
Let’s see how they can be useful in making for a better navigation through the webpage. The header wraps round introductory information or navigational links for it’s parent tag, and pairs well with repetitive content at the top of the page over multiple pages.
They share similar characteristics with the main tag, but let’s not get confused with the head tag. Remember: the head tag is used in the top of the document for meta data to make the HTML function, which is not visible to the user (back-end), the header tag is used in the body tag of the HTML (front-end; what is visible to the user).
Better Screen Navigation — Nav
Let’s take a look at the nav tag. It has an embedded landmark feature and wraps around the main navigation links in your page. However if you have a bunch of site links at the bottom of your page, you can just use a footer instead of a nav as it is sufficient enough. Let’s see what the footer’s functions are next.
Better Screen Navigation — Footer
The footer usually contains copyright information or internal site links as mentioned above. It’s pretty easy to remember also as the contents of a document are set out like the human body: The head, the body, the footer etc. I mean that’s the easiest way for me to remember, we’ve all got our ways of remembering things guys.
The footer occurs outside the main tags but within the body tags. Let’s see what it looks like, with a little extra copyright code to see what that looks like too:
<footer>© 2020 Company Name</footer>
The Audio Element
Okay let’s finish up on this as it’s a cracker. I just looked over this and it’s amazing. Within the main tags, we can create an audio tag with a controls attribute, which creates a slider, a play/pause button and a timer. This is a boolean attribute, which means they are all preset and need no lengthy coding to make as typing “controls” switches them on.
Then we define the source (src) in the source tags and what type that source is. Take a look at that all together:
<audio controls>
<source src=”https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type=”audio/mpeg” />
</audio>
Note: Don’t forget that little sneaky forward-slash at the end of the source tag.
If you’ve got yourself a console to type this into, go ahead and see what happens. This will appear:
It is a real audio of a screen reader and sounds like someone speaking really fast, but this is normal for users that require screen readers. Linking a transcript or text near the audio is useful to those who are hard of hearing or deaf.
—
Aaaand let’s pick this up on Wednesday. Cheers guys hope you had fun.
We’ll be picking up at figure elements next. See you then!
