Small change, big impact
Becoming more inclusive and accessible for everyone is really important to us. We have been researching, learning and listening to the voices of communities who experience barriers online. There’s more than one way of browsing the Internet. We need to make sure that our information is available equally across all platforms and methods, and can reach as many diverse users as possible.
[A11y Video Description: A Black Woman with long plaits and orange extensions wearing a maroon top and a White Woman with a blonde buzzcut wearing a black jumper, stand in a kitchen discussing Inclusion In Practice using British Sign Language].
Why is accessibility important on social media?
Inclusive developing refers to platforms, features and content designed to ensure that all users can participate fully. Inaccessible content can be a barrier to the world of social, engaging with others and accessing information.
We have summarised some important tips for website and social media accessibility.
First, turn on the screen reader on your computer (press Command+F5 for VoiceOver on a Mac, or Windows+Control+Enter for Narrator on a PC). A computer synthesised voice should then begin reading this paragraph out loud. If you close your eyes to listen, it will give you a sense of how users who are blind, have low vision or are partially sighted experience the online world.
The following is a checklist for accessible Web design, based on the WCAG accessibility standards.
Tips on alt text, image and video descriptions:
For visual content such as photographs, illustrations or graphs, adding Alternative Text (Alt Text) allows assistive technologies such as screen readers to interpret it into spoken form. It is invisible to others and describes an image; such as colours, objects or basic information. Leaving it blank will cause the screen reader to announce it as “image”.
On Instagram, when adding a post caption, select “Advanced Settings”. Under “Accessibility” click “Write Alt Text”. After creating the post, click “Edit” and on the bottom right corner of image, click “Edit Alt Text”. On your website, follow the Accessibility Tools to add Alt Text to all images.
What to include? A short description (about 120 characters) to describe what is in the image. If you were briefly describing that image to someone else, how would you explain it? Avoid saying “image of” and keep it concise. If the image contains a large amount of text, this can be included in “Image Description”.
Due to the larger character limit, Image Descriptions give more details than alt text allowing the user to learn more about what is happening in the picture. The aim is to describe all relevant and important information to understand that image – the setting, people or animals (type or breed), objects, colours and shades, patterns, facial expressions, gestures or emotions, and unique or interesting details.
For the video content on your website or social media platforms, always add captions or subtitles for users who are Deaf or hard of hearing. There are two types of captions: closed and open. Users can turn closed captions on or off, open captions are added in. In cases where the video is mostly visual and has no dialogue or narration, make sure to add a video description describing its content for users who are blind or that have low vision.
Writing Accessible Text:
Avoid fancy fonts, as they are illegible for screen readers.
If using abbreviations, add a space between letters otherwise assistive tech will read as one word, for example [ a c c e s s i b I l I t y ].
Write hashtags in Pascal Case – capitalise the first letter of every word in your hashtag #HaniniSkincare so that screen readers can read them properly. Camel Case is similar but doesn’t capitalise the first word #haniniSkincare
Website Tips:
In 2010, WebAIM found that out of 1 million websites tested, 97.4% home pages had detectable accessibility failures. We have briefly summarised the key recommendations from Web Content Accessibility Guidelines (WCAG). This international standard document explains how to make web content more accessible to people with disabilities. The full article can be found on the following link https://www.w3.org/WAI/standards-guidelines/wcag/
Make sure the page is readable and functional when zoomed to 200%.
All page functionality is available using the keyboard (with keys such as tab, enter, and the arrows check the Tab Test). You can easily check this yourself by trying to navigate your website without once using the mouse.
Form buttons have a descriptive value instead of vague titles such as “More”. Instructions do not rely upon shape, size, or visual location such as "Click the green icon to continue". Or rely upon sound, for example "The beep sound means you can continue".
A transcript of content is provided for audio-only clips.
A transcript or audio description of relevant content is provided including synchronised captions, for non-live video-only.
Images, form image buttons, and image map hot spots have appropriate, equivalent alternative text.
The reading and navigation order is logical and intuitive. Labelling your text using heading and paragraph themes, allows browsers and screen readers to navigate through your content correctly and present it in the right order.
When designing a submission form (such as a log in or contact form), it is important to provide clear information so the user can understand what they need to fill in, and where. This means form buttons have a descriptive value and form inputs have associated text labels.
Provide an option to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.
Text and images of text have a contrast ratio of at least 4.5:1. Colour contrast is one of the most important factors in ensuring that all elements on the page are distinguishable and clearly displayed. The recommendation is a minimal contrast ratio of 4.5 to 1 between the text colour and its background colour.
No element on the webpage should flash or flicker over three times per second. Anything above that threshold might trigger seizures for people with photosensitive epilepsy.
USEFUL RESOURCES
WebAIM provide a web accessibility evaluation tool which can be found on the following link https://wave.webaim.org/ . It is an extremely useful resource to help work through any issues present. The evaluation tool helps by identifying accessibility and Web Content Accessibility Guideline (WCAG) errors.
AbilityNet has advice on making your device easier to use if you have a disability. The guide offers step by step instructions on how to adapt your phone, computer or tablet to meet your needs. You can search for a specific need (e.g. making text larger) or filter the guides based on your symptoms (e.g. hand tremor) or condition (e.g. dyslexia).
ACCESSIBILITY STATEMENT
Our Accessibility Statement can be found by clicking on the following link https://www.haniniskincare.co.uk/accessibility-statement we are aware that there are a few issues with our website that might make the experience more difficult. We are consistently amending issues and aiming for a full accessibility audit. If there is anything we can do to help you, please contact us via email or call / video call / text us on 07487817033.
Our Accessibility Statement is a personalised version of the document recommended by Gov.uk. If you would like a PDF or Word template version to work from, you can email us at info@haninisoaps.co.uk. The full article can be found on the following link https://www.gov.uk/government/publications/sample-accessibility-statement/sample-accessibility-statement-for-a-fictional-public-sector-website
Small change, big impact
This time last year my business looked very different. Slowly, I made small changes that had a big impact.
Nothing is perfect - it’s work in progress.
Be honest and open - ‘we’re working on it, if you have any suggestions or ideas, please contact us’. Look to the future, be a part of the change - no matter how big or small.
Inclusion is a movement, not a moment (Sinead Burke / Tilting The Lens).
Inħobbok,
(I love you in Maltese)
ħanini
Comments