# Accessibility Improvements in Joomla 4 slide: https://hackmd.io/@mastermind/Joomla4-a11y --- ## About me - Web consulting and development - Joomla, Prestashop, Laravel, Vue, Flutter... - Proud Joomler - Leit motiv: Recover your web! --- # Joomla 4 is finally here! (almost...) --- - Comes with the latest web technologies - Responsible Web Design --- # Why care about Accessibility? ---- ## Domino's Pizza  Note: - Blind man Guillermo Robles just wanted to order a pizza in 2016 - Couldn't order with the App nor the web - In 2018, over 2,200 lawsuits have been filed over website accessibility ---- ## Vueling  Note: - Fined with 90000€ by Spanish government --- ## We need an inclusive web ||| |-|-| <small>Image credits: Dev.to - https://dev.to/s2engineers/a11-but-y-6-reasons-you-should-care-about-web-accessibility-554</small> note: - Visualizar pantallas a la luz del sol - Manejar una web sin ratón o con una mano - Navegar sin ver la pantalla https://unsplash.com/photos/OP2EQ5g-Zkw --- # What have we done in Joomla! ? Note: - Since the beginning Joomla! has cared about A11y - in previous releases Joomla! had offer an simpler more accessible template. Remember Beez? ---  Note: - Just one backend template --- ### Markup and semantics HTML - Semantic HTML is key to a better accessibility ---- ### Use buttons instead of links - Replaced *a* tag with *button* tag when it's an action ---- ### Sensible Alt for images - All images should have the alt property - Decorative images should have empty alt - Alt text should correctly describe the image - [An image is worth a thousand words (article in Joomla Magazine)](https://magazine.joomla.org/all-issues/october-2020/an-image-is-worth-a-thousand-words) ---- ### ARIA labels - When semantic markup is not enough, ARIA comes to the rescue ---- ### Improved contrast - Fixed contrast for labels, images and in all the template - [Mind the contrast (article in Joomla Magazine)](https://magazine.joomla.org/all-issues/november-2020/mind-the-contrast-check-or-colors-and-make-a-difference) --- ### Featured Accessibility settings - Monochromatic Version - Highlight links - Increasing contrast - Bigger font size ---- ### SkipTo navigation - SkipTo plugin allows you to set a quick way to link to your landmarks ---- ### Improvements to content edition  note: - Help everyone to have an accessible website - All images should have an alt description - Now you can choose whether an image is decorative ---- ### Accessibility Overlays - They are not real accessibility - Most of the times interfere with real accessibility - In any case integrating our own we can help with a better integration of this tool - More on this: [On Overlays as a means of resolving website accessibility issues](https://karlgroves.com/2016/01/07/on-overlays-as-a-means-of-resolving-website-accessibility-issues) --- ## More to come... - Accessibility checker integrated as plugin - Better markup for titles - Improved keyboard navigation - Improved A11y of new Media Manager --- ### Thanks for creating accessible websites - Please consider joining A11y Team to create a more inclusive Joomla