byAbi

View Original

Accessibility and tips to do better

This article was written for the Digital Springboard

FOR FREE DIGITAL SUPPORT AND GRANTS FOR SUFFOLK SMALL BUSINESSES HEAD OVER TO THE DIGITAL SPRINGBOARD.


Accessibility planner

Accessibility is of utmost importance in reaching your widest possible audience online - and not closing the door on 1 in 5 of your customers who have some form of disability.

There are three levels to the Accessibility Standard WCAG, as a small business it is advised to follow WCAG 2.1 Level AA guidelines and address Level AAA guidelines where possible.

Paid for tools can give you full AAA compliance if your industry or audience require it. https://accessibe.com

MEDIA

Easy to do tips:

  • Add alt text for each image via your CMS

  • Give images sensible, readable names eg: ‘about-us-banner.jpg’ instead of ‘IMG335tx.jpg’

  • Give downloadable files sensible, readable names eg: ‘About [company name]’

  • Wherever possible use digital text not an image of text

  • Add captions and/or transcribe video and audio content

Wordpress free rename plugin: Phoenix Media Rename

https://en-gb.wordpress.org/plugins/phoenix-media-rename/

Free transcription software

Free audio transcribers https://cloud.google.com/speech-to-text/

https://www.rev.com/services/automated-transcription-subscription

https://www.descript.com/

NAVIGATION

Can you see where you are and on the screen navigating your website with keyboard only? Can you see which links are highlighted? Can you tab through forms?

  • Tab moves between links

  • Enter opens active links

  • Arrows scroll page or toggles form elements

Pages linked from button or hyperlink should also be accessible via the menu.

Avoid ‘click here’, describe the link.

eg: ‘To learn more Read our Story’, not ‘To learn more Click here

Give each page a descriptive title, that is also the url eg: title: ‘About us’, url: ‘about-us’

Hashtags use capital letters et: #AccessibilityGuidelines

TYPE

Easy to do tips

  •  Website text is responsive, so avoid hard line breaks.

  •  Min body text size is 12pt (=16px), spacing 1.5 x text size.

  • Text justification is poorly rendered on the web so use right or left align, centre is just for short sentences.

  • Font enlargement is possible via your browser under ‘zoom settings’. Check your website is readable with enlarged type.

  • Use heading tags to create hierarchy, be consistent

    eg: H1 main heading     H2 secondary heading     H4-H6 diminishing subs

  • Use bulleted lists and heading sizes for accentuation, not bold or italic.

COLOuR

“3 million colour blind people.” ( source colour blind awareness)

If you change the display colour to greyscale can you still read everything?

MOBILE

“59.4% of global website traffic is mobile.”(Source: Oberlo)

TEST, TEST, TEST - check your website on a variety of devices, think about:

  • Content flow in logical order

  • Buttons easy to click - min size 44px / 12px inactive space

  • Form labels are above the field

  • The OS handles operating states such as forms, drop downs and calendars

  • Content is not restricted to single orientation

  • No emojis

STATEMENT

“88% of consumers are less likely to return to a site after a bad experience.” (Source: Hubspot)

Create your accessibility statement linking it in your footer, letting your customers know you care.

●     Statement generator https://accessibleweb.com/accessibility-statement-generator/

 Take a look at The Internet Bureau’s Website & Mobile Accessibility Checklists. (see documents sent with this email).

How to test for WCAG compliance

We believe WCAG 2.1 provides the best framework for achieving accessibility. Here's how testing for WCAG compliance breaks down into identifying the accessibility barriers people with different disability types may face on the web.

●     Accessibility testing for the impact of visual disabilities

●     Accessibility testing for the impact of auditory disabilities

●     Accessibility testing for the impact of cognitive, learning, and neurological disabilities

●     Accessibility testing for the impact of physical disabilities

●     Accessibility testing for the impact of speech disabilities

Useful documents

The Website Accessibility Checklist WCAG 2.1 BoIA

The Mobile Accessibility Checklist WCAG 2.1 BoIA