Introduction
This website is run by me, Jon Leverrier. I want as many people as possible to use my website, regardless of technology, network speed or ability. That means you should be able to:
- Change colours, contrast levels and fonts
- Zoom in up to 300% without the text spilling off the screen
- Navigate most of the website using just a keyboard
- Navigate most of the website using speech recognition software
- Listen to most of the website using a screen reader
AbilityNet has advice on making your device easier to use if you have a disability.
Accessibility features
Access keys
Access keys are keyboard-based shortcuts. Important navigation links on my website have shortcut keys to enable quick access.
- Key "1" will select "Home"
- Key "2" will select "How can I help?"
- Key "3" will select "Case Studies"
- Key "4" will select "About"
- Key "5" will select "Notes"
- Key "6" will select "Contact"
The way to activate the access key depends on the browser and its platform:
Browser | Shortcut |
---|---|
Safari (Mac) | Control + Alt + Key |
Safari (Windows) | Alt + Key |
Google Chrome (Mac) | Control + Alt + Key |
Google Chrome (Windows) | Alt + Shift + Key |
Firefox (Mac) | Control + Option + Key |
Firefox (Windows) | Alt + Shift + Key |
Edge (Windows) | Alt + Key |
Opera (Mac) | Control + Alt + Key |
Opera (Windows) | Alt + Key |
Unfortunately, not all browsers support access keys.
Semantic HTML elements
Pages are structured with semantic HTML elements such as header, main, section, article and footer. This will help give screen readers context.
Headings
Pages begin with a H1 heading and I have done my best to ensure headings follow a logical order.
Colours
Colours have been tested to have a minimum contrast level of "AA".
Screen readers
I have used aria-labels where required to make sure screen readers have a enjoyable user experience. Embedded code from third party providers such as Spotify, Vimeo and Youtube have been given a title attribute that should give screen readers some context.
Alternative content
Images and media are described with text equivalents to ensure everyone can access this type of content.
Reduced motion
Animations will only show if the "prefers reduced motion" flag is not set.
Known issues
- Code examples may not be accessible
Feedback
I am committed to improving the accessibility of my website. If you come across any issues or have any suggestions to make the site better, please contact me.
Read this next