Second post of a series where I explain the steps I’m taking to make my website accessible.
In September last year, having closely studied the WCAG 2.1 success criteria, I decided to examine my own website before assessing the accessibility of other websites.
I finally have had some time to continue the improvements after so many months. In the meantime, I went on with my studies, performed accessibility assessments for UniCredit and provided design guidance on how to comply with WCAG 2.1.
A bypass block is a link that allows people to skip the repetitive parts of a website and go directly to its content. My website has always had a Skip to content link, but it wasn’t visible.
- 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A)
- Technique G1 Adding a link at the top of each page that goes directly to the main content area. Procedure:
- Check that a link is the first focusable control on the Web page.
- Check that the description of the link communicates that it links to the main content.
- Check that the link is either always visible or visible when it has keyboard focus.
- Check that activating the link moves the focus to the main content.
- Check that after activating the link, the keyboard focus has moved to the main content.
Using a keyboard, press the
TAB key. The Skip to content link will appear. Press
TAB again: the first link within the main content of the page will be in focus — while bypassing the main navigation.
When using a keyboard to navigate my website, a bunch of links took up focus, yet they were not displayed on screen. These links are machine readable, and used for identification on the internet, but got in the way of the proper focus order because of how I had previously implemented them.
- 2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)
I have changed the implementation of those links, which are not links anymore. Now the pages are navigable in a logical and meaningful way. What’s on the screen matches what assistive technology read.
Modern browsers should provide a default outline to visually indicate an interactive element. Yet, most of them would only activate it when people use keyboard navigation. Styling the link focus is a good idea as it helps operating the page and discovering where the focus is located.
- 2.4.7 Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)
A dotted outline is now visible around links that take focus, both when using a keyboard and a pointer.
Enjoyed this article?
- Accessibility diaries – Part 3
- To wrap up the third month working as accessibility consultant for Italy’s top bank, I’m sharing a few things I learned.
- Accessibility diaries – Part 2
- To wrap up the second month working as accessibility consultant for Italy’s top bank, I’m sharing a few things I learned.
- Design, Digested 35 – “Blanding”, vestibular disorders, diaries
- Why everything looks the same, the limits of contrast checkers, changing perspectives over accessibility and more.