W3C - easy checks for accessibility

Accessibility is important and has been since working at Code Computer Love, a design and development agency from Manchester known for top notch Design and UX research.

Here is a rundown of the W3C - preliminary check as applied to my new portfolio redesign.

Title page

Test:

  • [ ] each page contains a title that is visible in the browser

Test notes:

  • Missing

Implement:

  • Create a dynamic title component and load it into each page.
  • This will allow for a dynamic title that always includes "Alan Ionita - " for search ranking purposes
// PageTitle component

<script>
    const siteName = "Alan Ionita"
    let props = $props();
</script>

<svelte:head>
	<title>{siteName + " - " + props.text}</title>
</svelte:head>


// *Page component
import PageTitle from '...'

<PageTitle text="Each page title" />

Page headings

Test:

  • [ ] The page has a heading. In almost all pages there should be at least one heading.
  • [ ] All text that looks like a heading is marked up as a heading.
  • [ ] All text that is marked up as a heading is really a conceptual section heading.
  • [ ] The heading hierarchy is meaningful. Ideally the page starts with an "h1" — which is usually similar to the page title — and does not skip levels; however, these are not absolute requirements.

Test notes:

  • HomePage: hierarchy is a bit odd with only "Alan Ionita," being marked up as h1; the whole section should be an h1 really
  • HomePage: rest of the hierarchy makes sense
  • HomePage: html structure for each section seems a bit overkill; too many nested elements
  • BlogPage: headings are good
  • BlogPostPage: markdown to html headings converted correctly, but needed to correct the source markdown to make sure that each post had an h1

Contrast ratio

Test:

  • [ ] minimum contrast: a contrast ratio of at least 4.5:1 for normal-size text.
  • [ ] provide support for high contrast

Test notes:

  • BlogPostPage: starting here, because it's the page with most content; core font is rated as AAA compliant with a contrast of 6.77;
  • BlogPage: h1 is compliant to AAA (6.77), blog list main text is AA (3.09) and sub-text AA (3.84)
  • HomePage: orange section is AA, rest is AAA; same scores as above
  • Nav: not-visited links are not compliant (2.9)

Implement:

  • Find colour variant for orange to get to AAA adherence
  • Missing support for "prefers-contrast" option, high contrast solution for users that need it. Will require some research on best colours to use to achieve a high contrast whilst still preserving the theme, as a fallback will just default to black,yellow combination
  • prefers-contrast further reading here

Protocol: check contrast

My preference is to use Firefox for personal development and will not cover Chrome.

  1. Inspect text element

  2. Inspector: verify the correct html element is selected

  3. Inspector: in the Styles side panel find the class that provides the color css

  4. Inspector / Styles: click on the color round icon

  5. Inspector / Styles: check the contrast in the pop-up

Text resize

Test:

  • [ ] make sure that resizing text doesn't cause page overflows, or stop interactive elements from being accessible

Test notes:

  • Overflowing was causing the Nav to no longer be accessible, so made a change to fix that.
  • All other elements and pages are passing.

Keyboard access and visual focus

Test:

  • [ ] test keyboard nav and visual focus

Test notes:

  • HomePage: keyboard navigation works correctly across links, but ideally the navigation should cover all the sections too; will require a refactor to improve the page
  • BlogPage: works as expected since the list is correctly styled as a list
  • BlogPostPage: correctly navigates through links, but this is correct behavior here
  • Tab all, Tab away, Tab order is fine
  • All functionality works by keyboard, although admittedly it's a very simple site with a low number of features
  • Dropdown list navigation and image links considerations are not applicable here

Implement:

  • Visual focus styling is a visually weak, somewhat clashing with the theme; will require a refactor

Forms, labels, and errors

Not applicable here

Moving, Flashing, or Blinking Content

Test notes:

  • Since the site is a static site, there's no perceivable load or layout shift.
  • The only thing of note here is the transition from / to /blog, where / is a dark colour and /blog is a lighter colour. Here the design is such that on /blog there's colour degradation from top to bottom of page so the user is gradually moving from dark colours to lighter colours.

Multimedia (video, audio) alternatives

Not applicable

Basic structure check

Test:

  • [ ] Turn off images and show the text alternatives.
  • [ ] Turn off style sheets (CSS), which specifies how the page is displayed with layout, colors, etc.
  • [ ] Linearize the page or the tables (depending on the toolbar).

Test notes:

  • HomePage: Images are not applicable, CSS off looks ok, already a fairly linear layout so working as expected; nav is off to right, should fix
  • BlogPage: same nav issue, main text ok; post list is completely white and invisible, should fix- BlogPostPage: passing, same nav issue
  • Both issues were down to poor testing, see the below script to correctly run the test

Protocol: Disabling CSS stylesheets

Run the following in the Developer Tools Console

document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());

Summary

With the exception of the orange colour and the visual focus, we have a AAA compliant website.