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

Няколко социални платформи направиха скорошни актуализации за достъпност. Автоматичните надписи са налични във Facebook Live и Instagram IGTV. След недостъпното въвеждане на гласови туитове Twitter създаде два екипа за достъпност и планира да въведе автоматични надписи до началото на 2021 г. Полетата за описание на изображенията Alt вече са налични и в трите платформи, както и в LinkedIn.

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

Бонус: Прочетете ръководството за стратегия за социалните медии стъпка по стъпка с професионални съвети как да разширите присъствието си в социалните медии.

Какво е приобщаващ дизайн?

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

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

Няма такова нещо като нормално. #inclusion #inclusive #design @MicrosoftDesign pic.twitter.com/xXW468mE5X

- katholmes (@katholmes) март 6, 2017

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

@meyerweb Терминът е красноречив: крайните случаи определят границите на това, което/който ви интересува.

- Evan Henſleigh (@futuraprime) март 25, 2015

След като определите крайните случаи, следващата стъпка е да разработите решение. Принципите на Microsoft за приобщаващо проектиране осигуряват добра рамка:

1. Разпознаване на изключването
2. Решаване на задачите за един, разширяване до много и
3. Учете се от разнообразието.

Много често приобщаващият дизайн е от полза за всички.

Затворените надписи във видеоклиповете са отличен пример. Основният случай на използване на надписите е в помощ на хората с увреден слух. Но те помагат и на изучаващите чужди езици и на зрителите, които гледат с изключен звук. Данните от Facebook показват, че брандираното съдържание, предназначено за изключен звук, е оценено като 48% по-релевантно и 38% по-интересно за марката.

Защо достъпността е от значение за социалните медии

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

Най-малко един милиард души - 15% от световното население - имат някаква форма на увреждане. Тази цифра нараства значително, когато се вземат предвид временните и ситуационните увреждания. Неприобщаващото съдържание и преживявания отблъскват хората. И не винаги е лесно да се определи кога се случва това. Изключените посетители на уебсайтове често не се оплакват: 71% просто напускат.

Проучване от 2018 г., проведено сред потребители на Facebook в 50 държави, установи, че над 30% от хората съобщават за затруднения с поне едно от следните неща: виждане, чуване, говорене, организиране на мислите, ходене или хващане с ръце.

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

Освен това почти всеки обича да вижда приобщаване в рекламата. Според неотдавнашно проучване на Google 64% от хората са предприели действие, след като са гледали реклама, която са сметнали за приобщаваща.

9 съвета за приобщаващ дизайн за мениджъри на социални медии

1. Направете текста достъпен

Писането с яснота прави текста по-достъпен и разбираем. А това е от полза за всички. Толкова е просто.

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

Ето няколко съвета за приобщаващ дизайн на текст:

• Пишете на разбираем език: Избягвайте жаргон, жаргонизми или технически термини, освен ако не са подходящи. Не се притеснявайте. Можете да направите това, без да правите компромис с гласа на марката
• Не прекалявайте с използването на капачки . Пълните главни букви могат да бъдат трудни за четене и да се интерпретират погрешно от четците на екрани.
• Използвайте camel case за многословни хаштагове . Изписвайте с главна буква първата буква на всяка дума, за да направите хаштаговете по-четливи и да предотвратите грешки при четенето на екрана.

PSA...

blacklivesmatter се произнася от софтуера за четене на екрани по следния начин: "black live (глаголът) smatter"

BlackLivesMatter се обявява, както може да се очаква: "Животът на чернокожите има значение "#Социални медии #Достъпност

- Джон Гибънс (@dotjay) юли 9, 2020

• Поставете хаштагове и споменавания в края. Препинателните знаци се четат на глас от четците на екрана. Имайте предвид как хаштаговете или споменаванията с @ могат да нарушат копието.
• Избягвайте да казвате "кликнете тук". Използвайте описателни призиви за действие, като например: Регистрирайте се, Опитайте безплатно или се абонирайте.
• Ограничете използването на емотикони. Емотиконите и емотиконите (напр. ¯\_(ツ)_/¯ ) се четат на глас от помощните технологии. Това означава, че хората ще чуят неща като "силно плачеща физиономия" или "купчина какавиди". Преди да ги използвате, проверете как се превеждат в текст.
• Използвайте подходящ размер на шрифта. Уверете се, че текстът е четлив, особено когато се използва в изображения или области, които не могат да се променят.
• Избягвайте специални символи . Освен намалената четливост VoiceOver и други помощни инструменти разчитат специалното форматиране по много различен начин.

Вие 𝘵𝘩𝘪𝘯𝘬 това е 𝒸𝓊𝓉ℯ да 𝘄𝗿𝗶𝘁𝗲 вашите туитове и потребителски имена 𝖙𝖍𝖎𝖘 𝖜𝖆𝖞. Но дали 𝙡𝙞𝙨𝙩𝙚𝙣𝙚𝙙 това, което 𝘴𝘰𝘶𝘯𝘥𝘴 𝘭𝘪𝘬𝘦 с помощни технологии като 𝓥𝓸𝓲𝓬𝓮𝓞𝓿𝓮𝓻? pic.twitter.com/CywCf1b3Lm

- Кент К. Додс 🚀 (@kentcdodds) януари 9, 2019

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

//www.instagram.com/p/CE4mZvTAonb/

2. Предоставяне на описателни надписи на изображенията

Описателните надписи и алтернативният текст (известен също като alt text) позволяват на хората да си представят изображенията, когато не могат да ги видят. Според WebAIM, организация с нестопанска цел към Центъра за хора с увреждания, липсващият или неефективен alt text е най-проблематичният аспект на уеб достъпността.

Няколко платформи за социални медии използват технология за разпознаване на обекти, за да осигурят автоматичен алтернативен текст. Очевидно надеждността ѝ има граници. Винаги е по-добре да добавяте персонализирано описание, когато можете.

Facebook, Twitter, Instagram и LinkedIn предоставят специални полета за добавяне на алтертекст за изображения и GIF файлове (можете да добавяте алтертекст и с помощта на SMMExpert). Когато не е възможно да добавите алтертекст, включете описателни надписи.

Ако ви е омръзнало да виждате как питам хората да описват снимките си, представете си колко ми е омръзнало:

1. писане на едно и също нещо отново и отново.

2. Прелиствате това приложение и се чудите какво е толкова смешно/разстройващо/важно на тази снимка.

- Холи Скот-Гарднър (@CatchTheseWords) септември 25, 2020

Съвети за писане на описателен алтертест:

• Предаване на съдържанието : Има огромна разлика между "Изображение на диаграма" и нещо от рода на: "Стълбовидната диаграма показва, че броят на горските пожари се е увеличил през годината и тази година е достигнал 100."
• Пропуснете да казвате "изображение на" или "снимка на". " Кралският национален институт на слепите казва, че повечето екранни четци предпочитат да не го правите.
• Споменаване на цвят ако това е важно за разбирането на изображението.
• Споделяне на хумор . Описателният текст не трябва да бъде прекалено формален и трябва да направи всичко възможно, за да изрази това, което е забавно.
• Транскрибиране на текст Ако изображението има копие, което е от основно значение за смисъла му, задължително го включете в описанието.
• Учете се от най-добрите : WebAIM предлага съвети и няколко примера, а презентацията на копирайтъра Ашли Бишоф е много полезна.
• Не забравяйте GIF файловете . Twitter наскоро направи алтертекста опция за GIF-и. Ако платформата не поддържа алтертекст, включете описание в действието.

обикновено не е необходимо да казвате "изображение на" или "снимка на". Просто опишете какво предава изображението - какво се очаква да получи потребителят, като го види. Няколко примера:

- Robot Hugs (@RobotHugsComic) януари 5, 2018

3. Включете субтитри на видеоклипове

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

😳😳😳😂 благодаря @AOC!!!!!!

Научих толкова много от теб благодарение на надписите ти. Благодаря ти, че си приобщаващ за 466 милиона глухи хора! //t.co/792GZFpYtR

- Найл ДиМарко (@NyleDiMarco) март 28, 2019

Вътрешни тестове във Facebook установиха, че видео рекламите, които включват надписи, увеличават времето за гледане средно с 12%. Надписите помагат и за запомнянето. Многобройни проучвания показват, че хората, които гледат видеоклипове с надписи, е по-вероятно да запомнят съдържанието.

Facebook : Автоматично генериране на надписи, напишете ги сами или качете файл SubRip (.srt). Автоматичните затворени надписи са налични и за Facebook Live и Workplace Live.

YouTube : Автоматично генериране на субтитри, транскрибиране или качване на поддържан файл. Грешките могат да бъдат коригирани с редактора на субтитри. Автоматичните субтитри са налични на английски език за YouTube Live. Субтитри в общността, които позволяваха на акаунтите да предоставят субтитри и преводи на публиката, бяха преустановени.

Instagram : Автоматичното създаване на затворени надписи вече е налично за IGTV Live и IGTV. В противен случай надписите на видеоклиповете трябва да бъдат записани или кодирани предварително. Добавяйте надписи към своите Instagram Stories, както и към видеоклиповете от TikTok и Snapchat, с потребителски текст. Cliptomatic помага за това.

Twitter : Качете .srt файл с видеоклипа си. Twitter също така работи за добавяне на автоматични надписи към видео и аудиоклипове до началото на 2021 г.

LinkedIn : Качете .srt файл с видеоклипа си.

Когато не са налични полета с алтертекст, включете описание в надписа. Ето как обикновено се форматират: описание на изображението: [описание на изображението].

PS: SMMExpert ви позволява да качвате файлове със субтитри заедно с видеоклиповете си в социалните мрежи в Compose, така че да можете лесно да публикувате видеоклипове със затворени субтитри.

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

4. Добавяне на описания на видеоклипове

За разлика от надписите, които обикновено представляват транскрипция на изговорения диалог, описателният език обозначава важните гледки и звуци, които не са изречени. Представете си как сцената с репликите в Действителна любов идва през за сляп зрител. Или гледане на сцената в Боен клуб където героят на Едуард Нортън се преби.

Предизвиквам ви да се насладите на телевизионна програма, използвайки аудиоописание. Потопете се в света на аудиото и изживейте телевизионна програма или филм от гледна точка на #SightLoss, никога не знаете, че може да получите много от това. @sibbymeade @guidedogs @seandilleyNEWS @TPTgeneral pic.twitter.com/oMSjE7nduv

- Мартин Ралф - кучета водачи (@MartinRalfe_GDs) септември 14, 2020

Има няколко начина за предоставяне на описания:

• Описателен звук . описаното видео е описанието на всички важни невербални елементи във вашия видеоклип. Тази песен се пише и записва така, че да се вмести в пролуките между важните аудио елементи. В социалните медии описаното видео обикновено е "вградено" и не може да бъде изключено.
• Описателен препис Понякога се наричат алтернативни медийни транскрипции, тези транскрипции предоставят описания заедно с диалога, подобно на сценарий.
• Описано видео в реално време Водещите на видеоклипове в реално време трябва да са запознати с техниките на описателното видео, като правят паузи, за да опишат случващото се на екрана. Accessible Media Inc. има добро ръководство за най-добри практики.

5. Използвайте цветови контраст от поне 4,5:1

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

Идеалният контраст между цвета на текста и неговия фон трябва да бъде поне 4,5 към 1, както се препоръчва от WCAG. При по-голям текст това съотношение намалява, но се увеличава при по-малък текст. Разликите може да изглеждат незабележими, но имат голямо значение за различните зрители.

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

Източник: Дизайн във Facebook

6. Не разчитайте на цветовете за предаване на значението

Най-малко 2,2 милиарда души по света имат някаква форма на увреждане на зрението, включително цветна слепота, слабо зрение, близко зрение и слепота. Всъщност цветовата схема на Facebook е синя, защото основателят на компанията Марк Зукърбърг е червено-зелен цветно сляп.

Например червеният цвят може да означава низходяща тенденция на финансовите графики в САЩ, но в Китай червеният цвят е положителен.

• Визуализиране на връзки . Добавете подчертаване или анимация при поставяне на курсора, за да покажете, че текстът с хипервръзка може да бъде кликнат. Nielsen Norman Group има полезни насоки за визуализиране на връзките.
• Използване на символи . В графики или инфографики използвайте символи или шарки като алтернатива или допълнение към цветовете. Или добавете поясняващи етикети.

  Бонус: Прочетете ръководството за стратегия за социалните медии стъпка по стъпка с професионални съвети как да разширите присъствието си в социалните медии.

  Вземете безплатното ръководство още сега!

Публикация, споделена от Nick Lewis Design (@nicklewisdesign)

7. Бъдете информирани за инструментите за достъпност

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

Facebook:

• Страница за достъпност във Facebook
• Достъпност на Facebook в Twitter
• Помощник за навигация на Facebook
• Център за помощ за достъпност на Facebook
• Подаване на обратна връзка за достъпност и помощни технологии във Facebook

Twitter:

• Акаунт за достъпност в Twitter
• Twitter Абле акаунт
• Twitter Заедно акаунт
• Акаунт за безопасност в Twitter
• Споделяне на обратна връзка относно достъпността и други въпроси

YouTube:

• Настройки за достъпност на YouTube
• Използване на YouTube с екранен четец
• Поддръжка на YouTube

Pinterest:

• Ресурси за емоционално здраве
• Център за помощ на Pinterest

LinkedIn:

• Отговор на LinkedIn за хората с увреждания

Следвайте защитниците на правата на хората с увреждания, като Алис Уонг, The Black Disability Collective, за да получите перспектива и разбиране. Присъединете се към разговорите в социалните медии с хаштаговете #a11y #DisabilitySolidarity и други, които откриете.

8. Насърчаване на положителното включване

Полезността не е единственият критерий за приобщаване. Представителството също е от значение.

Имате ли нужда от доказателство? Помислете за ефекта "Скъли". Досиетата X гледат на агент Скъли като на положителен модел за подражание, те са по-склонни да ценят и изучават STEM, след като са гледали сериала.

След Черната пантера премиера, Twitter избухна с #WhatBlackPantherMeansToMe туитове.

Много бих искала да има нишка с чернокожи деца в костюми на Черната пантера, като начин да си спомним и да отпразнуваме #ChadwickBoseman 💔

- derecka (@dereckapurnell) август 29, 2020

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

През 2019 г. броят на мъжките персонажи в рекламите е два пъти по-голям от този на женските.

Хората с увреждания съставляват едва 2,2% от героите в рекламите за 2019 г.

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

Публикация, споделена от Osmosis (@osmosismed)

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

Прочетете нашето ръководство за истински активизъм в социалните медии.

9. Приветствайте и приемайте обратна връзка

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

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

Достъпността не бива да бъде замислена на втори план. (1/3) //t.co/9GRWaHU6fR

- Поддръжка на Twitter (@TwitterSupport) юни 19, 2020

Осигурете данни за контакт, формуляр за обратна връзка или подкана, която казва на аудиторията ви къде може да сподели мислите си. Както казва старши дизайнерът по взаимодействието на Google Кара Гейтс: "Ако искате да промените света, трябва да го включите."

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

Инструменти за достъпност на социалните медии

WAVE Разширения за браузъра

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

Хемингуей Редактор

Осигурете четливост на копието си с помощта на редактора Hemmingway Editor. Стремете се към степен 8 и по-ниска, за да спазите стандартите на WCAG. Инструментът за проверка на четливостта е друга възможност.

Проверка за достъпност на Microsoft

Microsoft разполага с вграден инструмент за достъпност, наличен в Outlook, Excel и Word. Наръчникът за приобщаващ дизайн на Microsoft предлага и видеоклипове и брошури за изтегляне по теми, свързани с приобщаващия дизайн.

Приложение за четене на нишки

Този бот на Twitter разгръща темите в платформата, за да могат хората да ги четат по-лесно. За да задействате приложението, просто го маркирайте и напишете "unroll" в отговор на съответната тема.

Alt текст на изображението и четец на Alt текст

Маркирайте @ImageAltText или @Get_AltText в отговор на туит с изображение, за да задействате тези ботове на Twitter. Ако има такива, те ще отговорят с алттекста.

Cliptomatic

Добавяйте автоматично надписи към своите истории в Instagram, видеоклипове в TikTok и снимки с Cliptomatic.

Приложение за контраст

Ако използвате Mac, приложението Contrast е съвместим с WCAG инструмент за проверка на контраста. Приятна особеност на това приложение е, че позволява на дизайнерите да проверяват резултатите си за контраста, докато избират цветове. Създателите на това приложение дори предоставят ръководство, което опростява стандартите на WCAG.

Проверка на контраста

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

Цвят Oracle

За да сте сигурни, че не използвате само цветовете за предаване на информация, използвайте безплатния симулатор на цветна слепота. Инструментът с отворен код е достъпен за Windows, Mac и Linux.

Безопасен цвят

Използвайте функцията Color Safe, ако имате нужда от помощ при намирането на цветова палитра, която да е достатъчно контрастна и да отговаря на насоките на WCAG.

Текст върху фоново изображение a11y check

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

Описвате

YouDescribe на Института за изследване на очите "Смит-Кетълуел" позволява на доброволците да създават аудиоописания за видеоклипове в YouTube. Просто копирайте и поставете URL адрес от YouTube в полето за търсене и щракнете върху Create/Edit Descriptions (Създаване/редактиране на описания), за да започнете.

67 процента събиране

Като част от кампанията си #SeeThe67% Refinery29 си партнира с Getty Images, за да предложи снимки с жени с големи размери. Вижте също колекцията No Apologies, продължение на сътрудничеството. Dove също си партнира с Getty, за да разбие стереотипите за красота с колекцията Show Us.

Колекция "Спектър на половете

С тази колекция от снимки Vice насърчава медиите да излязат "извън рамките на бинарното".

Колекцията за хора с увреждания

В Световния ден за повишаване на осведомеността за достъпността Getty Images, Verizon Media и Националният алианс за лидерство в областта на уврежданията (NDLA) обединяват усилията си, за да пресъздадат уврежданията с този каталог. The Brewers Collective също така създаде каталози с Unsplash и Pexels.

Колекцията Disrupt Aging

Достъп до повече от 1400 изображения, които се борят с възрастовите предразсъдъци, в тази колекция, създадена от AARP и Getty.

Aegisub

Aegisub е безплатен инструмент с отворен код за създаване и редактиране на субтитри. Можете да използвате този инструмент и за създаване на транскрипции за видеоклипове.

Mentionolytics

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

Насоки за достъпност на уеб съдържанието (WCAG) 2.1

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

Насоки за достъпност на продуктите на Vox

Тези насоки представляват интерактивен контролен списък за дизайнери, редактори, инженери и др.

Управлявайте всичките си канали за социални медии от едно табло с помощта на SMMExpert. Лесно планирайте и публикувайте всички свои публикации в социалните медии с цялостен дизайн, ангажирайте се с последователите си и проследявайте успеха на усилията си. Опитайте безплатно още днес.

Започнете