Payment in progress, please wait. 
Why Important?
Optimising the HTML of a website is essential for accessibility, because well-structured and semantic HTML ensures that assistive technologies (such as screen readers) can accurately interpret content and functionality, allowing all users to use the website efficiently and independently. Put simply, correct HTML is the basis for making a site understandable not only to browsers, but also to built-in assistive technologies and therefore to people with disabilities.Language setup
Make sure that the language code specified in the lang attribute is a valid language code (e.g.<html lang="en"> sets the document language to English). When configuring the text reader, users select the default language. If a web page language is not specified, the screen reader assumes the default language set by the user. Language selection becomes problematic for users who speak multiple languages and access the website in more than one language. To ensure correct pronunciation of the website text, it is essential to specify the language.
The text reader uses a different audio library for each language. They can easily switch between these language libraries, but only if the language used on the page is specified. If the language is not specified, the screen reader will read the document in the user's default language, which produces a strange result if languages do not match!
Example of specifying the current language:
<html lang="en">
<head>
...
Contrast Ratio
When designing websites, we often focus on visuals, but one essential element that often gets overlooked is colour contrast. But the right contrast is not just an aesthetic issue, it is essential for the user experience, accessibility and readability of content.General contrast requirements (AA level)
Text and text images
The contrast ratio of text and text images displayed visually should be at least 4.5:1.Large text
Large text (at least 18 point or 14 point and bold) and large text images shall have a contrast ratio of at least 3:1.Contrast ratio check
Images
Text readers cannot translate the image into words, even if the image consists only of text.Therefore, images must have a short, descriptive
alt text so that users using a text reader can clearly understand the content of the image.
If your vision is impaired, any visual information - such as images - is completely unusable unless a digital text alternative is provided so that text readers can convert the text into audio or Braille.
There are three main ways to add alternative text to an image:
Use Alt attribute
This is the default and most commonly used method for any image that carries information or is relevant to the content.
<img src="image.jpg" alt="Drawing of a cat"/>
Using the Aria tag
<img src="image.jpg" aria-label="Drawing of a cat"/>
Using the aria-labelledby or aria-describedby attribute
Used when the "title" or short summary description of the image is provided by another element.
<h2 id="short-description">Red sports ca</h2>
<img src="image.jpg" arialabelledby="short-description" alt="Image of a red sports car" />
<p id="long-description">This is a very detailed description of the landscape shown in the picture, including the location of the mountains, the bend in the river, and the types of trees.</p>
<img src="landscape.jpg" alt="Beautiful mountain landscape with a riverl" aria-describedby="long-description">
Forms
To make forms accessible, effective form labels are needed.The purpose of form elements such as checkboxes, radio buttons, input fields, etc. is often obvious to sighted users, but text-reading users need useful form labels to identify form fields.
Providing labels for all form elements will eliminate ambiguity and contribute to a more manageable form.
The recommended method in most cases is to associate the
label element with the for and id attributes.
<label for="firstname">First name:</label> <input type="text" id="firstname">
Error handling and validation
If an error occurs when submitting a form, clear error messages should be displayed
Error messages when handling errors on forms should be immediately recognisable, specific and helpful, and should clearly indicate which field the problem occurred in.Avoid surprises
Do not generate unexpected changes to the form (e.g. adding or removing new fields) without notifying the user.Input Types
HTML5 input types
Use the appropriate HTML5 input types (e.g.type="email", type="tel", type="date"). These will help devices (e.g. mobile keyboard) to prepare the correct input, as well as screen readers.
Autocomplete attribute
Use theautocomplete attribute on form fields where relevant. This helps browsers and assistive technologies to autocomplete user data, reducing typing errors and speeding up form completion.
Context and grouping
Group related form fields
Use<fieldset> and <legend> to logically group related input fields (e.g. shipping address details). <legend> provides the group label for screen readers.
<form>
<fieldset>
<legend>Personal data</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">E-mail:</label>
<input type="email" id="email" name="email">
</fieldset>
</form>
Buttons should be clearly labelled
The button text should clearly indicate its function (e.g. "Register", "Save data", "Submit").Scaling
Theuser-scalable=no parameter in the content attribute of <meta name="viewport"> disables zooming on the page.
The maximum-scale parameter limits the amount that can be zoomed by the user.
This is problematic for visually impaired people who rely on screen magnifiers to properly view the content of the web page.
Remove the
user-scalable=no parameter from the content attribute of the <meta name="viewport"> element to allow zooming,
and ensure that the maximum-scale parameter is no smaller than 2.
The general and most unobstructed approach is to not use the maximum-scale attribute, or to set maximum-scale=no (which means 1.0) to something higher, such as maximum-scale=2.0 or even 3.0 or 4.0.
<!-- The most accessible solution -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Recommended (if maximum scalability is required, the example allows 300%) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0" />