Speed
Do not use third-party css.
Do not use third-party script.
Minimize and concatenate CSS files to reduce the number of HTTP requests.
Image should be Served in next-gen formats
Image should be the same resolution as the rendered image.
Use lazy loading for images and other non-critical resources to defer loading until they come into the user's viewport.
Use responsive image techniques like srcset and sizes attributes to serve appropriate image sizes based on the user's viewport.
Front-end should have next zero render blocking.
Accessibility
Use plain language and avoid figures of speech, idioms, and complicated metaphors.
Use a lang attribute on the html element.
Provide a unique title for each page or view.
Ensure that viewport zoom is not disabled.
Make sure there is a visible focus style for interactive elements that are navigated to via keyboard input.
Make sure that all img elements have an alt attribute
Provide a text alternative for complex images such as charts, graphs, and maps.
For images containing text, make sure the alt description includes the image's text.
Use heading elements to introduce content. Heading elements construct a document outline, and should not be used for purely visual design.
Use only one h1 element per page or view.
The order of heading elements should descend, based on the 'depth' of the content. For example, a h4 element should not appear on a page before the first h3 element declaration. A tool such as headingsMap can help you evaluate this.
Don't skip heading levels. For example, don't jump from a h2 to a h4, skipping a h3 element.
Use list elements (ol, ul, and dl elements) for list content.
Use the a element for links.
Ensure that links are recognizable as links. Use different color and underline is a must
Ensure that controls have :focus states.
Buttons are used to submit data or perform an on-screen action which does not shift keyboard focus. You can add type="button" to a button element to prevent the browser from attempting to submit form information when activated.
Use the table element to describe tabular data. Do you need to display data in rows and columns? Use the table element.
Use the th element for table headers (with appropriate scope attributes). Depending on how complex your table is, you may also consider using scope="col" for column headers, and scope="row" for row headers.
Use the caption element to provide a title for the table. The table's caption should describe what kind of information the table contains.
Make sure that media does not autoplay. Unexpected video and audio can be distracting and disruptive, especially for certain kinds of cognitive disability such as ADHD. Certain kinds of autoplaying video and animation can be a trigger for vestibular and seizure disorders.
Ensure that media controls use appropriate markup. Examples include making sure an audio mute button has a pressed toggle state when active, or that a volume slider uses type="range".
Check to see that all media can be paused. Provide a global pause function on any media element. If the device has a keyboard, ensure that pressing the Space key can pause playback. Make sure you also don't interfere with the Space key's ability to scroll the page/view when not focusing on a form control.
Increase text size to 200%. Is the content still readable? Does increasing the text size cause content to overlap?
Ensure animations are subtle and do not flash too much. Certain kinds of strobing or flashing animations will trigger seizures.
Make sure all animation obeys the prefers-reduced-motion media query. Remove animations when the “reduce motion” setting is activated. If an animation is necessary to communicate meaning for a concept, slow its duration down.
Check the contrast for all normal-sized text.
Check the contrast for all large-sized text.
Remove horizontal scrolling. Requiring someone to scroll horizontally can be difficult for some, irritating for all.