Using tab button to navigate

Hi All, so my website is an add on to my company’s website (NHS). i have to implement the new government guidelines around accessibility, for the most part this isnt a huge issue, however, i cannot seem to find anywhere, whether it is possible to use the ‘tab’ button and ‘enter/return’ button to navigate a website made in blocs.

Has anyone done this before, know how to do this in blocs?

for example if you go to https://www.fhft.nhs.uk/ (not my work) and use the tab key you can easily see a square appear over the various parts of the website, you can then press enter to access that part of the website. this is what i need to be able to do, or something like it

any help much appreciated

Tab navigation is really a function of the browser rather than the website development tool. Things like buttons, hyperlinks and form fields will automatically be available for tab navigation. The only thing you have to ensure is that you don’t remove any focus styling applied to the elements, otherwise, users will not know where they are on the page. If you need to create focus styling, you would typically use the CSS outline property to pace a border around the element.

Where you may experience problems is with Javascript items with div or span elements. Whilst it is possible to assign focus with tabindex, it’s probably easier to avoid this for a website that is intended for tab accessibility. As a general rule, you would try and use only buttons, hyperlinks and form entry fields. Essentially, the more basic the HTML, the better it will be for accessibility. NOTE: In some browsers, such as Safari, you will have to set tab accessibility in the preferences screen.

1 Like

Related, Blocs already adds a bunch of the Aria stuff to the markup. Things like the Role attribute etc are all part of accessability.

Screen Shot 2020-09-23 at 9.08.23 PM

1 Like