Вадим Белкин

Из-за особенностей дизайна проблематично сделать через стандартное табличное поведение (добавить тени и отступы между строками т.к. элементы с display: table-row не дают такой возможности).
Но в данном случае, если важна семантика и доступность (Web Accessibility), я бы все же использовал table и сопутствующие теги, изменив у них свойства display на block и flex где нужна блочная или горизонтальная раскладка (это позволит добавить тени для tr и отступы между ними).
Естественно все можно сделать так же на div и даже добавить role и aria-* атрибуты если опять же важна доступность.

В любом случае выбор решения зависит от требований к реализации (поведение строк и колонок при изменении контента и изменениях размера таблицы или экрана, необходимость соблюдения семантики и доступности, возможно еще какие-то особенности).
Если у вас достаточно времени для реализации данного UI, то я бы посоветовал попробовать сделать на таблицах, а если будут сложности - всегда можно переделать на блоки.

Если поддержка IE11, то только через svg маски
Тут пара способов для IE подойдет

Видимо в ФФ при наведении на пункты select с блока пропадает hover. Возможно выходом будет привязываться как-то к focus на селект. CSS'ный focus-within возможно поможет или скриптами при фокусе на селект добавлять класс для блока через который селект будет так же виден аналогично ховеру

Вас интересует почему в качестве единиц измерения выбраны проценты или чем flex-basis от width отличается?
1. Процент - относительная единица измерения и позволяет сделать сетку максимально адаптированной к любому контейнеру
2. Про разницу flex-basis и width читайте тут например

https://jsfiddle.net/rpyhosmd/
Учитесь правильно читать селекторы и проверяйте валидность разметки (ul не должен быть в p, хром например его выносит, и ошибка в теге span)

Сомневаюсь что такой скрипт есть. В целом, все сайты уникальны в верстке, стилях и контенте и по этому я думаю что нет такого скрипта, который для вас сделает все. В версии для слабовидящих нужны и соответствующие размеры элементов UI и текста в целом, подходящая контрастность и т.п. Есть сервисы которые могут проанализировать страницу(цы) вашего сайта и указать на недостатки (плохая контрастность, мелкие элементы), но за вас исправить это на странице они не могут. Дизайн и верстка могут быть уникальными и скрипт не может знать все особенности интерфейса. Даже если скрипт каким-то чудом на основе данных сервисов проверки сможет исправить размеры, цвета для контрастности, то я сомневаюсь что при этом не сломается интерфейс.
Все равно придется дорабатывать значительную часть работы самому.
Лучше на стадии дизайна и верстки сразу решить проблемы с контрастностью. Проблему мелких размеров можно решить зумом в браузере, но я бы все равно предложил это сразу учесть и сделать изначально UI с нормальными размерами.

Видел много сайтов, где отдельно делалась версия для слабовидящих, либо на основе текущей верстки, либо на облегченной. Но все сделано так небрежно, что я бы не сказал что для слабовидящих они лучше обычных. Не делайте версию для слабовидящих для галочки, сделайте её хорошо. Смысл в больших размерах текста и кнопок, высокой контрастности или тупо черно-белый интерфейс, когда местами едет весь UI, накладывается что-то друг на друга. Какая от этого польза для слабовидящих, когда UI хоть и контрастный и большого размера, но никак не удобный для восприятия?

Можете. В css вместо url на шрифт указываете data:URI. Чтобы такое подключение было именно в html, можете вписать встроенные стили с подключением шрифта, вместо использования подключения шрифта в отдельном css файле.

Не совсем понятно, что имеется в виду по "написать свою сетку".
Если рассматривать способы реализации сеток, то их не так уж и много (float, flexbox или inline-block даже). Так что свой способ реализации придумать уже не получится, все самое простое и верное уже придумали и реализовали.
Название классов - это уже дело вкуса, а кол-во колонок зависит от потребностей так сказать. В итоге все самописные сетки это те же самые сетки из популярных css фреймворков. Самые распространенные сетки с колонками через float или уже на flexbox.
В итоге получается самописная сетка это кастомизация уже существующей системы, где вы назначаете или выбираете:
1. Названия классов для элементов сетки (row и col-**, grig и grid__column или т.п.)
2. Метод выстраивания сетки (через float как в bootstrap 2/3 и др.; flex как в bootstrap 4, foundation 6 и др.; или display: inline-block, со своими плюсами и минусами). В зависимости от метода у вам могут быть доступны доп.возможности по работе с сеткой (например при использование flexbox)
3. Кол-во колонок сетки (будь то часто используемая 12-ти колоночная, или свое ко-во);

Сам аналогов не встречал ещё, да и не искал. Но сам до использования browserStack тестировал на iOS симуляторе в виртуальной машине OSX и android в Android SDK. Не лучшие варианты, но если ресурсы компа позволяют и как бесплатные варианты.

С использованием justify-content: space-between; никак. Обычно в таких случаях используют простую адаптивную сетку с выравниваем по левому краю, ширина колонок задается в процентах, а отступы между колонок либо через margin либо padding.

Если из stylus в css что-то не правильно генерируется, то это либо у вас ошибки (синтаксис и т.п), либо это косяки генератора. Чем генерируете css из stylus?

15+ jQuery Radio Button & Checkbox Style Plugins или 35+ jQuery CheckBox Plugin with Examples. Выбирайте наиболее удобные для вас плагины. А стилизацию уже сами можете сделать какую хотите, не обязательно же дефолтную от плагина использовать.

Uikit - scrollspy, Foundation Zurb- magellan, ещё в Semantic-ui какой-то подобный плагин используется