AAA Audit

[jacquesramphal]

Getting Started with Web Accessibility in Vue

Original Source: Medium

• Managing Focus
• ARIA Labels
• Page Titles
• Alt text

[jacquesramphal]

• [x] Managing Focus
• [ ] ARIA Labels
• [ ] Page Titles
• [x] Alt text

[jacquesramphal]

[jacquesramphal]

^ focus element issue

https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard#focusable_elements_should_have_interactive_semantics

[jacquesramphal]

Page titles https://www.digitalocean.com/community/tutorials/vuejs-vue-router-modify-head

Vue-Meta plugin https://vue-meta.nuxtjs.org/

[jacquesramphal]

Focus Styles: CSS Tricks https://www.google.com/search?client=firefox-b-d&q=rename+repository+github https://css-tricks.com/having-a-little-fun-with-custom-focus-styles/

[jacquesramphal]

Text selection colour https://css-tricks.com/overriding-the-default-text-selection-color-with-css/

[jacquesramphal]

Need to specify which elements should not be focused, divs etc. wordmark div

[jacquesramphal]

custom classes to apply different highlights

https://css-tricks.com/examples/DifferentSelectionColors/

[jacquesramphal]

combining border styles https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

[jacquesramphal]

TIPS FOR FOCUS STYLES

https://www.nicchan.me/blog/tips-for-focus-styles/

https://uxdesign.cc/create-better-accessible-focus-effects-75a3de27b8ba

[jacquesramphal]

Using WAVE or AXE to identify AAA issues

(installed in firefox) 

[jacquesramphal]

https://css-tricks.com/essential-meta-tags-social-media/

[jacquesramphal]

https://marketplace.visualstudio.com/items?itemName=MaxvanderSchee.web-accessibility https://dev.to/lindaojo/how-to-check-lighthouse-scores-on-chrome-or-firefox-cjf

[jacquesramphal]

EXAMPLE SITE https://m3.material.io/foundations/accessible-design/patterns