September 29, 2021

5 Essential Things For Every Web Page

We will tell you about 5 attributes of an HTML Web Page that many people forget about. By adding them, it will be easier for you to promote the site, moreover, they will make the site more convenient. And if you want to learn more about technologies you should visit this page: https://servreality.com/technologies/. To become the best, you need to learn from the professionals.

Developers have a key role to play in creating or disrupting site accessibility. This is why it is so important to follow the Web Content Accessibility Guidelines (WCAG) and web accessibility development and testing practices.

Key points when working on accessibility:

Determine the language of the page

Page language detection helps screen readers switch language profiles and adjust speech rates for correct accent and pronunciation. The lang attribute is used to define the language or section of the page.

<html lang = “en”>

</html>

Write HTML wisely

Have you come across sites where everything – from textual information to buttons – was wrapped in a div? On the one hand, using a div gives some flexibility in development, and on the other hand, it blocks all the built-in and convenient HTML functions. Therefore, by creating a functional button of a certain shape through a div, you need to get ready to write voluminous CSS code and add all the events for the keyboard and keyboard manually.

At the same time, all keyboard events can be written through the <button> tag! This not only saves valuable time but also achieves greater availability. Helpers get their information from the DOM. And the DOM ignores all handwritten JS and CSS. The use of semantic HTML allows you to effectively solve this problem. Here are some tips:

  1. Structure/add tags correctly. So assistive devices will be able to form and pronounce the text in the desired sequence. In addition, navigation will be simplified.
  2. For text content, use the <p>, <span>, or <h1to6> tags.
  3. Design your page layout correctly. For example, you shouldn’t write a header or footer in the <main> tag.
  4. Use the HTML5 <header>, <main>, <section>, <article>, <aside>, and <footer> tags for page layout. Then users can easily navigate from one part of the page to another.

Semantic HTML helps assistive technologies understand how to best “present” each element to the user.

Tags are more important than you think

Create labels for each control. Then screen readers can correctly identify and read the required field. How it’s done:

  • add the label text:

<label for = “name”> Title </label>

<input id = “name” type = “text” name = “username”>

  • if you do not want to display the description of the label in the visible area, then select aria-label:

<button aria-label = “Submitting form: form data will be submitted for further processing”> Submit </button>

Use Alt Text for Media

For pictures and captions, the alt attribute is great, and for audio/video files on the site, you can add an audio description. This is a great solution if for some reason (the form is not supported or problems with the browser) site visitors cannot open the media file.

Handling and correcting errors

Sometimes the result of filling out a form looks very sad. For example, special characters or numbers are not allowed in the “Username”, and “Password”, on the contrary, must be strong, therefore it requires the use of special characters and alphanumeric values. “Phone number” is always specified in a specific format, with spaces added or removed.

  1. Display errors under or next to the desired field. Highlight incorrect text and underline the misspelled field.
  2. When validating the entered values, automatically remove all problems from all fields, including the phone number.
  3. Add text or audio prompts, suggest replacement options – so the user quickly understands what exactly is required of him.
  4. Think over a scheme for viewing, confirming, and correcting the entered information before finally sending it to the server.

Always remember that your main goal is not so much compliance with development standards as a positive user experience. Create experiences that will delight users of all physical abilities.

check more article

Share The Post

You may also like