Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Common accessibility mistakes

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

  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Common accessibility mistakes

  1. 1. Common Accessibility Mistakes MMT TECH MEETUP – NOV 2020
  2. 2. WHO AM I? 2 @ileshmistry | #MMT_TechMeetup CONTACT ILESH Common Accessibility Mistakes MMT Tech Meetup ILESH MISTRY (CMS SPECIALIST & KONTENT MVP) @ileshmistry
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×