Are You Unknowingly Shutting People Out of Your Content?
While updating my website and focusing more on online marketing, I've become increasingly curious about accessibility and inclusivity.
I've created this resource as much for myself as any other business owner, entrepreneur or marketing person. Whether you find this helpful or want to share more tips, let me know in the comments!
A Note About Screen-Readers
A screen-reader enables people with vision loss to use computers by reading the text on the screen in a computerized voice. Most screen-readers can also convert text into braille if the user owns a braille display device. With a screen-reader, people generally interact with the computer using a standard keyboard.
Not every low-vision person uses a screen-reader and keyboard shortcuts. Additional accessibility tools include zoom and high contrast functions.
Tip #1: Organize page content with headings
Headings help anyone skim longer pages to get an overall impression of the content. Then, with a screen-reader, users jump from heading to heading to hear an overview of the page’s key information and then backtrack to read the most interesting parts.
Tip #2: Enable keyboard accessibility
Some people with low vision navigate the web on their keyboards. Keyboard commands save them the trouble of focusing and following a mouse cursor across the screen, which is very straining.
Tip #3: Use descriptive labels for links and buttons
People who use screen-readers often use a keyboard shortcut to list all the links on a page to navigate more efficiently. Since this list of links has no surrounding text, link labels like "click here" aren't helpful. So, ensure your labels are clear, descriptive, and make sense out-of-context.
Tip #4: Provide alt text and descriptions
Screen-readers read graphics using the image’s alternative (“alt”) text. If an image doesn’t have alt text, the screen-reader will skip it. So, help users understand images and graphics with a description. Screen-readers can't read words on images, so provide succinct alt text or a caption below your infographics.
Tip #5: Allow manual text size adjustment
Give users a clear option to alter the font and image sizes to make them easier to read, whether it’s a slider, a drop-down, or a button.
Tip #6: Use high contrasting colours
Websites or graphics with high contrasting colours are visually appealing and easier for everyone's eyes. So, to make your content colourblind- and low vision-friendly, choose high-contrast colour schemes - such as dark blue text over a light blue background. Black, white and greyscale is best for text-heavy areas.
Tip #7: Declutter your drop-down menu
Trying to navigate a long menu can be cumbersome. When people use the zoom function, only part of the page fits on their screen. So, if they're scrolling through a long drop-down menu, sometimes the cursor will leave the menu as they move down the screen. So, keep your menus short and uncluttered.
Useful links
"How to Use Color Blind Friendly Palettes to Make Your Charts Accessible" | https://venngage.com/blog/color-blind-friendly-palette/
UCSF Digital Accessibility | digitalaccess.ucsf.edu/
Sources
"Accessibility Fundamentals with Rob Dobson." Youtube. Uploaded by SFHTML5, 24 Feb. 2018, https://www.youtube.com/watch?v=z8xUCzToff8&ab_channel=SFHTML5SFHTML5.
"Screen Reader Demo for Digital Accessibility." Youtube. Uploaded by UCSF Documents & Media Photography, 31 May 2016, https://www.youtube.com/watch?v=dEbl5jvLKGQ&t=3s&ab_channel=UCSFDocuments%26MediaPhotography.
Special thanks to Kathleen Funk.