Cognitive

Identifying and Simplifying Labels

Labels should convey meaning and purpose in a unique and clear way. For example, a link to send an email displayed as an envelope icon should have the label 'email us' rather than 'envelope'. Links to 'read more' should include the context, such as "read more about our services".

Other Recommendations

• Check videos for captions.
  

  Hosting videos and audio on YouTube improves accessibility and supports compliance by enabling captions, subtitles, audio descriptions, and compatibility with screen readers and keyboard navigation. Find out more on our compliance page.

• Look for links with generic link text such as "click here" or "more info." These types of links can be confusing to screen reader users and should be replaced with more descriptive link text.

You have to make sure people can understand your content and how the service works.

• Make it clear what language the content is written in, and indicate if this changes
• Make it easy for people to identify and correct errors in forms
• Make it easy for people to re-enter information they've previously entered into a form
• Make it easy for people to log in without having to remember information or solve a problem

You must make sure your content can be interpreted reliably by a wide variety of user agents (including assistive technologies).

• Make sure your code lets assistive technologies know what every user interface component is for, what state it's currently in and if it changes.
• Make sure important status messages or modal dialogs are marked up in a way that informs users of their presence and purpose, and lets them interact with them using their assistive technology.
• Make sure interactive elements such as buttons are big enough or spaced far enough apart to make it easy to select the right one
• Make sure features look consistent and behave in predictable ways, including help mechanisms
• Make sure all form fields have visible and meaningful labels - and that they're marked up properly
• Make sure your service works well with assistive technologies - for example, important messages are marked up in a way that the screen readers knows they're important

Ensure you're using semantic HTML - start by using proper HTML markup.

• Semantic tags (like <h1>, <nav>, <article>, etc.). This is vital for screen readers and other assistive technologies. It enables them to understand the hierarchy of the content and structure of the page. It will also be beneficial for the SEO of the website as search engines also use the tags and correctly implemented semantic HTML is ranked higher than if not.
• Having all the content correctly tagged will also be useful when it comes to making design updates. The CSS that controls the font, colour and other styling, need only be amended once for the whole site.
• If implementing tools like the CityMaas Assist Me plug in, semantic html is essential for integrating the tool so it can implement the users preferences.
• Although there is no specific limit, <h1> content should be between 20 & 70 characters. Otherwise there's a high chance the heading won't be readable for your visitors and this hurts their user experience.
• Note: There should only be one <h1> per page, though there can be multiple <h2>, <h3> etc.

Image Alt Text and Labels:

• Always provide descriptive alternative text (alt text) for images. This allows screen readers to convey the content of images to users who cannot see them. Keep alt text concise but informative.
• If the image has a label underneath it, this should be different from the alt tag and not considered the image's caption, title or legend. Also, if they are the same then a screen reader will end up repeating the same text.
• Your alt tag describing the image could be "a woman applying lipstick in front of a mirror" and the image label underneath might read "One application and it lasts all day"
• Again, putting alt tags in is also good for SEO.
• Other reasons for using alt tags are that if there is an issue with the page loading correctly, the alt tag will be displayed where the image should be.
• Note: If an image is purely decorative, it is better to put the alt tag attribute in but leave the content empty. E.g. <img src="image.gif" alt="">

Simplify and structure your content for clarity

• Simplify your text: We live in a fast paced world where we are bombarded with digital information. People want their information quickly and easily digestible so they can get on with their busy lives. Having pages and pages for the user to trawl through is going to make them 'click away' to the next website. Where possible, use expert content writers to make your text concise and engaging without losing the important bits of messaging. Make sure they include key search words within the copy for users to find your page on search engines.
• Make it meaningful: Try not to repeat the same information in a different way on each page. Otherwise people will feel like they're not going to learn anything else on the other pages. Make sure there is a logical structure to your site. If it's an ecommerce site, you might need different categories for your products.

• Use descriptive CTAs: Where possible, label CTAs to include context such as with text that describes what it does. E.g. in a section related to make-up products, instead of a CTA saying 'Shop Now', consider something like 'Shop all make-up products'. Then there can be no confusion where this CTA takes you and is particularly helpful to anyone using a screen reader.
• Consistent Navigation: Make sure you standardise your navigation. Keeping the position, style, colour and terminology consistent throughout your site makes it clear where to click and easier to follow. If reinforcing with icons, ensure they make sense, are consistent and look like part of the same family in terms of style.