iOS VoiceOver прокрутка, внутренний div, 3 пальца вверх / вниз

Question

Я делаю некоторые эксперименты VoiceOver с прокруткой (жест пальцем вверх / вниз).

Моя тестовая страница находится по адресу:

http://107.170.41.208/AccessibleHTML

Есть div с полосой прокрутки и большим количеством контента (красный фон), а после этого другой div, который не прокручивается с большим количеством контента (желтый фон).

С помощью мыши я могу прокручивать содержимое на красном фоне, но с помощью VoiceOver этот раздел пропускается.

Как прокрутить содержимое красного раздела с помощью VoiceOver?

Answer 1

Немного опоздал на вечеринку, но, надеюсь, это все еще полезно для людей.

С помощью position: absolute иногда может вызывать некоторые проблемы для программ чтения с экрана, поскольку макет DOM может не соответствовать визуальному порядку. VoiceOver может иногда принять решение, что не имеет смысла читать это сначала (или вообще).

В этом конкретном случае вы можете просто установить необходимую высоту на "красный" <div> с overflow:scroll и это было бы хорошо и должно быть читаемым и способным к прокрутке.

Как более общее правило, старайтесь поддерживать визуальный порядок в соответствии с порядком DOM, используя float экономно изменить макет слегка.

Очевидно, что где-то есть правила, диктующие, как и почему это происходит, но они связаны в коде Apple и очень изменчивы между выпусками.