SEMANTIC HTML AND ACCESSIBILITY

WHAT IS HTML

HTML Hyper Text Markup Language (HTML) is a markup use to describe the structure of a web page.

HTML provides a set of tags that can be used to mark the beginning and end of a content.

Semantic code is basically the act of making sure that the code that you write is easily understandable to anyone who wants to work with it.

Semantic HTML is key towards good accessibility practices. When a screen reader, or any sort of assistive device scans a web page, it gets information about the Document Object Model (DOM), or the HTML structure of the page. No styles or JavaScript will be read by a screen reader.

A large portion of our web content can be made accessible by making sure that our Hyper Text Markup Language elements and attributes are used for their main purpose at all times. Its important that we use the correct HTML for their intended purpose at all times.

Why semantic HTML and accessibility

1. Easier to develop with and collaborate — semantic html makes your html code readable and easy to work with by other other developers. As it gives the readers or users understandable language on what the explicity functionality and what every part of the codes does. A new developer can easily pick ur code and know what every piece does. For instance:

the above html shows audio element that adds audio to a webpage

2. t Helps to improve Search Engine Optimization — semantic HTML helps to increase the feasibility capacity of a web page.

Semantic markup facilitates our chances of be seen by more users as Google’s algorithm helps to analyse mark ups and labels that is been used to analyze and understand the purpose of a page.

3. Better on Mobille — semantic HTML is quite lighter in file size than non- semantic spagethi code, and easier to make responsive.

4. This can help a lot of users ; which can help remove barrier for the following:

• People who have hearing impairments and cannot get information from media(audio or video)
• Those with physical impairments that prevents them from using a mouse
• Those with visual impairment who cannot get information from images that do not have text alternative

Using Meaningful Language

The language we use is a function of how accessible our web page could be. Its important to avoid complex language or jargons that dosen’t make sense. This is not because of people with disability or cognitive isssues but also for people whose the developer choice of language is not their first. Avoid using language or words that is not cleaerly defined by screenreader.

Where multiple images are used to convey a single piece of information, we can add alt text to the first image to provide a description. The rest of the images can then have an empty alt attribute. For example, in the forthcoming exercise, we will create an element for showing a rating using five separate star images. By adding an alt text description to the first image and empty alt attributes to the other images, we inform the user of the rating, even when the images are not visible. Here is the code below:

Accessible Forms

Making forms that are accessible takes a lot iteration and intuition, there are laid down principles we should follow when we are creating forms for a web page.

The technique we would try to examine is :

• Labels and input fields
• Fieldset

A common mistake found in web forms across the web can be seen below:

the following screenshot can be seen opf this markup:

Visually, this markup may look fine. This may be how we’ve designed the input and label. However, the problem for a user of a screen reader is that the text First name: is not associated with the input. A screen reader would not read out the text when navigating to the form field.

We need to provide labels for our form inputs, and we need to make sure that the labels are correctly associated with those input fields.

We can associate a text label with a form input field using a label element with a for attribute. The value of the for attribute must match an id attribute value on the appropriate form field. For example, the following code provides the label First name and it is associated with the input with the ID "first-name".

we can wrap the input with the label, again creating an association between the two. This will look like this:

In both cases, we now have a form field associated with a label. When a screen reader user navigates to the input element with the ID “first-name", the screen reader will read out the label First name. This explains what information the input field is expecting without the user relying on a visual association.

Conclusion

We have learned about the right ways to use alt text and text descriptions to make the images we embed in a web page accessible to users who can’t see the image. We then learned about making forms accessible and about controlling a web page via the keyboard.