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.
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:
|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.
Pages begin with a H1 heading and I have done my best to ensure headings follow a logical order.
Colours have been tested to have a minimum contrast level of "AA" and a ratio of 4.9.
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.
Images and media are described with text equivalents to ensure everyone can access this type of content.
Animations will only show if the "prefers reduced motion" flag is not set.
- I need to implement skip links to bypass repetitive content
- Code examples may not be accessible
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 get in contact with me.
Read this next