Accessibility best practices, device testing and SEO

CSS and JavaScript accessibility best practices

CSS and JavaScript accessibility best practices — Learn web development | MDN

  • Using developer browser tools like google lighthouse and Accessibility Developer Tools, to audit for performance, accessibility, progressive web apps, and more
  • Using buttons for performing actions and anchor tags for leading somewhere
  • Using aria-label for buttons with icons as it allows screen readers to give an audio representation of what the button is. As people with disabilities might not be able to see the button clearly or at all
  • Using flex box or css grid for tab order. Because if you use floats it breaks the positioning for tab order and keyboard accessibility which works from left to right. Or right to left if you are using a language like Arabic.
  • Having an appropriate focused outline colour for focused html elements on a web page. The default colour is blue so if you have a blue button, you could change it to red. Or you could change it to another colour depending on the brand style of your website.

Device and Browser Testing

Apple Ecosystem

Macbook
Use the built in Simulator App for simulating iOS devices

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse
lighthouse --view https://www.google.com/

Windows, Android and Linux

Cross Browser Testing Tool. 1000+ Browsers, Mobile, Real IE.

Bug and error tracking

LogRocket | Logging and Session Replay for JavaScript Apps

SEO Tools

Google Analytics

Useful Links

Search Engine Optimization (SEO) Starter Guide — Search Console Help

👨🏿‍💻 Software Developer @CGI_Global 🖼 Content Creator. Sharing the mindset and content so you work hard to grow stronger than your past self ☯️