HTML Accessibility tips

beautiful river

To improve the accessibility of your web page you should follow these steps.

1- alt attribute in img element, you should write description of image or the content of image in alt attribute of img tag. this help search engines to find the image based on its alt attribute, if the browser fail to load the image it will displayed to user and he will find some useful knowledge of content of image. someone may have visual impaired or another problem and wanted to use from screen reader. screen reader change the visual content to audio any one can listen. when screen reader reach to any image it read its alt attribute content. finally writing alt attribute is mandatory now.

<img src="importantLogo.jpeg" alt="Company logo">

2- Headings h1 to h6

they are useful for semantic meaning of your content. or maybe a screen reader set to read just the titles of web content. screen reader search for this heading. you should rank you content and use headings properly, you should have just one h1 for main content in you document. for example if you write a paper that have introduction, body and conclusion, it is not perfect to set the conclusion as subsection of body, because the conclusion is a different section by itself. heading tags in web page need to go in order, and indicate the hierarchical relationship of your content

<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h3>How to Hide in Plain Sight</h3>
<h3>How to Climb a Wall</h3>
<h2>Learn the Art of Battle</h2>
<h3>How to Strengthen your Body</h3>
<h3>How to Fight like a Ninja</h3>
<h2>Learn the Art of Living with Honor</h2>
<h3>How to Breathe Properly</h3>
<h3>How to Simplify your Life</h3>
</main>

3- HMTL5 introduce new elements (main, nav, articale, section, header, footer)

By default HTML renders these elements same as simple div.

These elements indicates type of information that it includes. for example main element should wrap main content of page and every page should have just one main element. articale is use for self contained content and section is use to group related content together. header is used to wrap introductory content or wrap shared element along pages at the top of page or nav links. nav is use to contain the main navigation link in website. and footer is use to wrap copy right and other related documents link usually set at the bottom of the page

4- Chart accessibility

You should use figure and figcaption to your chart

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

5- Improve field accessibility with label

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

6- Meaning descriptive link text

screen reader read the link text or the text between anchor <a>, if these text be like ‘click here’ or “read more” is not helpful you should write a meaningful text that can shortly describe the content of link.

7- Use tabindex attribute to access the HTML element by keyboard. you can set a number (positive, negative, zero).

<div tabindex="0">I need keyboard focus!</div>

If you set tabindex to negative it mean its focus able but not reachable by keyboard

if you have any question DM me on twitter

https://twitter.com/MarufSharifi