1. Use headings correctly to organize the structure of your content -

• Use heading structures like (h1,h2,h3etc) properly and strategically ,so screen reader users will easily navigate and understand your content.

-Always be sure that you are using correct orders of headings, and separate presentation by structure by using CSS. Don't use the headings only because it looks good, instead create a new CSS class.

Examples of proper use of headings:

• Always use H1 tag for primary heading of the of the website ,avoid its use to any other title of the website and to the title of indivisual page.
• Use headings for proper indication and organizing the structure. -Always obey the heading levels (eg for is from "h1" to" h3.")

2. Include proper alt text for images -

-The proper alt text is provided for images ,so that the screen reader user will easily understand that which message is given by the use of image. This is important for specially informative images.When creating the alt ,the text should contain the message you wanna give through image,and if image contain text, that should be included in the alt .

• This alt text is left empty for only one case if and only if the image is for decoration purpose ,so that the screen reader user willnot get distracted from the important content .

• When you use the image as a link then always provide a proper alt text for image.

3. Give your links unique and descriptive names.

• Don't use the "click here text every where as this text is not that much understandable and descriptive for screen reader users".

• Just like normal users the visually-impaired users are using the screen readers for scanning the links ,so always use the descriptive text to explain the context of links to the screen reader users.

• The most unique content of the link should be presented first, as screen reader users will often navigate the links list by searching via the first letter.

• For example, if you are pointing visitors to a page called "About Us":

  Try not to say: "Click here to read about our company." Instead, say: "To learn more about our company, read About Us."

4.Design your forms for accessibility.

-Each field in your page should be well positioned and have good label , so that the screen reader user will enter his enteries into proper position. For example, If wanna take the entry of the name field so it should be either "full name" or seperated into two forms that is " First name" and "Last name". Use the tag or ARIA properly.

• All fields in the form should follow the proper visual order.

• If the fields in the form are related to same type then groped them into one fieldset. For example fields like "Full name", "Date of birth", "Blood group" should be groped into one fieldset named "Personal info."

• If certain form fields are required, the field should be labeled accordingly, and configured to alert the screen reader user. Mostly the required fields are denoted by asterisk or same kind of symbols but this aren't useful for visually impair users . so,use the ARIA required = "true" for required fields and ARIA= "false " for the optional fields.After submission the user will get the proper error that the particular fields are required . And if t5he user submits the form with an error it should be redirected to the form page again with an alert message and showing which types of errors are . Also provide the proper way to navigate those errors.

• Finally, the use of CAPTCHA is inaccessible and should not be used to validate submissions. WebAIM has a helpful summary of accessible alternatives to CAPTCHA to keep forms free of spam submissions.

5.Use tables for tabular data, not for layout.

• Don't use the tables for creating the websites as it adds the more confusion to the screen reader user. Whenever the screen reader encounters a table it inform that there is a table with "x" rows and "y" columns, which distract from the content and the content may not be read in the proper order by screen reader .

  -When the data table is necessary ,use headers for rows and columns, which has explain the relations in the cells. Complex tables may have several cells within the table that have unique relationship with each others, and this can be identified by using the "scope" attribute in the HTML. Table captions (HTML5) can be used to give additional information to users about how best to read and understand the table relationships.

6.Use color with care.

• The most common form of color deficiency, red-green color deficiency, affects approximately 8% of the population. Using ONLY colors such as these (especially to indicate required fields in a form) will prevent these individuals from understanding your message.

• Other groups of people with disabilities, particularly users with learning disabilities, benefit greatly from color when used to distinguish and organize your content.

• To satisfy both groups, use color, but also be sure to use other visual indicators, such as an asterisk or question mark. Be sure to also distinguish blocks of content from one another using visual separation (such as whitespace or borders).

• There are several tools you can use to evaluate color contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.

7.Ensure that all content can be accessed with the keyboard alone in a logical way.

• Peoples with difficulties in movement i.e. users having repetitive stress injuries are not able to handle mouse or trackpad. These users are giving input by using the keyboard by pressing the "tab" or "arrow keys" or through the use of alternative input devices such as single switch input or mouse stick. As a result, the tab order should match the visual order, so keyboard-only users are able to logically navigate through site content.

• Long web pages with too much content should be broken up with anchor links , that allow the keyboard only user to direct skip to the main content without negotiate through the other content . "Skip to main content" should be provided at the top of each page, so keyboard-only users won't have struggle to reach to main content .

  -Don't use the element that triggers only when user hovers over with mouse ,as a keyboard only user or visually-disabled user will not able to activate them. Instead use configured menus for those pages who have local menus and multi-level sub-items .

8.Use ARIA roles and landmarks (but only when necessary)

• ARIA (Accessible Rich Internet Applications) is a complex, powerful technical specification for adding accessibility information to elements that are not natively accessible. Instead of using ARIA you should always use native HTML elements. Now in HTML5 many functions are implemented that are used to require ARIA.

• For example:

• Instead of the ARIA role of button use the native HTML button tag.

• Instead of aria-label or arial-labeledby use HTML label tag.
• Instead of the ARIA role of navigation use HTML5 nav tag.

• ARIA attributes can be added to your HTML, in the same way that you add classes to HTML in order to load attributes from CSS.

• Kindly note that just by using ARIA attribute you cant make complex widgets accessible . It does nothing for keyboard only users it only help the peoples who using assistive technologies like screen readers . Till then you have to set up your interactions and behaviours using Javascript.

• Examples of appropriate ARIA usage include:

  Adding alerts to notify screen reader users of dynamic page changes, such as stock tickers and search filters. Making complex, interactive widgets such as date pickers accessible to screen reader users.

9. Make dynamic content accessible.

• When the content is modifying dynamically i.e. without any alerts such as screen-overlays, lightboxes, in-page updates,model dialogues and pop-ups . In such cases keyboard-only users can be trapped in to page overlays. Magnification software users might be zoomed in on the wrong section of the page.

• By using options like ARIA roles ,alerts as well as front-end development frameworks that support accessibility we can easily make that functions accessible.

• Make sure that video player can be easily handle with keyboard and it do not auto play. Additionally, all videos must have options for closed captioning and transcripts for the hearing-impaired.

  -If your site have slideshow ,then be sure about that each photo in your slideshow should have a unique alt text and can be easily accessible by keyboard . And if you are using widgets like drag-and-drops or calendar picker ,be sure to test accessibility.

10.Choose a content management system that supports accessibility.

• There are many content management systems like "Drupal" and "Wordpress" are available to mange your content and build your website.

• Once you've chosen a suitable CMS according to your needs , make sure about choosing accessible theme and also while choosing the modules, plugins or widgets. Check the theme's documentation for notes on accessibility and tips for creating accessible content and layouts for that theme.

  • For elements like editing toolbars and video players, make sure that they support creating accessible content. For example, editing toolbars should include options for headings and accessible tables, and video players should include closed captioning. The CMS administration options (such as creating a blog post or posting a comment) should be accessible as well.