At the #MMT_TechMeetup November 2020, this presentation talks about the common Accessibility mistakes and assumptions that are made when building accessible websites. What the assumptions that are made and what to look out for to overcome them. The presentation is by Ilesh Mistry (CMS Specialist and Kontent MVP) working at MMT Digital

1. Common Accessibility Mistakes
MMT TECH MEETUP –
NOV 2020

2. WHO AM I?
2 @ileshmistry | #MMT_TechMeetup
CONTACT ILESH
Common Accessibility Mistakes
MMT Tech Meetup
ILESH MISTRY
(CMS SPECIALIST &
KONTENT MVP)
@ileshmistry

3. WHAT I’LL BE COVERING?
3
• Common mistakes and assumptions made by developers, designers etc…
@ileshmistry | #MMT_TechMeetup
Common Accessibility Mistakes
MMT Tech Meetup
Hand photo created by cookie_studio - www.freepik.com

4. UGLY BORING SITES
4 @ileshmistry | #MMT_TechMeetup
• Wrong!
• Making accessible websites and applications don’t mean you miss out
Common Accessibility Mistakes
MMT Tech Meetup
https://www.parrapark.com.au/https://www.nomensa.com/https://www.deque.com/
https://www.business2community.com/web-design/3-examples-of-gorgeous-accessible-websites-to-emulate-in-2020-02273798

5. NO TIME AT THE MOMENT
5 @ileshmistry | #MMT_TechMeetup
“Let’s leave accessibility to the end”
“If we have more budget we can work on accessibility”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Leaving it to the end will end up costing you more budget for rework
• Therefore planning in Accessibility early on will save you time and
money
• Look for accessible first plugins and extensions
Photo by Jon Tyson on Unsplash

6. FRONT END DEVELOPER ONLY
6 @ileshmistry | #MMT_TechMeetup
“This is for the front end developers to worry about, I’m a backend developer”
“We don’t need to pair on this, as I will provide the data and they make it look pretty”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Accessibility for all
• Any output from the backend work will need to be discussed if there are accessibility implications
• Very dangerous if this is left separate with no communication

7. WEB ACCESSIBILTY EXPERT
7 @ileshmistry | #MMT_TechMeetup
“I’m a web accessibility, trust me I don’t need to run any tools, it will be accessible”
“I’ve done some cool stuff which will work on all browsers, just trust me”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Don’t trust that person! 😂
• Test cross browser
• Get automated testing tools (e.g. wait for Tomas Jakelis’s presentation next 😉)
Photo by Ayo Ogunseinde - Unsplash

8. WERE IS MYALT TEXT FIELD?
8 @ileshmistry | #MMT_TechMeetup
“I’m a content editor, but I can’t add accessible elements”
“CMS websites don’t allow my website to be AA”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Working with CMS platforms, it is essential to enable such features to avoid restrictions
• Check out the CMS vendors accessibility concerns
• Content editing fields that change the output of the page, make sure all possibilities are accessible

9. IMAGES
9 @ileshmistry | #MMT_TechMeetup
“Text on images are great for banners and carousels”
“Why do I need to add alt text?”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• It’s not just accessibility concern, it would also be a responsive nightmare, make sure it has alt text
• Alt text is required as best practice, to provide an alternative text option for the image. Decorative
images can have empty alt text
• Screen readers can use alt text

10. COLOUR LOOK GOOD TO ME
10 @ileshmistry | #MMT_TechMeetup
“Designers have done a great job and it’s been signed off”
“Looks clear to me”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Contrast can be something that is difficult to read the information visually
• Everyone would see this differently
• From the UX/design stages it’s best to establish this early on and provide to the development
team
Lifewire / Jeremy Girard

11. FONT & TEXT NEED TO BE GROOVY
11 @ileshmistry | #MMT_TechMeetup
“This special font looks cool”
“Designers have said the text needs to be size and not bigger”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Make sure there are fallback options for fonts
• Text sizes should be built with scaling options in mind, although modern browsers allow zoom, but
make sure the layout doesn’t break from this
• Text should be legible

12. HEADINGS ARE NOT IMPORTANT
12 @ileshmistry | #MMT_TechMeetup
“No heading 1 needed on the homepage”
“Designers have said the heading 2 can’t show up after heading 1, as the size is a lot smaller so
use heading 4”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Heading hierarchy is important for best practice and accessibility for screen readers
• A collaborative approach is needed between the developers and designers to establish hierarchy
is adhered to e.g. add CSS class to make the text smaller but it can still be a heading 2, single H1
• Help people who use assistive technology for meaning of the page

13. BUTTONS AND LINKS SHOULD JUST WORK
13 @ileshmistry | #MMT_TechMeetup
“My button is not something I can tab to”
“I’m using a screen reader and the link doesn’t tell me anything – just click here”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Be careful when creating a button using something like a DIV tag, semantics are important, so try
to use <button> for buttons, <a> for links
• Make sure you can get to the button and links via none mouse activity and add more than ‘read
more’
• Warn users if the link needs to open in a new window/tab
Photo by Hannah Joshua - Unsplash

14. FOCUS, WHAT FOR?
14 @ileshmistry | #MMT_TechMeetup
“Why do I need to have focus states?”
“I can’t focus on this element”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Focus helps to show where you are on the page and which element has keyboard focus
• Semantics for button and link will help focus and also tabbing
• Make sure focus outlines/focus indicators are not clashing with colours and are obvious to the
user
Gov.uk

15. LET’S HAVE THIS SPINNING THING
15 @ileshmistry | #MMT_TechMeetup
“On the landing add some rotating thing here and also further down”
“Reload that part of the page”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Transitions are hard for people to see if they need to be close to the screen, so they will end up
missing it
• Try to avoid too many things happening
• Alert the screen reader of items changing on the page/reloading page e.g. Aria notification

16. CAROUSEL PARTY
16 @ileshmistry | #MMT_TechMeetup
“We need 3 carousels on the homepage”
“Yep make that into a carousel”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Carousels are generally hard to make accessible, imagine focusing on it and trying to read that
slide
• Choose the right accessible plugin, play, pause, keyboard access etc…
• Think about how to pause the slides via keyboard and how screen readers will read the text

17. CAROUSEL PARTY
17 @ileshmistry | #MMT_TechMeetup
Common Accessibility Mistakes
MMT Tech Meetup
Marcy Sutton: ”Garbage Pail Components” — Clarity 2019 -
https://www.youtube.com/watch?v=MVzihFS1UQU

18. 5 TIER NAVIGATION IS NEEDED
18 @ileshmistry | #MMT_TechMeetup
“Navigation needs to show x and y and also z”
“can you add sections into the navigation?”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• Navigations are a part of most websites and it’s important they are accessible using the keyboard
• Consider the different levels you need and the items that go on there
• It is important to consider accessible navigations early on, especially when complex CSS and JS

19. FORMS
19 @ileshmistry | #MMT_TechMeetup
“Form looks good to me”
“I need to stop the spammers”
Common Accessibility Mistakes
MMT Tech Meetup
Recommendations
• It’s important to consider best practice for forms, search forms, signup etc…
• Labels, Fieldset and Legends to describe the form and it’s associated fields
• Reloading the form for error warnings + optional/mandatory fields indication.
Don’t forget reCAPTCHA

20. FINAL THOUGHTS
20 @ileshmistry | #MMT_TechMeetup
• Use checklists when building sites/apps
• Include automated tools
• Manual testing
• Get the whole team involved
• Add into build process
• Don’t forget about the different accessible users
• Accessibility first approach
Common Accessibility Mistakes
MMT Tech Meetup
A11y Checklist

21. THANK YOU
21 @ileshmistry | #MMT_TechMeetup
Register with
Kentico Kontent -
90 days free trial
CONTACT ILESHILESH MISTRY
(CMS SPECIALIST &
KONTENT MVP)
@ileshmistry
Common Accessibility Mistakes
MMT Tech Meetup

22. REMAINING AGENDA
• How to use pa11y-ci to prevent accessibility
issues?
– Tomas Jakelis (@Tomas_Jakelis)
• Using Persona Profiles for Accessible Websites
– Nadia Rasul (@NadiaRasul)
22 @ileshmistry | #MMT_TechMeetup
MMT Tech Meetup
MMT Tech Meetup