Learning to Code: Day 23 — Applied Accessibility Part 5

Good morning everyone! I’ve just binged 6 episodes of The Boys, what a show. Gotta love Saturdays, I think I have a pinched nerve in my foot so I’m glad I can put my leg up and learn something meaningful in the meantime. Alright, let’s get back to where we were.

Today will be quite short as we’re nearing the end of Applied Accessibility, and we’ll look at Access Keys and the Tabindex.

Thanks as always to FreeCodeCamp for these lessons.

Where do elements shop?

At target!

Navigational Access Keys

Here’s an example as given by FreeCodeCamp:

<button accesskey=”b”>Important Button</button>

Add Keyboard Focus to an Element with Tabindex

Elements can be focussed on when they have a tabindex. The value of the tabindex determines it’s behaviour, with 1 being the strongest. This value can be a positive integer, a zero or a negative integer. Negative integers (typically -1) will indicate that the element is not focusable and therefore missed out when the user scrolls with the “tab” key.

So imagine you have a page and you want to separate it into “chapters” for which the user can tab through, you assign each “chapter” a tabindex starting with 1 and then 2, 3 and so on. These will then become the focal point of the page as the user scrolls using the “tab” key, with each tabbed “chapter” heading at the top of the screen. You could also use it for input boxes such as username and password.

However, the user will expect the tabbing to start at the top of the page, so be mindful how you choose to focus elements and in what order.

Note: You can also create the pseudo-class :focus and assign it to whatever element you want to focus on (e.g. p:focus), then within the {} of the :focus you could define a background-color to highlight that focussed element. Alternatively just plainly use the :focus pseudo-class to assign properties to all focussed elements that have been indicated by the tabindex and assigned with an integer.

Aaaand with that, we come to the end of our Applied Accessibility section!

Next time we’ll looking at Responsive Web Design, which tackles how the layout of a webpage is affected by what viewing device a user chooses to view that page on. Be it computer or phone etc. Responsive Web Design looks at how to work with the constraints of these different devices using CSS to write out these rules. See you guys then!

Step by step, learning to code with FreeCodeCamp