ALT “What is wrong here?” The image shows a button with a download icon (downward arrow with a line under it) and the label text ‘Click here’. Scroll to find out

ALT Accessibility quick wins #5 The image shows the same image as before with the caption: Do not use generic text labels in your buttons, headings and CTAs or rely on icons. Scroll right.

ALT Accessibility quick wins #5 The image shows the same button, but the label has changed to ‘Download File’. Caption: Do use descriptive text labels that tell the user what happens when they click.

ALT “What is wrong here?” The image shows a UI element with a user’s profile picture in a circle. To the right of the circle, there are two rows of text. First row has the user’s name in bolded text: ‘Mark Smith’. The second row has his role: ‘Admin’. The picture circle has a smaller green circle on it, denoting that he’s online. Scroll right to find out

ALT Accessibility quick wins #3 The image shows the same image as before but the green circle is now brown. The caption reads: Do not use only color changes to show a change of status. This is easily missed, even by non color blind users.

ALT Accessibility quick wins #3 The image shows a redesigned version of the UI element. There is the profile picture in a circle. To the right are two rows of text. The first row says ‘Mark Smith’ and ‘Admin’ with a star icon on a grey background. Mark Smith is bolded. The second row has a small green circle and the word ‘Online.’ Caption: Do provide a non color-based indicator of the status change, in a consistent expected location.

ALT “What is wrong here?” The image shows a table with 2 columns. The first column has Device IDs. The second column is titled ‘errors caught’. In that column, each row has 4 numbers on top of colored squares. The squares are red, orange, green and grey. Scroll right to find out

ALT The image shows the table again, but this time with the colors changed to how a color blind person would see them: various shades of brown. Caption: “Other than the obvious problem here, even non color blind users can easily forget what the colors denote. “

ALT Accessibility quick wins #1 The image shows the table again with the caption: Remember: Make sure that the text on colored backgrounds is distinguishable and do not use color as the only means of conveying information.

ALT The image shows the same table with column headers for each error type: ‘Urgent, warning, check, info” The numbers are now dark text on white backgrounds. The colored squares have been shortened and put beside the numbers. Caption: Use appropriate table headers and keep dark text on white backgrounds.