Как увеличить текст
Обновлено: 03.07.2024
Эта информация предназначена для веб-разработчиков и обеспечивает целостный процесс первоначальной оценки вашего веб-сайта на доступность. Это не заменяет выполнение полной оценки сайта Руководства по обеспечению доступности веб-контента (WCAG) 2.0 AA, но выполнение этого полного процесса позволит более эффективно охватить большую часть Руководства WCAG 2.0 AA.
Невозможно соблюдать стандарты доступности веб-сайтов, изложенные в Законе IU об американцах-инвалидах (UA-02), используя только автоматизированные инструменты.
Люди со слабым зрением могут использовать любой из нескольких методов для увеличения содержимого. Они могут использовать экранную лупу, такую как Windows Magnifier или Mac Zoom, увеличивать размер шрифта по умолчанию в своем браузере, масштабировать свой браузер или изменять интервал между текстом по умолчанию на веб-сайте. Различные стратегии увеличения содержимого ведут себя по-разному, и вам необходимо убедиться, что важный контент не будет потерян, если какой-либо из них используется.
Необходимо проверить три метода увеличения содержимого, поскольку они могут повлиять на дизайн веб-сайта: размер шрифта, масштабирование и интервал между текстами.
Размер шрифта
В большинстве браузеров есть способ изменить минимальный размер шрифта по умолчанию. Способ изменения размера шрифта зависит от браузера. Рекомендуется проверять размер шрифта в нескольких браузерах.
- Измените размер шрифта:
- Chrome: откройте "Настройки" или "Настройки" и измените размер шрифта на "Очень большой" или "Очень маленький" .
- Firefox: откройте «Настройки» , выберите «Содержимое» в боковом меню, а затем в разделе «Шрифты и цвета» выберите «Дополнительно» . Во всплывающем окне измените «Минимальный размер шрифта» как минимум на 24 пункта. Выберите ОК .
- Safari: откройте настройки . Во всплывающем окне выберите «Дополнительно». Установите флажок Никогда не использовать размер шрифта меньше чем и в раскрывающемся списке выберите 24 пункта .
- Edge: откройте «Настройки» и выберите «Внешний вид». В разделе "Шрифты" измените размер шрифта на "Очень большой" .
- Internet Explorer: в меню «Вид» выберите «Размер текста» и измените размер шрифта на «Самый крупный» или «Самый мелкий».
- Обновите страницу.
- Ищите любой текст, который не меняет размер, и любой контент, который затемнен, потерян, скрыт или иным образом проблематичен.
- Вернитесь к предпочтительным настройкам.
Масштаб
Масштабирование пропорционально изменяет размер всего содержимого, включая изображения. В зависимости от размера экрана масштабирование может привести к отображению веб-страницы на «мобильном» или маленьком экране. Рекомендуется изменять масштаб более чем в одном браузере.
- Увеличьте масштаб браузера как минимум до 200%:
- Mac: нажмите "+ +", чтобы увеличить масштаб.
- Windows: Ctrl плюс + (или колесо мыши вверх), чтобы увеличить масштаб.
- Обновите страницу.
- Ищите любой контент, который затенен, потерян, скрыт или иным образом проблематичен.
- Установите ширину браузера на 1280 пикселей и масштаб до 400%, а затем повторите шаги 2 и 3.
- Сбросьте масштаб браузера до 100 % или предпочтительных настроек:
- Mac: нажмите Command плюс 0, чтобы сбросить масштаб до 100 %, или Command плюс, чтобы уменьшить масштаб.
- Windows: Ctrl плюс 0, чтобы сбросить масштаб до 100 %, или Ctrl плюс - (или колесо мыши вниз), чтобы уменьшить масштаб.
Посмотрите минутный видеоролик об изменении размера контента с помощью масштабирования в браузере.
Интервал между текстами
Интервал между текстом включает высоту строки, интервал между буквами, интервал между словами и интервал между абзацами.
На веб-сайте не должно быть потери содержимого или функциональности при изменении любого из следующих параметров:
- Высота строки должна быть как минимум в 1,5 раза больше размера шрифта.
- Размер следующих абзацев должен быть как минимум в два раза больше размера шрифта.
- Расстояние между буквами должно быть как минимум в 0,12 раза больше размера шрифта.
- Интервал между словами должен быть как минимум в 0,16 раза больше размера шрифта.
Самый простой и быстрый способ проверить интервалы между текстами – использовать букмарклет для определения интервалов между текстами в любом браузере:
- Активируйте букмарклет.
- Ищите любой текст, который не адаптируется к новым настройкам, и любой контент, который затемнен, потерян, скрыт или иным образом проблематичен.
- Обновите страницу, чтобы деактивировать букмарклет.
Следующий шаг: Проверка кода
Предыдущий шаг: Цветовой контраст
Вернуться к индексу: Проведите проверку доступности на своем веб-сайте
Получить помощь
По вопросам или консультациям обращайтесь в отдел специальных возможностей Office Experience Office.
Чарли Соррел • 11:00, 11 января 2018 г.
Не только пожилые люди или люди с плохим зрением любят крупный текст на своих iPhone и iPad. Может уже поздно и ты засыпаешь. Или, возможно, ваш iPad лежит на столе в течение дня, и вы бы оценили более крупный текст, потому что он находится немного дальше, чем когда вы держите его в руке. Или, может быть, вы воспользуетесь этим советом и поймете, что масштабирование текста так же полезно, как масштабирование фотографий.
iOS уже давно позволяет масштабировать текст, но эта функция была скрыта глубоко в разделе «Специальные возможности» в настройках, что затрудняло настройку на лету. Однако, начиная с iOS 11, вы можете масштабировать текст так же легко, как и регулировать яркость экрана. Давайте посмотрим.
Не все масштабы текста
В iOS есть несколько типов текста. Текст на веб-страницах; текст в приложениях (например, твиты в Tweetbot); и текст интерфейса, также известный как «хром». Chrome включает в себя все, что предоставляет ОС, например боковую панель в Mail, весь текст в приложении «Настройки» и так далее. Последний тип — это редактируемый текст, например текст в Notes или в документе Pages. И только на некоторые из них влияет функция масштабирования специальных возможностей.
Текст на веб-страницах нельзя масштабировать. Это потому, что у него есть собственный механизм увеличения: вы просто дважды нажимаете на него, чтобы смарт-масштабировать блок текста, чтобы он поместился на экране. Но этого не всегда достаточно. Что делать, если текст на веб-странице крошечный, но уже занимает всю ширину экрана? Именно для этого и нужен режим Reader View, и у нас уже есть отличная инструкция, как это сделать.
Другие типы текста — хромированный пользовательский интерфейс и любой нередактируемый текст в приложениях — управляются настройками размера шрифта в каждом отдельном приложении, как и должно быть.
Динамический тип масштабирования
iOS позволяет навсегда изменить размер динамического шрифта, который включает в себя весь интерфейс Chrome — кнопки, текстовые метки, списки на боковой панели и т. д., а также текст в приложениях, при условии, что разработчик включил динамический шрифт. . Это позволяет вам установить почти весь текст (кроме страниц Safari и редактируемого текста) в размер, который подходит вашим глазам. Старый способ сделать это — перейти в «Настройки»> «Основные»> «Специальные возможности»> «Увеличить текст» и настроить ползунок. Вы все еще можете сделать это, но теперь есть лучший способ.
Новый виджет «Масштаб текста»
Этот виджет Центра управления позволяет масштабировать текст так же просто, как затемнять экран.
Начиная с iOS 11, теперь вы можете добавить виджет в Центр управления, который позволяет вам изменять размер текста на лету. Для этого перейдите в «Настройки»> «Центр управления»> «Пользовательские элементы управления» и коснитесь маленького зеленого знака «плюс» рядом с «Размер текста». Это добавит виджет в ваш Центр управления. Теперь, когда вы получаете доступ к Центру управления, проводя вверх от нижней части экрана, вы можете нажать на виджет (значок показывает две буквы A, одну большую, одну маленькую), чтобы получить ползунок. Этот ползунок устанавливает размер текста. Вам придется подождать секунду, пока iOS внесет изменения.
Теперь вы можете настроить размер интерфейса и текста в нем в соответствии со своей ситуацией. Зачем пытаться прочитать строку темы и фрагменты электронной почты на боковой панели Mail, если вы можете просто увеличить текст на мгновение? Зачем страдать от большого текста и меньшего количества твитов на экране в Tweetbot, когда вы можете уменьшить масштаб и получить больше на экране сразу? Или сделать их огромными, чтобы вы могли видеть их через свой гигантский стол кокоболо?
Теперь масштабирование текста доступно в Центре управления, и вы можете быстро настроить его в соответствии со своими текущими потребностями или настроением. Вы уже делаете это с яркостью экрана, так почему бы не изменить размер текста? Если разработчик приложения поддерживает динамический тип, это будет работать без проблем.
Дополнительно большой масштаб
Все может быстро выйти из-под контроля
Фото: Cult of Mac
Если у вас действительно есть проблемы с просмотром текста, вы можете включить опцию специальных возможностей, чтобы сделать доступными невероятно большие размеры масштабирования. Также сделайте это, просто вернитесь в раздел «Настройки»> «Основные»> «Специальные возможности»> «Большой текст» и переключите «Большие размеры специальных возможностей». Теперь вы можете масштабировать еще больше. Если вы сейчас посмотрите на виджет Центра управления, то увидите, что он тоже имеет увеличенный радиус действия:
Виджет "Масштабирование текста" теперь имеет очень большие настройки.
Возможно, вы сразу отключите эту функцию, потому что диапазон масштабирования огромен и бесполезен, если только у вас нет нарушений зрения. Но если вам это действительно нужно, этот доступ к Центру управления верхнего уровня — это просто фантастика.
Теперь вы можете экспериментировать с разными размерами текста в течение дня. Возможно, вы найдете это настолько полезным, что войдете в привычку. Если нет, его легко удалить благодаря отличному настраиваемому Центру управления iOS 11.
Увеличение размера текста используется многими пользователями (пожилыми людьми, людьми с нарушениями зрения и людьми, которым следует носить очки, а не носить…).Одним из требований доступности является возможность увеличения текста до 200% без потери информации. На этом уровне масштабирования презентация может быть изменена, но текст должен оставаться читаемым (текст не должен быть обрезан или наложен).
Уровень масштабирования по умолчанию
Все современные браузеры позволяют масштабировать страницу. Эта опция увеличивает всю страницу (текст, изображения, расстояние между различными областями страницы…). Хотя этот вариант подходит для нерегулярных пользователей, недостатком является то, что он добавляет горизонтальные полосы прокрутки, затрудняющие чтение.
Выявление проблемы
Пример страницы с масштабом 100 %
В магазине аксессуаров для смартфонов Orange представлены новейшие аудиосистемы, подключенные динамики и лучшие беспроводные гарнитуры (Bluetooth), оригинальные защитные чехлы, различные аккумуляторы и соединительные кабели для персонализации вашего мобильного телефона. Подобрали чехлы для iPhone, Samsung Galaxy. чтобы предоставить вам качественную продукцию по лучшей цене. Ознакомьтесь с полным ассортиментом аксессуаров для смартфонов и планшетов. Купите здесь.
В следующем примере имитируется масштаб браузера по умолчанию. Вся страница увеличивается, появляются две полосы прокрутки (горизонтальная и вертикальная). Текст трудно читать.
В магазине аксессуаров для смартфонов Orange представлены новейшие аудиосистемы, подключенные динамики и лучшие беспроводные гарнитуры (Bluetooth), оригинальные защитные чехлы, различные аккумуляторы и соединительные кабели для персонализации вашего мобильного телефона. Подобрали чехлы для iPhone, Samsung Galaxy. чтобы предоставить вам качественную продукцию по лучшей цене. Ознакомьтесь с полным ассортиментом аксессуаров для смартфонов и планшетов. Купите здесь.
В последнем примере мы моделируем увеличение только размера текста. При этом ширина страницы остается неизменной, визуально добавляется только вертикальная полоса прокрутки. Читать текст намного проще.
В магазине аксессуаров для смартфонов Orange представлены новейшие аудиосистемы, подключенные динамики и лучшие беспроводные гарнитуры (Bluetooth), оригинальные защитные чехлы, различные аккумуляторы и соединительные кабели для персонализации вашего мобильного телефона. Подобрали чехлы для iPhone, Samsung Galaxy. чтобы предоставить вам качественную продукцию по лучшей цене. Ознакомьтесь с полным ассортиментом аксессуаров для смартфонов и планшетов. Купите здесь.
Увеличить только текст
К счастью, некоторые браузеры позволяют увеличивать только размер текста. Это относится к Firefox (доступен только в меню Вид > Масштаб > Масштабировать текст).
Если эта опция включена с масштабом 200% (в Firefox нажмите Ctrl + четыре раза), ваша страница может отображаться неправильно. Часто это происходит из-за того, что используются неотносительные единицы длины ( px , pt ).
Относительные единицы длины
Использование относительных единиц длины, таких как % , em или rem для размера текста, а также для размера контейнеров (высота и ширина div) позволяет свести к минимуму проблемы. Действительно, контейнер с адаптивным размером можно увеличивать, не скрывая и не обрезая текст внутри него.
Неверный пример
В этом примере в качестве единицы размера элементов используется пиксель.
Действительный пример
Есть несколько способов решить эту проблему, например, используя относительную единицу измерения высоты элементов.
Например, вы можете заменить:
height: 450px;
С единицей переменной длины в зависимости от размера символов:
высота: 45rem;
Или проще, сохранив пиксели, но указав минимальную высоту:
min-height: 450px;
Заключение
Важно протестировать страницы с масштабом 200 % и включенной опцией «Масштабировать только текст». Это единственный способ проверить, читаемы ли ваши страницы. Хотя исправления могут быть незначительными, они могут полностью изменить восприятие информации некоторыми пользователями.
Элементы управления масштабированием позволяют увеличивать или уменьшать размер всей веб-страницы или только размера всего текста для повышения удобочитаемости. Мы объясним, как это работает.
Содержание
Вот как можно увеличивать и уменьшать отдельные веб-сайты.
Сочетания клавиш. Элементы управления масштабированием также можно использовать без мыши. Нажмите и удерживайте команду Ctrl, одновременно нажимая + для увеличения, - для уменьшения или 0 для сброса.
Совет. Чтобы установить уровень масштабирования по умолчанию для всех веб-сайтов, попробуйте надстройку, например Фиксированное масштабирование или Масштаб страницы WE
Эта функция позволяет пользователям увеличивать и уменьшать масштаб страниц с помощью щипкового движения, не влияя на макет страницы.
Действие сжатия в настоящее время поддерживается в Windows с помощью сенсорного экрана и высокоточных сенсорных панелей, на Mac с помощью сенсорных панелей и в Linux с помощью сенсорных экранов. Сенсорные панели Linux в настоящее время не поддерживаются. Ожидается, что поддержка будет добавлена в будущем.
Вместо того, чтобы менять размер всего, вы можете просто изменить размер текста.
- Нажмите клавишу Alt, чтобы временно открыть традиционные меню Firefox. В меню вверху нажмите "Просмотр" и выберите "Масштаб" .
- Выберите «Масштабировать только текст» . Это заставляет элементы управления изменять только размер текста; не изображения.
Вы можете увеличить или уменьшить размер всего веб-контента следующим образом:
В строке меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Параметры Настройки . Нажмите кнопку меню и выберите Настройки .
- Чтобы задать уровень масштабирования только для текста, установите флажок Масштабировать только текст.
Вы можете настроить Firefox на автоматическое отображение всего текста с минимальным размером шрифта. Если веб-страница содержит текст меньшего размера, Firefox увеличивает размер шрифта текста до этого минимума.
В строке меню в верхней части экрана нажмите Firefox и выберите Настройки . Нажмите кнопку меню и выберите Параметры Настройки . Нажмите кнопку меню и выберите Настройки .
Эти замечательные люди помогли написать эту статью:
Волонтер
Расширяйтесь и делитесь своим опытом с другими. Отвечайте на вопросы и улучшайте нашу базу знаний.
Примечание. Текст на этой странице крупнее, чем на других страницах.
Выберите свою операционную систему
Окна
Чтобы определить, какой у вас браузер, откройте меню "Справка" и выберите пункт, который начинается с "О программе".
Выберите браузер для получения инструкций
Интернет-обозреватель
Чтобы увеличить размер всего (текста и изображений) на странице:
Клавиатура
- Удерживая нажатой клавишу "Ctrl", нажмите клавишу "+", чтобы увеличить масштаб (нажмите "-", чтобы уменьшить масштаб) или
Мышь
- Откройте меню "Вид", выберите "Масштаб", а затем выберите "Увеличить" или
- Если у вас есть мышь с колесиком, удерживайте клавишу "Ctrl" на клавиатуре, а затем прокрутите колесико вверх, чтобы увеличить масштаб (прокрутите вниз, чтобы уменьшить масштаб).
Дополнительная информация
Google Chrome
Чтобы увеличить размер всего (текста и изображений) на странице:
Клавиатура
- Удерживая нажатой клавишу "Ctrl", нажмите клавишу "+", чтобы увеличить масштаб (нажмите "-", чтобы уменьшить масштаб) или
Мышь
- Откройте меню "Вид", выберите "Масштаб", а затем выберите "Увеличить" или
- Если у вас есть мышь с колесиком, удерживайте клавишу "Ctrl" на клавиатуре, а затем прокрутите колесико вверх, чтобы увеличить масштаб (прокрутите вниз, чтобы уменьшить масштаб).
Дополнительная информация
Мозилла Фаерфокс
Чтобы увеличить размер всего (текста и изображений) на странице:
Клавиатура
- Удерживая нажатой клавишу "Ctrl", нажмите клавишу "+", чтобы увеличить размер текста (нажмите "-", чтобы уменьшить размер текста).
Мышь
- Если у вас есть мышь с колесиком, удерживайте клавишу "Ctrl" на клавиатуре, а затем прокрутите колесико вниз, чтобы увеличить размер текста (прокрутите вверх, чтобы уменьшить размер текста) или
- Откройте меню "Вид", выберите "Размер текста", а затем выберите "Увеличить".
Дополнительная информация
ОС Mac
Чтобы определить, какой у вас браузер, откройте меню "Справка" и выберите пункт, который начинается с "О программе".
Выберите браузер для получения инструкций
Сафари
Клавиатура
Мышь
- Откройте меню "Вид" в строке меню и выберите "Увеличить текст".
Дополнительная информация
Google Chrome
Чтобы увеличить размер всего (текста и изображений) на странице:
Клавиатура
Мышь
- Откройте меню "Вид", выберите "Масштаб", а затем выберите "Увеличить" или
- Если у вас есть мышь с колесиком, удерживайте клавишу " " на клавиатуре, а затем прокрутите колесико вверх, чтобы увеличить масштаб (прокрутите вниз, чтобы уменьшить масштаб).
Дополнительная информация
Мозилла Фаерфокс
Чтобы увеличить размер всего (текста и изображений) на странице:
Клавиатура
Мышь
- Если у вас есть мышь с колесиком, удерживайте клавишу " " на клавиатуре, а затем прокрутите колесико вверх, чтобы увеличить масштаб (прокрутите вниз, чтобы уменьшить масштаб) или
- Откройте меню "Вид", выберите "Масштаб", а затем выберите "Увеличить".
Читайте также: