Many people browse the web using assistive technology such as screen readers, or use a keyboard to move around pages instead of a mouse or trackpad.

Using semantically correct HTML elements gives you a lot of baked-in accessibility, but you can add WAI-ARIA (Web Accessibility Initiative Accessible Rich Internet Applications) markup to provide extra information about your page, such as landmark roles (such as main and aside) to allow users to jump between sections of your site.

Make sure that every form input has a label, attached using the for attribute or with the input nesting inside the label. Only use placeholder to provide extra information, not as a replacement for a label.

Leave control in the hands of the user: don’t open links in new tabs, and don’t disable zooming using the meta viewport tag.


Images take up most of the size of a web page. It’s important to use the right format for the type of image, and to provide the smallest size that you can using responsive images.

Every image must have an have an alt attribute that describes the image. It provides alternate content for assistive technology users, and it’s the text that displays if the image fails to load.

Look at using the srcsetand sizes attributes for img to provide different size images for different size screens. If you need to show different pictures (such as different crops of the same image) at different screen sizes, look at the picture element.