Resources/tools to evaluate (automatic or not) the RWD and accessibility of a website

Design Lounge Usability reviews and research
1

Hi, I would like find tools that help developers and users to understand when their website are:
(I started from the easier)

    • out of markup standard
    • out of accessibility standard
    • out of RWD (responsive web design) basic ideas
    • running obsoleted css/html that can replaced with flex or css3 grid

Can you help me to do a GREAT list of tools or concepts? :slight_smile: I can explain a bit better…

  1. ok: w3c test on html5 and css3 :slight_smile: like the evergreen https://jigsaw.w3.org/css-validator/
  2. hum… a good tool is https://wave.webaim.org/ (not sure is FOSS, probably not, …) do you use others?
  3. hem…probably something that can understand if there are some fixed margins or div that are bigger of the frame… or… something that in automatic can find small error like this: https://github.com/digitigrafo/varie/blob/main/osd-outofscreen.png
    when you have the website that move in horizontal but for mistake…
  4. probably here is easy, the are some indicators, like the use of float or td, tr in the markup. But I didn’t find tools online to test this.

Extra: evaluation tools about CSR (content security policy) and JS.
Thanks in advance.

2

About the fourth point (running obsoleted css/html that can replaced with flex or css3 grid) I’m not sure if it’s easy to automatically find out whether it is made on purpose or a misuse of CSS.
I use axe integrated with my e2e tests to automatically do accessibility tests.
Performance budgets with lighthouse are also quite useful for responsive apps.