Помощ
Влизане

Достъпност за теми

Когато персонализирате Вашата тема, правете избор на дизайн и съдържание, които спомагат за поддържането на достъпността на Вашия онлайн магазин. Достъпният уебсайт е проектиран така, че да може да се използва от всички, включително от хора с увреждания. Правенето на избор за Вашия онлайн магазин с мисъл за достъпността може да Ви помогне да осигурите приобщаващо изживяване за всички Ваши клиенти.

Насоките по-долу са създадени съобразно Насоките за достъпност на уеб съдържанието (WCAG). Тъй като има много фактори, които трябва да се вземат предвид при създаването на достъпен уебсайт, следването само на насоките по-долу не гарантира, че Вашият онлайн магазин е напълно достъпен. Можете да научите повече за уеб достъпността, като посетите уебсайта на WCAG или като разгледате ресурсите, изброени по-долу.

На тази страница

Достъпност на текста

Важно е текстът във Вашия онлайн магазин да бъде четлив за клиенти с увредено зрение или които изпитват затруднения при четене на плътни текстови блокове.

Цветови контраст

Когато редактирате цветовете за Вашия онлайн магазин, се уверете, че целият Ви текст е достъпен за клиенти, които са далтонисти или имат други зрителни увреждания. Тези клиенти разчитат на адекватен цветови контраст, за да разграничат визуално едно нещо от друго. Можете да използвате онлайн инструмент за съотношение на контраста, за да проверите контраста на различните части на Вашия магазин.

В примера по-долу текстът има съотношение на контраста 2,4:1 спрямо фона си и е труден за четене от някои клиенти.

Блок със светлосив текст на плътен бял фон.

В следващия пример текстът има съотношение на контраста 4,8:1 и е по-лесен за четене от много клиенти.

Блок с тъмносив текст на плътен бял фон.

Тествайте контраста на целия текст, включително основен текст, заглавия, връзки и полета на формуляри. Използвайте следните насоки:

  • Цветът на основния текст и текста на бутоните има съотношение на контраста най-малко 4,5:1 спрямо фона си.
  • Цветът на заглавията и другия голям текст (размер на шрифта 24 px и повече) има съотношение на контраста най-малко 3:1 спрямо фона си.
  • Цветът на целия текст върху изображения, включително слайдшоута, банери и видеоклипове, има достатъчно съотношение на контраст спрямо фона си. За голям текст (размер на шрифта 24 px и повече) контрастът е най-малко 3:1. За по-малък текст контрастът е най-малко 4,5:1.
  • Цветът на нетекстовите елементи, включително границите на полетата за въвеждане и иконите, има съотношение на контраста най-малко 3:1 спрямо фона си.

Текстови заглавия

Когато добавяте заглавия към Вашата страница с редактора за форматиран текст, е важно да ги поддържате в последователен ред (1 - 6). Заглавията се използват от помощните технологии, за да съобщят как е организирано съдържанието на страницата. Пропускането на нива, като например заглавие от ниво 2, последвано от заглавие от ниво 4, може да бъде объркващо за потребителите. Използвайте следната насока:

  • Заглавията се използват в последователен ред и не пропускат нива.

Размер и подравняване на текста

Когато редактирате настройките за типография на Вашата тема, уверете се, че текстът е достатъчно голям, за да могат клиентите да го четат удобно.

Текстът също трябва да има последователно разстояние между думите и буквите, за да се чете лесно. В примера по-долу подравняването на текста е двустранно, което създава непоследователно разстояние между думите.

Блок от текст с двустранно подравняване. Всеки ред текст запълва пространството от край до край, което налага различно разстояние между думите, за да се побере.

В следващия пример подравняването на текста е отляво, което създава последователно разстояние между думите.

Блок от текст с ляво подравняване. Има последователно разстояние между всяка дума.

Когато персонализирате размера и подравняването на текста, следвайте следните насоки:

  • Минималният размер на шрифта за основния текст е еквивалент на 16 px.
  • Подравняването на текста не е двустранно. Двустранно подравненият текст създава непоследователно разстояние между думите.

Текстови връзки

Текстовите връзки трябва да са подчертани или да имат друг визуално отличителен стил в сравнение с обикновения текст. Тъй като някои клиенти имат затруднения с разпознаването на цветове, не можете да разчитате само на промяна в цвета, за да разграничите връзка от обикновен текст.

Текстовите връзки трябва да се отварят в същия раздел. Връзките, които се отварят в нов раздел или прозорец, могат да предизвикат объркване, особено на мобилни устройства, където старият прозорец не се вижда. Те не са приобщаващи за клиентите, особено за тези, които използват увеличение на екрана или са по-малко технически грамотни.

Ако редактирате стиловия лист на Вашата тема, уверете се, че не премахвате стиловете на текстовите връзки. Следвайте следните насоки:

  • Текстовите връзки са или подчертани, или имат друг визуален диференциатор, който не е само цвят, така че клиентите да могат да разграничат връзките от обикновения текст.
  • Текстовите връзки се отварят в същия раздел при кликване.

Алтернативен текст за изображения

Когато добавяте изображения в своя онлайн магазин, е важно да ги направите достъпни за клиенти, които са незрящи или имат увредено зрение. Можете да направите това, като добавите алтернативен текст, който описва точно всяко изображение. Клиентите, които използват екранни четци, разчитат на алтернативния текст, за да им бъде предадено съдържанието на изображенията във Вашия онлайн магазин.

Можете да добавите алтернативен текст към изображенията на продуктите си от администраторския панел на Shopify. Можете да добавите алтернативен текст към другите изображения във Вашата тема от редактора на теми.

Когато добавяте алтернативен текст към изображение, добра практика е да си представите, че го описвате на някого със затворени очи. Помогнете му да си създаде образ в съзнанието. Начинът, по който описвате изображението, зависи и от контекста на уеб страницата Ви. Например може да опишете дадено изображение по различен начин, ако бизнесът Ви е туристическа агенция, отколкото ако е магазин за екипировка за дейности на открито. Разгледайте следното изображение:

Двама приятели с раници, прегърнати, гледат към океана

За туристическа агенция можете да посочите държавата и региона, в които пътуват двамата приятели, както и името на океана или морето, което гледат. От друга страна, за магазин за екипировка за дейности на открито можете да се съсредоточите върху марките и характеристиките на раниците на двамата приятели.

Ако бизнесът Ви е туристическа агенция, тогава пример за лош алтернативен текст може да бъде „Двама души пред океана“. За същата агенция пример за добър алтернативен текст може да бъде „Двама приятели пътуват в Лагос, Португалия, и гледат към пясъчния залив Praia do Camilo в слънчев ден“.

Достъпност на слайдшоу и видео

Когато добавяте видеоклипове в своя онлайн магазин, уверете се, че вземате предвид нуждите на клиенти с увредено зрение, клиенти, които са глухи или с увреден слух, или клиенти, които може да са податливи на вестибуларни разстройства.

Някои от тези клиенти разчитат на функционалността за преобразуване на текст в реч на екранните четци, които четат на глас съдържанието на дадена уеб страница. Допълнителното аудио от видеоклипове и музика, особено когато е неочаквано, може да затрудни това изживяване. За клиенти, които са глухи или с увреден слух, е добра идея да добавите скрити надписи към своите видеоклипове, така че тези клиенти да имат достъп до съдържанието.

Клиентите с вестибуларни разстройства могат да изпитат замайване от движещо се съдържание. Поради това е важно слайдшоутата и видеоклиповете да не се възпроизвеждат автоматично и клиентът да може да управлява слайдшоуто с бутони за управление.

Слайдшоута

Когато добавяте слайдшоу в своя онлайн магазин, следвайте следните насоки:

  • Слайдшоутата не се възпроизвеждат автоматично.
  • Ако слайдшоутата се възпроизвеждат автоматично, тогава те включват контроли, които клиентите могат да използват, за да поставят на пауза, да преминат напред или да спрат слайдшоуто.

Видеоклипове

Когато добавяте видеоклип в своя онлайн магазин, следвайте следните насоки:

  • Видеоклиповете не се възпроизвеждат автоматично.
  • Ако видеоклиповете се възпроизвеждат автоматично, тогава звукът им е заглушен.
  • За видеоклипове, които включват аудио, видеоклипът трябва да е напълно видим и да не е закрит от други елементи на страницата. Това позволява на скритите надписи да останат видими.
  • За видеоклипове, които включват диалог, трябва да са налични текстови транскрипции. Те трябва да са включени или на страницата, или във връзка към отделна страница.

Тези насоки се отнасят и за видеоклипове, които са в слайдшоу.

Поддръжка на клавиатура

Клиенти със зрителни или двигателни увреждания може да използват клавиатура за навигация и изпълнение на задачи онлайн. Тези клиенти разчитат на визуален индикатор, който да показва къде е фокусът на клавиатурата им върху дадена уеб страница. В примера по-долу полето Имейл има визуален индикатор за фокус:

Екран за влизане на клиенти в онлайн магазин, който показва полета на формуляр за Имейл и Парола. Полето за Имейл е очертано в синьо.

Ако редактирате стиловия лист на Вашата тема, уверете се, че не премахвате стила за фокус на клавиатурата от елементите на страницата. Следвайте следната насока:

  • Всички интерактивни елементи на страницата имат ясен визуален индикатор, когато имат фокус от клавиатурата. Тези елементи включват връзки, бутони и полета на формуляр.

Ресурси

За да научите повече за уеб достъпността по темите, обсъдени в тази статия, вижте следните ресурси.

Ресурси за цветови контраст

Ресурси за текст

Ресурси за алтернативен текст

Ресурси за слайдшоу и видео

Ресурси за поддръжка на клавиатура

В този раздел