Вадим Белкин

Атрибут pattern принимает регулярные выражения. Вам нужно почитать про регулярные выражения, чтобы можно было самому написать регулярки под свои требования.
Либо ищите на подобных ресурсах rgxp.ru, regexlib, regexhub готовые выражения под Ваши требования

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

Обычно все эти доп.контролы сделаны через псевдоэлементы. В каждом браузере они могут называться по разному и обычно с префиксом данного браузера.
Пример
В хроме и вебкитовых браузерах отключается через псевдоэлемент ::-webkit-clear-button, а для Firefox не знаю к сожалению, вроде как поддержка type="date" в мозиле появилась не так давно, по этому информации о её контролах я не нашел

Пример. Подобный результат нужен?
1. Создаете адаптивную сетку
2. Для картинок добавляете обертку с трюком для пропорциональных размеров через вертикальный padding и располагаете картинку внутри такого блока

Если нужно именно средствами html для таблиц, то для выравнивания по вертикали в таблицах есть атрибут valign (смотрите поддержку). Это чисто html'ный способ.
Но можно добавить инлайн стили к тегу ячейки vertical-align: middle, отчасти тоже с помощью html :-D, т.к. не нужно подключать стили и делать выборку элемента селекторами

Из-за особенностей дизайна проблематично сделать через стандартное табличное поведение (добавить тени и отступы между строками т.к. элементы с 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)

<input value="Нажми меня" onclick="alert('пауза!')" onkeydown="alert('пауза!')" type="button">

Либо через jQuery как написали выше, или addEventListener.
Любой из этих способов подойдет, но только onkeydown сработает на кнопке если на ней есть фокус. Ушел фокус с кнопки - onkeydown не сработает

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

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

Сделайте секциям разные id, а в меню в нужном пункте вместо одной ссылке сделайте две (каждая на свою секцию) и в зависимости от устройства скрывайте либо ссылку на мобильную секцию, либо ссылку на ПК секцию через медиа выражения. Т.е. визуально у вас будет один якорный пункт в меню (т.к. второй будет скрыт), но фактически два одинаковых, но с разными якорями.

Если у вас секции показываются либо одна либо другая в зависимости от экрана и они в верстке рядом, то можно их обернуть в общий блок с id на который будет ссылаться ваша ссылка в меню

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